feat: add root entry point with global component registration (#2641)

This feature allows using `import '@sbb-esta/lyne-components'`, which will
import all components and add them to `globalThis`, but will not provide an export.
This is useful for SSR or for providing examples/reproductions and wanting to load all components.

src/components/vite.config.ts

@@ -13,6 +13,7 @@ import {
   packageJsonTemplate,
   typography,
   verifyEntryPoints,
+  generateRootEntryPoint,
 } from '../../tools/vite/index.js';
 import rootConfig from '../../vite.config.js';
 
@@ -39,9 +40,14 @@ export default defineConfig((config) =>
       ...(isProdBuild(config)
         ? [
             customElementsManifest(),
+            generateRootEntryPoint(),
             packageJsonTemplate({
               exports: {
-                '.': { sass: './_index.scss' },
+                '.': {
+                  types: './index.d.ts',
+                  sass: './_index.scss',
+                  default: './index.js',
+                },
                 ...buildStyleExports([
                   'a11y.css',
                   'animation.css',

tools/vite/generate-root-entry-point.ts

@@ -0,0 +1,47 @@
+import type { LibraryOptions, PluginOption, ResolvedConfig } from 'vite';
+
+export function generateRootEntryPoint(): PluginOption {
+  let viteConfig: ResolvedConfig;
+  return {
+    name: 'package-json-templating',
+    configResolved(config) {
+      viteConfig = config;
+    },
+    async generateBundle() {
+      if (viteConfig.command !== 'build') {
+        return;
+      }
+      const entry = (viteConfig.build.lib as LibraryOptions).entry as Record<string, string>;
+      const classNameMap: Record<string, string> = {
+        SbbOptgroupElement: 'SbbOptGroupElement',
+      };
+      const toElementName = (key: string): string => {
+        const className = `sbb-${key.split('/').reverse()[0]}-element`.replace(/(^\w|-\w)/g, (m) =>
+          m.replace(/-/, '').toUpperCase(),
+        );
+        return classNameMap[className] ?? className;
+      };
+      const keys = Object.keys(entry)
+        .filter(
+          (e, _, a) =>
+            a.every((iv) => !iv.startsWith(e + '/')) &&
+            !e.startsWith('core/') &&
+            !e.endsWith('/common'),
+        )
+        .sort()
+        .map((e) => ({ path: `./${e}.js`, symbol: toElementName(e) }))
+        .filter((v, i, a) => a.findIndex((iv) => iv.symbol === v.symbol) === i);
+      const imports = keys.map((e) => `import { ${e.symbol} } from "${e.path}";\n`).join('');
+      this.emitFile({
+        type: 'asset',
+        fileName: 'index.js',
+        source: `${imports}\n${keys.map((e) => `globalThis.${e.symbol} = ${e.symbol};\n`).join('')}\nexport {}\n`,
+      });
+      this.emitFile({
+        type: 'asset',
+        fileName: 'index.d.ts',
+        source: `${imports}\ndeclare global {\n${keys.map((e) => `  var ${e.symbol}: ${e.symbol};\n`).join('')}}\n\nexport {}\n`,
+      });
+    },
+  };
+}

tools/vite/index.ts

@@ -4,6 +4,7 @@ export * from './copy-sass.js';
 export * from './custom-elements-manifest.js';
 export * from './dts.js';
 export * from './generate-react-wrappers.js';
+export * from './generate-root-entry-point.js';
 export * from './package-json-template.js';
 export * from './resolve-entry-points.js';
 export * from './typography.js';