chore(packages/vue): refactor vue wrapper

Author: crashmax-dev

examples/with-vue/src/App.vue

@@ -31,17 +31,13 @@ const options = ref<FireworksOptions>({ opacity: 0.5 })
 const mounted = ref(true)
 
 async function startFireworks() {
-  const { fireworks } = fw.value!
-  fireworks?.start()
+  if (!fw.value) return
+  fw.value.start()
   await new Promise((resolve) => setTimeout(resolve, 1000))
-  await fireworks?.waitStop()
+  await fw.value.waitStop()
 }
 
-watch(fw, () => {
-  if (fw.value) {
-    startFireworks()
-  }
-})
+watch(fw, () => startFireworks())
 </script>
 
 <style>

packages/fireworks-js/src/index.ts

@@ -1,6 +1,6 @@
 import { Fireworks } from './fireworks.js'
-import type { FireworksOptions } from './types.js'
+import type { FireworksHandlers, FireworksOptions } from './types.js'
 
 export { Fireworks }
 export default Fireworks
-export type { FireworksOptions }
+export type { FireworksOptions, FireworksHandlers }

packages/fireworks-js/src/types.ts

@@ -1,3 +1,5 @@
+import type { Fireworks } from './fireworks.js'
+
 export type LineStyle = 'round' | 'square'
 
 export interface IFireworksOptions {
@@ -93,3 +95,18 @@ export type RecursivePartial<T> = {
     ? RecursivePartial<T[P]>
     : T[P]
 }
+
+export interface FireworksHandlers
+  extends Pick<
+    Fireworks,
+    | 'isRunning'
+    | 'start'
+    | 'pause'
+    | 'clear'
+    | 'updateOptions'
+    | 'updateBoundaries'
+    | 'updateSize'
+  > {
+  waitStop(): Promise<void>
+  stop(): void
+}

packages/react/src/index.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useImperativeHandle, useRef } from 'react'
 
 interface FireworksProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode
+  autostart?: boolean
   options?: FireworksOptions
 }
 
@@ -16,7 +17,7 @@ interface FireworksHandlers
 }
 
 const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
-  ({ children, options, ...rest }, ref) => {
+  ({ children, options, autostart = true, ...rest }, ref) => {
     const container = useRef<HTMLDivElement>(null)
     const fireworks = useRef<FireworksJs | null>(null)
 
@@ -46,7 +47,9 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
 
     useEffect(() => {
       fireworks.current = new FireworksJs(container.current!, options)
-      fireworks.current.start()
+      if (autostart) {
+        fireworks.current.start()
+      }
 
       return () => {
         fireworks.current!.stop(true)

packages/vue/src/fireworks.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { Fireworks } from 'fireworks-js'
-import type { FireworksOptions } from 'fireworks-js'
-import { PropType, defineExpose, onMounted, onUnmounted, ref } from 'vue'
+import type { FireworksHandlers, FireworksOptions } from 'fireworks-js'
+import { defineExpose, onMounted, onUnmounted, ref } from 'vue'
+import type { PropType } from 'vue'
 
 const props = defineProps({
   autostart: {
@@ -14,8 +15,8 @@ const props = defineProps({
   }
 })
 
-const fireworks = ref<Fireworks>()
 const container = ref<HTMLDivElement>()
+const fireworks = ref<Fireworks>()
 
 onMounted(() => {
   fireworks.value = new Fireworks(container.value!, props.options)
@@ -28,9 +29,34 @@ onUnmounted(() => {
   fireworks.value!.stop()
 })
 
-defineExpose({
-  fireworks,
-  container
+defineExpose<FireworksHandlers>({
+  get isRunning() {
+    return fireworks.value!.isRunning
+  },
+  start() {
+    fireworks.value!.start()
+  },
+  stop() {
+    fireworks.value!.stop()
+  },
+  async waitStop() {
+    await fireworks.value!.waitStop()
+  },
+  pause() {
+    fireworks.value!.pause()
+  },
+  clear() {
+    fireworks.value!.clear()
+  },
+  updateOptions(options) {
+    fireworks.value!.updateOptions(options)
+  },
+  updateSize(size) {
+    fireworks.value!.updateSize(size)
+  },
+  updateBoundaries(boundaries) {
+    fireworks.value!.updateBoundaries(boundaries)
+  }
 })
 </script>