replace all paths in CEM

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 }) {
+      packageLinkPhase({ customElementsManifest }) {
-        switch (node.kind) {
+        customElementsManifest?.modules?.forEach(mod => {
-          case ts.SyntaxKind.ClassDeclaration: {
+          //
-            //
+          // CEM paths look like this:
-            // Module paths look like this:
+          //
-            //
+          //  src/components/button/button.ts
-            //  src/components/button/button.ts
+          //
-            //
+          // But we want them to look like this:
-            // But we want them to point to the dist file:
+          //
-            //
+          //  components/button/button.js
-            //  dist/components/button/button.js
+          //
-            //
+          const terms = [
-            const relativePath = path.relative('src', moduleDoc.path);
+            { from: /^src\//, to: '' }, // Strip the src/ prefix
-            const dirname = path.dirname(relativePath);
+            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
-            const basename = path.basename(relativePath, path.extname(relativePath)) + '.js';
+          ];
-            const distPath = path.join('dist', dirname, basename);
 
-            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);
+                }
+              }
+            }
+          }
+        });
       }
     }
   ]

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 });

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 }));
         }
       }
     });