release(vue): v1.0.0-beta.0

packages/vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newcar/vue",
   "type": "module",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-beta.0",
   "description": "The components and hooks of newcar",
   "author": "BugDuck Team",
   "license": "Apache-2.0",

packages/vue/src/hooks/useCarApp.ts

@@ -1,20 +1,26 @@
-// import type { App, Scene } from '@newcar/core'
-// import { type Ref, onMounted, ref } from './hooks'
+import type { App, CarEngine, Scene } from '@newcar/core'
+import { type Ref, inject, onMounted, ref, watchEffect } from 'vue'
 
-// export function useCarApp(scene: Scene) {
-//   const canvas: Ref<HTMLCanvasElement> = ref(null)
-//   let app: App
-//   onMounted(() => {
-//     if (typeof $carengine !== 'undefined') {
-//       app = $carengine.createApp(canvas.value)
-//       app.checkout(scene)
-//     }
-//     else {
-//       console.warn('[Newcar Warn] Newcar Plugin For Vue is not installed, please refer to')
-//     }
-//   })
-//   return {
-//     canvas,
-//     app,
-//   }
-// }
+export function useCarApp(scene: Scene) {
+  const canvas: Ref<HTMLCanvasElement> = ref(null)
+  let app: App
+  const engine = inject<CarEngine>('carengine')
+
+  const getApp = () => {
+    if (!app && engine) {
+      app = engine.createApp(canvas.value)
+      app.checkout(scene)
+    }
+    return app
+  }
+
+  watchEffect(() => {
+    if (engine)
+      getApp()
+  })
+
+  return {
+    canvas,
+    app,
+  }
+}

packages/vue/src/index.ts

@@ -1,4 +1,2 @@
-// import CarCanvas from './components/CarCanvas.vue'
-// export * from './hooks/useCarApp'
+export * from './hooks/useCarApp'
 export { newcar } from './plugin'
-// export { CarCanvas }

packages/vue/src/plugin/index.ts

@@ -1,8 +1,10 @@
 import { CarEngine } from '@newcar/core'
+import type { App } from 'vue'
 
 export function newcar(wasm: string) {
-  async function install(app: { config: { globalProperties: { $carengine: CarEngine } } }, _options: any) {
-    app.config.globalProperties.$carengine = await new CarEngine().init(wasm)
+  async function install(app: App, _options: any) {
+    const engine = await new CarEngine().init(wasm)
+    app.provide<CarEngine>('carengine', engine)
   }
 
   return { install }