fix(web-components): addresses issues in wc build script (#6675)

* fix(web-components): addresses issues in wc build script * fix: use import instead of require * chore: use default export * fix: remove svg vite plugin from vitest config * chore: remove log and async
carbon-design-system · Jan 10, 2025 · 90dc01c · 90dc01c
1 parent d0cc47a
commit 90dc01c
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 19 deletions.
diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json
@@ -55,6 +55,7 @@
     "lit": "^3.1.0"
   },
   "devDependencies": {
+    "@carbon/icon-helpers": "^10.54.0",
     "@carbon/icons": "^11.53.0",
     "@carbon/motion": "^11.24.0",
     "@mordech/vite-lit-loader": "^0.35.0",

diff --git a/packages/ibm-products-web-components/tasks/build.js b/packages/ibm-products-web-components/tasks/build.js
@@ -46,7 +46,8 @@ async function build() {
   ]);
 
   const iconInput = await globby([
-    'node_modules/@carbon/icons/lib/**/*.js',
+    '../node_modules/@carbon/icons/lib/**/*.js',
+    '../../node_modules/@carbon/icons/lib/**/*.js',
     '!**/index.js',
   ]);
 

diff --git a/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js b/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js
@@ -7,15 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
-const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
+import createSVGResultFromCarbonIcon from './svg-result-carbon-icon';
 
 /**
  * A Vite loader to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`.
  *
  * @returns {string} The massaged module content.
  */
-function svgResultCarbonIconLoader() {
+export default function svgResultCarbonIconLoader() {
   const descriptor = require(this.resourcePath); // eslint-disable-line global-require
   return `
     import { svg } from 'lit';
@@ -24,5 +23,3 @@ function svgResultCarbonIconLoader() {
     export default svgResultCarbonIcon;
   `;
 }
-
-module.exports = svgResultCarbonIconLoader;
diff --git a/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js b/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js
@@ -31,7 +31,7 @@ const toString = (descriptor) => {
  */
 const icon = (descriptor) => {
   descriptor.attrs = getAttributes(
-    Object.assign(descriptor.attrs, {
+    Object.assign(descriptor.attrs ?? {}, {
       '...': '${spread(attrs)}', // eslint-disable-line no-template-curly-in-string
     })
   );

diff --git a/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts b/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts
@@ -1,14 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
-const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
+import createSVGResultFromCarbonIcon from './svg-result-carbon-icon';
 
 /**
  * A Vite plugin to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`.
@@ -50,12 +49,11 @@ export default function svgResultCarbonIconLoader() {
       if (!id.match(svgRegex)) {
         return outcome;
       }
-
       const descriptor = require(id);
       return `
           import { svg } from 'lit';
           import spread from '@carbon/web-components/es/globals/directives/spread.js';
-          const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon.default(
+          const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(
             descriptor
           )};
           export default svgResultCarbonIcon;

diff --git a/packages/ibm-products-web-components/vite.config.ts b/packages/ibm-products-web-components/vite.config.ts
@@ -8,14 +8,8 @@
 import { defineConfig, configDefaults } from 'vitest/config';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    // @ts-ignore
-    litStyleLoader(),
-    // @ts-ignore
-    litTemplateLoader(),
-  ],
+  plugins: [litStyleLoader(), litTemplateLoader()],
   test: {
     environment: 'happy-dom',
     include: ['./src/**/*.{test,spec}.{js,ts}'],

diff --git a/yarn.lock b/yarn.lock
@@ -1753,6 +1753,7 @@ __metadata:
   resolution: "@carbon/ibm-products-web-components@workspace:packages/ibm-products-web-components"
   dependencies:
     "@carbon/ibm-products-styles": "npm:^2.53.0"
+    "@carbon/icon-helpers": "npm:^10.54.0"
     "@carbon/icons": "npm:^11.53.0"
     "@carbon/motion": "npm:^11.24.0"
     "@carbon/styles": "npm:1.71.0"