🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@sly-cli/sly
Advanced tools
@sly-cli/sly - npm Package Compare versions
Comparing version 1.5.0 to 1.7.0
@@ -136,2 +136,12 @@ #!/usr/bin/env node | ||
| }); | ||
| var npmSchema = z2.object({ | ||
| versions: z2.record( | ||
| z2.object({ | ||
| version: z2.string() | ||
| }) | ||
| ), | ||
| "dist-tags": z2.object({ | ||
| latest: z2.string() | ||
| }) | ||
| }); | ||
@@ -236,2 +246,3 @@ // src/registry.ts | ||
| import chalk2 from "chalk"; | ||
| import { pathToFileURL } from "url"; | ||
| async function resolveTransformers(transformers) { | ||
@@ -248,3 +259,3 @@ const modules = await Promise.all( | ||
| } | ||
| return import(transformerPath).catch((error) => { | ||
| return import(pathToFileURL(transformerPath).href).catch((error) => { | ||
| logger.error(`Failed to load transformer ${transformer}.`); | ||
@@ -638,3 +649,3 @@ if (error.code === "ERR_UNKNOWN_FILE_EXTENSION") { | ||
| name: "@sly-cli/sly", | ||
| version: "1.4.10", | ||
| version: "1.6.1", | ||
| description: "Sly is a CLI tool to add components, icons, and utilities as code, not dependencies.", | ||
@@ -647,3 +658,3 @@ type: "module", | ||
| bin: { | ||
| sly: "start.sh" | ||
| sly: "start.js" | ||
| }, | ||
@@ -691,6 +702,7 @@ publishConfig: { | ||
| devDependencies: { | ||
| "@gmrchk/cli-testing-library": "github:jpulec/cli-testing-library#patch-1", | ||
| "@types/prompts": "^2.4.4", | ||
| "@typescript-eslint/eslint-plugin": "^6.1.0", | ||
| "@typescript-eslint/parser": "^6.1.0", | ||
| esbuild: "^0.18.15", | ||
| esbuild: "^0.19.10", | ||
| eslint: "^8.45.0", | ||
@@ -701,3 +713,5 @@ "eslint-plugin-no-template-curly-in-string-fix": "^1.0.4", | ||
| tsup: "^7.1.0", | ||
| typescript: "^5.1.6" | ||
| typescript: "^5.1.6", | ||
| vite: "^5.0.10", | ||
| vitest: "^1.0.4" | ||
| }, | ||
@@ -731,3 +745,3 @@ types: "./dist/index.d.ts", | ||
| void restoreCache(); | ||
| var program = new Command5().name("sly").description("add components, icons, and utilities as code, not dependencies").option("-y, --yes", "skip confirmation prompt.", false).option("--no-cache", "disable caching.", true).version("1.0.0", "-v, --version", "display the version number").hook("preAction", () => { | ||
| var program = new Command5().name("sly").description("add components, icons, and utilities as code, not dependencies").option("-y, --yes", "skip confirmation prompt.", false).option("--no-cache", "disable caching.", true).version(package_default.version, "-v, --version", "display the version number").hook("preAction", () => { | ||
| const options = program.optsWithGlobals(); | ||
@@ -734,0 +748,0 @@ process.env.YES = options.yes ? "true" : ""; |
| { | ||
| "name": "@sly-cli/sly", | ||
| "version": "1.5.0", | ||
| "version": "1.7.0", | ||
| "description": "Sly is a CLI tool to add components, icons, and utilities as code, not dependencies.", | ||
@@ -11,3 +11,3 @@ "type": "module", | ||
| "bin": { | ||
| "sly": "start.sh" | ||
| "sly": "start.js" | ||
| }, | ||
@@ -55,6 +55,7 @@ "publishConfig": { | ||
| "devDependencies": { | ||
| "@gmrchk/cli-testing-library": "github:jpulec/cli-testing-library#patch-1", | ||
| "@types/prompts": "^2.4.4", | ||
| "@typescript-eslint/eslint-plugin": "^6.1.0", | ||
| "@typescript-eslint/parser": "^6.1.0", | ||
| "esbuild": "^0.18.15", | ||
| "esbuild": "^0.19.10", | ||
| "eslint": "^8.45.0", | ||
@@ -65,3 +66,5 @@ "eslint-plugin-no-template-curly-in-string-fix": "^1.0.4", | ||
| "tsup": "^7.1.0", | ||
| "typescript": "^5.1.6" | ||
| "typescript": "^5.1.6", | ||
| "vite": "^5.0.10", | ||
| "vitest": "^1.0.4" | ||
| }, | ||
@@ -68,0 +71,0 @@ "types": "./dist/index.d.ts", |
@@ -9,3 +9,3 @@ # Sly | ||
| For example, **if you add a React component this way, it will look just like a React component you wrote yourself, or like one you copy/pasted from the internet.** | ||
| For example, **if you add a React component this way, it will look just like a React component you wrote yourself, or like one you copy/pasted from the internet.** | ||
@@ -86,3 +86,3 @@ 1. Provide transformer functions to **customize each new component as it's added to your codebase**. | ||
| If you don't want to use npx, install Sly globally and you can run `sly` directly. | ||
| If you don't want to use npx, install Sly globally and you can run `sly` directly. | ||
@@ -115,8 +115,8 @@ ```bash | ||
| |field|description| | ||
| |---|---| | ||
| |name|The name of the library in Sly's registry.| | ||
| |directory|The directory where you want to insert the components. If a component with the same name already exists, adding will fail unless you pass the --overwrite flag.| | ||
| |transformers|An array of paths to transformers. These paths are resolved relative to the config file, so simply listing a filename will search in the same directory as the config file.| | ||
| |postinstall|This is a command that will be executed each time that components are added. If multiple components are added at once, it runs once at the end.| | ||
| | field | description | | ||
| | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | name | The name of the library in Sly's registry. | | ||
| | directory | The directory where you want to insert the components. If a component with the same name already exists, adding will fail unless you pass the --overwrite flag. | | ||
| | transformers | An array of paths to transformers. These paths are resolved relative to the config file, so simply listing a filename will search in the same directory as the config file. | | ||
| | postinstall | This is a command that will be executed each time that components are added. If multiple components are added at once, it runs once at the end. | | ||
@@ -138,3 +138,3 @@ Sly will create the `sly.json` in your project root by default, but you are free to move it to one of several locations. | ||
| When you add a component, Sly will pass it through each transformer in order, like a pipeline. For example, you could use this to format the code with Prettier, to append license information, to remove attributes from SVGs, to enforce opinionated formatting preferences, to replace imports, etc. | ||
| When you add a component, Sly will pass it through each transformer in order, like a pipeline. For example, you could use this to format the code with Prettier, to append license information, to remove attributes from SVGs, to enforce opinionated formatting preferences, to replace imports, etc. | ||
@@ -144,6 +144,6 @@ A transformer to convert a [shadcn/ui](https://ui.shadcn.com/) component to match your project's style might look like this | ||
| ```ts | ||
| import prettier from 'prettier' | ||
| import prettier from "prettier" | ||
| const usesServerComponents = false | ||
| const cnFunctionDir = 'tailwind.config.ts' | ||
| const cnFunctionDir = "tailwind.config.ts" | ||
@@ -154,21 +154,20 @@ /** | ||
| export default async function transformShadcn(input, meta) { | ||
| if (!usesServerComponents) { | ||
| input = input.replace(/"use client".*/g, '\n') | ||
| } | ||
| if (!usesServerComponents) { | ||
| input = input.replace(/"use client".*/g, "\n") | ||
| } | ||
| input = input.replace('@/lib/utils', cnFunctionDir) | ||
| input = input.replace("@/lib/utils", cnFunctionDir) | ||
| input = prettier.format(input, { | ||
| parser: 'typescript', | ||
| }) | ||
| input = prettier.format(input, { | ||
| parser: "typescript", | ||
| }) | ||
| return input | ||
| return input | ||
| } | ||
| ``` | ||
| Each transformer must `default export` a function whose first arg accepts a string, and that returns a string. Returning a promise that resolves to a string is ok too – you're allowed to use async/await here. | ||
| Each transformer must `default export` a function whose first arg accepts a string, and that returns a string. Returning a promise that resolves to a string is ok too – you're allowed to use async/await here. | ||
| The second arg is `meta` and contains the name of the library, the source url for the component, and its license information. Some licenses require you to keep attribution, and you can add such information as a header comment in this way. | ||
| ## Environment variables | ||
@@ -184,4 +183,5 @@ | ||
| You may want a custom registry to share proprietary components with your team, or to | ||
| To connect to a custom registry, use the `REGISTRY_URL` environment variable. | ||
| You may want a custom registry to share proprietary components with your team, or to | ||
| To connect to a custom registry, use the `REGISTRY_URL` environment variable. | ||
| ``` | ||
@@ -194,6 +194,4 @@ REGISTRY_URL=http://localhost:3000 npx sly | ||
| - **Support more libraries.** Any open source library of icons, components, hooks, utilities, etc. can be added to Sly. | ||
| - **Caching**. We should cache the registry so we don't hit the upstream sources so often. | ||
| - **Typescript config instead of JSON** Is this possible? It's easy enough to read a typescript config file from the CLI, but writing new config values seemed prohibitively difficult. | ||
| - **Additional registries.** Right now you can point to a locally hosted registry if you wanted full control of the available libraries. If someone wanted to add their own libs while _also_ having access to the official registry, they would need their custom registry to proxy requests to the official registry. Is that ok? Should we support multiple registries up front? | ||
| - **Improved contribution flow**. We should have some contribution guidelines, list of contributors. | ||
| - **Convert website to ESM**. The website is currently all CJS and should be ported to ESM. |
Sorry, the diff of this file is not supported yet
New alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Fixed alerts
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
81170
2.99%- Lines of code
783
5.53%Worsened metrics
- Dev dependency count
13
30%- Number of lines in readme file
190
-1.04%- Number of low supply chain risk alerts
23
4.55%No dependency changes