feat!: generate entrypoint module

.changeset/eight-dragons-rest.md

@@ -0,0 +1,21 @@
+---
+"@rhds/elements": major
+---
+Removed the `rhds.min.js` entrypoint and replaced it with a module that reexports all our element modules.
+
+Before:
+
+```js
+import '@rhds/elements'; // get the minified bundle
+import '@rhds/elements/rh-cta/rh-cta.js';
+// => DOMException: 'rh-cta' has already been defined as a custom element
+```
+
+After:
+
+```js
+import '@rhds/elements'; // get the entrypoint module
+import '@rhds/elements/rh-cta/rh-cta.js';
+// => get the same module referenced in the entry point
+```
+

.gitignore

@@ -11,7 +11,7 @@ docs/assets/playgrounds/
 docs/_data/playgrounds.json
 
 # Build artifacts
-!elements
+elements.js
 elements/*/*.js
 elements/*/test/*.js
 react

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "customElements": "custom-elements.json",
   "exports": {
-    ".": "./rhds.min.js",
+    ".": "./elements.js",
     "./lib/*": "./lib/*",
     "./react/*": "./react/*",
     "./*": "./elements/*"
@@ -44,7 +44,7 @@
     "react/**/*",
     "lib/**/*.{js,md,map,css,svg,md,html,txt,d.ts}",
     "custom-elements.json",
-    "rhds.min*"
+    "elements.js"
   ],
   "scripts": {
     "🐒-DEV": "❓ Development aids",
@@ -114,8 +114,8 @@
         "patch",
         "analyze",
         "react-wrappers",
+        "entrypoint",
         "compile",
-        "bundle",
         "copy-css",
         "docs"
       ]
@@ -148,6 +148,19 @@
         "!elements/*/{demo,test}/**/*.js"
       ]
     },
+    "entrypoint": {
+      "command": "npx tsx scripts/generate-entry-point.ts",
+      "dependencies": [
+        "analyze"
+      ],
+      "files": [
+        "custom-elements.json",
+        "scripts/generate-entry-point.ts"
+      ],
+      "output": [
+        "elements.js"
+      ]
+    },
     "react-wrappers": {
       "command": "npx tsx scripts/generate-react-wrappers.ts",
       "dependencies": [
@@ -171,16 +184,6 @@
         "./*/*.css"
       ]
     },
-    "bundle": {
-      "command": "node scripts/bundle.js",
-      "files": [
-        "elements/**/*.{ts,js,map}",
-        "elements/**/*.css"
-      ],
-      "output": [
-        "rhds.min.js"
-      ]
-    },
     "analyze": {
       "command": "cem analyze && node scripts/cem-tokens.js && node scripts/system-tokens.js",
       "files": [
@@ -199,8 +202,7 @@
         "patch",
         "analyze",
         "playgrounds",
-        "compile",
-        "bundle"
+        "compile"
       ],
       "files": [
         "docs"

scripts/bundle.js

@@ -14,25 +14,9 @@ const cleanCSS = new CleanCSS({
   returnPromise: true,
 });
 
-export async function bundle({
-  outfile = 'rhds.min.js',
-  external = [], additionalPackages = [],
-} = {}) {
-  const resolveDir = join(fileURLToPath(import.meta.url), '../elements');
-
-  const elementSources = await glob('./*/*-*.ts', { cwd: join(process.cwd(), 'elements') });
-  const elementDirs = new Set(elementSources.map(x => dirname(x)));
-  const elementFiles = Array.from(elementDirs, x => join(process.cwd(), `elements/${x}/${x}.js`));
-
-  const contents = [...additionalPackages, ...elementFiles]
-      .map(x => `export * from '${x.replace('.ts', '.js')}';`).join('\n');
-
+export async function bundle({ outfile = 'rhds.min.js', external = [] } = {}) {
   await build({
-    stdin: {
-      contents,
-      loader: 'ts',
-      resolveDir,
-    },
+    entryPoints: ['./elements.js'],
     format: 'esm',
     outfile,
     allowOverwrite: true,

scripts/generate-entry-point.ts

@@ -0,0 +1,23 @@
+import type { CustomElementExport, Export, Package } from 'custom-elements-manifest';
+import { readFile, writeFile } from 'node:fs/promises';
+
+const isCustomElementExport = (exp: Export): exp is CustomElementExport =>
+  exp.kind === 'custom-element-definition';
+
+const makeExportStatement = (ex: Export) =>
+  `export * from '${ex.declaration.package ?? '@rhds/elements'}/${ex.declaration?.module}';`;
+
+const manifestUrl = new URL('../custom-elements.json', import.meta.url);
+const manifest: Package = JSON.parse(await readFile(manifestUrl, 'utf8'));
+
+const elements = manifest.modules?.flatMap(mod => mod.exports ?? [])
+    .filter(isCustomElementExport)
+    .map(makeExportStatement)
+    .join('\n');
+
+await writeFile(
+  new URL('../elements.js', import.meta.url),
+  `${elements}\n`,
+  'utf8',
+);
+

spandx.config.cjs

@@ -22,7 +22,7 @@ async function injectLocalSources(_req, res, next) {
 
     const importMapJson = JSON.stringify({
       imports: {
-        '@rhds/elements': 'http://localhost:8000/rhds.min.js',
+        '@rhds/elements': 'http://localhost:8000/elements.js',
         ...Object.fromEntries(elements.map(dir => [
           `@rhds/elements/${dir}/${dir}.js`,
           `http://localhost:8000/elements/${dir}/${dir}.ts`,