@petit-kit/scoped 0.0.6-beta.1 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +179 -161
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +15 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/plugins/index.d.ts +1 -0
- package/dist/plugins/index.d.ts.map +1 -1
- package/dist/plugins/localstorage/index.d.ts +57 -0
- package/dist/plugins/localstorage/index.d.ts.map +1 -0
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<br />
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<img src='https://github.com/petit-kit/scoped/blob/main/assets/logo.
|
|
4
|
+
<img src='https://github.com/petit-kit/scoped/blob/main/assets/logo.svg?raw=true' width="400px" />
|
|
5
5
|
</p>
|
|
6
6
|
<br />
|
|
7
7
|
<br />
|
|
8
8
|
|
|
9
|
-
# Scoped - 0.0.
|
|
9
|
+
# Scoped - 0.0.7
|
|
10
10
|
|
|
11
11
|
### A lightweight, framework-agnostic library for building web components with reactive state, bindings, lifecycle hooks, template-based rendering and plugins.
|
|
12
12
|
|
|
13
|
-
**4.
|
|
13
|
+
**4.2 Kb** Gzipped - **12.7kb** Minified
|
|
14
14
|
|
|
15
15
|
<br />
|
|
16
16
|
|
|
@@ -43,6 +43,8 @@ It encourages expressiveness and rapid prototyping, giving you fine-grained cont
|
|
|
43
43
|
|
|
44
44
|
# Installation
|
|
45
45
|
|
|
46
|
+
To install **Scoped**, you can use your favorite package manager.
|
|
47
|
+
|
|
46
48
|
```bash
|
|
47
49
|
npm install @petit-kit/scoped
|
|
48
50
|
# or
|
|
@@ -53,6 +55,8 @@ pnpm install @petit-kit/scoped
|
|
|
53
55
|
|
|
54
56
|
# Getting started
|
|
55
57
|
|
|
58
|
+
To get started with **Scoped**, you can create a new component using the `define` function.
|
|
59
|
+
|
|
56
60
|
```javascript
|
|
57
61
|
import { define } from '@petit-kit/scoped';
|
|
58
62
|
|
|
@@ -70,15 +74,15 @@ define(
|
|
|
70
74
|
};
|
|
71
75
|
|
|
72
76
|
return () => `
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
<div>
|
|
78
|
+
<input
|
|
79
|
+
type="range" min="0" max="100" step="1"
|
|
80
|
+
bind:value="value"
|
|
81
|
+
on:input="handleChange"
|
|
82
|
+
/>
|
|
83
|
+
<c-number ref="number" bind:value="value"></c-number>
|
|
84
|
+
</div>
|
|
85
|
+
`;
|
|
82
86
|
}
|
|
83
87
|
);
|
|
84
88
|
```
|
|
@@ -139,29 +143,30 @@ The `SetupFunction` is run only once on mount and should return a function that
|
|
|
139
143
|
|
|
140
144
|
`host` is the component itself, it got those methods:
|
|
141
145
|
|
|
142
|
-
| Method
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
|
146
|
+
| Method | Description |
|
|
147
|
+
| ----------------------------- | ------------------------------------------ |
|
|
148
|
+
| **host.setState(partial)** | Update state + full re-render |
|
|
149
|
+
| **host.updateState(partial)** | Update state, effects only (no re-render) |
|
|
150
|
+
| **host.setProps(partial)** | Update props programmatically |
|
|
151
|
+
| **host.scheduleUpdate()** | Schedule effects on next RAF |
|
|
152
|
+
| **host.update(fullRender)** | Force update (full or partial) |
|
|
153
|
+
| **host.forceRender()** | Force re-render even if template unchanged |
|
|
154
|
+
| **host.destroy()** | Clean up and run destroy callbacks |
|
|
151
155
|
|
|
152
156
|
## Templating
|
|
153
157
|
|
|
154
|
-
|
|
158
|
+
Inside your setup function, you can return a function that uses template literals for HTML generation.
|
|
155
159
|
|
|
156
160
|
### Basic Example
|
|
157
161
|
|
|
158
162
|
```typescript
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
<
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
`;
|
|
163
|
+
() => {
|
|
164
|
+
return () => `
|
|
165
|
+
<div>
|
|
166
|
+
<h2>Hello, ${props.name}!</h2>
|
|
167
|
+
</div>
|
|
168
|
+
`;
|
|
169
|
+
};
|
|
165
170
|
```
|
|
166
171
|
|
|
167
172
|
### Dynamic Content
|
|
@@ -169,16 +174,36 @@ return () => `
|
|
|
169
174
|
Interpolation with `${...}` gives you access to state, props, or anything in closure:
|
|
170
175
|
|
|
171
176
|
```typescript
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
+
() => {
|
|
178
|
+
return () => `
|
|
179
|
+
<ul>
|
|
180
|
+
${state.items
|
|
181
|
+
.map(
|
|
182
|
+
(item) => `
|
|
183
|
+
<li>${item.title}</li>
|
|
184
|
+
`
|
|
185
|
+
)
|
|
186
|
+
.join('')}
|
|
187
|
+
</ul>
|
|
188
|
+
`;
|
|
189
|
+
};
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### XSS
|
|
193
|
+
|
|
194
|
+
When interpolating **user-provided** or untrusted content, use `escapeHtml` to prevent XSS. It escapes `&`, `<`, `>`, `"`, and `'` so the content is safe in HTML context.
|
|
195
|
+
|
|
196
|
+
```typescript
|
|
197
|
+
({ escapeHtml }) => {
|
|
198
|
+
return () => `<span>${escapeHtml(userInput)}</span>`;
|
|
199
|
+
};
|
|
177
200
|
```
|
|
178
201
|
|
|
202
|
+
`escapeHtml` accepts any value (falsy values return empty string) and returns a string safe for HTML. Do **not** use it with content you control and intend as markup — for that, use `bind:html` instead.
|
|
203
|
+
|
|
179
204
|
### Event Handlers
|
|
180
205
|
|
|
181
|
-
Use `on:eventName="handler"` to bind events, where
|
|
206
|
+
Use `on:eventName="handler"` to bind events, where **handler** is a function from your **actions** object or setup context:
|
|
182
207
|
|
|
183
208
|
```typescript
|
|
184
209
|
({ actions }) => {
|
|
@@ -189,16 +214,19 @@ Use `on:eventName="handler"` to bind events, where `handler` is a function from
|
|
|
189
214
|
};
|
|
190
215
|
```
|
|
191
216
|
|
|
192
|
-
Arrow functions or direct expressions are not supported
|
|
217
|
+
Arrow functions or direct expressions are not supported, you must use named action references.
|
|
193
218
|
|
|
194
219
|
### Referencing DOM Elements
|
|
195
220
|
|
|
196
221
|
Use the `ref` attribute to assign references:
|
|
197
222
|
|
|
198
223
|
```typescript
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
224
|
+
({ onMount, refs }) => {
|
|
225
|
+
onMount(() => console.log(refs.inputElement));
|
|
226
|
+
return () => `
|
|
227
|
+
<input ref="inputElement" type="text"></input>
|
|
228
|
+
`;
|
|
229
|
+
};
|
|
202
230
|
```
|
|
203
231
|
|
|
204
232
|
You can then access the element as `refs.inputEl` in your setup code or methods.
|
|
@@ -207,16 +235,6 @@ You can then access the element as `refs.inputEl` in your setup code or methods.
|
|
|
207
235
|
|
|
208
236
|
Bindings let you connect the value of a DOM property or attribute to your component's state or props, making the element update reactively when the state changes, and optionally syncing changes back to your state.
|
|
209
237
|
|
|
210
|
-
#### Value Binding
|
|
211
|
-
|
|
212
|
-
For `<input>`, `<textarea>`, and `<select>`, use `bind:value="stateKey"` to bind the value to a property in your `state`. When the user edits the input, the component will automatically update that property.
|
|
213
|
-
|
|
214
|
-
```typescript
|
|
215
|
-
return () => `
|
|
216
|
-
<input bind:value="message">
|
|
217
|
-
`;
|
|
218
|
-
```
|
|
219
|
-
|
|
220
238
|
#### Supported Bindings
|
|
221
239
|
|
|
222
240
|
- `bind:text="stateKey"` - Binds textContent
|
|
@@ -225,13 +243,22 @@ return () => `
|
|
|
225
243
|
- `bind:checked="isChecked"` — Binds the checked property of checkbox/radio
|
|
226
244
|
- `bind:prop="key"` — Generic property binding (any property, e.g. `bind:min`, `bind:max`)
|
|
227
245
|
|
|
228
|
-
|
|
246
|
+
<br />
|
|
229
247
|
|
|
230
248
|
```typescript
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
249
|
+
({ state }) => {
|
|
250
|
+
state.textValue = 'Hello, world!';
|
|
251
|
+
state.htmlValue = `<strong>Hello, world!</strong>`;
|
|
252
|
+
state.isChecked = true;
|
|
253
|
+
state.styleValue = `background-color: red;`;
|
|
254
|
+
|
|
255
|
+
return () => `
|
|
256
|
+
<p bind:text="textValue"></p>
|
|
257
|
+
<p bind:html="htmlValue"></p>
|
|
258
|
+
<input type="checkbox" bind:checked="isChecked">
|
|
259
|
+
<div bind:style="styleValue"></div>
|
|
260
|
+
`;
|
|
261
|
+
};
|
|
235
262
|
```
|
|
236
263
|
|
|
237
264
|
## State & props
|
|
@@ -242,8 +269,8 @@ State is a plain object that belongs to your component instance. It is fully rea
|
|
|
242
269
|
|
|
243
270
|
You can update state in two main ways:
|
|
244
271
|
|
|
245
|
-
- `host.setState(partial)
|
|
246
|
-
- `host.updateState(partial)
|
|
272
|
+
- `host.setState(partial)` - Merges the partial state and triggers a full re-render.
|
|
273
|
+
- `host.updateState(partial)` - Merges the partial state and only schedules effects/computed, but does **NOT** re-render the template.
|
|
247
274
|
|
|
248
275
|
```typescript
|
|
249
276
|
// Initialize state in setup (no re-render)
|
|
@@ -282,7 +309,7 @@ Props are available as the `props` object in the setup function:
|
|
|
282
309
|
|
|
283
310
|
```javascript
|
|
284
311
|
define(
|
|
285
|
-
'c-my-
|
|
312
|
+
'c-my-component',
|
|
286
313
|
{
|
|
287
314
|
props: {
|
|
288
315
|
value: { type: Number, default: 10 },
|
|
@@ -291,9 +318,9 @@ define(
|
|
|
291
318
|
},
|
|
292
319
|
({ props }) => {
|
|
293
320
|
return () => `
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
321
|
+
<p>Value: ${props.value}</p>
|
|
322
|
+
${props.label}
|
|
323
|
+
`;
|
|
297
324
|
}
|
|
298
325
|
);
|
|
299
326
|
```
|
|
@@ -302,7 +329,7 @@ Props are always kept up to date with attribute changes, and updating props from
|
|
|
302
329
|
|
|
303
330
|
**Two-way Binding:**
|
|
304
331
|
|
|
305
|
-
Scoped allows props
|
|
332
|
+
Scoped allows **props** ↔️ **state** syncing using the `link` helper:
|
|
306
333
|
|
|
307
334
|
```typescript
|
|
308
335
|
({ link }) => {
|
|
@@ -324,31 +351,42 @@ This updates the prop, reflects it as an attribute if needed, and triggers all u
|
|
|
324
351
|
|
|
325
352
|
Props are also automatically parsed from their attribute string values into the appropriate type, based on your definition (Number, Boolean, etc.), so you always work with type-safe values in your setup and template logic.
|
|
326
353
|
|
|
354
|
+
**Setting large objects/arrays as props:**
|
|
355
|
+
|
|
356
|
+
You can set large objects/arrays as props by using the `host.setProps(...)` method:
|
|
357
|
+
|
|
358
|
+
```typescript
|
|
359
|
+
const component = document.querySelector('c-my-component');
|
|
360
|
+
component.setProps({ data: largeArray, config: complexObject });
|
|
361
|
+
```
|
|
362
|
+
|
|
327
363
|
## Effects
|
|
328
364
|
|
|
329
365
|
Effects are functions that run in response to reactive changes and can be used for side effects, subscriptions, or manual cleanup logic within your components.
|
|
330
366
|
|
|
331
367
|
```typescript
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
(
|
|
344
|
-
|
|
345
|
-
)
|
|
368
|
+
({ effect }) => {
|
|
369
|
+
// Run on every render
|
|
370
|
+
effect(() => console.log('Rendered'));
|
|
371
|
+
|
|
372
|
+
// Run once (empty deps)
|
|
373
|
+
effect(() => {
|
|
374
|
+
const sub = api.subscribe();
|
|
375
|
+
return () => sub.unsubscribe();
|
|
376
|
+
}, []);
|
|
377
|
+
|
|
378
|
+
// Run when deps change
|
|
379
|
+
effect(
|
|
380
|
+
(deps) => console.log('Count:', deps[0]),
|
|
381
|
+
() => [state.count]
|
|
382
|
+
);
|
|
346
383
|
|
|
347
|
-
// Manual cleanup
|
|
348
|
-
const cleanup = effect(() => {
|
|
349
|
-
|
|
350
|
-
});
|
|
351
|
-
cleanup();
|
|
384
|
+
// Manual cleanup
|
|
385
|
+
const cleanup = effect(() => {
|
|
386
|
+
/* ... */
|
|
387
|
+
});
|
|
388
|
+
cleanup();
|
|
389
|
+
};
|
|
352
390
|
```
|
|
353
391
|
|
|
354
392
|
## Computed
|
|
@@ -356,36 +394,36 @@ cleanup();
|
|
|
356
394
|
Computed values are memoized values used to derive data from state or props and automatically update when their dependencies change.
|
|
357
395
|
|
|
358
396
|
```typescript
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
)
|
|
363
|
-
|
|
397
|
+
({ computed }) => {
|
|
398
|
+
const fullName = computed(
|
|
399
|
+
() => `${state.firstName} ${state.lastName}`, // getter
|
|
400
|
+
() => [state.firstName, state.lastName] // dependencies
|
|
401
|
+
);
|
|
402
|
+
return () => `<p>Name: ${fullName()}</p>`;
|
|
403
|
+
};
|
|
364
404
|
```
|
|
365
405
|
|
|
366
406
|
## Custom events
|
|
367
407
|
|
|
408
|
+
Custom events are a way to communicate between components.
|
|
409
|
+
|
|
368
410
|
### Emit
|
|
369
411
|
|
|
370
412
|
To emit a custom event from your component, use `emit(name, detail?)`:
|
|
371
413
|
|
|
372
414
|
```typescript
|
|
373
|
-
|
|
374
|
-
|
|
415
|
+
({ emit }) => {
|
|
416
|
+
emit('my-event', { message: 'Hello from the component!' });
|
|
375
417
|
};
|
|
376
|
-
|
|
377
|
-
return () => `<button on:click="handleButtonClick">Emit Event</button>`;
|
|
378
418
|
```
|
|
379
419
|
|
|
380
|
-
|
|
420
|
+
Listening to custom events in parent:
|
|
381
421
|
|
|
382
422
|
```javascript
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
});
|
|
388
|
-
</script>
|
|
423
|
+
const component = document.querySelector('c-my-component');
|
|
424
|
+
component.addEventListener('my-event', (e) => {
|
|
425
|
+
console.log('Received:', e.detail.message);
|
|
426
|
+
});
|
|
389
427
|
```
|
|
390
428
|
|
|
391
429
|
### Listen
|
|
@@ -393,98 +431,73 @@ return () => `<button on:click="handleButtonClick">Emit Event</button>`;
|
|
|
393
431
|
You can use `listen` to subscribe to events on any EventTarget (automatically cleaned up on destroy):
|
|
394
432
|
|
|
395
433
|
```typescript
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
(e) => {
|
|
402
|
-
console.log('Got custom event with detail:', e.detail);
|
|
403
|
-
}
|
|
404
|
-
);
|
|
405
|
-
});
|
|
434
|
+
({ listen }) => {
|
|
435
|
+
listen(window, 'my-event', (e) => {
|
|
436
|
+
console.log('Received:', e.detail.message);
|
|
437
|
+
});
|
|
438
|
+
};
|
|
406
439
|
```
|
|
407
440
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
### Event Delegation
|
|
441
|
+
## Event Delegation
|
|
411
442
|
|
|
412
443
|
`delegate` lets you efficiently handle events on descendants matching a selector:
|
|
413
444
|
|
|
414
445
|
```typescript
|
|
415
|
-
onMount
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
446
|
+
({ onMount, delegate }) => {
|
|
447
|
+
onMount(() => {
|
|
448
|
+
delegate('click', '.item', (e, target) => {
|
|
449
|
+
console.log('Clicked item:', target.textContent);
|
|
450
|
+
target.classList.toggle('active');
|
|
451
|
+
});
|
|
419
452
|
});
|
|
420
|
-
});
|
|
421
453
|
|
|
422
|
-
return () => `
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
`;
|
|
454
|
+
return () => `
|
|
455
|
+
<ul>
|
|
456
|
+
<li class="item">Apple</li>
|
|
457
|
+
<li class="item">Banana</li>
|
|
458
|
+
<li class="item">Cherry</li>
|
|
459
|
+
</ul>
|
|
460
|
+
`;
|
|
461
|
+
};
|
|
429
462
|
```
|
|
430
463
|
|
|
431
464
|
## Slots
|
|
432
465
|
|
|
433
466
|
Slots allow you to render children inside your custom element, making it easy to compose interfaces or pass in dynamic content.
|
|
434
467
|
|
|
435
|
-
### Basic Usage
|
|
436
|
-
|
|
437
468
|
By default, any child content placed inside your component tag will be rendered in the default slot:
|
|
438
469
|
|
|
439
470
|
```html
|
|
440
|
-
<my-
|
|
441
|
-
<h2>Title goes here</h2>
|
|
442
|
-
<p>Some description or content.</p>
|
|
443
|
-
</my-
|
|
471
|
+
<c-my-component>
|
|
472
|
+
<h2 slot="title">Title goes here</h2>
|
|
473
|
+
<p slot="description">Some description or content.</p>
|
|
474
|
+
</c-my-component>
|
|
444
475
|
```
|
|
445
476
|
|
|
446
477
|
In your component template, use:
|
|
447
478
|
|
|
448
479
|
```typescript
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
<slot></slot>
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
### Named Slots
|
|
457
|
-
|
|
458
|
-
Named slots let your users provide content for specific areas:
|
|
459
|
-
|
|
460
|
-
```html
|
|
461
|
-
<my-layout>
|
|
462
|
-
<div slot="sidebar">Sidebar content</div>
|
|
463
|
-
<div slot="main">Main content</div>
|
|
464
|
-
</my-layout>
|
|
465
|
-
```
|
|
466
|
-
|
|
467
|
-
In your component:
|
|
468
|
-
|
|
469
|
-
```typescript
|
|
470
|
-
return () => `
|
|
471
|
-
<aside><slot name="sidebar"></slot></aside>
|
|
472
|
-
<main><slot name="main"></slot></main>
|
|
473
|
-
`;
|
|
480
|
+
define('my-card', {}, () => {
|
|
481
|
+
return () => `
|
|
482
|
+
<aside><slot name="title"></slot></aside>
|
|
483
|
+
<main><slot name="description"></slot></main>
|
|
484
|
+
<slot></slot>
|
|
485
|
+
`;
|
|
486
|
+
});
|
|
474
487
|
```
|
|
475
488
|
|
|
476
489
|
## Lifecycle
|
|
477
490
|
|
|
478
491
|
Lifecycle hooks let you run code at specific moments in the component's life, such as mount, update, or destruction.
|
|
479
492
|
|
|
480
|
-
| Method
|
|
481
|
-
|
|
|
482
|
-
|
|
|
483
|
-
|
|
|
484
|
-
|
|
|
485
|
-
|
|
|
486
|
-
|
|
|
487
|
-
|
|
|
493
|
+
| Method | Description |
|
|
494
|
+
| ------------------------ | ------------------------ |
|
|
495
|
+
| **`onMount(cb)`** | After mount |
|
|
496
|
+
| **`onDestroy(cb)`** | On destroy |
|
|
497
|
+
| **`onUpdate(cb)`** | After each update |
|
|
498
|
+
| **`onBeforeUpdate(cb)`** | Before each update |
|
|
499
|
+
| **`onFirstUpdate(cb)`** | Once, after first render |
|
|
500
|
+
| **`onPropsChanged(cb)`** | When props change |
|
|
488
501
|
|
|
489
502
|
## Select
|
|
490
503
|
|
|
@@ -500,6 +513,7 @@ define('c-my-component', {}, ({ $, host }) => {
|
|
|
500
513
|
const el = document.querySelector('c-my-component'); // self
|
|
501
514
|
const inner = el.$('.list-item'); // same API on host
|
|
502
515
|
});
|
|
516
|
+
|
|
503
517
|
return () => `<div>
|
|
504
518
|
<button class="primary">OK</button>
|
|
505
519
|
<span class="list-item">
|
|
@@ -516,6 +530,8 @@ define('c-my-component', {}, ({ $, host }) => {
|
|
|
516
530
|
|
|
517
531
|
Scoped includes a set of optional plugins to extend or enhance component behavior. You can import any of these plugins and register them via the `plugins` option.
|
|
518
532
|
|
|
533
|
+
⏲ Document is working in progress
|
|
534
|
+
|
|
519
535
|
**Available Plugins:**
|
|
520
536
|
|
|
521
537
|
- **[lerpPlugin](src/plugins/lerp/README.md) & [springPlugin](src/plugins/spring/README.md)**
|
|
@@ -545,11 +561,13 @@ Scoped includes a set of optional plugins to extend or enhance component behavio
|
|
|
545
561
|
- **[pointerPlugin](src/plugins/pointer/README.md)**
|
|
546
562
|
Lerp mouse position
|
|
547
563
|
|
|
564
|
+
- **[localStoragePlugin](src/plugins/localstorage/README.md)**
|
|
565
|
+
Scoped localStorage API with optional key prefix and JSON serialization.
|
|
566
|
+
|
|
548
567
|
**Usage Example:**
|
|
549
568
|
|
|
550
569
|
```javascript
|
|
551
|
-
import { define } from '@petit-kit/scoped';
|
|
552
|
-
import { inViewPlugin, timerPlugin } from '@petit-kit/scoped/plugins';
|
|
570
|
+
import { define, inViewPlugin, timerPlugin } from '@petit-kit/scoped';
|
|
553
571
|
|
|
554
572
|
define(
|
|
555
573
|
'my-component',
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function t({from:t=0,to:e=1,mass:n=1,stiffness:s=120,damping:i=14,velocity:a=0,tolerance:d=.001,resumeOnTarget:p=!0}={}){function m(){return c(v)}function w(t){if(M)return m();if(o(v)&&o(S)&&o(b)){let e=!0;for(let o=0;o<v.length;o+=1){const r=v[o]-S[o],c=(-s*r-i*b[o])/n;b[o]+=c*t,v[o]+=b[o]*t;const h=v[o]-S[o];(Math.abs(b[o])>=d||Math.abs(h)>=d)&&(e=!1)}if(e){for(let t=0;t<v.length;t+=1)v[t]=S[t],b[t]=0;M=!0}return y.value=v,y.velocity=b,c(v)}if(r(v)&&r(S)&&r(b)){const e=y.objectKeys??Object.keys(v);let o=!0;for(const r of e){const e=v[r]-S[r],c=(-s*e-i*b[r])/n;b[r]+=c*t,v[r]+=b[r]*t;const h=v[r]-S[r];(Math.abs(b[r])>=d||Math.abs(h)>=d)&&(o=!1)}if(o){for(const t of e)v[t]=S[t],b[t]=0;M=!0}return y.value=v,y.velocity=b,c(v)}const e=S;let h=b;h+=(-s*(v-e)-i*h)/n*t,v+=h*t,b=h,y.value=v,y.velocity=b;const f=v-e;return Math.abs(h)<d&&Math.abs(f)<d&&(v=e,b=0,y.value=v,y.velocity=b,M=!0),v}const y=u({from:t,to:e,velocity:a,label:"Spring"}),g=y.normalizeInput;let v=y.value,b=y.velocity??a,S=y.target,j=null,M=!1;const O=new Set;return{setTarget:function(t){const e=g(t),n=!h(e,S);if(S=e,y.target=e,v=y.value,p&&M&&n){M=!1,j=null;for(const t of O)t(S)}},setValue:function(t,e={}){const{resetVelocity:n=!0,resetTime:s=!0,setTarget:i=!1,markDone:o=!1}=e;v=g(t),y.value=v,i&&(S=c(v),y.target=S);const r=M||!h(v,S);if(n&&(b=null!=y.arrayLength?f(0,y.arrayLength):null!=y.objectKeys?l(0,y.objectKeys):0,y.velocity=b),s&&(j=null),o&&(M=!0),r&&!o){M=!1,j=null;for(const t of O)t(S)}},getValue:m,isDone:function(){return M},onResume:function(t){return O.add(t),()=>{O.delete(t)}},step:w,next:function(t=performance.now()){if(null==j)return j=t,m();const e=(t-j)/1e3;j=t;const n=1/30;let s=e,i=m();for(;s>0&&!M;){const t=Math.min(s,n);i=w(t),s-=t}return i}}}function e(t,e){if(!e||"object"!=typeof e||null==e.type)return null!=t?t:e;const{type:n,default:s}=e;if(null==t)return s;try{switch(n){case String:return String(t);case Number:{const e=Number(t);return Number.isNaN(e)?s:e}case Boolean:return""===t||"true"===t||"false"!==t&&"0"!==t&&null!=t;case Object:try{return"string"==typeof t?JSON.parse(t):t}catch{return s}case Array:try{return"string"==typeof t?JSON.parse(t):t}catch{return Array.isArray(s)?s:[]}default:return t}}catch{return s}}function n(t,e,n,s){if(!s||"object"!=typeof s||!s.reflect)return;let i=null;const o=s.type;if(o===Boolean)return n?void t.setAttribute(e,""):void t.removeAttribute(e);if(o===Object||o===Array)try{i=null==n?null:JSON.stringify(n)}catch{i=null}else i=null==n?null:String(n);null==i?t.removeAttribute(e):t.setAttribute(e,i)}const s=()=>({name:"timer",extend:t=>{const e=new Set,n=new Set,s=new Set,i={setTimeout:(t,n,...s)=>{let i;return i=setTimeout((...n)=>{e.delete(i),t(...n)},n,...s),e.add(i),i},setInterval:(t,e,...s)=>{const i=setInterval(t,e,...s);return n.add(i),i},raf:(t,e)=>{let n=0,i=!0,o=0;const r="number"==typeof e&&e>0?1e3/e:0,c=e=>{if(s.delete(n),i){if(r){if(e-o>=r){const n=o?e-o:r;o=e,t(e,n)}}else{const n=o?e-o:0;o=e,t(e,n)}n=requestAnimationFrame(c),s.add(n)}};return n=requestAnimationFrame(c),s.add(n),()=>{i&&(i=!1,s.delete(n),cancelAnimationFrame(n))}}};return t.onDestroy(()=>{for(const t of e)clearTimeout(t);e.clear();for(const t of n)clearInterval(t);n.clear();for(const t of s)cancelAnimationFrame(t);s.clear()}),{timer:i}}}),i=()=>({name:"mouse",extend:t=>{const e=new Map,n=(t,n)=>{if("undefined"==typeof window)return()=>{};const s=t=>{const e=t;n(e.clientX,e.clientY,e)};window.addEventListener(t,s);let i=e.get(t);return i||(i=new Set,e.set(t,i)),i.add(s),()=>{window.removeEventListener(t,s),i?.delete(s)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const[t,n]of e){for(const e of n)window.removeEventListener(t,e);n.clear()}e.clear()}}),{onMouseMove:t=>n("mousemove",t),onMouseDown:t=>n("mousedown",t),onMouseUp:t=>n("mouseup",t),onMouseWheel:t=>(t=>{if("undefined"==typeof window)return()=>{};const n=e=>{const n=e;t(n.clientX,n.clientY,n.deltaY,n)};window.addEventListener("wheel",n);let s=e.get("wheel");return s||(s=new Set,e.set("wheel",s)),s.add(n),()=>{window.removeEventListener("wheel",n),s?.delete(n)}})(t)}}}),o=t=>Array.isArray(t),r=t=>null!=t&&"object"==typeof t&&!Array.isArray(t),c=t=>o(t)?t.slice():r(t)?{...t}:t,h=(t,e)=>{if(o(t)&&o(e)){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n+=1)if(!Object.is(t[n],e[n]))return!1;return!0}if(r(t)&&r(e)){const n=Object.keys(t),s=Object.keys(e);if(n.length!==s.length)return!1;for(const s of n){if(!(s in e))return!1;if(!Object.is(t[s],e[s]))return!1}return!0}return!(o(t)||o(e)||r(t)||r(e))&&Object.is(t,e)},f=(t,e)=>Array.from({length:e},()=>t),l=(t,e)=>e.reduce((e,n)=>(e[n]=t,e),{}),u=({from:t,to:e,velocity:n,label:s})=>{const i={value:t,target:e,velocity:n,arrayLength:null,objectKeys:null,normalizeInput:t=>t},c=t=>{if(null==i.arrayLength){if(null!=i.objectKeys)throw new Error(`${s} value shape mismatch (array vs object).`);i.arrayLength=t,o(i.value)||(i.value=f(i.value,t)),o(i.target)||(i.target=f(i.target,t)),void 0===i.velocity||o(i.velocity)||(i.velocity=f(i.velocity,t))}},h=t=>{if(null==i.objectKeys){if(null!=i.arrayLength)throw new Error(`${s} value shape mismatch (object vs array).`);i.objectKeys=t,r(i.value)||(i.value=l(i.value,t)),r(i.target)||(i.target=l(i.target,t)),void 0===i.velocity||r(i.velocity)||(i.velocity=l(i.velocity,t))}},u=t=>{if(o(t)){if(null!=i.objectKeys)throw new Error(`${s} value shape mismatch (array vs object).`);if(null==i.arrayLength&&c(t.length),t.length!==i.arrayLength)throw new Error(`${s} value length mismatch (expected ${i.arrayLength}, got ${t.length}).`);return t.slice()}if(r(t)){if(null!=i.arrayLength)throw new Error(`${s} value shape mismatch (object vs array).`);const e=Object.keys(t);if(null==i.objectKeys&&h(e),i.objectKeys&&e.length!==i.objectKeys.length)throw new Error(`${s} value keys mismatch (expected ${i.objectKeys.length}, got ${e.length}).`);if(i.objectKeys)for(const e of i.objectKeys)if(!(e in t))throw new Error(`${s} value keys mismatch (missing key "${e}").`);return{...t}}return null!=i.arrayLength?f(t,i.arrayLength):null!=i.objectKeys?l(t,i.objectKeys):t};i.normalizeInput=u;const a=o(t)||o(e)||void 0!==n&&o(n),d=r(t)||r(e)||void 0!==n&&r(n);if(a&&d)throw new Error(`${s} value shape mismatch (array vs object).`);if(a){const s=o(t)?t.length:o(e)?e.length:n.length;c(s),i.value=u(t),i.target=u(e),void 0!==i.velocity&&(i.velocity=u(i.velocity))}else if(d){const s=r(t)?Object.keys(t):r(e)?Object.keys(e):Object.keys(n);h(s),i.value=u(t),i.target=u(e),void 0!==i.velocity&&(i.velocity=u(i.velocity))}return i};let a={x:-1,y:-1};const d={stiffness:300,damping:30,mass:1},p="0.0.5",m=/\{([A-Za-z_$][\w$]*)\}/g;exports.SCOPE_VERSION=p,exports.define=function(t,s={},i){const{props:o={},shadow:r=!1,styles:c,plugins:h}=s,f=h??[],l=()=>{};class u extends HTMLElement{constructor(){super(),this.version=p,this.t={};for(const t of Object.keys(o)){const e=o[t];this.t[t]=e&&"object"==typeof e&&("type"in e||"default"in e)?e:{type:void 0,default:e,reflect:!1}}this.props={},this.state={},this.actions={},this.refs={},this.emit=this.emit.bind(this),this.listen=this.listen.bind(this),this.setState=this.setState.bind(this),this.updateState=this.updateState.bind(this),this.setProps=this.setProps.bind(this),this.scheduleUpdate=this.scheduleUpdate.bind(this),this.update=this.update.bind(this),this.forceRender=this.forceRender.bind(this),this.destroy=this.destroy.bind(this),this.$=this.$.bind(this),this.i=null,this.o=null,this.h=!1,this.l=!1,this.u=r,this.p=r?this.attachShadow({mode:"open"}):this,this.m=null,this.S=[],this.j=[],this.M=[],this.O=[],this._=[],this.A=[],this.T=[],this.k=[],this.L=new Map,this.F=!1,this.I=!1,this.R={},this.V=!1,this.C=t,this.H=!1,this.D=new Set,this.U=!1,this.q=new Map,this.B=0,this.N=!1}W(t){const e=this.u?this.p.host:this;let n=t.parentElement;for(;n;){if(n===e)return!1;if(n.tagName.includes("-"))return!0;n=n.parentElement}return!1}static get observedAttributes(){return Object.keys(o)}attributeChangedCallback(t,n,s){if(n===s)return;const i=this.t[t],o=this.R[t],r=e(s,i);if(this.props[t]=r,this.F&&o!==r)for(const e of this.k)try{e(t,o,r)}catch(t){l(String(t?.message||t))}this.R[t]=r,this.D.has(t)?this.D.delete(t):this.i&&this.isConnected?this.U?this.H=!0:this.update(!0):this.H=!0}connectedCallback(){for(const t in this.t){if(!this.t.hasOwnProperty(t))continue;const n=e(this.getAttribute(t),this.t[t]);this.props[t]=n,this.R[t]=n}r||this.m||(this.m=this.P());let t=null;try{if(i){const e={props:this.props,state:this.state,actions:this.actions,refs:this.refs,emit:this.emit,listen:this.listen,updateState:this.updateState.bind(this),$:this.$,host:this,onMount:t=>this.M.push(t),onDestroy:t=>this.O.push(t),onUpdate:t=>this._.push(t),onBeforeUpdate:t=>this.A.push(t),onFirstUpdate:t=>this.T.push(t),onPropsChanged:t=>this.k.push(t),link:(t,e)=>{const s=e||t;this.state[s]=this.props[t],this.k.push((e,n,i)=>{e===t&&(Object.is(this.state[s],i)||(this.state[s]=i))});const i={fn:()=>{const e=this.state[s];if(Object.is(this.props[t],e))return;this.props[t]=e,this.R[t]=e;const i=this.t[t],o=i?{...i,reflect:!0}:i,r=this.getAttribute(t);this.D.add(t),n(this,t,e,o),r===this.getAttribute(t)&&this.D.delete(t)},deps:()=>[this.state[s]]};this.S.push(i)},computed:(t,e)=>{let n;if(void 0!==e)try{const t="function"==typeof e?e():e;Array.isArray(t)&&(n=t)}catch(t){String(t?.message||t)}const s={getter:t,deps:e,value:void 0!==e?t(n):t()};this.j.push(s);const i=()=>s.value;return i.J=s,this.K(i),i},effect:(t,e)=>{const n={fn:t,deps:e};return this.S.push(n),()=>this.Z(n)},delegate:(t,e,n)=>(this.G(t,e,n),()=>this.X(t,e,n))};for(const t of f)if(t)try{const n=t.extend(e,this);n&&"object"==typeof n&&Object.assign(e,n)}catch(t){l(String(t?.message||t))}t=i(e)}}catch(t){String(t?.message||t)}if(this.i="function"!=typeof t?()=>"":t,this.U=!0,this.update(!0),this.U=!1,this.H&&(this.H=!1,this.update(!0)),!this.F){this.F=!0;for(const t of this.M)try{t()}catch(t){l(String(t?.message||t))}}}disconnectedCallback(){this.destroy()}remove(){super.remove()}$(t){const e=this.p.querySelectorAll(t);return 0===e.length?null:1===e.length?e[0]:Array.from(e)}destroy(){for(const t of this.O)try{t()}catch(t){l(String(t?.message||t))}for(const t of this.S)if(t.cleanup){try{t.cleanup()}catch(t){l(String(t?.message||t))}t.cleanup=void 0}for(const[,t]of this.L)try{this.p.removeEventListener(t.eventType,t.listener)}catch{}this.L.clear(),this.F=!1}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}listen(t,e,n,s){const i=n;t.addEventListener(e,i,s);const o=()=>{try{t.removeEventListener(e,i,s)}catch{}};return this.O.push(o),o}setState(t){let e=!1;const n=t,s=this.state;for(const t in n){if(!Object.prototype.hasOwnProperty.call(n,t))continue;const i=n[t];Object.is(s[t],i)||(s[t]=i,e=!0)}if(e)if(this.U||!this.F)this.update(!0);else{if(!this.i||!this.isConnected)return;if(this.h)return;this.h=!0,requestAnimationFrame(()=>{this.h=!1,this.i&&this.isConnected&&this.update(!0)})}}updateState(t){Object.assign(this.state,t),this.i&&this.isConnected&&this.Y()}setProps(t){const e=Object.keys(t);if(0===e.length)return;const s=[];for(const i of e){const e=t[i],o=this.R[i];this.props[i]=e,this.F&&o!==e&&s.push(i);const r=this.t[i];r&&r.reflect&&n(this,i,e,r),this.F&&o===e||(this.R[i]=e)}if(this.F&&s.length>0)for(const e of s){const n=this.R[e],s=t[e];for(const t of this.k)try{t(e,n,s)}catch(t){l(String(t?.message||t))}}this.i&&this.isConnected?this.update(!0):this.H=!0}scheduleUpdate(){this.i&&this.isConnected&&this.Y()}Y(){this.l||this.h||(this.l=!0,("function"==typeof queueMicrotask?queueMicrotask:t=>Promise.resolve().then(t))(()=>{this.l=!1,this.i&&this.isConnected&&(this.h||this.update(!1))}))}update(t){if(this.i){if(t&&this.F)for(const t of this.A)try{t()}catch(t){l(String(t?.message||t))}if(t){this.tt();let t="";try{t=this.i()}catch(e){String(e?.message||e),t=""}if("string"!=typeof t&&(t=null==t?"":String(t)),t=((t,e)=>{const n={...this.props,...e};return t.replace(m,(t,e)=>{const s=n[e];return null==s?"":String(s)})})(t,this.state),!this.u){const e=`data-scope-owner="${this.C}"`;t=t.replace(/<slot(?![^>]*data-scope-owner)(\s|>)/g,`<slot ${e}$1`)}this.N=!1;const e=null!==this.o&&Object.is(this.o,t);let n=!1;e&&this.F||(this.u,this.p.innerHTML=t,this.o=t,n=!0),this.U?(this.et(),("function"==typeof requestAnimationFrame?requestAnimationFrame:t=>setTimeout(t,0))(()=>{this.i&&this.isConnected&&(n&&!r&&this.projectSlots(),n&&this.nt(),this.st(),this.it())})):(n&&!r&&this.projectSlots(),n&&this.ot(),this.st(),this.it())}else this.N&&this.tt(),this.st(),this.F&&this.it()}}forceRender(){this.o=null,this.i&&this.isConnected?this.U?this.H=!0:this.update(!0):this.H=!0}it(){if(!this.I){this.I=!0;for(const t of this.T)try{t()}catch(t){l(String(t?.message||t))}}for(const t of this._)try{t()}catch(t){l(String(t?.message||t))}this.rt()}rt(){const t=(this.u?this.p:this).querySelectorAll("*"),e=Object.prototype.hasOwnProperty,n=this.state,s=this.props;this.actions;for(let i=0;i<t.length;i++){const o=t[i];if(this.W(o))continue;if(0===o.attributes.length)continue;const r=o.attributes;for(let t=r.length-1;t>=0;t--){const i=r[t];if(!i.name.startsWith("bind:"))continue;const c=i.name.slice(5),h=i.value,f=h?h.trim():"";let l,u=!1;if(f){const t=this.q.get(f);if(t){t.J&&(this.N=!0);try{l=t()}catch{}u=!0}}if(!u){const t=f||c,i=e.call(n,t),o=!i&&e.call(s,t);i?l=n[t]:o&&(l=s[t])}if("text"===c){const t=null==l?"":String(l);o.textContent!==t&&(o.textContent=t)}else if("html"===c){const t=null==l?"":String(l);o.innerHTML!==t&&(o.innerHTML=t)}else if(c in o){if(!Object.is(o[c],l))try{o[c]=l}catch{}if("value"===c)try{null==l?o.removeAttribute("value"):o.setAttribute("value",String(l))}catch{}}else if(null!=l)try{o.setAttribute(c,String(l))}catch{}const a=`__scopeBind_${c}`,d=o[a];if(d){const t=d.ct;t&&o.removeEventListener(t,d),delete o[a]}}}}tt(){for(const t of this.j){let e,n=!0;if(void 0!==t.deps)try{const s="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(s)&&(e=s,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let s=0;s<e.length;s++)if(!Object.is(t.prevDeps[s],e[s])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){try{t.value=void 0!==t.deps?t.getter(e):t.getter()}catch(t){l(String(t?.message||t))}e&&(t.prevDeps=e.slice())}}}st(){for(const t of this.S){let e,n=!0;if(void 0!==t.deps)try{const s="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(s)&&(e=s,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let s=0;s<e.length;s++)if(!Object.is(t.prevDeps[s],e[s])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){if(t.cleanup){try{t.cleanup()}catch{}t.cleanup=void 0}try{const n=void 0!==t.deps?t.fn(e):t.fn();"function"==typeof n&&(t.cleanup=n)}catch{}e&&(t.prevDeps=e.slice())}}}Z(t){const e=this.S.indexOf(t);if(-1!==e){if(t.cleanup)try{t.cleanup()}catch{}this.S.splice(e,1)}}K(t){const e=t.ht;if(e&&"string"==typeof e)return this.q.set(e,t),e;const n=`__scope_bind_${++this.B}__`;this.q.set(n,t);try{t.ht=n,t.toString=()=>n}catch{}return n}et(){const t=(this.u?this.p:this).querySelectorAll("[ref]"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];if(0!==t.length)for(let n=0;n<t.length;n++){const s=t[n];if(this.W(s))continue;const i=s.getAttribute("ref");i&&(e[i]?Array.isArray(e[i])?e[i].push(s):e[i]=[e[i],s]:e[i]=s)}}nt(){const t=(this.u?this.p:this).querySelectorAll("*");for(let e=0;e<t.length;e++){const n=t[e];if(this.W(n))continue;if(0===n.attributes.length)continue;const s=n.attributes;for(let t=s.length-1;t>=0;t--){const e=s[t];if(!e.name.startsWith("on:"))continue;const i=e.name.slice(3),o=e.value,r=`__tinyHandler_${i}`,c=n[r];c&&n.removeEventListener(i,c),n.removeAttribute(e.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};n[r]=t,n.addEventListener(i,t)}}}}ot(){const t=(this.u?this.p:this).querySelectorAll("*"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];for(let n=0;n<t.length;n++){const s=t[n];if(this.W(s))continue;const i=s.getAttribute("ref");if(i&&(e[i]?Array.isArray(e[i])?e[i].push(s):e[i]=[e[i],s]:e[i]=s),s.attributes.length>0){const t=s.attributes;for(let e=t.length-1;e>=0;e--){const n=t[e];if(!n.name.startsWith("on:"))continue;const i=n.name.slice(3),o=n.value,r=`__tinyHandler_${i}`,c=s[r];c&&s.removeEventListener(i,c),s.removeAttribute(n.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};s[r]=t,s.addEventListener(i,t)}}}}}P(){const t=new Map,e=this.childNodes,n=[];for(let t=0;t<e.length;t++)n.push(e[t]);for(let e=0;e<n.length;e++){const s=n[e];let i="";1===s.nodeType&&s.getAttribute&&(i=s.getAttribute("slot")||""),t.has(i)||t.set(i,[]),t.get(i).push(s)}for(let t=0;t<n.length;t++){const e=n[t];e.parentNode&&e.parentNode.removeChild(e)}return t}projectSlots(){const t=this.m||new Map,e=(this.u?this.p:this).querySelectorAll(`slot[data-scope-owner="${this.C}"]`);if(0!==e.length)for(let n=0;n<e.length;n++){const s=e[n],i=s.getAttribute("name")||"",o=t.get(i)||[];if(o.length){const t=document.createDocumentFragment();for(let e=0;e<o.length;e++){const n=o[e];let s;if(1===n.nodeType&&n.tagName.includes("-")&&n.m instanceof Map){const t=n,e=document.createElement(t.tagName.toLowerCase());for(let n=0;n<t.attributes.length;n++){const s=t.attributes[n];e.setAttribute(s.name,s.value)}for(const n of t.m.values())for(let t=0;t<n.length;t++)e.appendChild(n[t].cloneNode(!0));s=e}else s=n.cloneNode(!0);t.appendChild(s)}s.replaceWith(t)}else{const t=s.childNodes,e=[];for(let n=0;n<t.length;n++)e.push(t[n]);if(e.length>0){const t=document.createDocumentFragment();for(let n=0;n<e.length;n++)t.appendChild(e[n]);s.replaceWith(t)}}}}G(t,e,n){const s=`${t}::${e}`;let i=this.L.get(s);if(!i){const n=t=>{const n=t.target&&t.target.closest?t.target.closest(e):null;if(n)for(const e of i.handlers)try{e(t,n)}catch{}};i={eventType:t,selector:e,listener:n,handlers:new Set},this.L.set(s,i),this.p.addEventListener(t,n)}i.handlers.add(n)}X(t,e,n){const s=`${t}::${e}`,i=this.L.get(s);if(i&&(i.handlers.delete(n),0===i.handlers.size)){try{this.p.removeEventListener(t,i.listener)}catch{}this.L.delete(s)}}}if(!customElements.get(t)){if(c&&"undefined"!=typeof document){const e=`scope-${t}-styles`;if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=c,document.head.appendChild(t)}}try{customElements.define(t,u)}catch(t){String(t?.message||t)}}return u},exports.devicePlugin=()=>({name:"device",extend:t=>{const e=new Map;return t.onDestroy(()=>{for(const[t,n]of e)t.removeEventListener("change",n);e.clear()}),{onMediaQuery:(t,n,s={})=>{if("undefined"==typeof window||"undefined"==typeof matchMedia)return()=>{};const{immediate:i=!0}=s,o=matchMedia(t),r=t=>{n(t.matches,t)};return o.addEventListener("change",r),e.set(o,r),i&&n(o.matches,null),()=>{o.removeEventListener("change",r),e.delete(o)}}}}}),exports.happy=()=>{console.info("The website is using @petit-kit/scoped v"+p,"\nhttps://github.com/petit-kit/scoped")},exports.inViewPlugin=()=>({name:"inview",extend:(t,e)=>{const n=new Set,s=(t,e,s={})=>{if("undefined"==typeof window||"undefined"==typeof IntersectionObserver)return()=>{};const{immediate:i=!0,...o}=s;let r=!i;const c=new IntersectionObserver(n=>{for(const s of n)s.target===t&&(r?r=!1:e(s.isIntersecting,s))},o);return c.observe(t),n.add(c),()=>{c.unobserve(t),c.disconnect(),n.delete(c)}};return t.onDestroy(()=>{for(const t of n)t.disconnect();n.clear()}),{onInView:(t,n)=>s(e,t,n),observeInView:(t,e,n)=>s(t,e,n)}}}),exports.lenisPlugin=t=>({name:"lenis",extend:e=>{const n=new Set;return e.onDestroy(()=>{for(const{lenis:t,handler:e}of n)"function"==typeof t.off&&t.off("scroll",e);n.clear()}),{onLenisScroll:e=>{const s=t();if(!s)return()=>{};const i=t=>{e(t)};s.on("scroll",i);const o={lenis:s,handler:i};return n.add(o),()=>{n.has(o)&&(n.delete(o),"function"==typeof s.off&&s.off("scroll",i))}}}}}),exports.lerpPlugin=()=>({name:"lerp",extend:t=>{const{timer:e}=s().extend(t,t.host),n=new Set;return t.onDestroy(()=>{for(const t of n)t();n.clear()}),{createLerp:t=>function({from:t=0,to:e=1,lerp:n=.1,tolerance:s=.001,resumeOnTarget:i=!0}={}){function f(){return c(p)}function l(t){if(y)return f();const e=(t=>t<0?0:t>1?1:t)(n);if(0===e)return f();if(1===e)return p=c(m),a.value=p,y=!0,f();const i=t>0?1-Math.pow(1-e,60*t):0;if(o(p)&&o(m)){let t=!0;for(let e=0;e<p.length;e+=1)p[e]+=(m[e]-p[e])*i,Math.abs(m[e]-p[e])>=s&&(t=!1);if(t){for(let t=0;t<p.length;t+=1)p[t]=m[t];y=!0}return a.value=p,c(p)}if(r(p)&&r(m)){const t=a.objectKeys??Object.keys(p);let e=!0;for(const n of t)p[n]+=(m[n]-p[n])*i,Math.abs(m[n]-p[n])>=s&&(e=!1);if(e){for(const e of t)p[e]=m[e];y=!0}return a.value=p,c(p)}const h=m;return p+=(h-p)*i,a.value=p,Math.abs(h-p)<s&&(p=h,a.value=p,y=!0),p}const a=u({from:t,to:e,label:"Lerp"}),d=a.normalizeInput;let p=a.value,m=a.target,w=null,y=!1;const g=new Set;return{setTarget:function(t){const e=d(t),n=!h(e,m);if(m=e,a.target=e,p=a.value,i&&y&&n){y=!1,w=null;for(const t of g)t(m)}},setValue:function(t,e={}){const{resetTime:n=!0,setTarget:s=!1,markDone:i=!1}=e;p=d(t),a.value=p,s&&(m=c(p),a.target=m);const o=y||!h(p,m);if(n&&(w=null),i&&(y=!0),o&&!i){y=!1,w=null;for(const t of g)t(m)}},getValue:f,isDone:function(){return y},onResume:function(t){return g.add(t),()=>{g.delete(t)}},step:l,next:function(t=performance.now()){if(null==w)return w=t,f();const e=(t-w)/1e3;w=t;const n=1/30;let s=e,i=f();for(;s>0&&!y;){const t=Math.min(s,n);i=l(t),s-=t}return i}}}(t),runLerp:(t,s,i={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=i;let h=!1,f=null;r&&s(t.getValue(),t);const l=()=>{f||(f=e.raf(e=>{if(h)return;const n=t.next(e);s(n,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&s(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),n.delete(d))};return n.add(d),d}}}}),exports.morphPlugin=(t,e={})=>({name:"morph",extend:(n,s)=>{const{ignoreActiveValue:i=!0,callbacks:o}=e,r=t(),c=s,h=c.p,f=c.u?ShadowRoot.prototype:HTMLElement.prototype,l=Object.getOwnPropertyDescriptor(f,"innerHTML"),u=t=>{r.morph(h,t,{morphStyle:"innerHTML",ignoreActiveValue:i,callbacks:o})};let a=!0;return Object.defineProperty(h,"innerHTML",{set(t){a?(l.set.call(this,t),a=!1):u(t)},get(){return l.get.call(this)},configurable:!0}),n.onDestroy(()=>{delete h.innerHTML}),{morph:u}}}),exports.mousePlugin=i,exports.pointerPlugin=()=>({name:"pointer",extend:e=>{const{onMouseMove:n}=i().extend(e,e.host),{timer:o}=s().extend(e,e.host);a.x=window.innerWidth/2,a.y=window.innerHeight/2;const r={x:t({from:a.x,to:a.x,...d}),y:t({from:a.y,to:a.y,...d})};return n((t,e)=>{r.x.setTarget(t),r.y.setTarget(e)}),{onPointerMove:t=>{let e=a.x,n=a.y;o.raf(s=>{const i=r.x.next(s),o=r.y.next(s);var c,h;e===i&&n===o||(t({x:i,y:o,v:(c={x:i,y:o},h={x:e,y:n},{x:c.x-h.x,y:c.y-h.y,magnitude:Math.sqrt((c.x-h.x)*(c.x-h.x)+(c.y-h.y)*(c.y-h.y))}).magnitude}),e=i,n=o)})},onMouseMove:n}}}),exports.springPlugin=()=>({name:"spring",extend:e=>{const{timer:n}=s().extend(e,e.host),i=new Set;return e.onDestroy(()=>{for(const t of i)t();i.clear()}),{createSpring:e=>t(e),runSpring:(t,e,s={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=s;let h=!1,f=null;r&&e(t.getValue(),t);const l=()=>{f||(f=n.raf(n=>{if(h)return;const s=t.next(n);e(s,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&e(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),i.delete(d))};return i.add(d),d}}}}),exports.timerPlugin=s,exports.windowPlugin=()=>({name:"window",extend:t=>{const e=new Set,n=new Set,s=new Set,i=(t,n={})=>{if("undefined"==typeof window)return()=>{};const{immediate:s=!0}=n,i=e=>{t(window.innerWidth,window.innerHeight,e)};return window.addEventListener("resize",i),e.add(i),s&&i(new UIEvent("resize")),()=>{window.removeEventListener("resize",i),e.delete(i)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const t of e)window.removeEventListener("resize",t);e.clear();for(const t of s)t.disconnect();s.clear();for(const t of n)window.removeEventListener("scroll",t);n.clear()}}),{onViewportResize:i,onWindowResize:(t,e={})=>{if("undefined"==typeof window)return()=>{};if("undefined"==typeof ResizeObserver)return i((e,n,s)=>t(e,n,s),e);const{immediate:n=!0}=e,o=document.documentElement,r=new ResizeObserver(e=>{const n=e[0];if(!n)return;const{width:s,height:i}=n.contentRect;t(s,i,n)});if(r.observe(o),s.add(r),n){const e=o.getBoundingClientRect();t(e.width,e.height,new UIEvent("resize"))}return()=>{r.disconnect(),s.delete(r)}},onWindowScroll:(t,e={})=>{if("undefined"==typeof window)return()=>{};const{immediate:s=!0}=e,i=e=>{t(window.scrollX,window.scrollY,e)};return window.addEventListener("scroll",i,{passive:!0}),n.add(i),s&&i(new Event("scroll")),()=>{window.removeEventListener("scroll",i),n.delete(i)}}}}});
|
|
1
|
+
"use strict";function t({from:t=0,to:e=1,mass:n=1,stiffness:s=120,damping:i=14,velocity:o=0,tolerance:d=.001,resumeOnTarget:p=!0}={}){function m(){return h(v)}function w(t){if(M)return m();if(r(v)&&r(S)&&r(b)){let e=!0;for(let o=0;o<v.length;o+=1){const r=v[o]-S[o],c=(-s*r-i*b[o])/n;b[o]+=c*t,v[o]+=b[o]*t;const h=v[o]-S[o];(Math.abs(b[o])>=d||Math.abs(h)>=d)&&(e=!1)}if(e){for(let t=0;t<v.length;t+=1)v[t]=S[t],b[t]=0;M=!0}return y.value=v,y.velocity=b,h(v)}if(c(v)&&c(S)&&c(b)){const e=y.objectKeys??Object.keys(v);let o=!0;for(const r of e){const e=v[r]-S[r],c=(-s*e-i*b[r])/n;b[r]+=c*t,v[r]+=b[r]*t;const h=v[r]-S[r];(Math.abs(b[r])>=d||Math.abs(h)>=d)&&(o=!1)}if(o){for(const t of e)v[t]=S[t],b[t]=0;M=!0}return y.value=v,y.velocity=b,h(v)}const e=S;let o=b;o+=(-s*(v-e)-i*o)/n*t,v+=o*t,b=o,y.value=v,y.velocity=b;const f=v-e;return Math.abs(o)<d&&Math.abs(f)<d&&(v=e,b=0,y.value=v,y.velocity=b,M=!0),v}const y=a({from:t,to:e,velocity:o,label:"Spring"}),g=y.normalizeInput;let v=y.value,b=y.velocity??o,S=y.target,j=null,M=!1;const O=new Set;return{setTarget:function(t){const e=g(t),n=!f(e,S);if(S=e,y.target=e,v=y.value,p&&M&&n){M=!1,j=null;for(const t of O)t(S)}},setValue:function(t,e={}){const{resetVelocity:n=!0,resetTime:s=!0,setTarget:i=!1,markDone:o=!1}=e;v=g(t),y.value=v,i&&(S=h(v),y.target=S);const r=M||!f(v,S);if(n&&(b=null!=y.arrayLength?l(0,y.arrayLength):null!=y.objectKeys?u(0,y.objectKeys):0,y.velocity=b),s&&(j=null),o&&(M=!0),r&&!o){M=!1,j=null;for(const t of O)t(S)}},getValue:m,isDone:function(){return M},onResume:function(t){return O.add(t),()=>{O.delete(t)}},step:w,next:function(t=performance.now()){if(null==j)return j=t,m();const e=(t-j)/1e3;j=t;const n=1/30;let s=e,i=m();for(;s>0&&!M;){const t=Math.min(s,n);i=w(t),s-=t}return i}}}function e(t,e){return t?`${t}:${e}`:e}function n(t,e){if(!e||"object"!=typeof e||null==e.type)return null!=t?t:e;const{type:n,default:s}=e;if(null==t)return s;try{switch(n){case String:return String(t);case Number:{const e=Number(t);return Number.isNaN(e)?s:e}case Boolean:return""===t||"true"===t||"false"!==t&&"0"!==t&&null!=t;case Object:try{return"string"==typeof t?JSON.parse(t):t}catch{return s}case Array:try{return"string"==typeof t?JSON.parse(t):t}catch{return Array.isArray(s)?s:[]}default:return t}}catch{return s}}function s(t,e,n,s){if(!s||"object"!=typeof s||!s.reflect)return;let i=null;const o=s.type;if(o===Boolean)return n?void t.setAttribute(e,""):void t.removeAttribute(e);if(o===Object||o===Array)try{i=null==n?null:JSON.stringify(n)}catch{i=null}else i=null==n?null:String(n);null==i?t.removeAttribute(e):t.setAttribute(e,i)}const i=()=>({name:"timer",extend:t=>{const e=new Set,n=new Set,s=new Set,i={setTimeout:(t,n,...s)=>{let i;return i=setTimeout((...n)=>{e.delete(i),t(...n)},n,...s),e.add(i),i},setInterval:(t,e,...s)=>{const i=setInterval(t,e,...s);return n.add(i),i},raf:(t,e)=>{let n=0,i=!0,o=0;const r="number"==typeof e&&e>0?1e3/e:0,c=e=>{if(s.delete(n),i){if(r){if(e-o>=r){const n=o?e-o:r;o=e,t(e,n)}}else{const n=o?e-o:0;o=e,t(e,n)}n=requestAnimationFrame(c),s.add(n)}};return n=requestAnimationFrame(c),s.add(n),()=>{i&&(i=!1,s.delete(n),cancelAnimationFrame(n))}}};return t.onDestroy(()=>{for(const t of e)clearTimeout(t);e.clear();for(const t of n)clearInterval(t);n.clear();for(const t of s)cancelAnimationFrame(t);s.clear()}),{timer:i}}}),o=()=>({name:"mouse",extend:t=>{const e=new Map,n=(t,n)=>{if("undefined"==typeof window)return()=>{};const s=t=>{const e=t;n(e.clientX,e.clientY,e)};window.addEventListener(t,s);let i=e.get(t);return i||(i=new Set,e.set(t,i)),i.add(s),()=>{window.removeEventListener(t,s),i?.delete(s)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const[t,n]of e){for(const e of n)window.removeEventListener(t,e);n.clear()}e.clear()}}),{onMouseMove:t=>n("mousemove",t),onMouseDown:t=>n("mousedown",t),onMouseUp:t=>n("mouseup",t),onMouseWheel:t=>(t=>{if("undefined"==typeof window)return()=>{};const n=e=>{const n=e;t(n.clientX,n.clientY,n.deltaY,n)};window.addEventListener("wheel",n);let s=e.get("wheel");return s||(s=new Set,e.set("wheel",s)),s.add(n),()=>{window.removeEventListener("wheel",n),s?.delete(n)}})(t)}}}),r=t=>Array.isArray(t),c=t=>null!=t&&"object"==typeof t&&!Array.isArray(t),h=t=>r(t)?t.slice():c(t)?{...t}:t,f=(t,e)=>{if(r(t)&&r(e)){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n+=1)if(!Object.is(t[n],e[n]))return!1;return!0}if(c(t)&&c(e)){const n=Object.keys(t),s=Object.keys(e);if(n.length!==s.length)return!1;for(const s of n){if(!(s in e))return!1;if(!Object.is(t[s],e[s]))return!1}return!0}return!(r(t)||r(e)||c(t)||c(e))&&Object.is(t,e)},l=(t,e)=>Array.from({length:e},()=>t),u=(t,e)=>e.reduce((e,n)=>(e[n]=t,e),{}),a=({from:t,to:e,velocity:n,label:s})=>{const i={value:t,target:e,velocity:n,arrayLength:null,objectKeys:null,normalizeInput:t=>t},o=t=>{if(null==i.arrayLength){if(null!=i.objectKeys)throw new Error(`${s} value shape mismatch (array vs object).`);i.arrayLength=t,r(i.value)||(i.value=l(i.value,t)),r(i.target)||(i.target=l(i.target,t)),void 0===i.velocity||r(i.velocity)||(i.velocity=l(i.velocity,t))}},h=t=>{if(null==i.objectKeys){if(null!=i.arrayLength)throw new Error(`${s} value shape mismatch (object vs array).`);i.objectKeys=t,c(i.value)||(i.value=u(i.value,t)),c(i.target)||(i.target=u(i.target,t)),void 0===i.velocity||c(i.velocity)||(i.velocity=u(i.velocity,t))}},f=t=>{if(r(t)){if(null!=i.objectKeys)throw new Error(`${s} value shape mismatch (array vs object).`);if(null==i.arrayLength&&o(t.length),t.length!==i.arrayLength)throw new Error(`${s} value length mismatch (expected ${i.arrayLength}, got ${t.length}).`);return t.slice()}if(c(t)){if(null!=i.arrayLength)throw new Error(`${s} value shape mismatch (object vs array).`);const e=Object.keys(t);if(null==i.objectKeys&&h(e),i.objectKeys&&e.length!==i.objectKeys.length)throw new Error(`${s} value keys mismatch (expected ${i.objectKeys.length}, got ${e.length}).`);if(i.objectKeys)for(const e of i.objectKeys)if(!(e in t))throw new Error(`${s} value keys mismatch (missing key "${e}").`);return{...t}}return null!=i.arrayLength?l(t,i.arrayLength):null!=i.objectKeys?u(t,i.objectKeys):t};i.normalizeInput=f;const a=r(t)||r(e)||void 0!==n&&r(n),d=c(t)||c(e)||void 0!==n&&c(n);if(a&&d)throw new Error(`${s} value shape mismatch (array vs object).`);if(a){const s=r(t)?t.length:r(e)?e.length:n.length;o(s),i.value=f(t),i.target=f(e),void 0!==i.velocity&&(i.velocity=f(i.velocity))}else if(d){const s=c(t)?Object.keys(t):c(e)?Object.keys(e):Object.keys(n);h(s),i.value=f(t),i.target=f(e),void 0!==i.velocity&&(i.velocity=f(i.velocity))}return i};let d={x:-1,y:-1};const p={stiffness:300,damping:30,mass:1},m="0.0.7",w=t=>null==t||""===t?"":String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"),y=/\{([A-Za-z_$][\w$]*)\}/g;exports.SCOPE_VERSION=m,exports.define=function(t,e={},i){const{props:o={},shadow:r=!1,styles:c,plugins:h}=e,f=h??[],l=()=>{};class u extends HTMLElement{constructor(){super(),this.version=m,this.t={};for(const t of Object.keys(o)){const e=o[t];this.t[t]=e&&"object"==typeof e&&("type"in e||"default"in e)?e:{type:void 0,default:e,reflect:!1}}this.props={},this.state={},this.actions={},this.refs={},this.emit=this.emit.bind(this),this.listen=this.listen.bind(this),this.setState=this.setState.bind(this),this.updateState=this.updateState.bind(this),this.setProps=this.setProps.bind(this),this.scheduleUpdate=this.scheduleUpdate.bind(this),this.update=this.update.bind(this),this.forceRender=this.forceRender.bind(this),this.destroy=this.destroy.bind(this),this.$=this.$.bind(this),this.i=null,this.o=null,this.h=!1,this.l=!1,this.u=r,this.p=r?this.attachShadow({mode:"open"}):this,this.m=null,this.S=[],this.j=[],this.M=[],this.O=[],this._=[],this.A=[],this.T=[],this.k=[],this.L=new Map,this.F=!1,this.H=!1,this.I={},this.R=!1,this.V=t,this.C=!1,this.N=new Set,this.q=!1,this.D=new Map,this.U=0,this.B=!1}W(t){const e=this.u?this.p.host:this;let n=t.parentElement;for(;n;){if(n===e)return!1;if(n.tagName.includes("-"))return!0;n=n.parentElement}return!1}static get observedAttributes(){return Object.keys(o)}attributeChangedCallback(t,e,s){if(e===s)return;const i=this.t[t],o=this.I[t],r=n(s,i);if(this.props[t]=r,this.F&&o!==r)for(const e of this.k)try{e(t,o,r)}catch(t){l(String(t?.message||t))}this.I[t]=r,this.N.has(t)?this.N.delete(t):this.i&&this.isConnected?this.q?this.C=!0:this.update(!0):this.C=!0}connectedCallback(){for(const t in this.t){if(!this.t.hasOwnProperty(t))continue;const e=n(this.getAttribute(t),this.t[t]);this.props[t]=e,this.I[t]=e}r||this.m||(this.m=this.J());let t=null;try{if(i){const e={props:this.props,state:this.state,actions:this.actions,refs:this.refs,emit:this.emit,listen:this.listen,updateState:this.updateState.bind(this),$:this.$,host:this,onMount:t=>this.M.push(t),onDestroy:t=>this.O.push(t),onUpdate:t=>this._.push(t),onBeforeUpdate:t=>this.A.push(t),onFirstUpdate:t=>this.T.push(t),onPropsChanged:t=>this.k.push(t),link:(t,e)=>{const n=e||t;this.state[n]=this.props[t],this.k.push((e,s,i)=>{e===t&&(Object.is(this.state[n],i)||(this.state[n]=i))});const i={fn:()=>{const e=this.state[n];if(Object.is(this.props[t],e))return;this.props[t]=e,this.I[t]=e;const i=this.t[t],o=i?{...i,reflect:!0}:i,r=this.getAttribute(t);this.N.add(t),s(this,t,e,o),r===this.getAttribute(t)&&this.N.delete(t)},deps:()=>[this.state[n]]};this.S.push(i)},computed:(t,e)=>{let n;if(void 0!==e)try{const t="function"==typeof e?e():e;Array.isArray(t)&&(n=t)}catch(t){String(t?.message||t)}const s={getter:t,deps:e,value:void 0!==e?t(n):t()};this.j.push(s);const i=()=>s.value;return i.P=s,this.K(i),i},effect:(t,e)=>{const n={fn:t,deps:e};return this.S.push(n),()=>this.Z(n)},delegate:(t,e,n)=>(this.G(t,e,n),()=>this.X(t,e,n)),escapeHtml:w};for(const t of f)if(t)try{const n=t.extend(e,this);n&&"object"==typeof n&&Object.assign(e,n)}catch(t){l(String(t?.message||t))}t=i(e)}}catch(t){String(t?.message||t)}if(this.i="function"!=typeof t?()=>"":t,this.q=!0,this.update(!0),this.q=!1,this.C&&(this.C=!1,this.update(!0)),!this.F){this.F=!0;for(const t of this.M)try{t()}catch(t){l(String(t?.message||t))}}}disconnectedCallback(){this.destroy()}remove(){super.remove()}$(t){const e=this.p.querySelectorAll(t);return 0===e.length?null:1===e.length?e[0]:Array.from(e)}destroy(){for(const t of this.O)try{t()}catch(t){l(String(t?.message||t))}for(const t of this.S)if(t.cleanup){try{t.cleanup()}catch(t){l(String(t?.message||t))}t.cleanup=void 0}for(const[,t]of this.L)try{this.p.removeEventListener(t.eventType,t.listener)}catch{}this.L.clear(),this.F=!1}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}listen(t,e,n,s){const i=n;t.addEventListener(e,i,s);const o=()=>{try{t.removeEventListener(e,i,s)}catch{}};return this.O.push(o),o}setState(t){let e=!1;const n=t,s=this.state;for(const t in n){if(!Object.prototype.hasOwnProperty.call(n,t))continue;const i=n[t];Object.is(s[t],i)||(s[t]=i,e=!0)}if(e)if(this.q||!this.F)this.update(!0);else{if(!this.i||!this.isConnected)return;if(this.h)return;this.h=!0,requestAnimationFrame(()=>{this.h=!1,this.i&&this.isConnected&&this.update(!0)})}}updateState(t){Object.assign(this.state,t),this.i&&this.isConnected&&this.Y()}setProps(t){const e=Object.keys(t);if(0===e.length)return;const n=[];for(const i of e){const e=t[i],o=this.I[i];this.props[i]=e,this.F&&o!==e&&n.push(i);const r=this.t[i];r&&r.reflect&&s(this,i,e,r),this.F&&o===e||(this.I[i]=e)}if(this.F&&n.length>0)for(const e of n){const n=this.I[e],s=t[e];for(const t of this.k)try{t(e,n,s)}catch(t){l(String(t?.message||t))}}this.i&&this.isConnected?this.update(!0):this.C=!0}scheduleUpdate(){this.i&&this.isConnected&&this.Y()}Y(){this.l||this.h||(this.l=!0,("function"==typeof queueMicrotask?queueMicrotask:t=>Promise.resolve().then(t))(()=>{this.l=!1,this.i&&this.isConnected&&(this.h||this.update(!1))}))}update(t){if(this.i){if(t&&this.F)for(const t of this.A)try{t()}catch(t){l(String(t?.message||t))}if(t){this.tt();let t="";try{t=this.i()}catch(e){String(e?.message||e),t=""}if("string"!=typeof t&&(t=null==t?"":String(t)),t=((t,e)=>{const n={...this.props,...e};return t.replace(y,(t,e)=>{const s=n[e];return null==s?"":String(s)})})(t,this.state),!this.u){const e=`data-scope-owner="${this.V}"`;t=t.replace(/<slot(?![^>]*data-scope-owner)(\s|>)/g,`<slot ${e}$1`)}this.B=!1;const e=null!==this.o&&Object.is(this.o,t);let n=!1;e&&this.F||(this.u,this.p.innerHTML=t,this.o=t,n=!0),this.q?(this.et(),("function"==typeof requestAnimationFrame?requestAnimationFrame:t=>setTimeout(t,0))(()=>{this.i&&this.isConnected&&(n&&!r&&this.projectSlots(),n&&this.nt(),this.st(),this.it())})):(n&&!r&&this.projectSlots(),n&&this.ot(),this.st(),this.it())}else this.B&&this.tt(),this.st(),this.F&&this.it()}}forceRender(){this.o=null,this.i&&this.isConnected?this.q?this.C=!0:this.update(!0):this.C=!0}it(){if(!this.H){this.H=!0;for(const t of this.T)try{t()}catch(t){l(String(t?.message||t))}}for(const t of this._)try{t()}catch(t){l(String(t?.message||t))}this.rt()}rt(){const t=(this.u?this.p:this).querySelectorAll("*"),e=Object.prototype.hasOwnProperty,n=this.state,s=this.props;this.actions;for(let i=0;i<t.length;i++){const o=t[i];if(this.W(o))continue;if(0===o.attributes.length)continue;const r=o.attributes;for(let t=r.length-1;t>=0;t--){const i=r[t];if(!i.name.startsWith("bind:"))continue;const c=i.name.slice(5),h=i.value,f=h?h.trim():"";let l,u=!1;if(f){const t=this.D.get(f);if(t){t.P&&(this.B=!0);try{l=t()}catch{}u=!0}}if(!u){const t=f||c,i=e.call(n,t),o=!i&&e.call(s,t);i?l=n[t]:o&&(l=s[t])}if("text"===c){const t=null==l?"":String(l);o.textContent!==t&&(o.textContent=t)}else if("html"===c){const t=null==l?"":String(l);o.innerHTML!==t&&(o.innerHTML=t)}else if(c in o){if(!Object.is(o[c],l))try{o[c]=l}catch{}if("value"===c)try{null==l?o.removeAttribute("value"):o.setAttribute("value",String(l))}catch{}}else if(null!=l)try{o.setAttribute(c,String(l))}catch{}const a=`__scopeBind_${c}`,d=o[a];if(d){const t=d.ct;t&&o.removeEventListener(t,d),delete o[a]}}}}tt(){for(const t of this.j){let e,n=!0;if(void 0!==t.deps)try{const s="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(s)&&(e=s,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let s=0;s<e.length;s++)if(!Object.is(t.prevDeps[s],e[s])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){try{t.value=void 0!==t.deps?t.getter(e):t.getter()}catch(t){l(String(t?.message||t))}e&&(t.prevDeps=e.slice())}}}st(){for(const t of this.S){let e,n=!0;if(void 0!==t.deps)try{const s="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(s)&&(e=s,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let s=0;s<e.length;s++)if(!Object.is(t.prevDeps[s],e[s])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){if(t.cleanup){try{t.cleanup()}catch{}t.cleanup=void 0}try{const n=void 0!==t.deps?t.fn(e):t.fn();"function"==typeof n&&(t.cleanup=n)}catch{}e&&(t.prevDeps=e.slice())}}}Z(t){const e=this.S.indexOf(t);if(-1!==e){if(t.cleanup)try{t.cleanup()}catch{}this.S.splice(e,1)}}K(t){const e=t.ht;if(e&&"string"==typeof e)return this.D.set(e,t),e;const n=`__scope_bind_${++this.U}__`;this.D.set(n,t);try{t.ht=n,t.toString=()=>n}catch{}return n}et(){const t=(this.u?this.p:this).querySelectorAll("[ref]"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];if(0!==t.length)for(let n=0;n<t.length;n++){const s=t[n];if(this.W(s))continue;const i=s.getAttribute("ref");i&&(e[i]?Array.isArray(e[i])?e[i].push(s):e[i]=[e[i],s]:e[i]=s)}}nt(){const t=(this.u?this.p:this).querySelectorAll("*");for(let e=0;e<t.length;e++){const n=t[e];if(this.W(n))continue;if(0===n.attributes.length)continue;const s=n.attributes;for(let t=s.length-1;t>=0;t--){const e=s[t];if(!e.name.startsWith("on:"))continue;const i=e.name.slice(3),o=e.value,r=`__tinyHandler_${i}`,c=n[r];c&&n.removeEventListener(i,c),n.removeAttribute(e.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};n[r]=t,n.addEventListener(i,t)}}}}ot(){const t=(this.u?this.p:this).querySelectorAll("*"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];for(let n=0;n<t.length;n++){const s=t[n];if(this.W(s))continue;const i=s.getAttribute("ref");if(i&&(e[i]?Array.isArray(e[i])?e[i].push(s):e[i]=[e[i],s]:e[i]=s),s.attributes.length>0){const t=s.attributes;for(let e=t.length-1;e>=0;e--){const n=t[e];if(!n.name.startsWith("on:"))continue;const i=n.name.slice(3),o=n.value,r=`__tinyHandler_${i}`,c=s[r];c&&s.removeEventListener(i,c),s.removeAttribute(n.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};s[r]=t,s.addEventListener(i,t)}}}}}J(){const t=new Map,e=this.childNodes,n=[];for(let t=0;t<e.length;t++)n.push(e[t]);for(let e=0;e<n.length;e++){const s=n[e];let i="";1===s.nodeType&&s.getAttribute&&(i=s.getAttribute("slot")||""),t.has(i)||t.set(i,[]),t.get(i).push(s)}for(let t=0;t<n.length;t++){const e=n[t];e.parentNode&&e.parentNode.removeChild(e)}return t}projectSlots(){const t=this.m||new Map,e=(this.u?this.p:this).querySelectorAll(`slot[data-scope-owner="${this.V}"]`);if(0!==e.length)for(let n=0;n<e.length;n++){const s=e[n],i=s.getAttribute("name")||"",o=t.get(i)||[];if(o.length){const t=document.createDocumentFragment();for(let e=0;e<o.length;e++){const n=o[e];let s;if(1===n.nodeType&&n.tagName.includes("-")&&n.m instanceof Map){const t=n,e=document.createElement(t.tagName.toLowerCase());for(let n=0;n<t.attributes.length;n++){const s=t.attributes[n];e.setAttribute(s.name,s.value)}for(const n of t.m.values())for(let t=0;t<n.length;t++)e.appendChild(n[t].cloneNode(!0));s=e}else s=n.cloneNode(!0);t.appendChild(s)}s.replaceWith(t)}else{const t=s.childNodes,e=[];for(let n=0;n<t.length;n++)e.push(t[n]);if(e.length>0){const t=document.createDocumentFragment();for(let n=0;n<e.length;n++)t.appendChild(e[n]);s.replaceWith(t)}}}}G(t,e,n){const s=`${t}::${e}`;let i=this.L.get(s);if(!i){const n=t=>{const n=t.target&&t.target.closest?t.target.closest(e):null;if(n)for(const e of i.handlers)try{e(t,n)}catch{}};i={eventType:t,selector:e,listener:n,handlers:new Set},this.L.set(s,i),this.p.addEventListener(t,n)}i.handlers.add(n)}X(t,e,n){const s=`${t}::${e}`,i=this.L.get(s);if(i&&(i.handlers.delete(n),0===i.handlers.size)){try{this.p.removeEventListener(t,i.listener)}catch{}this.L.delete(s)}}}if(!customElements.get(t)){if(c&&"undefined"!=typeof document){const e=`scope-${t}-styles`;if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=c,document.head.appendChild(t)}}try{customElements.define(t,u)}catch(t){String(t?.message||t)}}return u},exports.devicePlugin=()=>({name:"device",extend:t=>{const e=new Map;return t.onDestroy(()=>{for(const[t,n]of e)t.removeEventListener("change",n);e.clear()}),{onMediaQuery:(t,n,s={})=>{if("undefined"==typeof window||"undefined"==typeof matchMedia)return()=>{};const{immediate:i=!0}=s,o=matchMedia(t),r=t=>{n(t.matches,t)};return o.addEventListener("change",r),e.set(o,r),i&&n(o.matches,null),()=>{o.removeEventListener("change",r),e.delete(o)}}}}}),exports.happy=()=>{console.info("The website is using @petit-kit/scoped v"+m,"\nhttps://github.com/petit-kit/scoped")},exports.inViewPlugin=()=>({name:"inview",extend:(t,e)=>{const n=new Set,s=(t,e,s={})=>{if("undefined"==typeof window||"undefined"==typeof IntersectionObserver)return()=>{};const{immediate:i=!0,...o}=s;let r=!i;const c=new IntersectionObserver(n=>{for(const s of n)s.target===t&&(r?r=!1:e(s.isIntersecting,s))},o);return c.observe(t),n.add(c),()=>{c.unobserve(t),c.disconnect(),n.delete(c)}};return t.onDestroy(()=>{for(const t of n)t.disconnect();n.clear()}),{onInView:(t,n)=>s(e,t,n),observeInView:(t,e,n)=>s(t,e,n)}}}),exports.lenisPlugin=t=>({name:"lenis",extend:e=>{const n=new Set;return e.onDestroy(()=>{for(const{lenis:t,handler:e}of n)"function"==typeof t.off&&t.off("scroll",e);n.clear()}),{onLenisScroll:e=>{const s=t();if(!s)return()=>{};const i=t=>{e(t)};s.on("scroll",i);const o={lenis:s,handler:i};return n.add(o),()=>{n.has(o)&&(n.delete(o),"function"==typeof s.off&&s.off("scroll",i))}}}}}),exports.lerpPlugin=()=>({name:"lerp",extend:t=>{const{timer:e}=i().extend(t,t.host),n=new Set;return t.onDestroy(()=>{for(const t of n)t();n.clear()}),{createLerp:t=>function({from:t=0,to:e=1,lerp:n=.1,tolerance:s=.001,resumeOnTarget:i=!0}={}){function o(){return h(p)}function l(t){if(y)return o();const e=(t=>t<0?0:t>1?1:t)(n);if(0===e)return o();if(1===e)return p=h(m),u.value=p,y=!0,o();const i=t>0?1-Math.pow(1-e,60*t):0;if(r(p)&&r(m)){let t=!0;for(let e=0;e<p.length;e+=1)p[e]+=(m[e]-p[e])*i,Math.abs(m[e]-p[e])>=s&&(t=!1);if(t){for(let t=0;t<p.length;t+=1)p[t]=m[t];y=!0}return u.value=p,h(p)}if(c(p)&&c(m)){const t=u.objectKeys??Object.keys(p);let e=!0;for(const n of t)p[n]+=(m[n]-p[n])*i,Math.abs(m[n]-p[n])>=s&&(e=!1);if(e){for(const e of t)p[e]=m[e];y=!0}return u.value=p,h(p)}const f=m;return p+=(f-p)*i,u.value=p,Math.abs(f-p)<s&&(p=f,u.value=p,y=!0),p}const u=a({from:t,to:e,label:"Lerp"}),d=u.normalizeInput;let p=u.value,m=u.target,w=null,y=!1;const g=new Set;return{setTarget:function(t){const e=d(t),n=!f(e,m);if(m=e,u.target=e,p=u.value,i&&y&&n){y=!1,w=null;for(const t of g)t(m)}},setValue:function(t,e={}){const{resetTime:n=!0,setTarget:s=!1,markDone:i=!1}=e;p=d(t),u.value=p,s&&(m=h(p),u.target=m);const o=y||!f(p,m);if(n&&(w=null),i&&(y=!0),o&&!i){y=!1,w=null;for(const t of g)t(m)}},getValue:o,isDone:function(){return y},onResume:function(t){return g.add(t),()=>{g.delete(t)}},step:l,next:function(t=performance.now()){if(null==w)return w=t,o();const e=(t-w)/1e3;w=t;const n=1/30;let s=e,i=o();for(;s>0&&!y;){const t=Math.min(s,n);i=l(t),s-=t}return i}}}(t),runLerp:(t,s,i={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=i;let h=!1,f=null;r&&s(t.getValue(),t);const l=()=>{f||(f=e.raf(e=>{if(h)return;const n=t.next(e);s(n,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&s(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),n.delete(d))};return n.add(d),d}}}}),exports.localStoragePlugin=(t={})=>({name:"localstorage",extend:n=>{const{prefix:s="",json:i=!0}=t,o="undefined"==typeof window?null:window.localStorage;return{storage:{get:t=>{if(o)try{const n=o.getItem(e(s,t));if(null===n)return;return i?JSON.parse(n):n}catch{return}},set:(t,n)=>{if(o)try{const r=i?JSON.stringify(n):String(n);o.setItem(e(s,t),r)}catch{}},remove:t=>{o&&o.removeItem(e(s,t))},clear:()=>{if(!o)return;if(!s)return;const t=[];for(let e=0;e<o.length;e++){const n=o.key(e);null!=n&&n.startsWith(s+":")&&t.push(n)}for(const e of t)o.removeItem(e)}}}}}),exports.morphPlugin=(t,e={})=>({name:"morph",extend:(n,s)=>{const{ignoreActiveValue:i=!0,callbacks:o}=e,r=t(),c=s,h=c.p,f=c.u?ShadowRoot.prototype:HTMLElement.prototype,l=Object.getOwnPropertyDescriptor(f,"innerHTML"),u=t=>{r.morph(h,t,{morphStyle:"innerHTML",ignoreActiveValue:i,callbacks:o})};let a=!0;return Object.defineProperty(h,"innerHTML",{set(t){a?(l.set.call(this,t),a=!1):u(t)},get(){return l.get.call(this)},configurable:!0}),n.onDestroy(()=>{delete h.innerHTML}),{morph:u}}}),exports.mousePlugin=o,exports.pointerPlugin=()=>({name:"pointer",extend:e=>{const{onMouseMove:n}=o().extend(e,e.host),{timer:s}=i().extend(e,e.host);d.x=window.innerWidth/2,d.y=window.innerHeight/2;const r={x:t({from:d.x,to:d.x,...p}),y:t({from:d.y,to:d.y,...p})};return n((t,e)=>{r.x.setTarget(t),r.y.setTarget(e)}),{onPointerMove:t=>{let e=d.x,n=d.y;s.raf(s=>{const i=r.x.next(s),o=r.y.next(s);var c,h;e===i&&n===o||(t({x:i,y:o,v:(c={x:i,y:o},h={x:e,y:n},{x:c.x-h.x,y:c.y-h.y,magnitude:Math.sqrt((c.x-h.x)*(c.x-h.x)+(c.y-h.y)*(c.y-h.y))}).magnitude}),e=i,n=o)})},onMouseMove:n}}}),exports.springPlugin=()=>({name:"spring",extend:e=>{const{timer:n}=i().extend(e,e.host),s=new Set;return e.onDestroy(()=>{for(const t of s)t();s.clear()}),{createSpring:e=>t(e),runSpring:(t,e,i={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=i;let h=!1,f=null;r&&e(t.getValue(),t);const l=()=>{f||(f=n.raf(n=>{if(h)return;const s=t.next(n);e(s,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&e(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),s.delete(d))};return s.add(d),d}}}}),exports.timerPlugin=i,exports.windowPlugin=()=>({name:"window",extend:t=>{const e=new Set,n=new Set,s=new Set,i=(t,n={})=>{if("undefined"==typeof window)return()=>{};const{immediate:s=!0}=n,i=e=>{t(window.innerWidth,window.innerHeight,e)};return window.addEventListener("resize",i),e.add(i),s&&i(new UIEvent("resize")),()=>{window.removeEventListener("resize",i),e.delete(i)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const t of e)window.removeEventListener("resize",t);e.clear();for(const t of s)t.disconnect();s.clear();for(const t of n)window.removeEventListener("scroll",t);n.clear()}}),{onViewportResize:i,onWindowResize:(t,e={})=>{if("undefined"==typeof window)return()=>{};if("undefined"==typeof ResizeObserver)return i((e,n,s)=>t(e,n,s),e);const{immediate:n=!0}=e,o=document.documentElement,r=new ResizeObserver(e=>{const n=e[0];if(!n)return;const{width:s,height:i}=n.contentRect;t(s,i,n)});if(r.observe(o),s.add(r),n){const e=o.getBoundingClientRect();t(e.width,e.height,new UIEvent("resize"))}return()=>{r.disconnect(),s.delete(r)}},onWindowScroll:(t,e={})=>{if("undefined"==typeof window)return()=>{};const{immediate:s=!0}=e,i=e=>{t(window.scrollX,window.scrollY,e)};return window.addEventListener("scroll",i,{passive:!0}),n.add(i),s&&i(new Event("scroll")),()=>{window.removeEventListener("scroll",i),n.delete(i)}}}}});
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ export * from './plugins';
|
|
|
3
3
|
* Scope - A lightweight, framework-agnostic library for building web components
|
|
4
4
|
*
|
|
5
5
|
* @module scope
|
|
6
|
-
* @version 0.0.5
|
|
7
6
|
* @description Provides a minimal abstraction over Custom Elements API, making it easy
|
|
8
7
|
* to create reusable, encapsulated components with reactive state, lifecycle hooks,
|
|
9
8
|
* and a simple template-based rendering system.
|
|
@@ -34,6 +33,7 @@ export * from './plugins';
|
|
|
34
33
|
* </div>
|
|
35
34
|
* `
|
|
36
35
|
* })
|
|
36
|
+
*
|
|
37
37
|
|
|
38
38
|
* ```
|
|
39
39
|
*
|
|
@@ -55,7 +55,7 @@ export * from './plugins';
|
|
|
55
55
|
*
|
|
56
56
|
* @constant {string}
|
|
57
57
|
*/
|
|
58
|
-
declare const SCOPE_VERSION
|
|
58
|
+
declare const SCOPE_VERSION: string;
|
|
59
59
|
/**
|
|
60
60
|
* Logs version and repository info for @petit-kit/scoped.
|
|
61
61
|
* Useful for debugging or confirming library presence.
|
|
@@ -522,6 +522,19 @@ export interface ComponentContextBase<Props = Record<string, any>, State = Recor
|
|
|
522
522
|
* ```
|
|
523
523
|
*/
|
|
524
524
|
delegate: (eventType: string, selector: string, handler: (event: Event, target: Element) => void) => () => void;
|
|
525
|
+
/**
|
|
526
|
+
* Escapes HTML special characters to prevent XSS when rendering user content.
|
|
527
|
+
* Use with `bind:text` or when building safe HTML strings.
|
|
528
|
+
*
|
|
529
|
+
* @param str - String to escape (falsy values return empty string)
|
|
530
|
+
* @returns Escaped string safe for HTML context
|
|
531
|
+
*
|
|
532
|
+
* @example
|
|
533
|
+
* ```typescript
|
|
534
|
+
* return () => `<span>${escapeHtml(userInput)}</span>`;
|
|
535
|
+
* ```
|
|
536
|
+
*/
|
|
537
|
+
escapeHtml: (str: unknown) => string;
|
|
525
538
|
}
|
|
526
539
|
/**
|
|
527
540
|
* Component context including plugin-provided extensions.
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function t({from:t=0,to:e=1,mass:n=1,stiffness:i=120,damping:s=14,velocity:o=0,tolerance:r=.001,resumeOnTarget:c=!0}={}){function h(){return d(v)}function f(t){if(M)return h();if(u(v)&&u(S)&&u(b)){let e=!0;for(let o=0;o<v.length;o+=1){const c=v[o]-S[o],h=(-i*c-s*b[o])/n;b[o]+=h*t,v[o]+=b[o]*t;const f=v[o]-S[o];(Math.abs(b[o])>=r||Math.abs(f)>=r)&&(e=!1)}if(e){for(let t=0;t<v.length;t+=1)v[t]=S[t],b[t]=0;M=!0}return l.value=v,l.velocity=b,d(v)}if(a(v)&&a(S)&&a(b)){const e=l.objectKeys??Object.keys(v);let o=!0;for(const c of e){const e=v[c]-S[c],h=(-i*e-s*b[c])/n;b[c]+=h*t,v[c]+=b[c]*t;const f=v[c]-S[c];(Math.abs(b[c])>=r||Math.abs(f)>=r)&&(o=!1)}if(o){for(const t of e)v[t]=S[t],b[t]=0;M=!0}return l.value=v,l.velocity=b,d(v)}const e=S;let o=b;o+=(-i*(v-e)-s*o)/n*t,v+=o*t,b=o,l.value=v,l.velocity=b;const c=v-e;return Math.abs(o)<r&&Math.abs(c)<r&&(v=e,b=0,l.value=v,l.velocity=b,M=!0),v}const l=y({from:t,to:e,velocity:o,label:"Spring"}),g=l.normalizeInput;let v=l.value,b=l.velocity??o,S=l.target,j=null,M=!1;const O=new Set;return{setTarget:function(t){const e=g(t),n=!m(e,S);if(S=e,l.target=e,v=l.value,c&&M&&n){M=!1,j=null;for(const t of O)t(S)}},setValue:function(t,e={}){const{resetVelocity:n=!0,resetTime:i=!0,setTarget:s=!1,markDone:o=!1}=e;v=g(t),l.value=v,s&&(S=d(v),l.target=S);const r=M||!m(v,S);if(n&&(b=null!=l.arrayLength?p(0,l.arrayLength):null!=l.objectKeys?w(0,l.objectKeys):0,l.velocity=b),i&&(j=null),o&&(M=!0),r&&!o){M=!1,j=null;for(const t of O)t(S)}},getValue:h,isDone:function(){return M},onResume:function(t){return O.add(t),()=>{O.delete(t)}},step:f,next:function(t=performance.now()){if(null==j)return j=t,h();const e=(t-j)/1e3;j=t;const n=1/30;let i=e,s=h();for(;i>0&&!M;){const t=Math.min(i,n);s=f(t),i-=t}return s}}}function e(t,e){if(!e||"object"!=typeof e||null==e.type)return null!=t?t:e;const{type:n,default:i}=e;if(null==t)return i;try{switch(n){case String:return String(t);case Number:{const e=Number(t);return Number.isNaN(e)?i:e}case Boolean:return""===t||"true"===t||"false"!==t&&"0"!==t&&null!=t;case Object:try{return"string"==typeof t?JSON.parse(t):t}catch{return i}case Array:try{return"string"==typeof t?JSON.parse(t):t}catch{return Array.isArray(i)?i:[]}default:return t}}catch{return i}}function n(t,e,n,i){if(!i||"object"!=typeof i||!i.reflect)return;let s=null;const o=i.type;if(o===Boolean)return n?void t.setAttribute(e,""):void t.removeAttribute(e);if(o===Object||o===Array)try{s=null==n?null:JSON.stringify(n)}catch{s=null}else s=null==n?null:String(n);null==s?t.removeAttribute(e):t.setAttribute(e,s)}function i(t,i={},s){const{props:o={},shadow:r=!1,styles:c,plugins:h}=i,f=h??[],l=()=>{};class u extends HTMLElement{constructor(){super(),this.version=M,this.t={};for(const t of Object.keys(o)){const e=o[t];this.t[t]=e&&"object"==typeof e&&("type"in e||"default"in e)?e:{type:void 0,default:e,reflect:!1}}this.props={},this.state={},this.actions={},this.refs={},this.emit=this.emit.bind(this),this.listen=this.listen.bind(this),this.setState=this.setState.bind(this),this.updateState=this.updateState.bind(this),this.setProps=this.setProps.bind(this),this.scheduleUpdate=this.scheduleUpdate.bind(this),this.update=this.update.bind(this),this.forceRender=this.forceRender.bind(this),this.destroy=this.destroy.bind(this),this.$=this.$.bind(this),this.i=null,this.o=null,this.h=!1,this.l=!1,this.u=r,this.m=r?this.attachShadow({mode:"open"}):this,this.p=null,this.S=[],this.j=[],this.M=[],this.O=[],this._=[],this.A=[],this.T=[],this.k=[],this.L=new Map,this.F=!1,this.I=!1,this.R={},this.V=!1,this.C=t,this.H=!1,this.D=new Set,this.U=!1,this.q=new Map,this.B=0,this.N=!1}W(t){const e=this.u?this.m.host:this;let n=t.parentElement;for(;n;){if(n===e)return!1;if(n.tagName.includes("-"))return!0;n=n.parentElement}return!1}static get observedAttributes(){return Object.keys(o)}attributeChangedCallback(t,n,i){if(n===i)return;const s=this.t[t],o=this.R[t],r=e(i,s);if(this.props[t]=r,this.F&&o!==r)for(const e of this.k)try{e(t,o,r)}catch(t){l(String(t?.message||t))}this.R[t]=r,this.D.has(t)?this.D.delete(t):this.i&&this.isConnected?this.U?this.H=!0:this.update(!0):this.H=!0}connectedCallback(){for(const t in this.t){if(!this.t.hasOwnProperty(t))continue;const n=e(this.getAttribute(t),this.t[t]);this.props[t]=n,this.R[t]=n}r||this.p||(this.p=this.P());let t=null;try{if(s){const e={props:this.props,state:this.state,actions:this.actions,refs:this.refs,emit:this.emit,listen:this.listen,updateState:this.updateState.bind(this),$:this.$,host:this,onMount:t=>this.M.push(t),onDestroy:t=>this.O.push(t),onUpdate:t=>this._.push(t),onBeforeUpdate:t=>this.A.push(t),onFirstUpdate:t=>this.T.push(t),onPropsChanged:t=>this.k.push(t),link:(t,e)=>{const i=e||t;this.state[i]=this.props[t],this.k.push((e,n,s)=>{e===t&&(Object.is(this.state[i],s)||(this.state[i]=s))});const s={fn:()=>{const e=this.state[i];if(Object.is(this.props[t],e))return;this.props[t]=e,this.R[t]=e;const s=this.t[t],o=s?{...s,reflect:!0}:s,r=this.getAttribute(t);this.D.add(t),n(this,t,e,o),r===this.getAttribute(t)&&this.D.delete(t)},deps:()=>[this.state[i]]};this.S.push(s)},computed:(t,e)=>{let n;if(void 0!==e)try{const t="function"==typeof e?e():e;Array.isArray(t)&&(n=t)}catch(t){String(t?.message||t)}const i={getter:t,deps:e,value:void 0!==e?t(n):t()};this.j.push(i);const s=()=>i.value;return s.J=i,this.K(s),s},effect:(t,e)=>{const n={fn:t,deps:e};return this.S.push(n),()=>this.Z(n)},delegate:(t,e,n)=>(this.G(t,e,n),()=>this.X(t,e,n))};for(const t of f)if(t)try{const n=t.extend(e,this);n&&"object"==typeof n&&Object.assign(e,n)}catch(t){l(String(t?.message||t))}t=s(e)}}catch(t){String(t?.message||t)}if(this.i="function"!=typeof t?()=>"":t,this.U=!0,this.update(!0),this.U=!1,this.H&&(this.H=!1,this.update(!0)),!this.F){this.F=!0;for(const t of this.M)try{t()}catch(t){l(String(t?.message||t))}}}disconnectedCallback(){this.destroy()}remove(){super.remove()}$(t){const e=this.m.querySelectorAll(t);return 0===e.length?null:1===e.length?e[0]:Array.from(e)}destroy(){for(const t of this.O)try{t()}catch(t){l(String(t?.message||t))}for(const t of this.S)if(t.cleanup){try{t.cleanup()}catch(t){l(String(t?.message||t))}t.cleanup=void 0}for(const[,t]of this.L)try{this.m.removeEventListener(t.eventType,t.listener)}catch{}this.L.clear(),this.F=!1}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}listen(t,e,n,i){const s=n;t.addEventListener(e,s,i);const o=()=>{try{t.removeEventListener(e,s,i)}catch{}};return this.O.push(o),o}setState(t){let e=!1;const n=t,i=this.state;for(const t in n){if(!Object.prototype.hasOwnProperty.call(n,t))continue;const s=n[t];Object.is(i[t],s)||(i[t]=s,e=!0)}if(e)if(this.U||!this.F)this.update(!0);else{if(!this.i||!this.isConnected)return;if(this.h)return;this.h=!0,requestAnimationFrame(()=>{this.h=!1,this.i&&this.isConnected&&this.update(!0)})}}updateState(t){Object.assign(this.state,t),this.i&&this.isConnected&&this.Y()}setProps(t){const e=Object.keys(t);if(0===e.length)return;const i=[];for(const s of e){const e=t[s],o=this.R[s];this.props[s]=e,this.F&&o!==e&&i.push(s);const r=this.t[s];r&&r.reflect&&n(this,s,e,r),this.F&&o===e||(this.R[s]=e)}if(this.F&&i.length>0)for(const e of i){const n=this.R[e],i=t[e];for(const t of this.k)try{t(e,n,i)}catch(t){l(String(t?.message||t))}}this.i&&this.isConnected?this.update(!0):this.H=!0}scheduleUpdate(){this.i&&this.isConnected&&this.Y()}Y(){this.l||this.h||(this.l=!0,("function"==typeof queueMicrotask?queueMicrotask:t=>Promise.resolve().then(t))(()=>{this.l=!1,this.i&&this.isConnected&&(this.h||this.update(!1))}))}update(t){if(this.i){if(t&&this.F)for(const t of this.A)try{t()}catch(t){l(String(t?.message||t))}if(t){this.tt();let t="";try{t=this.i()}catch(e){String(e?.message||e),t=""}if("string"!=typeof t&&(t=null==t?"":String(t)),t=((t,e)=>{const n={...this.props,...e};return t.replace($,(t,e)=>{const i=n[e];return null==i?"":String(i)})})(t,this.state),!this.u){const e=`data-scope-owner="${this.C}"`;t=t.replace(/<slot(?![^>]*data-scope-owner)(\s|>)/g,`<slot ${e}$1`)}this.N=!1;const e=null!==this.o&&Object.is(this.o,t);let n=!1;e&&this.F||(this.u,this.m.innerHTML=t,this.o=t,n=!0),this.U?(this.et(),("function"==typeof requestAnimationFrame?requestAnimationFrame:t=>setTimeout(t,0))(()=>{this.i&&this.isConnected&&(n&&!r&&this.projectSlots(),n&&this.nt(),this.it(),this.st())})):(n&&!r&&this.projectSlots(),n&&this.ot(),this.it(),this.st())}else this.N&&this.tt(),this.it(),this.F&&this.st()}}forceRender(){this.o=null,this.i&&this.isConnected?this.U?this.H=!0:this.update(!0):this.H=!0}st(){if(!this.I){this.I=!0;for(const t of this.T)try{t()}catch(t){l(String(t?.message||t))}}for(const t of this._)try{t()}catch(t){l(String(t?.message||t))}this.rt()}rt(){const t=(this.u?this.m:this).querySelectorAll("*"),e=Object.prototype.hasOwnProperty,n=this.state,i=this.props;this.actions;for(let s=0;s<t.length;s++){const o=t[s];if(this.W(o))continue;if(0===o.attributes.length)continue;const r=o.attributes;for(let t=r.length-1;t>=0;t--){const s=r[t];if(!s.name.startsWith(_))continue;const c=s.name.slice(5),h=s.value,f=h?h.trim():"";let l,u=!1;if(f){const t=this.q.get(f);if(t){t.J&&(this.N=!0);try{l=t()}catch{}u=!0}}if(!u){const t=f||c,s=e.call(n,t),o=!s&&e.call(i,t);s?l=n[t]:o&&(l=i[t])}if("text"===c){const t=null==l?"":String(l);o.textContent!==t&&(o.textContent=t)}else if("html"===c){const t=null==l?"":String(l);o.innerHTML!==t&&(o.innerHTML=t)}else if(c in o){if(!Object.is(o[c],l))try{o[c]=l}catch{}if("value"===c)try{null==l?o.removeAttribute("value"):o.setAttribute("value",String(l))}catch{}}else if(null!=l)try{o.setAttribute(c,String(l))}catch{}const a=`__scopeBind_${c}`,d=o[a];if(d){const t=d.ct;t&&o.removeEventListener(t,d),delete o[a]}}}}tt(){for(const t of this.j){let e,n=!0;if(void 0!==t.deps)try{const i="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(i)&&(e=i,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let i=0;i<e.length;i++)if(!Object.is(t.prevDeps[i],e[i])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){try{t.value=void 0!==t.deps?t.getter(e):t.getter()}catch(t){l(String(t?.message||t))}e&&(t.prevDeps=e.slice())}}}it(){for(const t of this.S){let e,n=!0;if(void 0!==t.deps)try{const i="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(i)&&(e=i,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let i=0;i<e.length;i++)if(!Object.is(t.prevDeps[i],e[i])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){if(t.cleanup){try{t.cleanup()}catch{}t.cleanup=void 0}try{const n=void 0!==t.deps?t.fn(e):t.fn();"function"==typeof n&&(t.cleanup=n)}catch{}e&&(t.prevDeps=e.slice())}}}Z(t){const e=this.S.indexOf(t);if(-1!==e){if(t.cleanup)try{t.cleanup()}catch{}this.S.splice(e,1)}}K(t){const e=t.ht;if(e&&"string"==typeof e)return this.q.set(e,t),e;const n=`__scope_bind_${++this.B}__`;this.q.set(n,t);try{t.ht=n,t.toString=()=>n}catch{}return n}et(){const t=(this.u?this.m:this).querySelectorAll("[ref]"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];if(0!==t.length)for(let n=0;n<t.length;n++){const i=t[n];if(this.W(i))continue;const s=i.getAttribute("ref");s&&(e[s]?Array.isArray(e[s])?e[s].push(i):e[s]=[e[s],i]:e[s]=i)}}nt(){const t=(this.u?this.m:this).querySelectorAll("*");for(let e=0;e<t.length;e++){const n=t[e];if(this.W(n))continue;if(0===n.attributes.length)continue;const i=n.attributes;for(let t=i.length-1;t>=0;t--){const e=i[t];if(!e.name.startsWith("on:"))continue;const s=e.name.slice(3),o=e.value,r=`__tinyHandler_${s}`,c=n[r];c&&n.removeEventListener(s,c),n.removeAttribute(e.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};n[r]=t,n.addEventListener(s,t)}}}}ot(){const t=(this.u?this.m:this).querySelectorAll("*"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];for(let n=0;n<t.length;n++){const i=t[n];if(this.W(i))continue;const s=i.getAttribute("ref");if(s&&(e[s]?Array.isArray(e[s])?e[s].push(i):e[s]=[e[s],i]:e[s]=i),i.attributes.length>0){const t=i.attributes;for(let e=t.length-1;e>=0;e--){const n=t[e];if(!n.name.startsWith("on:"))continue;const s=n.name.slice(3),o=n.value,r=`__tinyHandler_${s}`,c=i[r];c&&i.removeEventListener(s,c),i.removeAttribute(n.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};i[r]=t,i.addEventListener(s,t)}}}}}P(){const t=new Map,e=this.childNodes,n=[];for(let t=0;t<e.length;t++)n.push(e[t]);for(let e=0;e<n.length;e++){const i=n[e];let s="";1===i.nodeType&&i.getAttribute&&(s=i.getAttribute("slot")||""),t.has(s)||t.set(s,[]),t.get(s).push(i)}for(let t=0;t<n.length;t++){const e=n[t];e.parentNode&&e.parentNode.removeChild(e)}return t}projectSlots(){const t=this.p||new Map,e=(this.u?this.m:this).querySelectorAll(`slot[data-scope-owner="${this.C}"]`);if(0!==e.length)for(let n=0;n<e.length;n++){const i=e[n],s=i.getAttribute("name")||"",o=t.get(s)||[];if(o.length){const t=document.createDocumentFragment();for(let e=0;e<o.length;e++){const n=o[e];let i;if(1===n.nodeType&&n.tagName.includes("-")&&n.p instanceof Map){const t=n,e=document.createElement(t.tagName.toLowerCase());for(let n=0;n<t.attributes.length;n++){const i=t.attributes[n];e.setAttribute(i.name,i.value)}for(const n of t.p.values())for(let t=0;t<n.length;t++)e.appendChild(n[t].cloneNode(!0));i=e}else i=n.cloneNode(!0);t.appendChild(i)}i.replaceWith(t)}else{const t=i.childNodes,e=[];for(let n=0;n<t.length;n++)e.push(t[n]);if(e.length>0){const t=document.createDocumentFragment();for(let n=0;n<e.length;n++)t.appendChild(e[n]);i.replaceWith(t)}}}}G(t,e,n){const i=`${t}::${e}`;let s=this.L.get(i);if(!s){const n=t=>{const n=t.target&&t.target.closest?t.target.closest(e):null;if(n)for(const e of s.handlers)try{e(t,n)}catch{}};s={eventType:t,selector:e,listener:n,handlers:new Set},this.L.set(i,s),this.m.addEventListener(t,n)}s.handlers.add(n)}X(t,e,n){const i=`${t}::${e}`,s=this.L.get(i);if(s&&(s.handlers.delete(n),0===s.handlers.size)){try{this.m.removeEventListener(t,s.listener)}catch{}this.L.delete(i)}}}if(!customElements.get(t)){if(c&&"undefined"!=typeof document){const e=`scope-${t}-styles`;if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=c,document.head.appendChild(t)}}try{customElements.define(t,u)}catch(t){String(t?.message||t)}}return u}const s=()=>({name:"device",extend:t=>{const e=new Map;return t.onDestroy(()=>{for(const[t,n]of e)t.removeEventListener("change",n);e.clear()}),{onMediaQuery:(t,n,i={})=>{if("undefined"==typeof window||"undefined"==typeof matchMedia)return()=>{};const{immediate:s=!0}=i,o=matchMedia(t),r=t=>{n(t.matches,t)};return o.addEventListener("change",r),e.set(o,r),s&&n(o.matches,null),()=>{o.removeEventListener("change",r),e.delete(o)}}}}}),o=(t,e={})=>({name:"morph",extend:(n,i)=>{const{ignoreActiveValue:s=!0,callbacks:o}=e,r=t(),c=i,h=c.m,f=c.u?ShadowRoot.prototype:HTMLElement.prototype,l=Object.getOwnPropertyDescriptor(f,"innerHTML"),u=t=>{r.morph(h,t,{morphStyle:"innerHTML",ignoreActiveValue:s,callbacks:o})};let a=!0;return Object.defineProperty(h,"innerHTML",{set(t){a?(l.set.call(this,t),a=!1):u(t)},get(){return l.get.call(this)},configurable:!0}),n.onDestroy(()=>{delete h.innerHTML}),{morph:u}}}),r=()=>({name:"window",extend:t=>{const e=new Set,n=new Set,i=new Set,s=(t,n={})=>{if("undefined"==typeof window)return()=>{};const{immediate:i=!0}=n,s=e=>{t(window.innerWidth,window.innerHeight,e)};return window.addEventListener("resize",s),e.add(s),i&&s(new UIEvent("resize")),()=>{window.removeEventListener("resize",s),e.delete(s)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const t of e)window.removeEventListener("resize",t);e.clear();for(const t of i)t.disconnect();i.clear();for(const t of n)window.removeEventListener("scroll",t);n.clear()}}),{onViewportResize:s,onWindowResize:(t,e={})=>{if("undefined"==typeof window)return()=>{};if("undefined"==typeof ResizeObserver)return s((e,n,i)=>t(e,n,i),e);const{immediate:n=!0}=e,o=document.documentElement,r=new ResizeObserver(e=>{const n=e[0];if(!n)return;const{width:i,height:s}=n.contentRect;t(i,s,n)});if(r.observe(o),i.add(r),n){const e=o.getBoundingClientRect();t(e.width,e.height,new UIEvent("resize"))}return()=>{r.disconnect(),i.delete(r)}},onWindowScroll:(t,e={})=>{if("undefined"==typeof window)return()=>{};const{immediate:i=!0}=e,s=e=>{t(window.scrollX,window.scrollY,e)};return window.addEventListener("scroll",s,{passive:!0}),n.add(s),i&&s(new Event("scroll")),()=>{window.removeEventListener("scroll",s),n.delete(s)}}}}}),c=()=>({name:"inview",extend:(t,e)=>{const n=new Set,i=(t,e,i={})=>{if("undefined"==typeof window||"undefined"==typeof IntersectionObserver)return()=>{};const{immediate:s=!0,...o}=i;let r=!s;const c=new IntersectionObserver(n=>{for(const i of n)i.target===t&&(r?r=!1:e(i.isIntersecting,i))},o);return c.observe(t),n.add(c),()=>{c.unobserve(t),c.disconnect(),n.delete(c)}};return t.onDestroy(()=>{for(const t of n)t.disconnect();n.clear()}),{onInView:(t,n)=>i(e,t,n),observeInView:(t,e,n)=>i(t,e,n)}}}),h=t=>({name:"lenis",extend:e=>{const n=new Set;return e.onDestroy(()=>{for(const{lenis:t,handler:e}of n)"function"==typeof t.off&&t.off("scroll",e);n.clear()}),{onLenisScroll:e=>{const i=t();if(!i)return()=>{};const s=t=>{e(t)};i.on("scroll",s);const o={lenis:i,handler:s};return n.add(o),()=>{n.has(o)&&(n.delete(o),"function"==typeof i.off&&i.off("scroll",s))}}}}}),f=()=>({name:"timer",extend:t=>{const e=new Set,n=new Set,i=new Set,s={setTimeout:(t,n,...i)=>{let s;return s=setTimeout((...n)=>{e.delete(s),t(...n)},n,...i),e.add(s),s},setInterval:(t,e,...i)=>{const s=setInterval(t,e,...i);return n.add(s),s},raf:(t,e)=>{let n=0,s=!0,o=0;const r="number"==typeof e&&e>0?1e3/e:0,c=e=>{if(i.delete(n),s){if(r){if(e-o>=r){const n=o?e-o:r;o=e,t(e,n)}}else{const n=o?e-o:0;o=e,t(e,n)}n=requestAnimationFrame(c),i.add(n)}};return n=requestAnimationFrame(c),i.add(n),()=>{s&&(s=!1,i.delete(n),cancelAnimationFrame(n))}}};return t.onDestroy(()=>{for(const t of e)clearTimeout(t);e.clear();for(const t of n)clearInterval(t);n.clear();for(const t of i)cancelAnimationFrame(t);i.clear()}),{timer:s}}}),l=()=>({name:"mouse",extend:t=>{const e=new Map,n=(t,n)=>{if("undefined"==typeof window)return()=>{};const i=t=>{const e=t;n(e.clientX,e.clientY,e)};window.addEventListener(t,i);let s=e.get(t);return s||(s=new Set,e.set(t,s)),s.add(i),()=>{window.removeEventListener(t,i),s?.delete(i)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const[t,n]of e){for(const e of n)window.removeEventListener(t,e);n.clear()}e.clear()}}),{onMouseMove:t=>n("mousemove",t),onMouseDown:t=>n("mousedown",t),onMouseUp:t=>n("mouseup",t),onMouseWheel:t=>(t=>{if("undefined"==typeof window)return()=>{};const n=e=>{const n=e;t(n.clientX,n.clientY,n.deltaY,n)};window.addEventListener("wheel",n);let i=e.get("wheel");return i||(i=new Set,e.set("wheel",i)),i.add(n),()=>{window.removeEventListener("wheel",n),i?.delete(n)}})(t)}}}),u=t=>Array.isArray(t),a=t=>null!=t&&"object"==typeof t&&!Array.isArray(t),d=t=>u(t)?t.slice():a(t)?{...t}:t,m=(t,e)=>{if(u(t)&&u(e)){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n+=1)if(!Object.is(t[n],e[n]))return!1;return!0}if(a(t)&&a(e)){const n=Object.keys(t),i=Object.keys(e);if(n.length!==i.length)return!1;for(const i of n){if(!(i in e))return!1;if(!Object.is(t[i],e[i]))return!1}return!0}return!(u(t)||u(e)||a(t)||a(e))&&Object.is(t,e)},p=(t,e)=>Array.from({length:e},()=>t),w=(t,e)=>e.reduce((e,n)=>(e[n]=t,e),{}),y=({from:t,to:e,velocity:n,label:i})=>{const s={value:t,target:e,velocity:n,arrayLength:null,objectKeys:null,normalizeInput:t=>t},o=t=>{if(null==s.arrayLength){if(null!=s.objectKeys)throw new Error(`${i} value shape mismatch (array vs object).`);s.arrayLength=t,u(s.value)||(s.value=p(s.value,t)),u(s.target)||(s.target=p(s.target,t)),void 0===s.velocity||u(s.velocity)||(s.velocity=p(s.velocity,t))}},r=t=>{if(null==s.objectKeys){if(null!=s.arrayLength)throw new Error(`${i} value shape mismatch (object vs array).`);s.objectKeys=t,a(s.value)||(s.value=w(s.value,t)),a(s.target)||(s.target=w(s.target,t)),void 0===s.velocity||a(s.velocity)||(s.velocity=w(s.velocity,t))}},c=t=>{if(u(t)){if(null!=s.objectKeys)throw new Error(`${i} value shape mismatch (array vs object).`);if(null==s.arrayLength&&o(t.length),t.length!==s.arrayLength)throw new Error(`${i} value length mismatch (expected ${s.arrayLength}, got ${t.length}).`);return t.slice()}if(a(t)){if(null!=s.arrayLength)throw new Error(`${i} value shape mismatch (object vs array).`);const e=Object.keys(t);if(null==s.objectKeys&&r(e),s.objectKeys&&e.length!==s.objectKeys.length)throw new Error(`${i} value keys mismatch (expected ${s.objectKeys.length}, got ${e.length}).`);if(s.objectKeys)for(const e of s.objectKeys)if(!(e in t))throw new Error(`${i} value keys mismatch (missing key "${e}").`);return{...t}}return null!=s.arrayLength?p(t,s.arrayLength):null!=s.objectKeys?w(t,s.objectKeys):t};s.normalizeInput=c;const h=u(t)||u(e)||void 0!==n&&u(n),f=a(t)||a(e)||void 0!==n&&a(n);if(h&&f)throw new Error(`${i} value shape mismatch (array vs object).`);if(h){const i=u(t)?t.length:u(e)?e.length:n.length;o(i),s.value=c(t),s.target=c(e),void 0!==s.velocity&&(s.velocity=c(s.velocity))}else if(f){const i=a(t)?Object.keys(t):a(e)?Object.keys(e):Object.keys(n);r(i),s.value=c(t),s.target=c(e),void 0!==s.velocity&&(s.velocity=c(s.velocity))}return s};let g={x:-1,y:-1};const v={stiffness:300,damping:30,mass:1},b=()=>({name:"pointer",extend:e=>{const{onMouseMove:n}=l().extend(e,e.host),{timer:i}=f().extend(e,e.host);g.x=window.innerWidth/2,g.y=window.innerHeight/2;const s={x:t({from:g.x,to:g.x,...v}),y:t({from:g.y,to:g.y,...v})};return n((t,e)=>{s.x.setTarget(t),s.y.setTarget(e)}),{onPointerMove:t=>{let e=g.x,n=g.y;i.raf(i=>{const o=s.x.next(i),r=s.y.next(i);var c,h;e===o&&n===r||(t({x:o,y:r,v:(c={x:o,y:r},h={x:e,y:n},{x:c.x-h.x,y:c.y-h.y,magnitude:Math.sqrt((c.x-h.x)*(c.x-h.x)+(c.y-h.y)*(c.y-h.y))}).magnitude}),e=o,n=r)})},onMouseMove:n}}}),S=()=>({name:"lerp",extend:t=>{const{timer:e}=f().extend(t,t.host),n=new Set;return t.onDestroy(()=>{for(const t of n)t();n.clear()}),{createLerp:t=>function({from:t=0,to:e=1,lerp:n=.1,tolerance:i=.001,resumeOnTarget:s=!0}={}){function o(){return d(f)}function r(t){if(w)return o();const e=(t=>t<0?0:t>1?1:t)(n);if(0===e)return o();if(1===e)return f=d(l),c.value=f,w=!0,o();const s=t>0?1-Math.pow(1-e,60*t):0;if(u(f)&&u(l)){let t=!0;for(let e=0;e<f.length;e+=1)f[e]+=(l[e]-f[e])*s,Math.abs(l[e]-f[e])>=i&&(t=!1);if(t){for(let t=0;t<f.length;t+=1)f[t]=l[t];w=!0}return c.value=f,d(f)}if(a(f)&&a(l)){const t=c.objectKeys??Object.keys(f);let e=!0;for(const n of t)f[n]+=(l[n]-f[n])*s,Math.abs(l[n]-f[n])>=i&&(e=!1);if(e){for(const e of t)f[e]=l[e];w=!0}return c.value=f,d(f)}const r=l;return f+=(r-f)*s,c.value=f,Math.abs(r-f)<i&&(f=r,c.value=f,w=!0),f}const c=y({from:t,to:e,label:"Lerp"}),h=c.normalizeInput;let f=c.value,l=c.target,p=null,w=!1;const g=new Set;return{setTarget:function(t){const e=h(t),n=!m(e,l);if(l=e,c.target=e,f=c.value,s&&w&&n){w=!1,p=null;for(const t of g)t(l)}},setValue:function(t,e={}){const{resetTime:n=!0,setTarget:i=!1,markDone:s=!1}=e;f=h(t),c.value=f,i&&(l=d(f),c.target=l);const o=w||!m(f,l);if(n&&(p=null),s&&(w=!0),o&&!s){w=!1,p=null;for(const t of g)t(l)}},getValue:o,isDone:function(){return w},onResume:function(t){return g.add(t),()=>{g.delete(t)}},step:r,next:function(t=performance.now()){if(null==p)return p=t,o();const e=(t-p)/1e3;p=t;const n=1/30;let i=e,s=o();for(;i>0&&!w;){const t=Math.min(i,n);s=r(t),i-=t}return s}}}(t),runLerp:(t,i,s={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=s;let h=!1,f=null;r&&i(t.getValue(),t);const l=()=>{f||(f=e.raf(e=>{if(h)return;const n=t.next(e);i(n,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&i(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),n.delete(d))};return n.add(d),d}}}}),j=()=>({name:"spring",extend:e=>{const{timer:n}=f().extend(e,e.host),i=new Set;return e.onDestroy(()=>{for(const t of i)t();i.clear()}),{createSpring:e=>t(e),runSpring:(t,e,s={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=s;let h=!1,f=null;r&&e(t.getValue(),t);const l=()=>{f||(f=n.raf(n=>{if(h)return;const i=t.next(n);e(i,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&e(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),i.delete(d))};return i.add(d),d}}}}),M="0.0.5",O=()=>{console.info("The website is using @petit-kit/scoped v"+M,"\nhttps://github.com/petit-kit/scoped")},$=/\{([A-Za-z_$][\w$]*)\}/g,_="bind:";export{M as SCOPE_VERSION,i as define,s as devicePlugin,O as happy,c as inViewPlugin,h as lenisPlugin,S as lerpPlugin,o as morphPlugin,l as mousePlugin,b as pointerPlugin,j as springPlugin,f as timerPlugin,r as windowPlugin};
|
|
1
|
+
function t({from:t=0,to:e=1,mass:n=1,stiffness:i=120,damping:s=14,velocity:o=0,tolerance:r=.001,resumeOnTarget:c=!0}={}){function h(){return m(v)}function f(t){if(M)return h();if(a(v)&&a(S)&&a(b)){let e=!0;for(let o=0;o<v.length;o+=1){const c=v[o]-S[o],h=(-i*c-s*b[o])/n;b[o]+=h*t,v[o]+=b[o]*t;const f=v[o]-S[o];(Math.abs(b[o])>=r||Math.abs(f)>=r)&&(e=!1)}if(e){for(let t=0;t<v.length;t+=1)v[t]=S[t],b[t]=0;M=!0}return l.value=v,l.velocity=b,m(v)}if(d(v)&&d(S)&&d(b)){const e=l.objectKeys??Object.keys(v);let o=!0;for(const c of e){const e=v[c]-S[c],h=(-i*e-s*b[c])/n;b[c]+=h*t,v[c]+=b[c]*t;const f=v[c]-S[c];(Math.abs(b[c])>=r||Math.abs(f)>=r)&&(o=!1)}if(o){for(const t of e)v[t]=S[t],b[t]=0;M=!0}return l.value=v,l.velocity=b,m(v)}const e=S;let o=b;o+=(-i*(v-e)-s*o)/n*t,v+=o*t,b=o,l.value=v,l.velocity=b;const c=v-e;return Math.abs(o)<r&&Math.abs(c)<r&&(v=e,b=0,l.value=v,l.velocity=b,M=!0),v}const l=g({from:t,to:e,velocity:o,label:"Spring"}),u=l.normalizeInput;let v=l.value,b=l.velocity??o,S=l.target,j=null,M=!1;const O=new Set;return{setTarget:function(t){const e=u(t),n=!p(e,S);if(S=e,l.target=e,v=l.value,c&&M&&n){M=!1,j=null;for(const t of O)t(S)}},setValue:function(t,e={}){const{resetVelocity:n=!0,resetTime:i=!0,setTarget:s=!1,markDone:o=!1}=e;v=u(t),l.value=v,s&&(S=m(v),l.target=S);const r=M||!p(v,S);if(n&&(b=null!=l.arrayLength?w(0,l.arrayLength):null!=l.objectKeys?y(0,l.objectKeys):0,l.velocity=b),i&&(j=null),o&&(M=!0),r&&!o){M=!1,j=null;for(const t of O)t(S)}},getValue:h,isDone:function(){return M},onResume:function(t){return O.add(t),()=>{O.delete(t)}},step:f,next:function(t=performance.now()){if(null==j)return j=t,h();const e=(t-j)/1e3;j=t;const n=1/30;let i=e,s=h();for(;i>0&&!M;){const t=Math.min(i,n);s=f(t),i-=t}return s}}}function e(t,e){return t?`${t}:${e}`:e}function n(t,e){if(!e||"object"!=typeof e||null==e.type)return null!=t?t:e;const{type:n,default:i}=e;if(null==t)return i;try{switch(n){case String:return String(t);case Number:{const e=Number(t);return Number.isNaN(e)?i:e}case Boolean:return""===t||"true"===t||"false"!==t&&"0"!==t&&null!=t;case Object:try{return"string"==typeof t?JSON.parse(t):t}catch{return i}case Array:try{return"string"==typeof t?JSON.parse(t):t}catch{return Array.isArray(i)?i:[]}default:return t}}catch{return i}}function i(t,e,n,i){if(!i||"object"!=typeof i||!i.reflect)return;let s=null;const o=i.type;if(o===Boolean)return n?void t.setAttribute(e,""):void t.removeAttribute(e);if(o===Object||o===Array)try{s=null==n?null:JSON.stringify(n)}catch{s=null}else s=null==n?null:String(n);null==s?t.removeAttribute(e):t.setAttribute(e,s)}function s(t,e={},s){const{props:o={},shadow:r=!1,styles:c,plugins:h}=e,f=h??[],l=()=>{};class u extends HTMLElement{constructor(){super(),this.version=$,this.t={};for(const t of Object.keys(o)){const e=o[t];this.t[t]=e&&"object"==typeof e&&("type"in e||"default"in e)?e:{type:void 0,default:e,reflect:!1}}this.props={},this.state={},this.actions={},this.refs={},this.emit=this.emit.bind(this),this.listen=this.listen.bind(this),this.setState=this.setState.bind(this),this.updateState=this.updateState.bind(this),this.setProps=this.setProps.bind(this),this.scheduleUpdate=this.scheduleUpdate.bind(this),this.update=this.update.bind(this),this.forceRender=this.forceRender.bind(this),this.destroy=this.destroy.bind(this),this.$=this.$.bind(this),this.i=null,this.o=null,this.h=!1,this.l=!1,this.u=r,this.m=r?this.attachShadow({mode:"open"}):this,this.p=null,this.S=[],this.j=[],this.M=[],this.O=[],this._=[],this.A=[],this.T=[],this.k=[],this.L=new Map,this.F=!1,this.H=!1,this.I={},this.R=!1,this.V=t,this.C=!1,this.N=new Set,this.q=!1,this.D=new Map,this.U=0,this.B=!1}W(t){const e=this.u?this.m.host:this;let n=t.parentElement;for(;n;){if(n===e)return!1;if(n.tagName.includes("-"))return!0;n=n.parentElement}return!1}static get observedAttributes(){return Object.keys(o)}attributeChangedCallback(t,e,i){if(e===i)return;const s=this.t[t],o=this.I[t],r=n(i,s);if(this.props[t]=r,this.F&&o!==r)for(const e of this.k)try{e(t,o,r)}catch(t){l(String(t?.message||t))}this.I[t]=r,this.N.has(t)?this.N.delete(t):this.i&&this.isConnected?this.q?this.C=!0:this.update(!0):this.C=!0}connectedCallback(){for(const t in this.t){if(!this.t.hasOwnProperty(t))continue;const e=n(this.getAttribute(t),this.t[t]);this.props[t]=e,this.I[t]=e}r||this.p||(this.p=this.J());let t=null;try{if(s){const e={props:this.props,state:this.state,actions:this.actions,refs:this.refs,emit:this.emit,listen:this.listen,updateState:this.updateState.bind(this),$:this.$,host:this,onMount:t=>this.M.push(t),onDestroy:t=>this.O.push(t),onUpdate:t=>this._.push(t),onBeforeUpdate:t=>this.A.push(t),onFirstUpdate:t=>this.T.push(t),onPropsChanged:t=>this.k.push(t),link:(t,e)=>{const n=e||t;this.state[n]=this.props[t],this.k.push((e,i,s)=>{e===t&&(Object.is(this.state[n],s)||(this.state[n]=s))});const s={fn:()=>{const e=this.state[n];if(Object.is(this.props[t],e))return;this.props[t]=e,this.I[t]=e;const s=this.t[t],o=s?{...s,reflect:!0}:s,r=this.getAttribute(t);this.N.add(t),i(this,t,e,o),r===this.getAttribute(t)&&this.N.delete(t)},deps:()=>[this.state[n]]};this.S.push(s)},computed:(t,e)=>{let n;if(void 0!==e)try{const t="function"==typeof e?e():e;Array.isArray(t)&&(n=t)}catch(t){String(t?.message||t)}const i={getter:t,deps:e,value:void 0!==e?t(n):t()};this.j.push(i);const s=()=>i.value;return s.P=i,this.K(s),s},effect:(t,e)=>{const n={fn:t,deps:e};return this.S.push(n),()=>this.Z(n)},delegate:(t,e,n)=>(this.G(t,e,n),()=>this.X(t,e,n)),escapeHtml:x};for(const t of f)if(t)try{const n=t.extend(e,this);n&&"object"==typeof n&&Object.assign(e,n)}catch(t){l(String(t?.message||t))}t=s(e)}}catch(t){String(t?.message||t)}if(this.i="function"!=typeof t?()=>"":t,this.q=!0,this.update(!0),this.q=!1,this.C&&(this.C=!1,this.update(!0)),!this.F){this.F=!0;for(const t of this.M)try{t()}catch(t){l(String(t?.message||t))}}}disconnectedCallback(){this.destroy()}remove(){super.remove()}$(t){const e=this.m.querySelectorAll(t);return 0===e.length?null:1===e.length?e[0]:Array.from(e)}destroy(){for(const t of this.O)try{t()}catch(t){l(String(t?.message||t))}for(const t of this.S)if(t.cleanup){try{t.cleanup()}catch(t){l(String(t?.message||t))}t.cleanup=void 0}for(const[,t]of this.L)try{this.m.removeEventListener(t.eventType,t.listener)}catch{}this.L.clear(),this.F=!1}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}listen(t,e,n,i){const s=n;t.addEventListener(e,s,i);const o=()=>{try{t.removeEventListener(e,s,i)}catch{}};return this.O.push(o),o}setState(t){let e=!1;const n=t,i=this.state;for(const t in n){if(!Object.prototype.hasOwnProperty.call(n,t))continue;const s=n[t];Object.is(i[t],s)||(i[t]=s,e=!0)}if(e)if(this.q||!this.F)this.update(!0);else{if(!this.i||!this.isConnected)return;if(this.h)return;this.h=!0,requestAnimationFrame(()=>{this.h=!1,this.i&&this.isConnected&&this.update(!0)})}}updateState(t){Object.assign(this.state,t),this.i&&this.isConnected&&this.Y()}setProps(t){const e=Object.keys(t);if(0===e.length)return;const n=[];for(const s of e){const e=t[s],o=this.I[s];this.props[s]=e,this.F&&o!==e&&n.push(s);const r=this.t[s];r&&r.reflect&&i(this,s,e,r),this.F&&o===e||(this.I[s]=e)}if(this.F&&n.length>0)for(const e of n){const n=this.I[e],i=t[e];for(const t of this.k)try{t(e,n,i)}catch(t){l(String(t?.message||t))}}this.i&&this.isConnected?this.update(!0):this.C=!0}scheduleUpdate(){this.i&&this.isConnected&&this.Y()}Y(){this.l||this.h||(this.l=!0,("function"==typeof queueMicrotask?queueMicrotask:t=>Promise.resolve().then(t))(()=>{this.l=!1,this.i&&this.isConnected&&(this.h||this.update(!1))}))}update(t){if(this.i){if(t&&this.F)for(const t of this.A)try{t()}catch(t){l(String(t?.message||t))}if(t){this.tt();let t="";try{t=this.i()}catch(e){String(e?.message||e),t=""}if("string"!=typeof t&&(t=null==t?"":String(t)),t=((t,e)=>{const n={...this.props,...e};return t.replace(A,(t,e)=>{const i=n[e];return null==i?"":String(i)})})(t,this.state),!this.u){const e=`data-scope-owner="${this.V}"`;t=t.replace(/<slot(?![^>]*data-scope-owner)(\s|>)/g,`<slot ${e}$1`)}this.B=!1;const e=null!==this.o&&Object.is(this.o,t);let n=!1;e&&this.F||(this.u,this.m.innerHTML=t,this.o=t,n=!0),this.q?(this.et(),("function"==typeof requestAnimationFrame?requestAnimationFrame:t=>setTimeout(t,0))(()=>{this.i&&this.isConnected&&(n&&!r&&this.projectSlots(),n&&this.nt(),this.it(),this.st())})):(n&&!r&&this.projectSlots(),n&&this.ot(),this.it(),this.st())}else this.B&&this.tt(),this.it(),this.F&&this.st()}}forceRender(){this.o=null,this.i&&this.isConnected?this.q?this.C=!0:this.update(!0):this.C=!0}st(){if(!this.H){this.H=!0;for(const t of this.T)try{t()}catch(t){l(String(t?.message||t))}}for(const t of this._)try{t()}catch(t){l(String(t?.message||t))}this.rt()}rt(){const t=(this.u?this.m:this).querySelectorAll("*"),e=Object.prototype.hasOwnProperty,n=this.state,i=this.props;this.actions;for(let s=0;s<t.length;s++){const o=t[s];if(this.W(o))continue;if(0===o.attributes.length)continue;const r=o.attributes;for(let t=r.length-1;t>=0;t--){const s=r[t];if(!s.name.startsWith(E))continue;const c=s.name.slice(5),h=s.value,f=h?h.trim():"";let l,u=!1;if(f){const t=this.D.get(f);if(t){t.P&&(this.B=!0);try{l=t()}catch{}u=!0}}if(!u){const t=f||c,s=e.call(n,t),o=!s&&e.call(i,t);s?l=n[t]:o&&(l=i[t])}if("text"===c){const t=null==l?"":String(l);o.textContent!==t&&(o.textContent=t)}else if("html"===c){const t=null==l?"":String(l);o.innerHTML!==t&&(o.innerHTML=t)}else if(c in o){if(!Object.is(o[c],l))try{o[c]=l}catch{}if("value"===c)try{null==l?o.removeAttribute("value"):o.setAttribute("value",String(l))}catch{}}else if(null!=l)try{o.setAttribute(c,String(l))}catch{}const a=`__scopeBind_${c}`,d=o[a];if(d){const t=d.ct;t&&o.removeEventListener(t,d),delete o[a]}}}}tt(){for(const t of this.j){let e,n=!0;if(void 0!==t.deps)try{const i="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(i)&&(e=i,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let i=0;i<e.length;i++)if(!Object.is(t.prevDeps[i],e[i])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){try{t.value=void 0!==t.deps?t.getter(e):t.getter()}catch(t){l(String(t?.message||t))}e&&(t.prevDeps=e.slice())}}}it(){for(const t of this.S){let e,n=!0;if(void 0!==t.deps)try{const i="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(i)&&(e=i,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let i=0;i<e.length;i++)if(!Object.is(t.prevDeps[i],e[i])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){if(t.cleanup){try{t.cleanup()}catch{}t.cleanup=void 0}try{const n=void 0!==t.deps?t.fn(e):t.fn();"function"==typeof n&&(t.cleanup=n)}catch{}e&&(t.prevDeps=e.slice())}}}Z(t){const e=this.S.indexOf(t);if(-1!==e){if(t.cleanup)try{t.cleanup()}catch{}this.S.splice(e,1)}}K(t){const e=t.ht;if(e&&"string"==typeof e)return this.D.set(e,t),e;const n=`__scope_bind_${++this.U}__`;this.D.set(n,t);try{t.ht=n,t.toString=()=>n}catch{}return n}et(){const t=(this.u?this.m:this).querySelectorAll("[ref]"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];if(0!==t.length)for(let n=0;n<t.length;n++){const i=t[n];if(this.W(i))continue;const s=i.getAttribute("ref");s&&(e[s]?Array.isArray(e[s])?e[s].push(i):e[s]=[e[s],i]:e[s]=i)}}nt(){const t=(this.u?this.m:this).querySelectorAll("*");for(let e=0;e<t.length;e++){const n=t[e];if(this.W(n))continue;if(0===n.attributes.length)continue;const i=n.attributes;for(let t=i.length-1;t>=0;t--){const e=i[t];if(!e.name.startsWith("on:"))continue;const s=e.name.slice(3),o=e.value,r=`__tinyHandler_${s}`,c=n[r];c&&n.removeEventListener(s,c),n.removeAttribute(e.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};n[r]=t,n.addEventListener(s,t)}}}}ot(){const t=(this.u?this.m:this).querySelectorAll("*"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];for(let n=0;n<t.length;n++){const i=t[n];if(this.W(i))continue;const s=i.getAttribute("ref");if(s&&(e[s]?Array.isArray(e[s])?e[s].push(i):e[s]=[e[s],i]:e[s]=i),i.attributes.length>0){const t=i.attributes;for(let e=t.length-1;e>=0;e--){const n=t[e];if(!n.name.startsWith("on:"))continue;const s=n.name.slice(3),o=n.value,r=`__tinyHandler_${s}`,c=i[r];c&&i.removeEventListener(s,c),i.removeAttribute(n.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};i[r]=t,i.addEventListener(s,t)}}}}}J(){const t=new Map,e=this.childNodes,n=[];for(let t=0;t<e.length;t++)n.push(e[t]);for(let e=0;e<n.length;e++){const i=n[e];let s="";1===i.nodeType&&i.getAttribute&&(s=i.getAttribute("slot")||""),t.has(s)||t.set(s,[]),t.get(s).push(i)}for(let t=0;t<n.length;t++){const e=n[t];e.parentNode&&e.parentNode.removeChild(e)}return t}projectSlots(){const t=this.p||new Map,e=(this.u?this.m:this).querySelectorAll(`slot[data-scope-owner="${this.V}"]`);if(0!==e.length)for(let n=0;n<e.length;n++){const i=e[n],s=i.getAttribute("name")||"",o=t.get(s)||[];if(o.length){const t=document.createDocumentFragment();for(let e=0;e<o.length;e++){const n=o[e];let i;if(1===n.nodeType&&n.tagName.includes("-")&&n.p instanceof Map){const t=n,e=document.createElement(t.tagName.toLowerCase());for(let n=0;n<t.attributes.length;n++){const i=t.attributes[n];e.setAttribute(i.name,i.value)}for(const n of t.p.values())for(let t=0;t<n.length;t++)e.appendChild(n[t].cloneNode(!0));i=e}else i=n.cloneNode(!0);t.appendChild(i)}i.replaceWith(t)}else{const t=i.childNodes,e=[];for(let n=0;n<t.length;n++)e.push(t[n]);if(e.length>0){const t=document.createDocumentFragment();for(let n=0;n<e.length;n++)t.appendChild(e[n]);i.replaceWith(t)}}}}G(t,e,n){const i=`${t}::${e}`;let s=this.L.get(i);if(!s){const n=t=>{const n=t.target&&t.target.closest?t.target.closest(e):null;if(n)for(const e of s.handlers)try{e(t,n)}catch{}};s={eventType:t,selector:e,listener:n,handlers:new Set},this.L.set(i,s),this.m.addEventListener(t,n)}s.handlers.add(n)}X(t,e,n){const i=`${t}::${e}`,s=this.L.get(i);if(s&&(s.handlers.delete(n),0===s.handlers.size)){try{this.m.removeEventListener(t,s.listener)}catch{}this.L.delete(i)}}}if(!customElements.get(t)){if(c&&"undefined"!=typeof document){const e=`scope-${t}-styles`;if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=c,document.head.appendChild(t)}}try{customElements.define(t,u)}catch(t){String(t?.message||t)}}return u}const o=()=>({name:"device",extend:t=>{const e=new Map;return t.onDestroy(()=>{for(const[t,n]of e)t.removeEventListener("change",n);e.clear()}),{onMediaQuery:(t,n,i={})=>{if("undefined"==typeof window||"undefined"==typeof matchMedia)return()=>{};const{immediate:s=!0}=i,o=matchMedia(t),r=t=>{n(t.matches,t)};return o.addEventListener("change",r),e.set(o,r),s&&n(o.matches,null),()=>{o.removeEventListener("change",r),e.delete(o)}}}}}),r=(t,e={})=>({name:"morph",extend:(n,i)=>{const{ignoreActiveValue:s=!0,callbacks:o}=e,r=t(),c=i,h=c.m,f=c.u?ShadowRoot.prototype:HTMLElement.prototype,l=Object.getOwnPropertyDescriptor(f,"innerHTML"),u=t=>{r.morph(h,t,{morphStyle:"innerHTML",ignoreActiveValue:s,callbacks:o})};let a=!0;return Object.defineProperty(h,"innerHTML",{set(t){a?(l.set.call(this,t),a=!1):u(t)},get(){return l.get.call(this)},configurable:!0}),n.onDestroy(()=>{delete h.innerHTML}),{morph:u}}}),c=()=>({name:"window",extend:t=>{const e=new Set,n=new Set,i=new Set,s=(t,n={})=>{if("undefined"==typeof window)return()=>{};const{immediate:i=!0}=n,s=e=>{t(window.innerWidth,window.innerHeight,e)};return window.addEventListener("resize",s),e.add(s),i&&s(new UIEvent("resize")),()=>{window.removeEventListener("resize",s),e.delete(s)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const t of e)window.removeEventListener("resize",t);e.clear();for(const t of i)t.disconnect();i.clear();for(const t of n)window.removeEventListener("scroll",t);n.clear()}}),{onViewportResize:s,onWindowResize:(t,e={})=>{if("undefined"==typeof window)return()=>{};if("undefined"==typeof ResizeObserver)return s((e,n,i)=>t(e,n,i),e);const{immediate:n=!0}=e,o=document.documentElement,r=new ResizeObserver(e=>{const n=e[0];if(!n)return;const{width:i,height:s}=n.contentRect;t(i,s,n)});if(r.observe(o),i.add(r),n){const e=o.getBoundingClientRect();t(e.width,e.height,new UIEvent("resize"))}return()=>{r.disconnect(),i.delete(r)}},onWindowScroll:(t,e={})=>{if("undefined"==typeof window)return()=>{};const{immediate:i=!0}=e,s=e=>{t(window.scrollX,window.scrollY,e)};return window.addEventListener("scroll",s,{passive:!0}),n.add(s),i&&s(new Event("scroll")),()=>{window.removeEventListener("scroll",s),n.delete(s)}}}}}),h=()=>({name:"inview",extend:(t,e)=>{const n=new Set,i=(t,e,i={})=>{if("undefined"==typeof window||"undefined"==typeof IntersectionObserver)return()=>{};const{immediate:s=!0,...o}=i;let r=!s;const c=new IntersectionObserver(n=>{for(const i of n)i.target===t&&(r?r=!1:e(i.isIntersecting,i))},o);return c.observe(t),n.add(c),()=>{c.unobserve(t),c.disconnect(),n.delete(c)}};return t.onDestroy(()=>{for(const t of n)t.disconnect();n.clear()}),{onInView:(t,n)=>i(e,t,n),observeInView:(t,e,n)=>i(t,e,n)}}}),f=t=>({name:"lenis",extend:e=>{const n=new Set;return e.onDestroy(()=>{for(const{lenis:t,handler:e}of n)"function"==typeof t.off&&t.off("scroll",e);n.clear()}),{onLenisScroll:e=>{const i=t();if(!i)return()=>{};const s=t=>{e(t)};i.on("scroll",s);const o={lenis:i,handler:s};return n.add(o),()=>{n.has(o)&&(n.delete(o),"function"==typeof i.off&&i.off("scroll",s))}}}}}),l=()=>({name:"timer",extend:t=>{const e=new Set,n=new Set,i=new Set,s={setTimeout:(t,n,...i)=>{let s;return s=setTimeout((...n)=>{e.delete(s),t(...n)},n,...i),e.add(s),s},setInterval:(t,e,...i)=>{const s=setInterval(t,e,...i);return n.add(s),s},raf:(t,e)=>{let n=0,s=!0,o=0;const r="number"==typeof e&&e>0?1e3/e:0,c=e=>{if(i.delete(n),s){if(r){if(e-o>=r){const n=o?e-o:r;o=e,t(e,n)}}else{const n=o?e-o:0;o=e,t(e,n)}n=requestAnimationFrame(c),i.add(n)}};return n=requestAnimationFrame(c),i.add(n),()=>{s&&(s=!1,i.delete(n),cancelAnimationFrame(n))}}};return t.onDestroy(()=>{for(const t of e)clearTimeout(t);e.clear();for(const t of n)clearInterval(t);n.clear();for(const t of i)cancelAnimationFrame(t);i.clear()}),{timer:s}}}),u=()=>({name:"mouse",extend:t=>{const e=new Map,n=(t,n)=>{if("undefined"==typeof window)return()=>{};const i=t=>{const e=t;n(e.clientX,e.clientY,e)};window.addEventListener(t,i);let s=e.get(t);return s||(s=new Set,e.set(t,s)),s.add(i),()=>{window.removeEventListener(t,i),s?.delete(i)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const[t,n]of e){for(const e of n)window.removeEventListener(t,e);n.clear()}e.clear()}}),{onMouseMove:t=>n("mousemove",t),onMouseDown:t=>n("mousedown",t),onMouseUp:t=>n("mouseup",t),onMouseWheel:t=>(t=>{if("undefined"==typeof window)return()=>{};const n=e=>{const n=e;t(n.clientX,n.clientY,n.deltaY,n)};window.addEventListener("wheel",n);let i=e.get("wheel");return i||(i=new Set,e.set("wheel",i)),i.add(n),()=>{window.removeEventListener("wheel",n),i?.delete(n)}})(t)}}}),a=t=>Array.isArray(t),d=t=>null!=t&&"object"==typeof t&&!Array.isArray(t),m=t=>a(t)?t.slice():d(t)?{...t}:t,p=(t,e)=>{if(a(t)&&a(e)){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n+=1)if(!Object.is(t[n],e[n]))return!1;return!0}if(d(t)&&d(e)){const n=Object.keys(t),i=Object.keys(e);if(n.length!==i.length)return!1;for(const i of n){if(!(i in e))return!1;if(!Object.is(t[i],e[i]))return!1}return!0}return!(a(t)||a(e)||d(t)||d(e))&&Object.is(t,e)},w=(t,e)=>Array.from({length:e},()=>t),y=(t,e)=>e.reduce((e,n)=>(e[n]=t,e),{}),g=({from:t,to:e,velocity:n,label:i})=>{const s={value:t,target:e,velocity:n,arrayLength:null,objectKeys:null,normalizeInput:t=>t},o=t=>{if(null==s.arrayLength){if(null!=s.objectKeys)throw new Error(`${i} value shape mismatch (array vs object).`);s.arrayLength=t,a(s.value)||(s.value=w(s.value,t)),a(s.target)||(s.target=w(s.target,t)),void 0===s.velocity||a(s.velocity)||(s.velocity=w(s.velocity,t))}},r=t=>{if(null==s.objectKeys){if(null!=s.arrayLength)throw new Error(`${i} value shape mismatch (object vs array).`);s.objectKeys=t,d(s.value)||(s.value=y(s.value,t)),d(s.target)||(s.target=y(s.target,t)),void 0===s.velocity||d(s.velocity)||(s.velocity=y(s.velocity,t))}},c=t=>{if(a(t)){if(null!=s.objectKeys)throw new Error(`${i} value shape mismatch (array vs object).`);if(null==s.arrayLength&&o(t.length),t.length!==s.arrayLength)throw new Error(`${i} value length mismatch (expected ${s.arrayLength}, got ${t.length}).`);return t.slice()}if(d(t)){if(null!=s.arrayLength)throw new Error(`${i} value shape mismatch (object vs array).`);const e=Object.keys(t);if(null==s.objectKeys&&r(e),s.objectKeys&&e.length!==s.objectKeys.length)throw new Error(`${i} value keys mismatch (expected ${s.objectKeys.length}, got ${e.length}).`);if(s.objectKeys)for(const e of s.objectKeys)if(!(e in t))throw new Error(`${i} value keys mismatch (missing key "${e}").`);return{...t}}return null!=s.arrayLength?w(t,s.arrayLength):null!=s.objectKeys?y(t,s.objectKeys):t};s.normalizeInput=c;const h=a(t)||a(e)||void 0!==n&&a(n),f=d(t)||d(e)||void 0!==n&&d(n);if(h&&f)throw new Error(`${i} value shape mismatch (array vs object).`);if(h){const i=a(t)?t.length:a(e)?e.length:n.length;o(i),s.value=c(t),s.target=c(e),void 0!==s.velocity&&(s.velocity=c(s.velocity))}else if(f){const i=d(t)?Object.keys(t):d(e)?Object.keys(e):Object.keys(n);r(i),s.value=c(t),s.target=c(e),void 0!==s.velocity&&(s.velocity=c(s.velocity))}return s};let v={x:-1,y:-1};const b={stiffness:300,damping:30,mass:1},S=()=>({name:"pointer",extend:e=>{const{onMouseMove:n}=u().extend(e,e.host),{timer:i}=l().extend(e,e.host);v.x=window.innerWidth/2,v.y=window.innerHeight/2;const s={x:t({from:v.x,to:v.x,...b}),y:t({from:v.y,to:v.y,...b})};return n((t,e)=>{s.x.setTarget(t),s.y.setTarget(e)}),{onPointerMove:t=>{let e=v.x,n=v.y;i.raf(i=>{const o=s.x.next(i),r=s.y.next(i);var c,h;e===o&&n===r||(t({x:o,y:r,v:(c={x:o,y:r},h={x:e,y:n},{x:c.x-h.x,y:c.y-h.y,magnitude:Math.sqrt((c.x-h.x)*(c.x-h.x)+(c.y-h.y)*(c.y-h.y))}).magnitude}),e=o,n=r)})},onMouseMove:n}}}),j=()=>({name:"lerp",extend:t=>{const{timer:e}=l().extend(t,t.host),n=new Set;return t.onDestroy(()=>{for(const t of n)t();n.clear()}),{createLerp:t=>function({from:t=0,to:e=1,lerp:n=.1,tolerance:i=.001,resumeOnTarget:s=!0}={}){function o(){return m(f)}function r(t){if(w)return o();const e=(t=>t<0?0:t>1?1:t)(n);if(0===e)return o();if(1===e)return f=m(l),c.value=f,w=!0,o();const s=t>0?1-Math.pow(1-e,60*t):0;if(a(f)&&a(l)){let t=!0;for(let e=0;e<f.length;e+=1)f[e]+=(l[e]-f[e])*s,Math.abs(l[e]-f[e])>=i&&(t=!1);if(t){for(let t=0;t<f.length;t+=1)f[t]=l[t];w=!0}return c.value=f,m(f)}if(d(f)&&d(l)){const t=c.objectKeys??Object.keys(f);let e=!0;for(const n of t)f[n]+=(l[n]-f[n])*s,Math.abs(l[n]-f[n])>=i&&(e=!1);if(e){for(const e of t)f[e]=l[e];w=!0}return c.value=f,m(f)}const r=l;return f+=(r-f)*s,c.value=f,Math.abs(r-f)<i&&(f=r,c.value=f,w=!0),f}const c=g({from:t,to:e,label:"Lerp"}),h=c.normalizeInput;let f=c.value,l=c.target,u=null,w=!1;const y=new Set;return{setTarget:function(t){const e=h(t),n=!p(e,l);if(l=e,c.target=e,f=c.value,s&&w&&n){w=!1,u=null;for(const t of y)t(l)}},setValue:function(t,e={}){const{resetTime:n=!0,setTarget:i=!1,markDone:s=!1}=e;f=h(t),c.value=f,i&&(l=m(f),c.target=l);const o=w||!p(f,l);if(n&&(u=null),s&&(w=!0),o&&!s){w=!1,u=null;for(const t of y)t(l)}},getValue:o,isDone:function(){return w},onResume:function(t){return y.add(t),()=>{y.delete(t)}},step:r,next:function(t=performance.now()){if(null==u)return u=t,o();const e=(t-u)/1e3;u=t;const n=1/30;let i=e,s=o();for(;i>0&&!w;){const t=Math.min(i,n);s=r(t),i-=t}return s}}}(t),runLerp:(t,i,s={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=s;let h=!1,f=null;r&&i(t.getValue(),t);const l=()=>{f||(f=e.raf(e=>{if(h)return;const n=t.next(e);i(n,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&i(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),n.delete(d))};return n.add(d),d}}}}),M=()=>({name:"spring",extend:e=>{const{timer:n}=l().extend(e,e.host),i=new Set;return e.onDestroy(()=>{for(const t of i)t();i.clear()}),{createSpring:e=>t(e),runSpring:(t,e,s={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=s;let h=!1,f=null;r&&e(t.getValue(),t);const l=()=>{f||(f=n.raf(n=>{if(h)return;const i=t.next(n);e(i,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&e(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),i.delete(d))};return i.add(d),d}}}}),O=(t={})=>({name:"localstorage",extend:n=>{const{prefix:i="",json:s=!0}=t,o="undefined"==typeof window?null:window.localStorage;return{storage:{get:t=>{if(o)try{const n=o.getItem(e(i,t));if(null===n)return;return s?JSON.parse(n):n}catch{return}},set:(t,n)=>{if(o)try{const r=s?JSON.stringify(n):String(n);o.setItem(e(i,t),r)}catch{}},remove:t=>{o&&o.removeItem(e(i,t))},clear:()=>{if(!o)return;if(!i)return;const t=[];for(let e=0;e<o.length;e++){const n=o.key(e);null!=n&&n.startsWith(i+":")&&t.push(n)}for(const e of t)o.removeItem(e)}}}}}),$="0.0.7",_=()=>{console.info("The website is using @petit-kit/scoped v"+$,"\nhttps://github.com/petit-kit/scoped")},x=t=>null==t||""===t?"":String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"),A=/\{([A-Za-z_$][\w$]*)\}/g,E="bind:";export{$ as SCOPE_VERSION,s as define,o as devicePlugin,_ as happy,h as inViewPlugin,f as lenisPlugin,j as lerpPlugin,O as localStoragePlugin,r as morphPlugin,u as mousePlugin,S as pointerPlugin,M as springPlugin,l as timerPlugin,c as windowPlugin};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/plugins/index.d.ts
CHANGED
|
@@ -8,4 +8,5 @@ export { mousePlugin, type MouseControls, type MouseEventHandler, type MouseUnsu
|
|
|
8
8
|
export { pointerPlugin, type PointerControls } from './pointer';
|
|
9
9
|
export { lerpPlugin, type LerpControls } from './lerp';
|
|
10
10
|
export { springPlugin, type SpringControls } from './spring';
|
|
11
|
+
export { localStoragePlugin, type LocalStorageControls, type LocalStoragePluginOptions, } from './localstorage';
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EACL,WAAW,EACX,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EACL,YAAY,EACZ,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,WAAW,EACX,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,WAAW,EACX,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,WAAW,EACX,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EACL,WAAW,EACX,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EACL,YAAY,EACZ,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,WAAW,EACX,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,WAAW,EACX,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,WAAW,EACX,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EACL,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,GAC/B,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { ComponentPlugin } from '../../index';
|
|
2
|
+
export type LocalStoragePluginOptions = {
|
|
3
|
+
/** Key prefix for namespacing. Default: empty. */
|
|
4
|
+
prefix?: string;
|
|
5
|
+
/** Use JSON parse/stringify for values. Default: true. */
|
|
6
|
+
json?: boolean;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* LocalStorage plugin controls. Provides a scoped localStorage API with optional
|
|
10
|
+
* key prefixing and JSON serialization.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```ts
|
|
14
|
+
* define("my-settings", { plugins: [localStoragePlugin()] }, ({ storage }) => {
|
|
15
|
+
* const theme = storage.get("theme") ?? "dark";
|
|
16
|
+
* actions.setTheme = (t) => {
|
|
17
|
+
* storage.set("theme", t);
|
|
18
|
+
* state.theme = t;
|
|
19
|
+
* };
|
|
20
|
+
* return () => `...`;
|
|
21
|
+
* });
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export type LocalStorageControls = {
|
|
25
|
+
/** Get a value by key. Returns undefined if not found or on parse error. */
|
|
26
|
+
get: <T = unknown>(key: string) => T | undefined;
|
|
27
|
+
/** Set a value. Values are JSON-serialized when json option is true. */
|
|
28
|
+
set: (key: string, value: unknown) => void;
|
|
29
|
+
/** Remove a key. */
|
|
30
|
+
remove: (key: string) => void;
|
|
31
|
+
/** Clear all keys with this plugin's prefix. */
|
|
32
|
+
clear: () => void;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* LocalStorage plugin – scoped localStorage with optional prefix and JSON serialization.
|
|
36
|
+
*
|
|
37
|
+
* Use a key prefix to namespace values per component or app. Values are automatically
|
|
38
|
+
* JSON-serialized/parsed when the json option is true (default). Safe when window
|
|
39
|
+
* is undefined (SSR); methods no-op.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```ts
|
|
43
|
+
* define("c-settings", { plugins: [localStoragePlugin({ prefix: "app" })] }, ({ storage }) => {
|
|
44
|
+
* state.theme = storage.get("theme") ?? "dark";
|
|
45
|
+
* actions.toggleTheme = () => {
|
|
46
|
+
* const next = state.theme === "dark" ? "light" : "dark";
|
|
47
|
+
* storage.set("theme", next);
|
|
48
|
+
* state.theme = next;
|
|
49
|
+
* };
|
|
50
|
+
* return () => `<div class="{theme}">...</div>`;
|
|
51
|
+
* });
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
export declare const localStoragePlugin: (options?: LocalStoragePluginOptions) => ComponentPlugin<{
|
|
55
|
+
storage: LocalStorageControls;
|
|
56
|
+
}>;
|
|
57
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/localstorage/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAwB,MAAM,aAAa,CAAC;AAEzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,4EAA4E;IAC5E,GAAG,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,CAAC;IACjD,wEAAwE;IACxE,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,oBAAoB;IACpB,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,gDAAgD;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,kBAAkB,GAC7B,UAAS,yBAA8B,KACtC,eAAe,CAAC;IAAE,OAAO,EAAE,oBAAoB,CAAA;CAAE,CAkDlD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@petit-kit/scoped",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "A lightweight, reactive web component framework with built-in plugins for modern web development.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -33,8 +33,10 @@
|
|
|
33
33
|
],
|
|
34
34
|
"sideEffects": false,
|
|
35
35
|
"scripts": {
|
|
36
|
-
"build": "
|
|
36
|
+
"build": "pnpm run version:patch && pnpm run build:doc && pnpm run clean && pnpm run format && rollup -c && pnpm run build:types",
|
|
37
|
+
"version:patch": "node version/patch.js",
|
|
37
38
|
"build:types": "tsc -p tsconfig.declarations.json",
|
|
39
|
+
"build:doc": "node doc/index.js",
|
|
38
40
|
"dev": "rollup -c -w",
|
|
39
41
|
"clean": "rm -rf dist",
|
|
40
42
|
"format": "prettier --write .",
|