fix(svg-generator): support special file name cases (#137)

Author: shaharkazaz

.github/workflows/generator.yml

@@ -7,32 +7,22 @@ on:
   pull_request:
 
 jobs:
-  build:
+  ci:
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: svg-generator
 
     steps:
       - uses: actions/checkout@v3
-      - name: Cache node modules
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
+
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm i --force
+        run: npm i
 
       - name: Run Build
         run: npm run build

.github/workflows/lib.yml

@@ -0,0 +1,30 @@
+name: '@ngneat/svg-icon'
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Run Build
+        run: npm run build:lib
+
+      - name: Run unit tests
+        run: npm run test:lib:headless
+        env:
+          CI: true

.github/workflows/test.yml

@@ -45,4 +45,3 @@ testem.log
 .DS_Store
 Thumbs.db
 node_modules
-*.js

svg-generator/.gitignore

@@ -1,7 +1,7 @@
 import mock from 'mock-fs';
-import { createTypeFile } from './create-types';
-import { createTree } from './tree';
-import { defaults } from './types';
+import { createTypeFile } from '../create-types';
+import { createTree } from '../tree';
+import { defaultConfig } from '../config';
 
 const srcPath = `src/assets/svg`;
 
@@ -20,7 +20,7 @@ describe('createTree', () => {
       },
     });
 
-    const result = createTree(srcPath, `src/app/svg`, defaults);
+    const result = createTree(srcPath, `src/app/svg`, defaultConfig);
 
     mock.restore();
 

svg-generator/__snapshots__/index.spec.js.snap renamed to svg-generator/__tests__/__snapshots__/create-tree.spec.ts.snap

@@ -0,0 +1,34 @@
+import {resolveIdentifierName} from "../tree";
+import {defaultConfig, GeneratorConfig} from "../config";
+
+type InvalidName = string;
+type Expected = string;
+
+describe('resolveIdentifierName', () => {
+  const invalidNames: Array<[InvalidName, Expected]> = [
+    ['1inch', `$inch`],
+    ['sth.b', `sthB`],
+    ['st_b_', `stB`],
+    ['some-n#me', `someN$me`],
+    ['_some', `some`],
+  ];
+
+  it('should normalize the icon name', () => {
+    for (const item of invalidNames) {
+      assertName(item, defaultConfig);
+    }
+  });
+
+  it('should be configurable',  () => {
+    const customConfig = {
+      ...defaultConfig,
+      invalidCharReplacer: () => '$$'
+    }
+    assertName(['1inch', `$$inch`], customConfig)
+  });
+
+});
+
+function assertName([name, expected]: [InvalidName, Expected], config: Required<GeneratorConfig>) {
+  expect(resolveIdentifierName(name, config)).toEqual(`${expected}${config.postfix}`);
+}

svg-generator/index.spec.ts renamed to svg-generator/__tests__/create-tree.spec.ts

@@ -1,19 +1,21 @@
-export interface Config {
+export interface GeneratorConfig {
   srcPath: string;
   outputPath: string;
   svgoConfig: { plugins: any[] };
   prefix?: string;
   postfix?: string;
   rootBarrelFile?: boolean;
   rootBarrelFileName?: string;
+  invalidCharReplacer?: (invalidChar: string) => string;
 }
 
-export const defaults: Config = {
+export const defaultConfig: Required<GeneratorConfig> = {
   prefix: '',
   postfix: 'Icon',
   svgoConfig: { plugins: [] },
   srcPath: '',
   outputPath: '',
   rootBarrelFile: false,
   rootBarrelFileName: 'index',
+  invalidCharReplacer: () => '$'
 };

svg-generator/__tests__/resolve-identifer-name.spec.ts

@@ -1,18 +1,18 @@
 import glob from 'glob';
 import { join, resolve } from 'path';
 import { outputFileSync, unlinkSync } from 'fs-extra';
-import { Config, defaults } from './types';
+import { GeneratorConfig, defaultConfig } from './config';
 import { createTree, INDEX } from './tree';
 import { createTypeFile } from './create-types';
 
-export function generateSVGIcons(config: Config | null) {
+export function generateSVGIcons(config: GeneratorConfig | null) {
   if (!config) {
     console.log(`Can't find a config object!`);
 
     process.exit();
   }
 
-  const mergedConfig: Config = { ...defaults, ...config };
+  const mergedConfig: Required<GeneratorConfig> = { ...defaultConfig, ...config };
 
   removeOldIcons(resolve(mergedConfig.outputPath));
 
@@ -36,9 +36,9 @@ export function generateSVGIcons(config: Config | null) {
     });
   }
 
-  const path = resolve(process.cwd(), 'node_modules', '@ngneat', 'svg-icon', 'lib', 'types.d.ts');
+  const typeFilePath = resolve(process.cwd(), 'node_modules', '@ngneat', 'svg-icon', 'lib', 'types.d.ts');
 
-  outputFileSync(path, createTypeFile(names), {
+  outputFileSync(typeFilePath, createTypeFile(names), {
     encoding: 'utf-8',
   });
 

svg-generator/types.ts renamed to svg-generator/config.ts

@@ -2,7 +2,7 @@
 import { Command } from 'commander';
 import { cosmiconfigSync } from 'cosmiconfig';
 import { generateSVGIcons } from './generator';
-import { Config } from './types';
+import { GeneratorConfig } from './config';
 
 const program = new Command();
 program
@@ -19,6 +19,6 @@ program.parse();
 const opts = program.opts();
 
 const explorerSync = cosmiconfigSync('svgGenerator');
-const config: Config | null = explorerSync.search(opts.configDir)?.config;
+const config: GeneratorConfig | null = explorerSync.search(opts.configDir)?.config;
 
 generateSVGIcons(config);