Skip to content

Commit 35bf9b4

Browse files
thetarnavgithub-actions[bot]
thetarnav
authored and
github-actions[bot]
committed
Format
1 parent d270e6b commit 35bf9b4

File tree

4 files changed

+121
-115
lines changed

4 files changed

+121
-115
lines changed

‎packages/spring/dev/index.tsx‎

Lines changed: 49 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { createSpring } from "../src/index.js"
1+
import { createSpring } from "../src/index.js";
22

33
export default function App() {
44
const [progress, setProgress] = createSpring(0);
55
const [radialProgress, setRadialProgress] = createSpring(0, {
6-
stiffness: 0.1, damping: 0.3
6+
stiffness: 0.1,
7+
damping: 0.3,
78
});
89
const [xy, setXY] = createSpring({ x: 50, y: 50 }, { stiffness: 0.1, damping: 0.3 });
910
const [date, setDate] = createSpring(new Date());
@@ -16,18 +17,19 @@ export default function App() {
1617
if (radialProgress() === 0) setRadialProgress(1);
1718
else setRadialProgress(0);
1819
}
19-
let d = false
20+
let d = false;
2021
function toggleXY() {
21-
if (d = !d) setXY({ x: 200, y: 200 });
22+
if ((d = !d)) setXY({ x: 200, y: 200 });
2223
else setXY({ x: 50, y: 50 });
2324
}
2425
function toggleDate() {
2526
if (date().getDate() === new Date("2024-12-01").getDate()) setDate(new Date("2024-04-14"));
2627
else setDate(new Date("2024-12-01"));
2728
}
2829

29-
return <>
30-
<style>{`
30+
return (
31+
<>
32+
<style>{`
3133
progress {
3234
color: #a3e635;
3335
}
@@ -69,53 +71,50 @@ progress::-moz-progress-bar {
6971
stroke: #a3e635;
7072
}
7173
`}</style>
72-
<div class="flex flex-col items-center justify-center gap-8">
73-
<div class="flex gap-3 p-2">
74-
<button onClick={toggleProgress}>Toggle progress</button>
75-
<button onClick={toggleRadialProgress}>Toggle Radial progress</button>
76-
<button onClick={toggleXY}>Toggle XY</button>
77-
<button onClick={toggleDate}>Toggle Date</button>
78-
</div>
74+
<div class="flex flex-col items-center justify-center gap-8">
75+
<div class="flex gap-3 p-2">
76+
<button onClick={toggleProgress}>Toggle progress</button>
77+
<button onClick={toggleRadialProgress}>Toggle Radial progress</button>
78+
<button onClick={toggleXY}>Toggle XY</button>
79+
<button onClick={toggleDate}>Toggle Date</button>
80+
</div>
7981

80-
{/* Progress */}
81-
<div class="flex flex-col items-center">
82-
<progress
83-
class="progress w-56"
84-
value={progress() * 100}
85-
max="100"
86-
></progress>
82+
{/* Progress */}
83+
<div class="flex flex-col items-center">
84+
<progress class="progress w-56" value={progress() * 100} max="100"></progress>
8785

88-
<p class="text-white">{(progress() * 100).toFixed(0)}%</p>
89-
</div>
86+
<p class="text-white">{(progress() * 100).toFixed(0)}%</p>
87+
</div>
88+
89+
{/* Radial progress */}
90+
<div class="flex flex-col items-center gap-4">
91+
<svg
92+
width="120"
93+
height="120"
94+
viewBox="0 0 250 250"
95+
class="circular-progress"
96+
style={`--progress:${radialProgress() * 100};`}
97+
>
98+
<circle class="bg"></circle>
99+
<circle class="fg"></circle>
100+
</svg>
101+
<span class="text-white">{(radialProgress() * 100).toFixed(0)}%</span>
102+
</div>
90103

91-
{/* Radial progress */}
92-
<div class="flex flex-col items-center gap-4">
93-
<svg
94-
width="120"
95-
height="120"
96-
viewBox="0 0 250 250"
97-
class="circular-progress"
98-
style={`--progress:${radialProgress() * 100};`}
104+
{/* XY */}
105+
<div
106+
class="flex items-center justify-center whitespace-nowrap rounded-lg bg-lime-400 text-sm font-bold text-black"
107+
style={{
108+
width: xy().x + "px",
109+
height: 100 + "px",
110+
}}
99111
>
100-
<circle class="bg"></circle>
101-
<circle class="fg"></circle>
102-
</svg>
103-
<span class="text-white">{(radialProgress() * 100).toFixed(0)}%</span>
104-
</div>
112+
{xy().x.toFixed(0)}x{xy().y.toFixed(0)}
113+
</div>
105114

106-
{/* XY */}
107-
<div
108-
class="bg-lime-400 rounded-lg flex items-center justify-center whitespace-nowrap text-black text-sm font-bold"
109-
style={{
110-
width: xy().x + "px",
111-
height: 100 + "px",
112-
}}
113-
>
114-
{xy().x.toFixed(0)}x{xy().y.toFixed(0)}
115+
{/* Date */}
116+
<div>{date() + ""}</div>
115117
</div>
116-
117-
{/* Date */}
118-
<div>{date()+""}</div>
119-
</div>
120-
</>
121-
};
118+
</>
119+
);
120+
}

‎packages/spring/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"version": "0.0.1",
44
"description": "Primitive that creates spring physics functions.",
55
"author": "Carlo Taleon <[email protected]>",
6-
"contributors": ["Damian Tarnawski <[email protected]>"],
6+
"contributors": [
7+
"Damian Tarnawski <[email protected]>"
8+
],
79
"license": "MIT",
810
"homepage": "https://primitives.solidjs.community/package/spring",
911
"repository": {

‎packages/spring/src/index.ts‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export type SpringTarget =
5252
*/
5353
export type WidenSpringTarget<T> = T extends number ? number : T;
5454

55-
export type SpringSetterOptions = { hard?: boolean; soft?: boolean | number }
55+
export type SpringSetterOptions = { hard?: boolean; soft?: boolean | number };
5656
export type SpringSetter<T> = (
5757
newValue: T | ((prev: T) => T),
5858
opts?: SpringSetterOptions,
@@ -83,56 +83,59 @@ export function createSpring<T extends SpringTarget>(
8383
const { stiffness = 0.15, damping = 0.8, precision = 0.01 } = options;
8484

8585
if (isServer) {
86-
return [signal as any, ((param: any, opts: SpringSetterOptions = {}) => {
87-
if (opts.hard || signal() == null || (stiffness >= 1 && damping >= 1)) {
88-
setSignal(param);
89-
return Promise.resolve();
90-
}
91-
return new Promise(() => {});
92-
}) as any]
86+
return [
87+
signal as any,
88+
((param: any, opts: SpringSetterOptions = {}) => {
89+
if (opts.hard || signal() == null || (stiffness >= 1 && damping >= 1)) {
90+
setSignal(param);
91+
return Promise.resolve();
92+
}
93+
return new Promise(() => {});
94+
}) as any,
95+
];
9396
}
9497

9598
let value_current = initialValue;
9699
let value_last = initialValue;
97100
let value_target = initialValue;
98101
let inv_mass = 1;
99102
let inv_mass_recovery_rate = 0;
100-
let raf_id = 0
101-
let settled = true
103+
let raf_id = 0;
104+
let settled = true;
102105
let time_last = 0;
103-
let time_delta = 0
104-
let resolve = () => {}
106+
let time_delta = 0;
107+
let resolve = () => {};
105108

106109
const cleanup = onCleanup(() => {
107-
cancelAnimationFrame(raf_id)
108-
raf_id = 0
109-
resolve()
110-
})
110+
cancelAnimationFrame(raf_id);
111+
raf_id = 0;
112+
resolve();
113+
});
111114

112115
const frame: FrameRequestCallback = time => {
113-
time_delta = Math.max(1 / 60, (time - time_last) * 60 / 1000) // guard against d<=0
114-
time_last = time
116+
time_delta = Math.max(1 / 60, ((time - time_last) * 60) / 1000); // guard against d<=0
117+
time_last = time;
115118

116-
inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1)
117-
settled = true
119+
inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
120+
settled = true;
118121

119-
let new_value = tick(value_last, value_current, value_target)
120-
value_last = value_current
121-
setSignal(value_current = new_value)
122+
let new_value = tick(value_last, value_current, value_target);
123+
value_last = value_current;
124+
setSignal((value_current = new_value));
122125

123126
if (settled) {
124-
cleanup()
127+
cleanup();
125128
} else {
126-
raf_id = requestAnimationFrame(frame)
129+
raf_id = requestAnimationFrame(frame);
127130
}
128-
}
131+
};
129132

130133
const set: SpringSetter<T> = (param, opts = {}) => {
131134
value_target = typeof param === "function" ? param(value_current) : param;
132135

133136
if (opts.hard || (stiffness >= 1 && damping >= 1)) {
134-
cleanup()
135-
setSignal(_ => value_current = value_last = value_target);
137+
cleanup();
138+
setSignal(_ => (value_current = value_last = value_target));
136139
return Promise.resolve();
137140
}
138141

@@ -142,11 +145,11 @@ export function createSpring<T extends SpringTarget>(
142145
}
143146

144147
if (raf_id === 0) {
145-
time_last = performance.now()
146-
raf_id = requestAnimationFrame(frame)
148+
time_last = performance.now();
149+
raf_id = requestAnimationFrame(frame);
147150
}
148-
149-
return new Promise<void>(r => resolve = r);
151+
152+
return new Promise<void>(r => (resolve = r));
150153
};
151154

152155
const tick = (last: T, current: T, target: T): any => {
@@ -172,7 +175,7 @@ export function createSpring<T extends SpringTarget>(
172175
}
173176

174177
if (typeof current === "object") {
175-
const next = {...current};
178+
const next = { ...current };
176179
for (const k in current) {
177180
// @ts-expect-error
178181
next[k] = tick(last[k], current[k], target[k]);

‎packages/spring/test/index.test.ts‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import { createEffect, createRoot, createSignal } from "solid-js";
2-
import { describe, expect, it, vi, afterAll, } from "vitest";
2+
import { describe, expect, it, vi, afterAll } from "vitest";
33
import { createDerivedSpring, createSpring } from "../src/index.js";
44

5-
let _time = 0
5+
let _time = 0;
66
let _raf_last_id = 0;
77
let _raf_callbacks_old = new Map<number, FrameRequestCallback>();
88
let _raf_callbacks_new = new Map<number, FrameRequestCallback>();
99

1010
function _progress_time(by: number) {
11-
_time += by
11+
_time += by;
1212
_raf_callbacks_old = _raf_callbacks_new;
1313
_raf_callbacks_new = new Map();
1414
_raf_callbacks_old.forEach(c => c(_time));
1515
_raf_callbacks_old.clear();
1616
}
1717

18-
let _now = performance.now
19-
performance.now = () => _time
18+
let _now = performance.now;
19+
performance.now = () => _time;
2020
afterAll(() => {
21-
performance.now = _now
22-
})
21+
performance.now = _now;
22+
});
2323

2424
vi.stubGlobal("requestAnimationFrame", function (callback: FrameRequestCallback): number {
2525
const id = _raf_last_id++;
@@ -31,37 +31,39 @@ vi.stubGlobal("cancelAnimationFrame", function (id: number): void {
3131
});
3232

3333
describe("createSpring", () => {
34-
3534
it("returns values", () => {
3635
const [[spring, setSpring], dispose] = createRoot(d => [createSpring({ progress: 0 }), d]);
3736
expect(spring().progress).toBe(0);
3837
dispose();
3938
});
4039

4140
it("Setter does not subscribe to self", () => {
42-
let runs = 0
43-
const [signal, setSignal] = createSignal(0)
44-
41+
let runs = 0;
42+
const [signal, setSignal] = createSignal(0);
43+
4544
const [setSpring, dispose] = createRoot(dispose => {
46-
const [, setSpring] = createSpring(0)
45+
const [, setSpring] = createSpring(0);
4746

4847
createEffect(() => {
49-
runs++
50-
setSpring(p => {
51-
signal() // this one should be tracked
52-
return p+1
53-
}, { hard: true })
54-
})
55-
56-
return [setSpring, dispose]
48+
runs++;
49+
setSpring(
50+
p => {
51+
signal(); // this one should be tracked
52+
return p + 1;
53+
},
54+
{ hard: true },
55+
);
56+
});
57+
58+
return [setSpring, dispose];
5759
});
58-
expect(runs).toBe(1)
60+
expect(runs).toBe(1);
5961

60-
setSpring(p => p+1, { hard: true })
61-
expect(runs).toBe(1)
62+
setSpring(p => p + 1, { hard: true });
63+
expect(runs).toBe(1);
6264

63-
setSignal(1)
64-
expect(runs).toBe(2)
65+
setSignal(1);
66+
expect(runs).toBe(2);
6567

6668
dispose();
6769
});
@@ -157,7 +159,7 @@ describe("createSpring", () => {
157159
setSpring(50);
158160
expect(spring()).toBe(0);
159161

160-
_progress_time(300)
162+
_progress_time(300);
161163

162164
// spring() should move towards 50 but not 50 after 300ms. (This is estimated spring interpolation is hard to pinpoint exactly)
163165
expect(spring()).not.toBe(50);
@@ -166,17 +168,17 @@ describe("createSpring", () => {
166168
});
167169

168170
it("updates array of objects toward target", () => {
169-
const start = [{foo: 1}, {foo: 2}, {foo: 3}];
170-
const end = [{foo: 20}, {foo: 15}, {foo: 20}];
171+
const start = [{ foo: 1 }, { foo: 2 }, { foo: 3 }];
172+
const end = [{ foo: 20 }, { foo: 15 }, { foo: 20 }];
171173

172174
const [[spring, setSpring], dispose] = createRoot(d => [createSpring(start), d]);
173175

174176
expect(spring()).toMatchObject(start);
175177
setSpring(end);
176178

177-
_progress_time(300)
179+
_progress_time(300);
178180
for (let i = 0; i < start.length; i++) {
179-
expect(spring()[i]!.foo).toBeGreaterThan(end[i]!.foo/2);
181+
expect(spring()[i]!.foo).toBeGreaterThan(end[i]!.foo / 2);
180182
}
181183

182184
dispose();
@@ -192,7 +194,7 @@ describe("createDerivedSpring", () => {
192194
setSignal(50); // Set to 100 here.
193195
expect(spring()).toBe(0);
194196

195-
_progress_time(300)
197+
_progress_time(300);
196198

197199
// spring() should move towards 50 but not 50 after 300ms. (This is estimated spring interpolation is hard to pinpoint exactly)
198200
expect(spring()).not.toBe(50);

0 commit comments

Comments
 (0)