feat(packages/vue): improve vue wrapper

Author: crashmax-dev

examples/with-vue/src/App.vue

@@ -1,12 +1,13 @@
 <template>
-  <button
-    @click="enabled = !enabled"
-    :style="{ position: 'absolute', zIndex: 1 }"
-  >
-    {{ enabled ? 'Enabled' : 'Disabled' }}
-  </button>
+  <div class="buttons">
+    <button @click="mounted = !mounted">
+      {{ mounted ? 'Mounted' : 'Unmounted' }}
+    </button>
+    <button @click="startFireworks">Start</button>
+  </div>
   <Fireworks
-    v-if="enabled"
+    ref="fw"
+    v-if="mounted"
     :options="options"
     :style="{
       top: 0,
@@ -20,10 +21,41 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { Fireworks } from '@fireworks-js/vue'
 import type { FireworksOptions } from '@fireworks-js/vue'
 
+const fw = ref<InstanceType<typeof Fireworks>>()
 const options = ref<FireworksOptions>({ opacity: 0.5 })
-const enabled = ref(true)
+const mounted = ref(true)
+
+async function startFireworks() {
+  const { fireworks } = fw.value!
+  fireworks?.start()
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  await fireworks?.waitStop()
+}
+
+onMounted(() => {
+  startFireworks()
+})
+
+watch(fw, () => {
+  if (fw.value) {
+    startFireworks()
+  }
+})
 </script>
+
+<style>
+body {
+  background-color: #000;
+}
+
+.buttons {
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  gap: 4px;
+}
+</style>

packages/vue/package.json

@@ -44,9 +44,9 @@
     "fireworks-js": "workspace:2.6.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "3.0.0",
-    "vue": "3.2.27",
-    "vue-tsc": "0.33.9"
+    "@vitejs/plugin-vue": "3.2.0",
+    "vue": "3.2.41",
+    "vue-tsc": "1.0.9"
   },
   "peerDependencies": {
     "vue": ">=2.7.0"

packages/vue/src/fireworks.vue

@@ -1,11 +1,7 @@
-<template>
-  <div ref="container"></div>
-</template>
-
 <script lang="ts" setup>
 import { Fireworks } from 'fireworks-js'
 import type { FireworksOptions } from 'fireworks-js'
-import { PropType, onMounted, onUnmounted, ref } from 'vue'
+import { PropType, defineExpose, onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
   options: {
@@ -25,4 +21,13 @@ onMounted(() => {
 onUnmounted(() => {
   fireworks.value!.stop()
 })
+
+defineExpose({
+  fireworks,
+  container
+})
 </script>
+
+<template>
+  <div ref="container"></div>
+</template>

packages/vue/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "@crashmax/tsconfig",
   "compilerOptions": {
     "jsx": "preserve",
-    "outDir": "dist"
+    "outDir": "dist",
+    "noEmitOnError": false
   },
   "include": [
     "src"