chore(packages/react): refactor react wrapper

Author: crashmax-dev

examples/with-react/src/App.tsx

@@ -1,17 +1,29 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { Fireworks } from '@fireworks-js/react'
 import type { FireworksHandlers } from '@fireworks-js/react'
 
 export function App() {
   const ref = useRef<FireworksHandlers>(null)
 
   const toggle = () => {
-    ref.current!.isRunning ? ref.current!.stop() : ref.current!.start()
+    if (!ref.current) return
+    if (ref.current.isRunning) {
+      ref.current.stop()
+    } else {
+      ref.current.start()
+    }
   }
 
+  useEffect(() => {
+    // prevent stop
+    ref.current?.stop()
+  }, [])
+
   return (
     <>
-      <div style={{ position: 'absolute', zIndex: 1 }}>
+      <div
+        style={{ display: 'flex', gap: '4px', position: 'absolute', zIndex: 1 }}
+      >
         <button onClick={() => toggle()}>Toggle</button>
         <button onClick={() => ref.current!.clear()}>Clear</button>
       </div>

packages/react/src/index.tsx

@@ -1,23 +1,14 @@
 import { Fireworks as FireworksJs } from 'fireworks-js'
-import type { FireworksOptions } from 'fireworks-js'
+import type { FireworksHandlers, FireworksOptions } from 'fireworks-js'
 import React, { useEffect, useImperativeHandle, useRef } from 'react'
 
 interface FireworksProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode
-  autostart?: boolean
   options?: FireworksOptions
 }
 
-interface FireworksHandlers
-  extends Pick<
-    FireworksJs,
-    'isRunning' | 'start' | 'pause' | 'clear' | 'updateOptions' | 'updateSize'
-  > {
-  stop(): void
-}
-
 const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
-  ({ children, options, autostart = true, ...rest }, ref) => {
+  ({ children, options, ...rest }, ref) => {
     const container = useRef<HTMLDivElement>(null)
     const fireworks = useRef<FireworksJs | null>(null)
 
@@ -29,7 +20,10 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
         fireworks.current!.start()
       },
       stop() {
-        fireworks.current!.stop()
+        fireworks.current!.stop(true)
+      },
+      async waitStop() {
+        await fireworks.current!.waitStop(true)
       },
       pause() {
         fireworks.current!.pause()
@@ -42,14 +36,15 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
       },
       updateSize(size) {
         fireworks.current!.updateSize(size)
+      },
+      updateBoundaries(boundaries) {
+        fireworks.current!.updateBoundaries(boundaries)
       }
     }))
 
     useEffect(() => {
       fireworks.current = new FireworksJs(container.current!, options)
-      if (autostart) {
-        fireworks.current.start()
-      }
+      fireworks.current.start()
 
       return () => {
         fireworks.current!.stop(true)