Merge pull request #88 from crashmax-dev/improve-vue

crashmax-dev · web-flow · commit 9439ba93248a · 2022-11-02T21:45:46.000+08:00
feat(packages/vue): improve vue wrapper
diff --git a/examples/with-vue/src/App.vue b/examples/with-vue/src/App.vue
@@ -1,12 +1,14 @@
 <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"
+    :autostart="false"
     :options="options"
     :style="{
       top: 0,
@@ -20,10 +22,37 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { 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()
+}
+
+watch(fw, () => {
+  if (fw.value) {
+    startFireworks()
+  }
+})
 </script>
+
+<style>
+body {
+  background-color: #000;
+}
+
+.buttons {
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  gap: 4px;
+}
+</style>
diff --git a/package.json b/package.json
@@ -43,13 +43,13 @@
   "devDependencies": {
     "@crashmax/prettier-config": "^2.0.4",
     "@crashmax/tsconfig": "1.0.2",
-    "@types/node": "18.8.1",
+    "@types/node": "18.11.9",
     "del-cli": "5.0.0",
-    "tsx": "3.9.0",
-    "turbo": "1.5.5",
+    "tsx": "3.11.0",
+    "turbo": "1.6.3",
     "typescript": "4.8.4",
-    "vite": "3.1.4",
-    "vite-plugin-banner": "0.5.0",
-    "vite-plugin-dts": "1.6.4"
+    "vite": "3.2.2",
+    "vite-plugin-banner": "0.6.1",
+    "vite-plugin-dts": "1.6.6"
   }
 }
diff --git a/packages/fireworks-js/vite.config.ts b/packages/fireworks-js/vite.config.ts
@@ -23,7 +23,11 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'Fireworks',
-      formats: ['es', 'umd'],
+      formats: [
+        'es',
+        'cjs',
+        'umd'
+      ],
       fileName: (format) => `index.${format}.js`
     },
     rollupOptions: {
diff --git a/packages/preact/package.json b/packages/preact/package.json
@@ -43,8 +43,8 @@
     "fireworks-js": "workspace:2.6.0"
   },
   "devDependencies": {
-    "@preact/preset-vite": "2.3.0",
-    "preact": "10.10.0"
+    "@preact/preset-vite": "2.4.0",
+    "preact": "10.11.2"
   },
   "peerDependencies": {
     "preact": ">=8.0.0"
diff --git a/packages/preact/vite.config.ts b/packages/preact/vite.config.ts
@@ -21,7 +21,11 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src/index.tsx'),
       name: 'Fireworks',
-      formats: ['es', 'umd'],
+      formats: [
+        'es',
+        'cjs',
+        'umd'
+      ],
       fileName: (format) => `index.${format}.js`
     },
     rollupOptions: {
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -43,9 +43,9 @@
     "fireworks-js": "workspace:2.6.0"
   },
   "devDependencies": {
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
-    "@vitejs/plugin-react": "2.0.0",
+    "@types/react": "18.0.24",
+    "@types/react-dom": "18.0.8",
+    "@vitejs/plugin-react": "2.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -41,11 +41,11 @@
   },
   "dependencies": {
     "fireworks-js": "workspace:2.6.0",
-    "solid-js": "^1.4.8"
+    "solid-js": "^1.6.1"
   },
   "devDependencies": {
     "solid-js": "1.4.7",
-    "vite-plugin-solid": "2.3.0"
+    "vite-plugin-solid": "2.3.10"
   },
   "peerDependencies": {
     "solid-js": ">=1.0.0"
diff --git a/packages/solid/vite.config.ts b/packages/solid/vite.config.ts
@@ -22,7 +22,11 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src/index.tsx'),
       name: 'Fireworks',
-      formats: ['es', 'umd'],
+      formats: [
+        'es',
+        'cjs',
+        'umd'
+      ],
       fileName: (format) => `index.${format}.js`
     },
     rollupOptions: {
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -42,14 +42,14 @@
     "fireworks-js": "workspace:2.6.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@sveltejs/package": "next",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
+    "@sveltejs/adapter-auto": "1.0.0-next.86",
+    "@sveltejs/kit": "1.0.0-next.531",
+    "@sveltejs/package": "1.0.0-next.5",
+    "svelte": "^3.52.0",
+    "svelte-check": "^2.9.2",
     "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.1",
     "typescript": "^4.7.4",
-    "vite": "^3.1.0"
+    "vite": "^3.2.2"
   }
 }
diff --git a/packages/vue/package.json b/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"
diff --git a/packages/vue/src/fireworks.vue b/packages/vue/src/fireworks.vue
@@ -1,13 +1,13 @@
-<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({
+  autostart: {
+    type: Boolean,
+    default: true
+  },
   options: {
     type: Object as PropType<FireworksOptions>,
     required: false
@@ -19,10 +19,21 @@ const container = ref<HTMLDivElement>()
 
 onMounted(() => {
   fireworks.value = new Fireworks(container.value!, props.options)
-  fireworks.value.start()
+  if (props.autostart) {
+    fireworks.value.start()
+  }
 })
 
 onUnmounted(() => {
   fireworks.value!.stop()
 })
+
+defineExpose({
+  fireworks,
+  container
+})
 </script>
+
+<template>
+  <div ref="container"></div>
+</template>
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
@@ -2,7 +2,8 @@
   "extends": "@crashmax/tsconfig",
   "compilerOptions": {
     "jsx": "preserve",
-    "outDir": "dist"
+    "outDir": "dist",
+    "noEmitOnError": false
   },
   "include": [
     "src"
diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
@@ -20,7 +20,11 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'Fireworks',
-      formats: ['es', 'umd'],
+      formats: [
+        'es',
+        'cjs',
+        'umd'
+      ],
       fileName: (format) => `index.${format}.js`
     },
     rollupOptions: {
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
@@ -20,7 +20,11 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'fireworks-js',
-      formats: ['es', 'umd'],
+      formats: [
+        'es',
+        'cjs',
+        'umd'
+      ],
       fileName: (format) => `index.${format}.js`
     },
     rollupOptions: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
