Skip to content

Commit 9f0cfeb

Browse files
crashmax-devcrashmax-dev
authored
Merge pull request #89 from crashmax-dev/improve-jsx-wrappers
chore: refactor jsx wrappers
2 parents 1f01768 + efcc9b5 commit 9f0cfeb

File tree

13 files changed

+216
-76
lines changed

13 files changed

+216
-76
lines changed

‎examples/with-preact/src/App.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,25 @@ import type { FireworksHandlers } from '@fireworks-js/preact'
55
export function App() {
66
const ref = useRef<FireworksHandlers>(null)
77

8-
const toggle = () => {
9-
ref.current!.isRunning ? ref.current!.stop() : ref.current!.start()
8+
const toggleFireworks = () => {
9+
if (!ref.current) return
10+
if (ref.current.isRunning) {
11+
ref.current.stop()
12+
} else {
13+
ref.current.start()
14+
}
1015
}
1116

1217
return (
1318
<>
14-
<div style={{ position: 'absolute', zIndex: 1 }}>
15-
<button onClick={() => toggle()}>Toggle</button>
19+
<div
20+
style={{ display: 'flex', gap: '4px', position: 'absolute', zIndex: 1 }}
21+
>
22+
<button onClick={() => toggleFireworks()}>Toggle</button>
1623
<button onClick={() => ref.current!.clear()}>Clear</button>
1724
</div>
1825
<Fireworks
26+
autostart={false}
1927
ref={ref}
2028
options={{ opacity: 0.5 }}
2129
style={{

‎examples/with-react/src/App.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,19 @@ export function App() {
66
const ref = useRef<FireworksHandlers>(null)
77

88
const toggle = () => {
9-
ref.current!.isRunning ? ref.current!.stop() : ref.current!.start()
9+
if (!ref.current) return
10+
if (ref.current.isRunning) {
11+
ref.current.stop()
12+
} else {
13+
ref.current.start()
14+
}
1015
}
1116

1217
return (
1318
<>
14-
<div style={{ position: 'absolute', zIndex: 1 }}>
19+
<div
20+
style={{ display: 'flex', gap: '4px', position: 'absolute', zIndex: 1 }}
21+
>
1522
<button onClick={() => toggle()}>Toggle</button>
1623
<button onClick={() => ref.current!.clear()}>Clear</button>
1724
</div>

‎examples/with-solid/src/App.tsx‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,39 @@
11
import { Show, createSignal } from 'solid-js'
2-
import { Fireworks } from '@fireworks-js/solid'
2+
import { Fireworks, FireworksHandlers } from '@fireworks-js/solid'
33

44
export function App() {
55
const [enabled, setEnabled] = createSignal(true)
6+
let fireworks: FireworksHandlers
7+
8+
// https://github.com/solidjs/solid/issues/116#issuecomment-583247897
9+
setTimeout(() => console.log(fireworks))
10+
11+
const toggleFireworks = () => {
12+
if (fireworks.isRunning) {
13+
fireworks.waitStop()
14+
} else {
15+
fireworks.start()
16+
}
17+
}
618

719
return (
820
<>
9-
<button
10-
onClick={() => setEnabled(!enabled())}
11-
style={{ position: 'absolute', 'z-index': 1 }}
21+
<div
22+
style={{
23+
display: 'flex',
24+
gap: '4px',
25+
position: 'absolute',
26+
'z-index': 1
27+
}}
1228
>
13-
{enabled() ? 'Enabled' : 'Disabled'}
14-
</button>
29+
<button onClick={() => setEnabled(!enabled())}>
30+
{enabled() ? 'Enabled' : 'Disabled'}
31+
</button>
32+
<button onClick={() => toggleFireworks()}>Toggle</button>
33+
</div>
1534
<Show when={enabled()}>
1635
<Fireworks
36+
ref={(ref) => (fireworks = ref)}
1737
options={{ opacity: 0.5 }}
1838
style={{
1939
top: 0,

‎examples/with-svelte/src/App.svelte‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,40 @@
11
<script lang="ts">
22
import { Fireworks } from '@fireworks-js/svelte'
33
import type { FireworksOptions } from '@fireworks-js/svelte'
4+
import { onMount } from 'svelte'
45
6+
let fw: Fireworks
57
let enabled = true
68
let options: FireworksOptions = {
79
opacity: 0.5
810
}
11+
12+
function toggleFireworks() {
13+
const fireworks = fw.fireworksInstance()
14+
if (fireworks.isRunning) {
15+
fireworks.waitStop()
16+
} else {
17+
fireworks.start()
18+
}
19+
}
20+
21+
onMount(() => {
22+
const fireworks = fw.fireworksInstance()
23+
console.log(fireworks)
24+
})
925
</script>
1026

1127
<main>
12-
<button on:click={() => (enabled = !enabled)} class="btn">
13-
{enabled ? 'Enabled' : 'Disabled'}
14-
</button>
28+
<div class="buttons">
29+
<button on:click={() => (enabled = !enabled)}>
30+
{enabled ? 'Enabled' : 'Disabled'}
31+
</button>
32+
<button on:click={() => toggleFireworks()}>
33+
Toggle
34+
</button>
35+
</div>
1536
{#if enabled}
16-
<Fireworks {options} class="fireworks" />
37+
<Fireworks bind:this={fw} autostart={false} {options} class="fireworks" />
1738
{/if}
1839
</main>
1940

@@ -27,7 +48,9 @@
2748
background: #000;
2849
}
2950
30-
.btn {
51+
.buttons {
52+
display: flex;
53+
gap: 4px;
3154
position: absolute;
3255
z-index: 1;
3356
}

‎examples/with-vue/src/App.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,13 @@ const options = ref<FireworksOptions>({ opacity: 0.5 })
3131
const mounted = ref(true)
3232
3333
async function startFireworks() {
34-
const { fireworks } = fw.value!
35-
fireworks?.start()
34+
if (!fw.value) return
35+
fw.value.start()
3636
await new Promise((resolve) => setTimeout(resolve, 1000))
37-
await fireworks?.waitStop()
37+
await fw.value.waitStop()
3838
}
3939
40-
watch(fw, () => {
41-
if (fw.value) {
42-
startFireworks()
43-
}
44-
})
40+
watch(fw, () => startFireworks())
4541
</script>
4642

4743
<style>

‎packages/fireworks-js/src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Fireworks } from './fireworks.js'
2-
import type { FireworksOptions } from './types.js'
2+
import type { FireworksHandlers, FireworksOptions } from './types.js'
33

44
export { Fireworks }
55
export default Fireworks
6-
export type { FireworksOptions }
6+
export type { FireworksOptions, FireworksHandlers }

‎packages/fireworks-js/src/types.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { Fireworks } from './fireworks.js'
2+
13
export type LineStyle = 'round' | 'square'
24

35
export interface IFireworksOptions {
@@ -93,3 +95,18 @@ export type RecursivePartial<T> = {
9395
? RecursivePartial<T[P]>
9496
: T[P]
9597
}
98+
99+
export interface FireworksHandlers
100+
extends Pick<
101+
Fireworks,
102+
| 'isRunning'
103+
| 'start'
104+
| 'pause'
105+
| 'clear'
106+
| 'updateOptions'
107+
| 'updateBoundaries'
108+
| 'updateSize'
109+
> {
110+
waitStop(): Promise<void>
111+
stop(): void
112+
}

‎packages/preact/src/index.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
11
import { Fireworks as FireworksJs } from 'fireworks-js'
2-
import type { FireworksOptions } from 'fireworks-js'
2+
import type { FireworksHandlers, FireworksOptions } from 'fireworks-js'
33
import type { ComponentChildren } from 'preact'
44
import React from 'preact/compat'
55
import { useEffect, useImperativeHandle, useRef } from 'preact/hooks'
66

77
interface FireworksProps extends React.HTMLAttributes<HTMLDivElement> {
88
children?: ComponentChildren
99
options?: FireworksOptions
10-
}
11-
12-
interface FireworksHandlers
13-
extends Pick<
14-
FireworksJs,
15-
'isRunning' | 'start' | 'pause' | 'clear' | 'updateOptions' | 'updateSize'
16-
> {
17-
stop(): void
10+
autostart?: boolean
1811
}
1912

2013
const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
21-
({ children, options, ...rest }, ref) => {
14+
({ children, options, autostart = true, ...rest }, ref) => {
2215
const container = useRef<HTMLDivElement>(null)
2316
const fireworks = useRef<FireworksJs | null>(null)
2417

@@ -32,6 +25,9 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
3225
stop() {
3326
fireworks.current!.stop()
3427
},
28+
async waitStop() {
29+
await fireworks.current!.waitStop()
30+
},
3531
pause() {
3632
fireworks.current!.pause()
3733
},
@@ -43,15 +39,20 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
4339
},
4440
updateSize(size) {
4541
fireworks.current!.updateSize(size)
42+
},
43+
updateBoundaries(boundaries) {
44+
fireworks.current!.updateBoundaries(boundaries)
4645
}
4746
}))
4847

4948
useEffect(() => {
5049
fireworks.current = new FireworksJs(container.current!, options)
51-
fireworks.current.start()
50+
if (autostart) {
51+
fireworks.current.start()
52+
}
5253

5354
return () => {
54-
fireworks.current!.stop(true)
55+
fireworks.current!.stop()
5556
}
5657
}, [])
5758

‎packages/react/src/index.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
import { Fireworks as FireworksJs } from 'fireworks-js'
2-
import type { FireworksOptions } from 'fireworks-js'
2+
import type { FireworksHandlers, FireworksOptions } from 'fireworks-js'
33
import React, { useEffect, useImperativeHandle, useRef } from 'react'
44

55
interface FireworksProps extends React.HTMLAttributes<HTMLDivElement> {
66
children?: React.ReactNode
77
options?: FireworksOptions
8-
}
9-
10-
interface FireworksHandlers
11-
extends Pick<
12-
FireworksJs,
13-
'isRunning' | 'start' | 'pause' | 'clear' | 'updateOptions' | 'updateSize'
14-
> {
15-
stop(): void
8+
autostart?: boolean
169
}
1710

1811
const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
19-
({ children, options, ...rest }, ref) => {
12+
({ children, options, autostart = true, ...rest }, ref) => {
2013
const container = useRef<HTMLDivElement>(null)
2114
const fireworks = useRef<FireworksJs | null>(null)
2215

@@ -30,6 +23,9 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
3023
stop() {
3124
fireworks.current!.stop()
3225
},
26+
async waitStop() {
27+
await fireworks.current!.waitStop()
28+
},
3329
pause() {
3430
fireworks.current!.pause()
3531
},
@@ -41,15 +37,23 @@ const Fireworks = React.forwardRef<FireworksHandlers, FireworksProps>(
4137
},
4238
updateSize(size) {
4339
fireworks.current!.updateSize(size)
40+
},
41+
updateBoundaries(boundaries) {
42+
fireworks.current!.updateBoundaries(boundaries)
4443
}
4544
}))
4645

4746
useEffect(() => {
48-
fireworks.current = new FireworksJs(container.current!, options)
49-
fireworks.current.start()
47+
if (!fireworks.current) {
48+
fireworks.current = new FireworksJs(container.current!, options)
49+
}
50+
51+
if (autostart) {
52+
fireworks.current.start()
53+
}
5054

5155
return () => {
52-
fireworks.current!.stop(true)
56+
fireworks.current!.stop()
5357
}
5458
}, [])
5559

‎packages/solid/src/index.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
import { Fireworks as FireworksJS } from 'fireworks-js'
2-
import type { FireworksOptions } from 'fireworks-js'
3-
import { onCleanup, onMount } from 'solid-js'
2+
import type { FireworksHandlers, FireworksOptions } from 'fireworks-js'
3+
import { mergeProps, onCleanup, onMount } from 'solid-js'
44
import type { JSX, ParentComponent } from 'solid-js'
55

6-
type FireworksProps = {
6+
interface FireworksProps
7+
extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'ref'> {
78
options?: FireworksOptions
8-
style?: JSX.CSSProperties
9+
autostart?: boolean
10+
ref?: (handlers: FireworksHandlers) => void
911
}
1012

11-
const Fireworks: ParentComponent<FireworksProps> = ({
12-
options,
13-
style,
14-
children
15-
}) => {
13+
const Fireworks: ParentComponent<FireworksProps> = (props) => {
14+
const { autostart, options, children, ref, ...rest } = mergeProps(
15+
{ autostart: true },
16+
props
17+
)
1618
let container: HTMLDivElement | undefined
1719
let fireworks: FireworksJS | undefined
1820

1921
onMount(() => {
2022
fireworks = new FireworksJS(container!, options)
21-
fireworks.start()
23+
if (autostart) {
24+
fireworks.start()
25+
}
26+
27+
if (ref) {
28+
ref(fireworks)
29+
}
2230

2331
onCleanup(() => {
2432
fireworks!.stop()
@@ -28,7 +36,7 @@ const Fireworks: ParentComponent<FireworksProps> = ({
2836
return (
2937
<div
3038
ref={container}
31-
style={style}
39+
{...rest}
3240
>
3341
{children}
3442
</div>
@@ -37,4 +45,4 @@ const Fireworks: ParentComponent<FireworksProps> = ({
3745

3846
export { Fireworks }
3947
export default Fireworks
40-
export type { FireworksOptions }
48+
export type { FireworksOptions, FireworksHandlers }

0 commit comments

Comments
 (0)