rmx-cli - npm Package Compare versions

Comparing version 0.4.11 to 0.4.12

CHANGELOG.md

 # CHANGELOG
 
+## 🚀 v0.4.12
+
+- 🔨 Update CLI to specify sprite and types filenames
+
 ## 🚀 v0.4.11
@@ -4,0 +8,0 @@

dist/commands/svg-sprite.js

@@ -31,5 +31,7 @@ var __create = Object.create;
 let outputFolder = "";
-let outputFilename = "index.tsx";
 let template = null;
 let namedComponents = false;
+let component = "icon.tsx";
+let sprite = "icon.svg";
+let types = "";
 function svg_sprite_default(args) {
@@ -41,3 +43,3 @@ if (args.length >= 2) {
       outputFolder = path.dirname(outputPath);
-      outputFilename = path.basename(outputPath);
+      component = path.basename(outputPath);
     } else {
@@ -50,2 +52,8 @@ outputFolder = normalizeFolder(outputPath);
         template = fs.readFileSync(templateFilename, "utf8");
+      } else if (args[i].startsWith("--component=")) {
+        sprite = args[i].substring("--component=".length);
+      } else if (args[i].startsWith("--sprite=")) {
+        sprite = args[i].substring("--sprite=".length);
+      } else if (args[i].startsWith("--types=")) {
+        types = args[i].substring("--types=".length);
       } else if (args[i] === "--components") {
@@ -56,8 +64,19 @@ namedComponents = true;
   } else {
-    console.log("Usage: npx rmx-cli svg-sprite SOURCE_FOLDER OUTPUT_PATH [--components] [--template=TEMPLATE_FILE]");
-    console.log("  SOURCE_FOLDER: folder containing .svg files");
-    console.log("  OUTPUT_PATH: output path for sprite file and components");
-    console.log("    if OUTPUT_PATH ends with .tsx, then use this as the base filename");
-    console.log("   --components: generate named components for each icon");
-    console.log("  --template=TEMPLATE_FILE: use custom template file");
+    console.log(`
+Usage: npx rmx-cli svg-sprite SOURCE_FOLDER OUTPUT_PATH
+               [--sprite=FILENAME] [--types=FILENAME]
+               [--components] [--template=TEMPLATE_FILE]
+
+SOURCE_FOLDER: folder containing .svg files
+OUTPUT_PATH: output path for sprite file and components
+
+* If OUTPUT_PATH ends with .tsx, then use this as the base filename
+  (default: icon.tsx)
+
+--sprite=FILENAME: base filename of sprite file (default: icon.svg)
+--types=FILENAME : base filename of IconType export file
+                   if present, will not generate component file
+--components     : generate named components for each icon
+--template=TEMPLATE_FILE: use custom template file
+`.trimStart());
     process.exit(1);
@@ -72,2 +91,4 @@ }
 function flushLogs() {
+  if (logs.length === 0)
+    return;
   logs.forEach((args) => console.log(...args));
@@ -93,3 +114,3 @@ logs.length = 0;
   const spriteOutputFolder = folder.replace(rootFolder, outputFolder);
-  const spriteOutput = path.join(spriteOutputFolder, path.basename(outputFilename, ".tsx") + ".svg");
+  const spriteOutput = path.join(spriteOutputFolder, path.basename(component, ".tsx") + ".svg");
   log(`\u{1F4DD} Generating sprite for ${folder}`);
@@ -115,8 +136,35 @@ if (!fs.existsSync(spriteOutputFolder)) {
   }
+  if (types) {
+    generateTypesFile(spriteOutputFolder, files);
+    return;
+  }
   generateReactComponent(spriteOutputFolder, files);
 }
+function generateTypesFile(spriteOutputFolder, files) {
+  let icons = files.map((file) => path.basename(file, ".svg"));
+  let output = `export const iconNames = [
+${icons.map((icon) => `  "${icon}",`).join("\n")}
+] as const;
+
+export type IconName = typeof iconNames[number];
+`;
+  icons.forEach((icon) => log(`\u2705 ${icon}`));
+  let typesPath = path.join(spriteOutputFolder, types);
+  const exists = fs.existsSync(typesPath);
+  let hasChanges = !exists;
+  if (exists) {
+    const existing = fs.readFileSync(typesPath, "utf8");
+    if (existing !== output) {
+      hasChanges = true;
+    }
+  }
+  if (hasChanges) {
+    fs.writeFileSync(typesPath, output, "utf8");
+    flushLogs();
+  }
+}
 function generateReactComponent(spriteOutputFolder, files) {
   let icons = files.map((file) => path.basename(file, ".svg"));
-  const spritePath = path.basename(outputFilename, ".tsx") + ".svg";
-  let component = template != null ? template : `
+  const spritePath = path.basename(component, ".tsx") + ".svg";
+  let output = template != null ? template : `
 import { type SVGProps } from "react";
@@ -134,3 +182,4 @@ import href from "./${spritePath}";
 `;
-  component += `
+  if (!types) {
+    output += `
 export const iconNames = [
@@ -140,2 +189,3 @@ ${icons.map((icon) => `  "${icon}",`).join("\n")}
 export type IconName = typeof iconNames[number];`;
+  }
   icons.forEach((icon) => log(`\u2705 ${icon}`));
@@ -149,9 +199,9 @@ if (namedComponents) {
   }
-  const componentOutput = path.join(spriteOutputFolder, outputFilename);
-  component = component.trim();
-  const exists = fs.existsSync(componentOutput);
+  const componentPath = path.join(spriteOutputFolder, component);
+  output = output.trimStart();
+  const exists = fs.existsSync(componentPath);
   let hasChanges = !exists;
   if (exists) {
-    const existingComponent = fs.readFileSync(componentOutput, "utf8");
-    if (existingComponent !== component) {
+    const existing = fs.readFileSync(componentPath, "utf8");
+    if (existing !== output) {
       hasChanges = true;
@@ -161,3 +211,3 @@ }
   if (hasChanges) {
-    fs.writeFileSync(componentOutput, component, "utf8");
+    fs.writeFileSync(componentPath, output, "utf8");
     flushLogs();
@@ -164,0 +214,0 @@ }

package.json

 {
   "name": "rmx-cli",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "A CLI for remix-run",
@@ -5,0 +5,0 @@ "author": "Michael J. Carter <[e-mail]> (https://kiliman.dev/)",

No alert changes

Improved metrics

Total package byte prevSize

41318

increased by3.49%

Lines of code

717

increased by6.86%

No dependency changes