chore: wip

Author: chrisbbreuer

storage/framework/core/vite-config/src/web-components.ts

@@ -1,23 +1,27 @@
 import { alias } from '@stacksjs/alias'
-import { path as p } from '@stacksjs/path'
+import { config as c } from '@stacksjs/config'
+import { libraryEntryPath, libsPath, projectPath, publicPath, resourcesPath } from '@stacksjs/path'
 import { server } from '@stacksjs/server'
+import type { ViteConfig } from '@stacksjs/types'
+import { autoImports, components, cssEngine, devtools, inspect, uiEngine } from '@stacksjs/vite-plugin'
 import { defineConfig } from 'vite'
 import type { ViteBuildOptions } from '.'
 
-// import { autoImports, components, cssEngine, inspect, uiEngine } from '.'
-
-// const isWebComponent = true
-
-export const webComponentsConfig = {
-  root: p.frameworkPath('libs/components/web'),
-  envDir: p.projectPath(),
+const config = {
+  root: libsPath('components/web'),
+  envDir: projectPath(),
   envPrefix: 'FRONTEND_',
+  publicDir: publicPath(),
+  base: '/libs/',
+
+  assetsInclude: [publicPath('**/*'), resourcesPath('assets/*'), resourcesPath('assets/**/*')],
 
   server: server({
     type: 'library',
   }),
 
   resolve: {
+    dedupe: ['vue'],
     alias,
   },
 
@@ -26,38 +30,47 @@ export const webComponentsConfig = {
   },
 
   plugins: [
-    // inspect(),
-    // uiEngine(isWebComponent),
-    // cssEngine(isWebComponent),
-    // autoImports(),
-    // components(),
+    uiEngine(true),
+    autoImports(),
+    cssEngine(),
+    inspect(),
+    components(),
+    devtools(),
+    // stacks(),
   ],
 
   build: webComponentsBuildOptions(),
-}
+} satisfies ViteConfig
 
 export function webComponentsBuildOptions(): ViteBuildOptions {
   return {
-    outDir: p.frameworkPath('components/web/dist'),
+    outDir: libsPath('components/web/dist'),
     emptyOutDir: true,
     lib: {
-      entry: p.libraryEntryPath('web-components'),
-      name: 'web-components',
-      formats: ['cjs', 'es'],
+      entry: libraryEntryPath('web-components'),
+      name: c.library.webComponents?.name,
+      formats: ['es'],
       fileName: (format: string) => {
-        if (format === 'es') return 'index.mjs'
-
-        if (format === 'cjs') return 'index.cjs'
+        if (format === 'es') return 'index.js'
 
         return 'index.?.js'
       },
     },
+
+    // rollupOptions: {
+    //   external: ['vue', '@stacksjs/path'],
+    //   input: libraryEntryPath('web-components'),
+    //   output: {
+    //     globals: {
+    //       vue: 'Vue',
+    //     },
+    //   },
+    // },
   }
 }
 
 export default defineConfig(({ command }) => {
-  if (command === 'serve') return webComponentsConfig
+  if (command === 'serve') return config
 
-  // command === 'build'
-  return webComponentsConfig
+  return config
 })

storage/framework/core/vite-plugin/src/css-engine.ts

@@ -1,12 +1,10 @@
 // import { path as p } from '@stacksjs/path'
 import UnoCSS from 'unocss/vite'
 
-export function cssEngine() {
-  // export function cssEngine(isWebComponent = false) {
-  // return UnoCSS()
+export function cssEngine(isWebComponent = false) {
   return UnoCSS({
     configFile: '../../ui/src/unocss.config.ts',
-    // mode: isWebComponent ? 'shadow-dom' : 'vue-scoped',
+    mode: isWebComponent ? 'shadow-dom' : 'vue-scoped',
     // content: {
     //   pipeline: {
     //     include: /\.(stx|vue|js|ts|mdx?|elm|html)($|\?)/,

storage/framework/libs/components/web/package.json

@@ -35,7 +35,8 @@
   "types": "dist/index.d.ts",
   "files": ["README.md", "dist", "src"],
   "scripts": {
-    "build": "vite build -c ../build/web-components.ts",
+    "dev": "bunx vite -c ../../../core/vite-config/src/web-components.ts",
+    "build": "bunx vite build -c ../../../core/vite-config/src/web-components.ts",
     "prepublishOnly": "bun run build"
   },
   "devDependencies": {