refactor: use @carbon/[email protected]

Remove devDeps: npm-run-all, prettier-plugin-svelte, svelte.

Author: metonym

package.json

@@ -7,17 +7,14 @@
   "svelte": "lib/index.js",
   "main": "lib/index.js",
   "scripts": {
-    "build": "run-s build:*",
-    "build:task": "tsc",
-    "build:lib": "node dist",
-    "build:format-lib": "prettier --write 'lib/**/*.{js,svelte}'",
+    "build": "tsc && node dist",
     "test": "jest --coverage",
     "test:tdd": "jest --watch",
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
     "@carbon/icon-helpers": "10.4.0",
-    "@carbon/icons": "10.6.1",
+    "@carbon/icons": "10.8.0-rc.0",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@types/fs-extra": "^8.0.1",
@@ -26,11 +23,8 @@
     "husky": "^3.1.0",
     "jest": "^24.9.0",
     "lint-staged": "^9.4.3",
-    "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
-    "prettier-plugin-svelte": "^0.7.0",
     "pretty-quick": "^2.0.1",
-    "svelte": "^3.16.4",
     "ts-jest": "^24.2.0",
     "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
@@ -49,6 +43,7 @@
     ]
   },
   "prettier": {
+    "printWidth": 100,
     "tabWidth": 2,
     "semi": true,
     "singleQuote": true

src/buildIcons.ts

@@ -0,0 +1,88 @@
+import { ensureDir, existsSync, readFile, remove, writeFile } from 'fs-extra';
+import { template } from './template';
+
+type IconSize = 16 | 20 | 24 | 32;
+
+interface IPath {
+  elem: 'path';
+  attrs: { d: string };
+}
+
+interface ICircle {
+  elem: 'circle';
+  attrs: { cx: string; cy: string; r: string };
+}
+
+interface IRect {
+  elem: 'rect';
+  attrs: { width: string; height: string; x: string; y: string; rx: string };
+}
+
+export type IconContent = ReadonlyArray<IPath | ICircle | IRect>;
+
+export interface IIconAttrs {
+  xmlns: 'http://www.w3.org/2000/svg';
+  viewBox: string;
+  width: IconSize;
+  height: IconSize;
+}
+
+export interface IBuildIcon {
+  filename: string;
+  basename: string;
+  size: IconSize;
+  prefix: string[];
+  descriptor: {
+    elem: 'svg';
+    attrs: IIconAttrs;
+    content: IconContent;
+    name: string;
+    size: IconSize;
+  };
+  moduleName: string;
+  original: 32;
+  outputOptions: {
+    file: string;
+  };
+}
+
+async function buildIcons({ path, dist }: { path: string; dist: string }) {
+  if (!existsSync(path)) {
+    throw Error(`${path} does not exist.`);
+  }
+
+  const buffer = await readFile(path);
+  const iconMetadata: IBuildIcon[] = JSON.parse(buffer.toString());
+
+  await remove(dist);
+  await ensureDir(dist);
+
+  const baseImports: string[] = [];
+  const baseExports: string[] = [];
+
+  iconMetadata.forEach(async ({ descriptor: { attrs, content }, moduleName }) => {
+    const component = template({ attrs, content });
+    const componentName = `${moduleName}.svelte`;
+    const componentFolder = `${dist}/${moduleName}`;
+    const componentPath = `${componentFolder}/${componentName}`;
+    const exportPath = `${dist}/${moduleName}/index.js`;
+    const exportFile = `import ${moduleName} from './${componentName}';
+export default ${moduleName};`;
+
+    baseImports.push(`import ${moduleName} from './${moduleName}';\n`);
+    baseExports.push(moduleName);
+
+    await ensureDir(componentFolder);
+    await writeFile(componentPath, component);
+    await writeFile(exportPath, exportFile);
+  });
+
+  const baseFile = `${baseImports.join('')}
+export {
+  ${baseExports.join(',\n  ')}
+};`;
+
+  await writeFile(`${dist}/index.js`, baseFile);
+}
+
+export { buildIcons };

src/createComponent.ts

@@ -1,53 +1,14 @@
-import * as icons from '@carbon/icons';
-import * as fs from 'fs-extra';
-import { createComponent } from './createComponent';
-import { formatName } from './format';
+import { buildIcons } from './buildIcons';
 
 async function build() {
-  await fs.remove('lib');
-  await fs.ensureDir('lib');
-
-  const baseImports: string[] = [];
-  const baseExports: { [componentName: string]: string } = {};
-
-  // TODO: use build-info.json (#5)
-  Object.keys(icons).forEach(async iconName => {
-    const { name, size, markup } = createComponent(icons[iconName]);
-
-    // TODO: use `moduleName` from build-info.json (#5)
-    const componentName = formatName({ name, size });
-
-    if (componentName != null && !(componentName in baseExports)) {
-      baseImports.push(`import ${componentName} from './${componentName}';`);
-      baseExports[componentName] = componentName;
-
-      await fs.ensureDir(`lib/${componentName}`);
-      await fs.writeFile(
-        `lib/${componentName}/index.js`,
-        `
-        import ${componentName} from './${componentName}.svelte';
-        export default ${componentName};
-        `
-      );
-      await fs.writeFile(
-        `lib/${componentName}/${componentName}.svelte`,
-        markup
-      );
-    }
-  });
-
-  const indexFile = [
-    ...baseImports,
-    `
-      export {
-        ${Object.keys(baseExports)
-          .map(item => item)
-          .join(',')}
-      }
-    `
-  ];
-
-  await fs.writeFile(`lib/index.js`, indexFile.join(''));
+  const path = 'node_modules/@carbon/icons/build-info.json';
+  const dist = 'lib';
+
+  try {
+    await buildIcons({ path, dist });
+  } catch (error) {
+    process.stderr.write(`${error}\n`);
+  }
 }
 
 build();