From cc305f8957826bd6916e8d2bc84f74da1997670d Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 10 Nov 2022 16:27:23 -0500
Subject: [PATCH] replace all paths in CEM

---
 custom-elements-manifest.config.js | 61 ++++++++++++++++++++----------
 scripts/make-react.js              |  2 +-
 scripts/shared.js                  |  4 +-
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index 8e327d7b..cbb1a81a 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -1,12 +1,21 @@
 import fs from 'fs';
-import path from 'path';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
 
-const noDash = string => string.replace(/^\s?-/, '').trim();
+function noDash(string) {
+  return string.replace(/^\s?-/, '').trim();
+}
+
+function replace(string, terms) {
+  terms.forEach(({ from, to }) => {
+    string = string?.replace(from, to);
+  });
+
+  return string;
+}
 
 export default {
   globs: ['src/components/**/*.ts'],
@@ -106,26 +115,38 @@ export default {
     },
     {
       name: 'shoelace-translate-module-paths',
-      analyzePhase({ ts, node, moduleDoc }) {
-        switch (node.kind) {
-          case ts.SyntaxKind.ClassDeclaration: {
-            //
-            // Module paths look like this:
-            //
-            //  src/components/button/button.ts
-            //
-            // But we want them to point to the dist file:
-            //
-            //  dist/components/button/button.js
-            //
-            const relativePath = path.relative('src', moduleDoc.path);
-            const dirname = path.dirname(relativePath);
-            const basename = path.basename(relativePath, path.extname(relativePath)) + '.js';
-            const distPath = path.join('dist', dirname, basename);
+      packageLinkPhase({ customElementsManifest }) {
+        customElementsManifest?.modules?.forEach(mod => {
+          //
+          // CEM paths look like this:
+          //
+          //  src/components/button/button.ts
+          //
+          // But we want them to look like this:
+          //
+          //  components/button/button.js
+          //
+          const terms = [
+            { from: /^src\//, to: '' }, // Strip the src/ prefix
+            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+          ];
 
-            moduleDoc.path = distPath;
+          mod.path = replace(mod.path, terms);
+
+          for (const ex of mod.exports ?? []) {
+            ex.declaration.module = replace(ex.declaration.module, terms);
           }
-        }
+
+          for (const dec of mod.declarations ?? []) {
+            if (dec.kind === 'class') {
+              for (const member of dec.members ?? []) {
+                if (member.inheritedFrom) {
+                  member.inheritedFrom.module = replace(member.inheritedFrom.module, terms);
+                }
+              }
+            }
+          }
+        });
       }
     }
   ]
diff --git a/scripts/make-react.js b/scripts/make-react.js
index 3b43c315..84425e02 100644
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -29,7 +29,7 @@ components.map(component => {
   const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
-  const importPath = component.modulePath.replace(/^src\//, '').replace(/\.ts$/, '');
+  const importPath = component.path;
   const events = (component.events || []).map(event => `${event.reactName}: '${event.name}'`).join(',\n');
 
   fs.mkdirSync(componentDir, { recursive: true });
diff --git a/scripts/shared.js b/scripts/shared.js
index a57dff4d..a67fbad9 100644
--- a/scripts/shared.js
+++ b/scripts/shared.js
@@ -5,10 +5,10 @@ export function getAllComponents(metadata) {
     module.declarations?.map(declaration => {
       if (declaration.customElement) {
         const component = declaration;
-        const modulePath = module.path;
+        const path = module.path;
 
         if (component) {
-          allComponents.push(Object.assign(component, { modulePath }));
+          allComponents.push(Object.assign(component, { path }));
         }
       }
     });