fix(duplicate-cjs): add transformer-cjs-imports (patternfly#4910)

* fix(duplicate-cjs): add transformer-cjs-imports * fix lint
arnthor-agustsson · Sep 30, 2020 · 9d0e290 · 9d0e290
1 parent 2bec379
commit 9d0e290
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -67,13 +67,15 @@
     "tslint": "^5.12.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "tslint-react": "^3.6.0"
+    "tslint-react": "^3.6.0",
+    "ttypescript": "^1.5.12"
   },
   "scripts": {
+    "analyze": "yarn workspace @patternfly/react-docs analyze",
     "bootstrap": "lerna bootstrap",
     "build": "yarn build:generate && yarn build:esm && yarn build:cjs",
     "build:cjs": "tsc --build packages/tsconfig.cjs.json -v",
-    "build:esm": "tsc --build packages/tsconfig.json -v",
+    "build:esm": "ttsc --build packages/tsconfig.json -v",
     "build:integration": "lerna run build:demo-app --stream",
     "build:docs": "yarn workspace @patternfly/react-docs build:docs",
     "build:umd": "yarn workspace @patternfly/react-core build:umd",

diff --git a/packages/react-docs/patternfly-a11y.config.js b/packages/react-docs/patternfly-a11y.config.js
@@ -1,5 +1,10 @@
 const { fullscreenRoutes } = require('theme-patternfly-org/routes');
 
+/**
+ * Wait for a selector before running axe
+ *
+ * @param page page from puppeteer
+ */
 async function waitFor(page) {
   await page.waitForSelector('#root > *');
 }

diff --git a/packages/transformer-cjs-imports/index.js b/packages/transformer-cjs-imports/index.js
@@ -0,0 +1,38 @@
+// https://levelup.gitconnected.com/writing-typescript-custom-ast-transformer-part-2-5322c2b1660e
+const ts = require('typescript');
+
+/**
+ * We import `@patternfly/react-[tokens,icons]/dist/js` to avoid parsing massive modules
+ * as well as for cross-module imports with types to `@patternfly/react-core`.
+ * HOWEVER we would like for the ESM output to reference `@patternfly/react-[]/dist/esm`
+ * for better tree-shaking and smaller bundlers.
+ * A large offender of this is Tooltip's Popover helper.
+ *
+ * @param context TS context
+ */
+function transformerCJSImports(context) {
+  // Only transform for ESM build
+  if (context.getCompilerOptions().target !== 2) {
+    return node => node;
+  }
+  /**
+   * If a node is an import, change its moduleSpecifier
+   * Otherwise iterate over all its childern.
+   *
+   * @param node TS Node
+   */
+  function visit(node) {
+    if (ts.isImportDeclaration(node) && /@patternfly\/.*\/dist\/js/.test(node.moduleSpecifier.text)) {
+      const newNode = ts.getMutableClone(node);
+      const newPath = node.moduleSpecifier.text.replace(/dist\/js/, 'dist/esm');
+      newNode.moduleSpecifier = ts.createStringLiteral(newPath);
+      return newNode;
+    }
+    return ts.visitEachChild(node, child => visit(child), context);
+  }
+  return node => ts.visitNode(node, visit);
+}
+
+module.exports = () => ({
+  before: transformerCJSImports
+});
diff --git a/packages/transformer-cjs-imports/package.json b/packages/transformer-cjs-imports/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "transformer-cjs-imports",
+  "version": "4.0.0",
+  "description": "Transform CJS imports to ESM in typescript depending on module target.",
+  "main": "index.js",
+  "author": "Red Hat",
+  "license": "MIT",
+  "peerDependencies": {
+    "typescript": ">=3.7.2"
+  }
+}
diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json
@@ -16,7 +16,10 @@
     "sourceMap": true,
     "declarationMap": true,
     "strict": true,
-    "strictNullChecks": false
+    "strictNullChecks": false,
+    "plugins": [
+      { "transform": "transformer-cjs-imports" },
+    ]
   },
   "exclude": [
     "**/**.test.tsx",

diff --git a/yarn.lock b/yarn.lock
@@ -18069,7 +18069,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.3.3:
+resolve@>=1.9.0, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.3.3:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -20263,6 +20263,13 @@ tty-browserify@0.0.0:
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
   integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
+ttypescript@^1.5.12:
+  version "1.5.12"
+  resolved "https://registry.yarnpkg.com/ttypescript/-/ttypescript-1.5.12.tgz#27a8356d7d4e719d0075a8feb4df14b52384f044"
+  integrity sha512-1ojRyJvpnmgN9kIHmUnQPlEV1gq+VVsxVYjk/NfvMlHSmYxjK5hEvOOU2MQASrbekTUiUM7pR/nXeCc8bzvMOQ==
+  dependencies:
+    resolve ">=1.9.0"
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"