@triptease/icons 1.3.11 → 1.3.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @triptease/icons
 
+## 1.3.12
+
+### Patch Changes
+
+- ff30018: Generate an icon manifest at build time and expose to NPM
+
 ## 1.3.11
 
 ### Patch Changes

package/custom-elements.json

@@ -817,6 +817,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/generate-icon-manifest.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/icons/account.ts",
@@ -2937,6 +2943,190 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/__mocks__/account.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "account",
+          "type": {
+            "text": "string"
+          },
+          "default": "'<svg></svg>'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "account",
+          "declaration": {
+            "name": "account",
+            "module": "scripts/generate-icon-manifest/__mocks__/account.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/__mocks__/align-center.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "alignCenter",
+          "type": {
+            "text": "string"
+          },
+          "default": "'<svg></svg>'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "alignCenter",
+          "declaration": {
+            "name": "alignCenter",
+            "module": "scripts/generate-icon-manifest/__mocks__/align-center.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/__mocks__/checkbox-checked.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "checkboxChecked",
+          "type": {
+            "text": "string"
+          },
+          "default": "'<svg></svg>'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "checkboxChecked",
+          "declaration": {
+            "name": "checkboxChecked",
+            "module": "scripts/generate-icon-manifest/__mocks__/checkbox-checked.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/__mocks__/empty-icon.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/helpers/createManifest.spec.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/helpers/createManifest.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createManifest",
+          "parameters": [
+            {
+              "name": "MANIFEST_FILE_NAME",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "moduleName",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "packageJsonExports",
+              "type": {
+                "text": "Record<string, string>"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createManifest",
+          "declaration": {
+            "name": "createManifest",
+            "module": "scripts/generate-icon-manifest/helpers/createManifest.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/helpers/createTimestamp.spec.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/helpers/createTimestamp.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createTimestamp"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createTimestamp",
+          "declaration": {
+            "name": "createTimestamp",
+            "module": "scripts/generate-icon-manifest/helpers/createTimestamp.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "scripts/generate-icon-manifest/helpers/writeManifest.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "writeManifest",
+          "parameters": [
+            {
+              "name": "MANIFEST_FILE_PATH",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "manifest",
+              "type": {
+                "text": "Record<string, string>"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "writeManifest",
+          "declaration": {
+            "name": "writeManifest",
+            "module": "scripts/generate-icon-manifest/helpers/writeManifest.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/manifest.json

@@ -0,0 +1 @@
+{"account":"@triptease/icons/account.js","alert":"@triptease/icons/alert.js","alignCenter":"@triptease/icons/align-center.js","alignLeft":"@triptease/icons/align-left.js","alignRight":"@triptease/icons/align-right.js","arrowDown":"@triptease/icons/arrow-down.js","arrowLeft":"@triptease/icons/arrow-left.js","arrowRight":"@triptease/icons/arrow-right.js","arrowUp":"@triptease/icons/arrow-up.js","audienceTargeting":"@triptease/icons/audience-targeting.js","bold":"@triptease/icons/bold.js","bulletList":"@triptease/icons/bullet-list.js","button":"@triptease/icons/button.js","calendarIcon":"@triptease/icons/calendar.js","campaigns":"@triptease/icons/campaigns.js","channels":"@triptease/icons/channels.js","checkboxChecked":"@triptease/icons/checkbox-checked.js","chevron":"@triptease/icons/chevron.js","chevronDown":"@triptease/icons/chevron-down.js","chevronRight":"@triptease/icons/chevron-right.js","chevronUp":"@triptease/icons/chevron-up.js","clock":"@triptease/icons/clock.js","close":"@triptease/icons/close.js","cog":"@triptease/icons/cog.js","coin":"@triptease/icons/coin.js","collapsible":"@triptease/icons/collapsible.js","column":"@triptease/icons/column.js","comparison":"@triptease/icons/comparison.js","container":"@triptease/icons/container.js","countdown":"@triptease/icons/countdown.js","dateBoost":"@triptease/icons/date-boost.js","deleteIcon":"@triptease/icons/delete.js","desktop":"@triptease/icons/desktop.js","disabled":"@triptease/icons/disabled.js","dismissible":"@triptease/icons/dismissible.js","divider":"@triptease/icons/divider.js","doubleChevron":"@triptease/icons/double-chevron.js","download":"@triptease/icons/download.js","dropdown":"@triptease/icons/dropdown.js","duplicate":"@triptease/icons/duplicate.js","edit":"@triptease/icons/edit.js","email":"@triptease/icons/email.js","embed":"@triptease/icons/embed.js","experiment":"@triptease/icons/experiment.js","external":"@triptease/icons/external.js","filter":"@triptease/icons/filter.js","gallery":"@triptease/icons/gallery.js","form":"@triptease/icons/form.js","gear":"@triptease/icons/gear.js","globe":"@triptease/icons/globe.js","help":"@triptease/icons/help.js","graph":"@triptease/icons/graph.js","handle":"@triptease/icons/handle.js","home":"@triptease/icons/home.js","horizontal":"@triptease/icons/horizontal.js","hotel":"@triptease/icons/hotel.js","info":"@triptease/icons/info.js","insights":"@triptease/icons/insights.js","italic":"@triptease/icons/italic.js","keyboard":"@triptease/icons/keyboard.js","lightningBolt":"@triptease/icons/lightning-bolt.js","link":"@triptease/icons/link.js","logout":"@triptease/icons/logout.js","messages":"@triptease/icons/messages.js","minus":"@triptease/icons/minus.js","mobile":"@triptease/icons/mobile.js","moveToParent":"@triptease/icons/move-to-parent.js","multiMessage":"@triptease/icons/multi-message.js","newTab":"@triptease/icons/new-tab.js","numberedList":"@triptease/icons/numbered-list.js","pause":"@triptease/icons/pause.js","pauseFilled":"@triptease/icons/pause-filled.js","pieChart":"@triptease/icons/pie-chart.js","plus":"@triptease/icons/plus.js","radioChecked":"@triptease/icons/radio-checked.js","preview":"@triptease/icons/preview.js","redo":"@triptease/icons/redo.js","rename":"@triptease/icons/rename.js","section":"@triptease/icons/section.js","send":"@triptease/icons/send.js","share":"@triptease/icons/share.js","sidebarCollapsed":"@triptease/icons/sidebar-collapsed.js","sidebarExpanded":"@triptease/icons/sidebar-expanded.js","stop":"@triptease/icons/stop.js","stopFilled":"@triptease/icons/stop-filled.js","strikethrough":"@triptease/icons/strikethrough.js","tag":"@triptease/icons/tag.js","target":"@triptease/icons/target.js","templates":"@triptease/icons/templates.js","text":"@triptease/icons/text.js","textInput":"@triptease/icons/text-input.js","tick":"@triptease/icons/tick.js","ticket":"@triptease/icons/ticket.js","treeGraph":"@triptease/icons/tree-graph.js","underline":"@triptease/icons/underline.js","undo":"@triptease/icons/undo.js","unlink":"@triptease/icons/unlink.js","user":"@triptease/icons/user.js","vertical":"@triptease/icons/vertical.js","wallet":"@triptease/icons/wallet.js","warning":"@triptease/icons/warning.js"}

package/package.json

@@ -3,12 +3,13 @@
   "description": "Triptease icon set",
   "license": "MIT",
   "author": "@triptease",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
     ".": "./dist/src/index.js",
+    "./manifest.json": "./dist/manifest.json",
     "./account.js": "./dist/src/icons/account.js",
     "./alert.js": "./dist/src/icons/alert.js",
     "./align-center.js": "./dist/src/icons/align-center.js",
@@ -113,15 +114,19 @@
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "build": "yarn build:node && yarn build:web && npm run analyze -- --exclude dist",
+    "generate-icon-manifest": "npx tsx scripts/generate-icon-manifest/generate-icon-manifest.ts",
+    "build": "yarn build:node && yarn build:web && yarn generate-icon-manifest && npm run analyze -- --exclude dist",
     "build:node": "tsc",
     "build:node:watch": "tsc --watch",
     "build:web": "node ../../scripts/esbuild.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepublish": "yarn build:node && npm run analyze -- --exclude dist"
   },
   "devDependencies": {
     "tslib": "^2.6.3",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.3",
+    "vitest": "^4.0.16"
   },
   "publishConfig": {
     "access": "public"

package/scripts/generate-icon-manifest/__mocks__/account.js

@@ -0,0 +1 @@
+export const account = '<svg></svg>';

package/scripts/generate-icon-manifest/__mocks__/align-center.js

@@ -0,0 +1 @@
+export const alignCenter = '<svg></svg>';

package/scripts/generate-icon-manifest/__mocks__/checkbox-checked.js

@@ -0,0 +1 @@
+export const checkboxChecked = '<svg></svg>';

package/scripts/generate-icon-manifest/__mocks__/empty-icon.js

@@ -0,0 +1 @@
+// File is intentionally empty

package/scripts/generate-icon-manifest/generate-icon-manifest.ts

@@ -0,0 +1,23 @@
+import { createTimestamp } from './helpers/createTimestamp';
+import { createManifest } from './helpers/createManifest';
+import { writeManifest } from './helpers/writeManifest';
+import packageJson from '../../package.json';
+
+const MANIFEST_FILE_NAME = 'manifest.json';
+const MANIFEST_FILE_PATH = `./dist/${MANIFEST_FILE_NAME}`;
+
+(async () => {
+  try {
+    console.info(`${createTimestamp()} 🏗️  Generating icon manifest...`);
+    const { name, exports } = packageJson;
+    const manifest = await createManifest(MANIFEST_FILE_NAME, name, exports);
+    await writeManifest(MANIFEST_FILE_PATH, manifest);
+
+    console.info(`${createTimestamp()} ✅  Icon manifest generated successfully!`);
+    process.exit(0);
+  } catch (error) {
+    console.error(`${createTimestamp()} ❌ Failed to generate icon manifest:`);
+    console.error(error);
+    process.exit(1);
+  }
+})();

package/scripts/generate-icon-manifest/helpers/createManifest.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { createManifest } from './createManifest';
+
+const MANIFEST_FILE_NAME = 'manifest.json';
+
+describe('createManifest', () => {
+  it('should correctly create the manifest', async () => {
+    const manifest = await createManifest(MANIFEST_FILE_NAME, 'test-module', {
+      './account.js': '../../scripts/generate-icon-manifest/__mocks__/account.js',
+      './align-center.js': '../../scripts/generate-icon-manifest/__mocks__/align-center.js',
+      './checkbox-checked.js': '../../scripts/generate-icon-manifest/__mocks__/checkbox-checked.js',
+    });
+
+    expect(manifest).toEqual({
+      account: 'test-module/account.js',
+      alignCenter: 'test-module/align-center.js',
+      checkboxChecked: 'test-module/checkbox-checked.js',
+    });
+  });
+
+  it('should error if the icon file is empty', async () => {
+    await expect(
+      createManifest(MANIFEST_FILE_NAME, 'test-module', {
+        './empty-icon.js': '../../scripts/generate-icon-manifest/__mocks__/empty-icon.js',
+      })
+    ).rejects.toThrowError(
+      'Failed to generate manifest for ./empty-icon.js: The imported icon file does not export a variable.'
+    );
+  });
+
+  it('should error if the icon file cannot be found', async () => {
+    await expect(
+      createManifest(MANIFEST_FILE_NAME, 'test-module', {
+        './missing-icon.js': './missing-icon.js',
+      })
+    ).rejects.toThrowError(
+      /^Failed to generate manifest for \.\/missing-icon\.js: Cannot find module '.*' imported from .*$/
+    );
+  });
+});

package/scripts/generate-icon-manifest/helpers/createManifest.ts

@@ -0,0 +1,35 @@
+export const createManifest = async (
+  MANIFEST_FILE_NAME: string,
+  moduleName: string,
+  packageJsonExports: Record<string, string>
+) => {
+  const EXCLUDE_LIST = ['.', `./${MANIFEST_FILE_NAME}`];
+  const manifest: Record<string, string> = {};
+
+  const exportsArray = Object.entries(packageJsonExports).filter(([key]) => !EXCLUDE_LIST.includes(key));
+
+  await Promise.all(
+    exportsArray.map(async ([key, value]) => {
+      try {
+        const module = await import(`../../../${value}`);
+
+        const [varName] = Object.entries(module).flat();
+        // 'typeof' is needed to appease TypeScript, exported variable names will always be strings
+        if (!varName || typeof varName !== 'string')
+          throw new Error('The imported icon file does not export a variable.');
+
+        const importPath = key.split('./')[1];
+        manifest[varName] = `${moduleName}/${importPath}`;
+      } catch (error) {
+        // Catch is needed to catch failed imports and throw a more descriptive error message
+        if (error instanceof Error) {
+          throw new Error(`Failed to generate manifest for ${key}: ${error.message}`);
+        } else {
+          throw error;
+        }
+      }
+    })
+  );
+
+  return manifest;
+};

package/scripts/generate-icon-manifest/helpers/createTimestamp.spec.ts

@@ -0,0 +1,35 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createTimestamp } from './createTimestamp';
+
+describe('createTimestamp', () => {
+  beforeEach(() => {
+    // tell vitest we use mocked time
+    vi.useFakeTimers();
+
+    const date = new Date(2000, 1, 1, 13, 30, 10);
+    vi.setSystemTime(date);
+  });
+
+  afterEach(() => {
+    // restoring date after each test run
+    vi.useRealTimers();
+  });
+
+  it('should return a timestamp in the format [HH:mm:ss AM]', () => {
+    const date = new Date(2000, 1, 1, 9, 30, 10);
+    vi.setSystemTime(date);
+
+    const timestamp = createTimestamp();
+
+    expect(timestamp).toEqual('[9:30:10 AM]');
+  });
+
+  it('should return a timestamp in the format [HH:mm:ss PM]', () => {
+    const date = new Date(2000, 1, 1, 13, 30, 10);
+    vi.setSystemTime(date);
+
+    const timestamp = createTimestamp();
+
+    expect(timestamp).toEqual('[1:30:10 PM]');
+  });
+});

package/scripts/generate-icon-manifest/helpers/createTimestamp.ts

@@ -0,0 +1 @@
+export const createTimestamp = () => `[${new Date().toLocaleTimeString(undefined, { hour12: true })}]`;

package/scripts/generate-icon-manifest/helpers/writeManifest.ts

@@ -0,0 +1,9 @@
+import fs from 'fs';
+
+export const writeManifest = (MANIFEST_FILE_PATH: string, manifest: Record<string, string>) =>
+  new Promise((resolve, reject) => {
+    fs.writeFile(MANIFEST_FILE_PATH, JSON.stringify(manifest), (err) => {
+      if (err) reject(err);
+      resolve(true);
+    });
+  });

package/tsconfig.json

@@ -5,5 +5,5 @@
     "outDir": "dist"
   },
   "include": ["**/*.ts"],
-  "exclude": ["node_modules", "test", "dist"]
+  "exclude": ["node_modules", "test", "dist", "scripts"]
 }