Merge pull request #78 from crashmax-dev/use-imperative-handle

feat: added `useImperativeHandle` for `react`, `preact` packages

Author: crashmax-dev

README.md

@@ -106,11 +106,6 @@ fireworks.start()
 npm install @fireworks-js/react
 ```
 
-> **Warning**\
-> StrictMode in React 18 will lead useEffect called twice.\
-> Fireworks speed will be broken (in development mode).
-
-
 #### [`@fireworks-js/preact`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-preact)
 
 ```sh

examples/with-preact/src/App.tsx

@@ -1,30 +1,32 @@
-import { useState } from 'preact/hooks'
+import { useRef } from 'preact/hooks'
 import { Fireworks } from '@fireworks-js/preact'
+import type { FireworksHandlers } from '@fireworks-js/preact'
 
 export function App() {
-  const [enabled, setEnabled] = useState(true)
+  const ref = useRef<FireworksHandlers>(null)
+
+  const toggle = () => {
+    ref.current!.isRunning ? ref.current!.stop() : ref.current!.start()
+  }
 
   return (
     <>
-      <button
-        onClick={() => setEnabled(!enabled)}
-        style={{ position: 'absolute', zIndex: 1 }}
-      >
-        {enabled ? 'Enabled' : 'Disabled'}
-      </button>
-      {enabled && (
-        <Fireworks
-          options={{ opacity: 0.5 }}
-          style={{
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            position: 'fixed',
-            background: '#000'
-          }}
-        />
-      )}
+      <div style={{ position: 'absolute', zIndex: 1 }}>
+        <button onClick={() => toggle()}>Toggle</button>
+        <button onClick={() => ref.current!.clear()}>Clear</button>
+      </div>
+      <Fireworks
+        ref={ref}
+        options={{ opacity: 0.5 }}
+        style={{
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          position: 'fixed',
+          background: '#000'
+        }}
+      />
     </>
   )
 }

examples/with-preact/src/index.tsx

@@ -1,5 +1,11 @@
 import { render } from 'preact'
+import React from 'preact/compat'
 import { App } from './App'
 
 const app = document.getElementById('app')!
-render(<App />, app)
+render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  app
+)

examples/with-react/src/App.tsx

@@ -1,30 +1,32 @@
-import { useState } from 'react'
+import { useRef } from 'react'
 import { Fireworks } from '@fireworks-js/react'
+import type { FireworksHandlers } from '@fireworks-js/react'
 
 export function App() {
-  const [enabled, setEnabled] = useState(true)
+  const ref = useRef<FireworksHandlers>(null)
+
+  const toggle = () => {
+    ref.current!.isRunning ? ref.current!.stop() : ref.current!.start()
+  }
 
   return (
     <>
-      <button
-        onClick={() => setEnabled(!enabled)}
-        style={{ position: 'absolute', zIndex: 1 }}
-      >
-        {enabled ? 'Enabled' : 'Disabled'}
-      </button>
-      {enabled && (
-        <Fireworks
-          options={{ opacity: 0.5 }}
-          style={{
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            position: 'fixed',
-            background: '#000'
-          }}
-        />
-      )}
+      <div style={{ position: 'absolute', zIndex: 1 }}>
+        <button onClick={() => toggle()}>Toggle</button>
+        <button onClick={() => ref.current!.clear()}>Clear</button>
+      </div>
+      <Fireworks
+        ref={ref}
+        options={{ opacity: 0.5 }}
+        style={{
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          position: 'fixed',
+          background: '#000'
+        }}
+      />
     </>
   )
 }

examples/with-react/src/index.tsx

@@ -1,5 +1,10 @@
+import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App'
 
 const app = document.querySelector('#app')!
-createRoot(app).render(<App />)
+createRoot(app).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

packages/preact/src/index.tsx

@@ -1,36 +1,71 @@
 import { Fireworks as FireworksJs } from 'fireworks-js'
 import type { FireworksOptions } from 'fireworks-js'
+import type { ComponentChildren } from 'preact'
 import React from 'preact/compat'
-import { useEffect, useRef } from 'preact/hooks'
+import { useEffect, useImperativeHandle, useRef } from 'preact/hooks'
 
-type FireworksProps = {
+interface FireworksProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ComponentChildren
   options?: FireworksOptions
-  style?: React.CSSProperties
 }
 
-const Fireworks: React.FC<FireworksProps> = ({ options, style, children }) => {
-  const container = useRef<HTMLDivElement>(null)
-  const fireworks = useRef<FireworksJs | null>(null)
-
-  useEffect(() => {
-    fireworks.current = new FireworksJs(container.current!, options)
-    fireworks.current.start()
-
-    return () => {
-      fireworks.current!.stop()
-    }
-  }, [])
-
-  return (
-    <div
-      ref={container}
-      style={style}
-    >
-      {children}
-    </div>
-  )
+interface FireworksHandlers
+  extends Pick<
+    FireworksJs,
+    'isRunning' | 'start' | 'pause' | 'clear' | 'updateOptions' | 'updateSize'
+  > {
+  stop(): void
 }
 
+const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
+  ({ children, options, ...rest }, ref) => {
+    const container = useRef<HTMLDivElement>(null)
+    const fireworks = useRef<FireworksJs | null>(null)
+
+    useImperativeHandle(ref, () => ({
+      get isRunning() {
+        return fireworks.current!.isRunning
+      },
+      start() {
+        fireworks.current!.start()
+      },
+      stop() {
+        fireworks.current!.stop()
+      },
+      pause() {
+        fireworks.current!.pause()
+      },
+      clear() {
+        fireworks.current!.clear()
+      },
+      updateOptions(options) {
+        fireworks.current!.updateOptions(options)
+      },
+      updateSize(size) {
+        fireworks.current!.updateSize(size)
+      }
+    }))
+
+    useEffect(() => {
+      fireworks.current = new FireworksJs(container.current!, options)
+      fireworks.current.start()
+
+      return () => {
+        fireworks.current!.stop(true)
+      }
+    }, [])
+
+    return (
+      <div
+        ref={container}
+        {...rest}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
 export { Fireworks }
-export type { FireworksOptions }
 export default Fireworks
+export type { FireworksProps, FireworksHandlers, FireworksOptions }

packages/react/src/index.tsx

@@ -1,38 +1,69 @@
 import { Fireworks as FireworksJs } from 'fireworks-js'
 import type { FireworksOptions } from 'fireworks-js'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useImperativeHandle, useRef } from 'react'
 
-type FireworksProps = {
+interface FireworksProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode
   options?: FireworksOptions
-  style?: React.CSSProperties
 }
 
-const Fireworks = ({ children, options, style }: FireworksProps) => {
-  const container = useRef<HTMLDivElement>(null)
-  const fireworks = useRef<FireworksJs | null>(null)
+interface FireworksHandlers
+  extends Pick<
+    FireworksJs,
+    'isRunning' | 'start' | 'pause' | 'clear' | 'updateOptions' | 'updateSize'
+  > {
+  stop(): void
+}
+
+const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
+  ({ children, options, ...rest }, ref) => {
+    const container = useRef<HTMLDivElement>(null)
+    const fireworks = useRef<FireworksJs | null>(null)
+
+    useImperativeHandle(ref, () => ({
+      get isRunning() {
+        return fireworks.current!.isRunning
+      },
+      start() {
+        fireworks.current!.start()
+      },
+      stop() {
+        fireworks.current!.stop()
+      },
+      pause() {
+        fireworks.current!.pause()
+      },
+      clear() {
+        fireworks.current!.clear()
+      },
+      updateOptions(options) {
+        fireworks.current!.updateOptions(options)
+      },
+      updateSize(size) {
+        fireworks.current!.updateSize(size)
+      }
+    }))
 
-  useEffect(() => {
-    if (!fireworks.current) {
+    useEffect(() => {
       fireworks.current = new FireworksJs(container.current!, options)
-    }
-    fireworks.current.start()
-
-    return () => {
-      fireworks.current!.stop()
-    }
-  }, [])
-
-  return (
-    <div
-      ref={container}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-}
+      fireworks.current.start()
+
+      return () => {
+        fireworks.current!.stop(true)
+      }
+    }, [])
+
+    return (
+      <div
+        ref={container}
+        {...rest}
+      >
+        {children}
+      </div>
+    )
+  }
+)
 
 export { Fireworks }
 export default Fireworks
-export type { FireworksOptions }
+export type { FireworksProps, FireworksHandlers, FireworksOptions }