#772 Improve Browser Support for new components

package.json

@@ -92,11 +92,10 @@
 		"escape-html": "^1.0.3",
 		"lit": "^3.3.3",
 		"mime-types": "^3.0.2",
-		"pane-registry": "3.1.2-0",
-		"rdflib": "2.3.9",
-		"solid-logic": "4.0.8-0",
+		"pane-registry": "^3.1.2-0",
+		"rdflib": "^2.3.9",
+		"solid-logic": "^4.0.8-0",
 		"solid-namespace": "^0.5.4",
-		"tailwindcss": "4.3.0",
 		"uuid": "^14.0.0"
 	},
 	"devDependencies": {
@@ -112,7 +111,6 @@
 		"@babel/preset-typescript": "^7.28.5",
 		"@eslint/js": "^9.39.4",
 		"@iconify/json": "2.2.481",
-		"@mdx-js/react": "^3.1.1",
 		"@rolldown/plugin-babel": "^0.2.3",
 		"@storybook/addon-docs": "10.4.2",
 		"@storybook/addon-links": "10.4.2",
@@ -140,10 +138,9 @@
 		"patch-package": "^8.0.1",
 		"path-browserify": "^1.0.1",
 		"postcss": "^8.5.15",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-is": "^17.0.2",
+        "solidos-toolkit": "dev",
 		"storybook": "10.4.2",
+		"tailwindcss": "4.3.0",
 		"typedoc": "^0.28.19",
 		"typescript": "^5.9.3",
 		"unplugin-dts": "^1.0.2",

tsconfig.json

@@ -80,7 +80,8 @@
     "useDefineForClassFields": true,
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    ".storybook/**/*"
   ],
   "exclude": ["node_modules", "dist"]
 }

vite-config/cdn.ts

@@ -1,9 +1,8 @@
-import { copyFileSync } from 'node:fs'
 import { join, resolve } from 'node:path'
+import { babel } from 'solidos-toolkit/vite'
 import type { PluginOption, UserConfig } from 'vite'
 
-import babel from './babel'
-import { componentsSrcDir, discoverComponents } from './components'
+import { componentsSrcDir, discoverComponents, litDecoratorPaths } from './components'
 
 const projectRoot = resolve(import.meta.dirname, '..')
 
@@ -42,6 +41,7 @@ function cdnSharedConfig(options: { basePlugins: PluginOption[]; globals?: Recor
         plugins: [
             ...options.basePlugins,
             babel({
+                litDecoratorPaths,
                 preserveModules: true,
                 transpileTargets: {
                     browsers: ['> 1%', 'last 3 versions', 'not dead'],
@@ -52,6 +52,7 @@ function cdnSharedConfig(options: { basePlugins: PluginOption[]; globals?: Recor
 }
 
 export function cdnLegacyConfig(basePlugins: PluginOption[]): UserConfig {
+    const baseName = 'solid-ui'
     const shared = cdnSharedConfig({
         basePlugins,
         globals: {
@@ -66,11 +67,18 @@ export function cdnLegacyConfig(basePlugins: PluginOption[]): UserConfig {
             ...shared.plugins,
             {
                 name: 'copy-legacy-aliases',
-                closeBundle() {
-                    const distDir = join(projectRoot, 'dist')
+                generateBundle(_, bundle) {
+                    const minifiedBundle = bundle[`${baseName}.min.js`]
 
-                    copyFileSync(join(distDir, 'solid-ui.min.js'), join(distDir, 'solid-ui.js'))
-                    copyFileSync(join(distDir, 'solid-ui.min.js.map'), join(distDir, 'solid-ui.js.map'))
+                    if (minifiedBundle?.type !== 'chunk') {
+                        return;
+                    }
+
+                    this.emitFile({
+                        type: 'asset',
+                        fileName: `${baseName}.js`,
+                        source: minifiedBundle.code,
+                    })
                 },
             },
         ],
@@ -80,7 +88,7 @@ export function cdnLegacyConfig(basePlugins: PluginOption[]): UserConfig {
                 entry: join(projectRoot, 'src/cdn/legacy.ts'),
                 name: 'UI',
                 formats: ['umd'],
-                fileName: () => 'solid-ui.min.js',
+                fileName: () => `${baseName}.min.js`,
             },
         },
     }

vite-config/components.ts

@@ -3,6 +3,11 @@ import { join, resolve } from 'node:path'
 
 const projectRoot = resolve(import.meta.dirname, '..')
 
+export const litDecoratorPaths = [
+    'src/components',
+    'src/storybook',
+]
+
 export const componentsSrcDir = join(projectRoot, 'src/components')
 
 export function discoverComponents(): string[] {

vite-config/styles.ts

@@ -1,5 +1,4 @@
-import { writeFileSync } from 'node:fs'
-import { join, resolve } from 'node:path'
+import { resolve } from 'node:path'
 import tailwindcss from '@tailwindcss/vite'
 import type { Plugin, UserConfig } from 'vite'
 
@@ -8,11 +7,12 @@ const projectRoot = resolve(import.meta.dirname, '..')
 function styleDeclarations(): Plugin {
     return {
         name: 'style-declarations',
-        closeBundle() {
-            writeFileSync(
-                join(projectRoot, 'dist/theme.css.d.ts'),
-                'export {}\n',
-            )
+        generateBundle() {
+            this.emitFile({
+                type: 'asset',
+                fileName: 'theme.css.d.ts',
+                source: 'export {}\n',
+            })
         },
     }
 }

vite.config.ts

@@ -1,12 +1,13 @@
 import dts from 'unplugin-dts/vite'
 import { isAbsolute } from 'node:path'
 import { defineConfig } from 'vitest/config'
+import { babel } from 'solidos-toolkit/vite'
 import type { UserConfig } from 'vite'
-import babel from './vite-config/babel'
+
 import css from './vite-config/css'
 import icons from './vite-config/icons'
 import { cdnLegacyConfig, cdnConfig } from './vite-config/cdn'
-import { discoverComponents } from './vite-config/components'
+import { discoverComponents, litDecoratorPaths } from './vite-config/components'
 import { stylesConfig } from './vite-config/styles'
 
 const basePlugins = [
@@ -21,7 +22,7 @@ function defaultConfig(): UserConfig {
         },
         plugins: [
             ...basePlugins,
-            babel(),
+            babel({ litDecoratorPaths }),
             dts({
                 tsconfigPath: 'tsconfig.json',
                 entryRoot: 'src',