fix: pack css in js

packages/blender-ui/client/index.ts

@@ -4,8 +4,11 @@ export * from './components'
 export * from './styles'
 export * from './utils'
 
-export default {
-  createBUI,
+if (typeof window !== 'undefined') {
+  // @ts-expect-error global
+  window.BUI = {
+    createBUI,
+  }
 }
 
 export { reactive, ref } from 'vue'

packages/blender-ui/client/utils/init.ts

@@ -47,9 +47,36 @@ export interface PropertyOptions {
   onChange?: (val: number) => void
 }
 
-export function createBUI(selector: string | Element = 'advjs-blender-ui-container', props: any = {}) {
+export function createBUI({
+  selector = '#advjs-blender-ui-container',
+  props,
+}: {
+  selector?: string
+  props: {
+    panels: {
+      properties: PropertyOptions[]
+    }[]
+  }
+}) {
   const app = createApp(App, props)
+
+  // 如果传入的是字符串，且没有找到对应的元素，则创建一个
+  if (typeof selector === 'string' && !document.querySelector(selector)) {
+    const targetEl = document.createElement('div')
+    targetEl.id = 'advjs-blender-ui-container'
+    targetEl.style.position = 'fixed'
+    targetEl.style.top = '0'
+    targetEl.style.right = '0'
+    targetEl.style.zIndex = '9999'
+    targetEl.style.width = '300px'
+
+    document.body.appendChild(targetEl)
+
+    selector = `#${targetEl.id}`
+  }
+
   app.mount(selector)
+
   return {
     app,
 

packages/blender-ui/package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
     "tsx": "^4.7.0",
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vite-plugin-css-injected-by-js": "^3.3.1"
   }
 }

packages/blender-ui/vite.config.ts

@@ -2,10 +2,14 @@ import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 
 import vue from '@vitejs/plugin-vue'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
 export default defineConfig({
   plugins: [
     vue(),
+
+    // css in js
+    cssInjectedByJsPlugin(),
   ],
 
   build: {