chore(packages/preact): refactor preact wrapper

Author: crashmax-dev

examples/with-preact/src/App.tsx

@@ -5,17 +5,25 @@ import type { FireworksHandlers } from '@fireworks-js/preact'
 export function App() {
   const ref = useRef<FireworksHandlers>(null)
 
-  const toggle = () => {
-    ref.current!.isRunning ? ref.current!.stop() : ref.current!.start()
+  const toggleFireworks = () => {
+    if (!ref.current) return
+    if (ref.current.isRunning) {
+      ref.current.stop()
+    } else {
+      ref.current.start()
+    }
   }
 
   return (
     <>
-      <div style={{ position: 'absolute', zIndex: 1 }}>
-        <button onClick={() => toggle()}>Toggle</button>
+      <div
+        style={{ display: 'flex', gap: '4px', position: 'absolute', zIndex: 1 }}
+      >
+        <button onClick={() => toggleFireworks()}>Toggle</button>
         <button onClick={() => ref.current!.clear()}>Clear</button>
       </div>
       <Fireworks
+        autostart={false}
         ref={ref}
         options={{ opacity: 0.5 }}
         style={{

packages/preact/src/index.tsx

@@ -1,24 +1,17 @@
 import { Fireworks as FireworksJs } from 'fireworks-js'
-import type { FireworksOptions } from 'fireworks-js'
+import type { FireworksHandlers, FireworksOptions } from 'fireworks-js'
 import type { ComponentChildren } from 'preact'
 import React from 'preact/compat'
 import { useEffect, useImperativeHandle, useRef } from 'preact/hooks'
 
 interface FireworksProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: ComponentChildren
   options?: FireworksOptions
-}
-
-interface FireworksHandlers
-  extends Pick<
-    FireworksJs,
-    'isRunning' | 'start' | 'pause' | 'clear' | 'updateOptions' | 'updateSize'
-  > {
-  stop(): void
+  autostart?: boolean
 }
 
 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)
 
@@ -32,6 +25,9 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
       stop() {
         fireworks.current!.stop()
       },
+      async waitStop() {
+        await fireworks.current!.waitStop()
+      },
       pause() {
         fireworks.current!.pause()
       },
@@ -43,15 +39,20 @@ 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)
-      fireworks.current.start()
+      if (autostart) {
+        fireworks.current.start()
+      }
 
       return () => {
-        fireworks.current!.stop(true)
+        fireworks.current!.stop()
       }
     }, [])