Merge pull request #89 from crashmax-dev/improve-jsx-wrappers

chore: refactor jsx wrappers
crashmax-dev · Nov 4, 2022 · 9f0cfeb · 9f0cfeb
2 parents 1f01768 + efcc9b5
commit 9f0cfeb
Show file tree

Hide file tree

Showing 13 changed files with 216 additions and 76 deletions.
diff --git a/examples/with-preact/src/App.tsx b/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={{

diff --git a/examples/with-react/src/App.tsx b/examples/with-react/src/App.tsx
@@ -6,12 +6,19 @@ 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()
+    }
   }
 
   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>

diff --git a/examples/with-solid/src/App.tsx b/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,

diff --git a/examples/with-svelte/src/App.svelte b/examples/with-svelte/src/App.svelte
@@ -1,19 +1,40 @@
 <script lang="ts">
   import { Fireworks } from '@fireworks-js/svelte'
   import type { FireworksOptions } from '@fireworks-js/svelte'
+  import { onMount } from 'svelte'
 
+  let fw: Fireworks
   let enabled = true
   let options: FireworksOptions = {
     opacity: 0.5
   }
+
+  function toggleFireworks() {
+    const fireworks = fw.fireworksInstance()
+    if (fireworks.isRunning) {
+      fireworks.waitStop()
+    } else {
+      fireworks.start()
+    }
+  }
+
+  onMount(() => {
+    const fireworks = fw.fireworksInstance()
+    console.log(fireworks)
+  })
 </script>
 
 <main>
-  <button on:click={() => (enabled = !enabled)} class="btn">
-    {enabled ? 'Enabled' : 'Disabled'}
-  </button>
+  <div class="buttons">
+    <button on:click={() => (enabled = !enabled)}>
+      {enabled ? 'Enabled' : 'Disabled'}
+    </button>
+    <button on:click={() => toggleFireworks()}>
+      Toggle
+    </button>
+  </div>
   {#if enabled}
-    <Fireworks {options} class="fireworks" />
+    <Fireworks bind:this={fw} autostart={false} {options} class="fireworks" />
   {/if}
 </main>
 
@@ -27,7 +48,9 @@
     background: #000;
   }
 
-  .btn {
+  .buttons {
+    display: flex;
+    gap: 4px;
     position: absolute;
     z-index: 1;
   }

diff --git a/examples/with-vue/src/App.vue b/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>

diff --git a/packages/fireworks-js/src/index.ts b/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 }
diff --git a/packages/fireworks-js/src/types.ts b/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
+}
diff --git a/packages/preact/src/index.tsx b/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()
       }
     }, [])
 

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -1,22 +1,15 @@
 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
   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)
 
@@ -30,6 +23,9 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
       stop() {
         fireworks.current!.stop()
       },
+      async waitStop() {
+        await fireworks.current!.waitStop()
+      },
       pause() {
         fireworks.current!.pause()
       },
@@ -41,15 +37,23 @@ 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 (!fireworks.current) {
+        fireworks.current = new FireworksJs(container.current!, options)
+      }
+
+      if (autostart) {
+        fireworks.current.start()
+      }
 
       return () => {
-        fireworks.current!.stop(true)
+        fireworks.current!.stop()
       }
     }, [])
 

diff --git a/packages/solid/src/index.tsx b/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 }