chore(packages/solid): refactor solidjs wrapper

Author: crashmax-dev

examples/with-solid/src/App.tsx

@@ -1,19 +1,39 @@
 import { Show, createSignal } from 'solid-js'
-import { Fireworks } from '@fireworks-js/solid'
+import { Fireworks, FireworksHandlers } from '@fireworks-js/solid'
 
 export function App() {
   const [enabled, setEnabled] = createSignal(true)
+  let fireworks: FireworksHandlers
+
+  // https://github.com/solidjs/solid/issues/116#issuecomment-583247897
+  setTimeout(() => console.log(fireworks))
+
+  const toggleFireworks = () => {
+    if (fireworks.isRunning) {
+      fireworks.waitStop()
+    } else {
+      fireworks.start()
+    }
+  }
 
   return (
     <>
-      <button
-        onClick={() => setEnabled(!enabled())}
-        style={{ position: 'absolute', 'z-index': 1 }}
+      <div
+        style={{
+          display: 'flex',
+          gap: '4px',
+          position: 'absolute',
+          'z-index': 1
+        }}
       >
-        {enabled() ? 'Enabled' : 'Disabled'}
-      </button>
+        <button onClick={() => setEnabled(!enabled())}>
+          {enabled() ? 'Enabled' : 'Disabled'}
+        </button>
+        <button onClick={() => toggleFireworks()}>Toggle</button>
+      </div>
       <Show when={enabled()}>
         <Fireworks
+          ref={(ref) => (fireworks = ref)}
           options={{ opacity: 0.5 }}
           style={{
             top: 0,

packages/solid/src/index.tsx

@@ -1,24 +1,32 @@
 import { Fireworks as FireworksJS } from 'fireworks-js'
-import type { FireworksOptions } from 'fireworks-js'
-import { onCleanup, onMount } from 'solid-js'
+import type { FireworksHandlers, FireworksOptions } from 'fireworks-js'
+import { mergeProps, onCleanup, onMount } from 'solid-js'
 import type { JSX, ParentComponent } from 'solid-js'
 
-type FireworksProps = {
+interface FireworksProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'ref'> {
   options?: FireworksOptions
-  style?: JSX.CSSProperties
+  autostart?: boolean
+  ref?: (handlers: FireworksHandlers) => void
 }
 
-const Fireworks: ParentComponent<FireworksProps> = ({
-  options,
-  style,
-  children
-}) => {
+const Fireworks: ParentComponent<FireworksProps> = (props) => {
+  const { autostart, options, children, ref, ...rest } = mergeProps(
+    { autostart: true },
+    props
+  )
   let container: HTMLDivElement | undefined
   let fireworks: FireworksJS | undefined
 
   onMount(() => {
     fireworks = new FireworksJS(container!, options)
-    fireworks.start()
+    if (autostart) {
+      fireworks.start()
+    }
+
+    if (ref) {
+      ref(fireworks)
+    }
 
     onCleanup(() => {
       fireworks!.stop()
@@ -28,7 +36,7 @@ const Fireworks: ParentComponent<FireworksProps> = ({
   return (
     <div
       ref={container}
-      style={style}
+      {...rest}
     >
       {children}
     </div>
@@ -37,4 +45,4 @@ const Fireworks: ParentComponent<FireworksProps> = ({
 
 export { Fireworks }
 export default Fireworks
-export type { FireworksOptions }
+export type { FireworksOptions, FireworksHandlers }