Add transformation fallback (#9353)

* fix(build): add fallback to transform esm to cjs * fix(build): generate output build for react tokens * added additional CJS module target check to fallback path transform --------- Co-authored-by: Austin Sullivan <[email protected]>
patternfly · Jul 13, 2023 · 201743b · 201743b
1 parent 108a477
commit 201743b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
@@ -25,6 +25,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
+    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "generate": "yarn clean && node scripts/writeTokens.js",
     "clean": "rimraf dist"
   },

diff --git a/packages/react-tokens/single-packages.config.json b/packages/react-tokens/single-packages.config.json
@@ -0,0 +1,5 @@
+{
+    "packageName": "@patternfly/react-tokens",
+    "moduleGlob": "/dist/esm/*.js",
+    "exclude": []
+}
diff --git a/packages/transformer-dynamic-imports/index.ts b/packages/transformer-dynamic-imports/index.ts
@@ -86,7 +86,7 @@ const transformer:ts.TransformerFactory<ts.SourceFile> = context => sourceFile =
       const { factory } = context
       // handles relative imports import {foo} from '@patternfly/react-icons'
       // the regex has extra '$ condition
-      if(ts.isImportDeclaration(node) && /@patternfly\/react-(core|icons)'$/.test(node.moduleSpecifier.getText())) {
+      if(ts.isImportDeclaration(node) && /@patternfly\/react-(core|icons|tokens)'$/.test(node.moduleSpecifier.getText())) {
         if(node.moduleSpecifier.getText().includes('react-icons')) {
           const importNames: string[] = []
           // get all named imports 
@@ -105,7 +105,7 @@ const transformer:ts.TransformerFactory<ts.SourceFile> = context => sourceFile =
       }
 
       // handle absolute icons import paths
-      if(ts.isImportDeclaration(node) && /@patternfly\/react-icons/.test(node.moduleSpecifier.getText())) {
+      if(ts.isImportDeclaration(node) && /@patternfly\/react-(icons|tokens)/.test(node.moduleSpecifier.getText())) {
         if (ts.isImportDeclaration(node) && /@patternfly\/.*\/dist\/esm/.test(node.moduleSpecifier.getText())) {
           return factory.updateImportDeclaration(
             node,
@@ -121,6 +121,21 @@ const transformer:ts.TransformerFactory<ts.SourceFile> = context => sourceFile =
         }
 
       }
+
+      // handle any uncaught esm imports
+      if (ts.isImportDeclaration(node) && /@patternfly\/.*\/dist\/esm/.test(node.moduleSpecifier.getText()) && context.getCompilerOptions().module === 1) {
+        return factory.updateImportDeclaration(
+          node,
+          node.decorators,
+          node.modifiers,
+          node.importClause,
+          factory.createStringLiteral(
+            node.moduleSpecifier.getFullText().replace(/"/g, '').replace(/'/g, '').replace(/dist\/esm/, 'dist/js').trim(),
+            true
+          ),
+          undefined
+        )
+      }
       return ts.visitEachChild(node, visitor, context);
 
     }