feat(icon-build-helpers): optimize SVG assets and builder interface (#…

…5937)

* chore: check-in work

* feat(icon-build-helpers): add svg builder and add output extension

* feat(icon-build-helpers): add builder for vue

* test(e2e): update e2e icon tests

* test(e2e): update icons-vue tests

* chore(project): update metadata input call signature

* fix(icon-build-helpers): update react builder to stop double children in render

* chore: check-in work

* test(icon-build-helpers): add test for getModuleName

* chore: check-in work

* test(output): add tests for output extension

* chore(icon-build-helpers): remove search.js

* chore(project): fix eslint violations

* chore(icons): update path from svg to src/svg

* chore(icons): update gitignore to include generated svg folder

* chore(pictograms): update path from svg to src/svg

* chore(pictograms): update gitignore to include generated svg folder

* chore(icon-build-helpers): remove search test

* refactor(icon-build-helpers): update test signatures with metadata

* refactor(icons,pictograms): update tasks signatures with metadata

* chore(icons): update preview with new metadata structure

* chore(icon-build-helpers): update filepath for icon glyphs

e2e/icons-react/components-test.js

@@ -9,57 +9,53 @@
 
 'use strict';
 
+const { Metadata } = require('@carbon/icon-build-helpers');
 const path = require('path');
-const { Metadata } = require('../../packages/icon-build-helpers');
 
 const PACKAGE_DIR = path.resolve(__dirname, '../../packages/icons-react');
 const ICONS_PACKAGE_DIR = path.resolve(__dirname, '../../packages/icons');
-const sizes = [16, 20, 24, 32];
 
 describe('@carbon/icons-react', () => {
   let metadata;
 
   beforeAll(async () => {
     metadata = await Metadata.load({
-      input: ICONS_PACKAGE_DIR,
+      input: {
+        svg: path.join(ICONS_PACKAGE_DIR, 'src/svg'),
+        extensions: ICONS_PACKAGE_DIR,
+      },
       extensions: [
         Metadata.extensions.icons,
         Metadata.extensions.deprecated,
-        Metadata.extensions.moduleName,
+        Metadata.extensions.assets,
+        Metadata.extensions.output,
       ],
     });
   });
 
   it('should export each SVG asset', async () => {
     const CarbonIconsReactCommonJS = require('@carbon/icons-react');
     const CarbonIconsReactESM = await import('@carbon/icons-react');
-    for (const icon of metadata.icons) {
-      const { moduleName } = icon;
-      for (const size of sizes) {
-        const exportName = `${moduleName}${size}`;
-        expect(CarbonIconsReactCommonJS[exportName]).toBeDefined();
-        expect(CarbonIconsReactESM[exportName]).toBeDefined();
+
+    for (const asset of metadata.icons) {
+      for (const icon of asset.output) {
+        const { moduleName } = icon;
+        expect(CarbonIconsReactCommonJS[moduleName]).toBeDefined();
+        expect(CarbonIconsReactESM[moduleName]).toBeDefined();
       }
     }
   });
 
   it('should export each SVG asset as a direct path', async () => {
-    for (const icon of metadata.icons) {
-      const esm = path.join(PACKAGE_DIR, 'es', ...icon.namespace, icon.name);
-      const commonjs = path.join(
-        PACKAGE_DIR,
-        'lib',
-        ...icon.namespace,
-        icon.name
-      );
+    for (const asset of metadata.icons) {
+      for (const icon of asset.output) {
+        const esm = path.join(PACKAGE_DIR, 'es', icon.filepath);
+        const commonjs = path.join(PACKAGE_DIR, 'lib', icon.filepath);
 
-      for (const size of sizes) {
-        const es = path.join(esm, `${size}.js`);
-        const lib = path.join(commonjs, `${size}.js`);
         expect(() => {
-          require(lib);
+          require(commonjs);
         }).not.toThrow();
-        await expect(import(es)).resolves.toBeDefined();
+        await expect(import(esm)).resolves.toBeDefined();
       }
     }
   });

e2e/icons-vue/PublicAPI-test.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const CarbonIconsVue = require('@carbon/icons-vue');
+
+describe('@carbon/icons-vue', () => {
+  it('should not update exports without a semver change', () => {
+    expect(Object.keys(CarbonIconsVue).sort()).toMatchSnapshot();
+  });
+});