feat(core): trying to create components on the fly

packages/tres/.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.tres/*
 dist
 dist-ssr
 *.local
@@ -23,3 +24,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+

packages/tres/package.json

@@ -66,6 +66,7 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "three": "latest",
+    "unplugin-vue-components": "^0.24.1",
     "vite": "^4.1.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.0.0-beta.1",

packages/tres/plugins/vite-plugin-tres.ts

@@ -0,0 +1,50 @@
+import { createUnplugin } from 'unplugin'
+import * as THREE from 'three'
+import fs from 'fs'
+import { join } from 'pathe'
+
+export const unplugin = createUnplugin((options: UserOptions) => {
+  return {
+    name: 'unplugin-tres',
+    buildStart() {
+      const outputDir = join('.tres', 'components')
+
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true })
+      }
+
+      for (const key in THREE) {
+        const value = (THREE as any)[key]
+        if (key === 'Scene') continue
+        if (typeof value === 'function' && /^\s*class\s+/.test(value.toString())) {
+          const outputFilePath = join(outputDir, `${key}.ts`)
+          const template = `
+          import { ref } from 'vue'
+          import { useInstanceCreator } from 'src/core'
+          const { createComponentInstances } = useInstanceCreator()
+        import { ${key} } from 'three'
+        const component = /* #__PURE__ */ createComponentInstances(ref({ ${key} }))
+        export default component[0][1]
+        `
+
+          /* const output = `
+      import { defineComponent } from 'vue';
+      import { ${key} } from 'three';
+
+      export default defineComponent({
+        name: '${componentName}',
+        props: ${key}.prototype,
+        setup(props) {
+          const ${key}Instance = new ${key}();
+          return () => ${key}Instance;
+        },
+      });
+    ` */
+          fs.writeFileSync(outputFilePath, template)
+        }
+      }
+    },
+  }
+})
+
+export const ViteTresPlugin = unplugin.vite

packages/tres/src/core/useInstanceCreator/index.ts

@@ -6,7 +6,7 @@ import { useEventListener } from '@vueuse/core'
 
 import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
 import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
-import { useCamera, useCatalogue, useRenderLoop, useTres } from '/@/core/'
+import { useCamera, useRenderLoop, useTres } from '/@/core/'
 import { useLogger } from '/@/composables'
 import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType, TresEvent } from '/@/types'
 

packages/tres/tsconfig.json

@@ -21,7 +21,17 @@
       "/@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "histoire.setup.ts", "histoire.setup.ts"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "histoire.setup.ts",
+    "histoire.setup.ts",
+    "package.json",
+    "plugins/**/*.ts",
+    "plugins/**/*.d.ts"
+  ],
   "exclude": ["dist", "node_modules", "src/**/*.cy.ts", "src/**/*.test.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/tres/vite.config.ts

@@ -7,6 +7,9 @@ import banner from 'vite-plugin-banner'
 import Inspect from 'vite-plugin-inspect'
 
 import dts from 'vite-plugin-dts'
+import Components from 'unplugin-vue-components/vite'
+
+import { ViteTresPlugin } from './plugins/vite-plugin-tres'
 import analyze from 'rollup-plugin-analyzer'
 /* import { visualizer } from 'rollup-plugin-visualizer' */
 import { resolve } from 'pathe'
@@ -32,6 +35,7 @@ export default defineConfig({
     vue({
       isProduction: false,
     }),
+    ViteTresPlugin(),
     dts({
       insertTypesEntry: true,
     }),
@@ -62,7 +66,7 @@ export default defineConfig({
     copyPublicDir: false,
     rollupOptions: {
       plugins: [
-        analyze(),
+        /* analyze(), */
         /*    visualizer({
           open: true,
           gzipSize: true,

pnpm-lock.yaml

@@ -93,6 +93,7 @@ importers:
       rollup-plugin-analyzer: ^4.0.0
       rollup-plugin-visualizer: ^5.9.0
       three: latest
+      unplugin-vue-components: ^0.24.1
       vite: ^4.1.4
       vite-plugin-banner: ^0.7.0
       vite-plugin-dts: 2.0.0-beta.1
@@ -118,6 +119,7 @@ importers:
       rollup-plugin-analyzer: 4.0.0
       rollup-plugin-visualizer: 5.9.0
       three: 0.150.1
+      unplugin-vue-components: 0.24.1
       vite: 4.1.4
       vite-plugin-banner: 0.7.0
       vite-plugin-dts: 2.0.0-beta.1_vite@4.1.4
@@ -4040,6 +4042,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /magic-string/0.30.0:
+    resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
   /make-dir/3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -4151,6 +4160,13 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
+  /minimatch/7.4.2:
+    resolution: {integrity: sha512-xy4q7wou3vUoC9k1xGTXc+awNdGaGVHtFUaey8tiX4H1QRc04DZ/rmDFwNm2EBsuYEhAZ6SgMmYf3InGY6OauA==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimist-options/4.1.0:
     resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
     engines: {node: '>= 6'}
@@ -5554,6 +5570,43 @@ packages:
       - vite
     dev: true
 
+  /unplugin-vue-components/0.24.1:
+    resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.2
+      '@rollup/pluginutils': 5.0.2
+      chokidar: 3.5.3
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      minimatch: 7.4.2
+      resolve: 1.22.1
+      unplugin: 1.1.0
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
+  /unplugin/1.1.0:
+    resolution: {integrity: sha512-I8obQ8Rs/hnkxokRV6g8JKOQFgYNnTd9DL58vcSt5IJ9AkK8wbrtsnzD5hi4BJlvcY536JzfEXj9L6h7j559/A==}
+    dependencies:
+      acorn: 8.8.2
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.5.0
+    dev: true
+
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -5934,6 +5987,15 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /webpack-virtual-modules/0.5.0:
+    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
+    dev: true
+
   /whatwg-encoding/2.0.0:
     resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
     engines: {node: '>=12'}