@petit-kit/scoped 0.0.6-beta.1 → 0.0.6
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 +154 -151
- package/package.json +11 -11
- package/dist/index.cjs +0 -2
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.ts +0 -643
- package/dist/index.d.ts.map +0 -1
- package/dist/plugins/content/index.d.ts +0 -1
- package/dist/plugins/content/index.d.ts.map +0 -1
- package/dist/plugins/device/index.d.ts +0 -8
- package/dist/plugins/device/index.d.ts.map +0 -1
- package/dist/plugins/index.d.ts +0 -11
- package/dist/plugins/index.d.ts.map +0 -1
- package/dist/plugins/inview/index.d.ts +0 -63
- package/dist/plugins/inview/index.d.ts.map +0 -1
- package/dist/plugins/lenis/index.d.ts +0 -37
- package/dist/plugins/lenis/index.d.ts.map +0 -1
- package/dist/plugins/lerp/index.d.ts +0 -42
- package/dist/plugins/lerp/index.d.ts.map +0 -1
- package/dist/plugins/morph/index.d.ts +0 -92
- package/dist/plugins/morph/index.d.ts.map +0 -1
- package/dist/plugins/mouse/index.d.ts +0 -91
- package/dist/plugins/mouse/index.d.ts.map +0 -1
- package/dist/plugins/pointer/index.d.ts +0 -59
- package/dist/plugins/pointer/index.d.ts.map +0 -1
- package/dist/plugins/spring/index.d.ts +0 -42
- package/dist/plugins/spring/index.d.ts.map +0 -1
- package/dist/plugins/timer/index.d.ts +0 -82
- package/dist/plugins/timer/index.d.ts.map +0 -1
- package/dist/plugins/window/index.d.ts +0 -14
- package/dist/plugins/window/index.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
<br />
|
|
7
7
|
<br />
|
|
8
8
|
|
|
9
|
-
# Scoped - 0.0.
|
|
9
|
+
# Scoped - 0.0.6
|
|
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
|
|
|
@@ -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,24 @@ 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
|
+
};
|
|
177
190
|
```
|
|
178
191
|
|
|
179
192
|
### Event Handlers
|
|
180
193
|
|
|
181
|
-
Use `on:eventName="handler"` to bind events, where
|
|
194
|
+
Use `on:eventName="handler"` to bind events, where **handler** is a function from your **actions** object or setup context:
|
|
182
195
|
|
|
183
196
|
```typescript
|
|
184
197
|
({ actions }) => {
|
|
@@ -189,16 +202,19 @@ Use `on:eventName="handler"` to bind events, where `handler` is a function from
|
|
|
189
202
|
};
|
|
190
203
|
```
|
|
191
204
|
|
|
192
|
-
Arrow functions or direct expressions are not supported
|
|
205
|
+
Arrow functions or direct expressions are not supported, you must use named action references.
|
|
193
206
|
|
|
194
207
|
### Referencing DOM Elements
|
|
195
208
|
|
|
196
209
|
Use the `ref` attribute to assign references:
|
|
197
210
|
|
|
198
211
|
```typescript
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
212
|
+
({ onMount, refs }) => {
|
|
213
|
+
onMount(() => console.log(refs.inputElement));
|
|
214
|
+
return () => `
|
|
215
|
+
<input ref="inputElement" type="text"></input>
|
|
216
|
+
`;
|
|
217
|
+
};
|
|
202
218
|
```
|
|
203
219
|
|
|
204
220
|
You can then access the element as `refs.inputEl` in your setup code or methods.
|
|
@@ -207,16 +223,6 @@ You can then access the element as `refs.inputEl` in your setup code or methods.
|
|
|
207
223
|
|
|
208
224
|
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
225
|
|
|
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
226
|
#### Supported Bindings
|
|
221
227
|
|
|
222
228
|
- `bind:text="stateKey"` - Binds textContent
|
|
@@ -225,13 +231,22 @@ return () => `
|
|
|
225
231
|
- `bind:checked="isChecked"` — Binds the checked property of checkbox/radio
|
|
226
232
|
- `bind:prop="key"` — Generic property binding (any property, e.g. `bind:min`, `bind:max`)
|
|
227
233
|
|
|
228
|
-
|
|
234
|
+
<br />
|
|
229
235
|
|
|
230
236
|
```typescript
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
237
|
+
({ state }) => {
|
|
238
|
+
state.textValue = 'Hello, world!';
|
|
239
|
+
state.htmlValue = `<strong>Hello, world!</strong>`;
|
|
240
|
+
state.isChecked = true;
|
|
241
|
+
state.styleValue = `background-color: red;`;
|
|
242
|
+
|
|
243
|
+
return () => `
|
|
244
|
+
<p bind:text="textValue"></p>
|
|
245
|
+
<p bind:html="htmlValue"></p>
|
|
246
|
+
<input type="checkbox" bind:checked="isChecked">
|
|
247
|
+
<div bind:style="styleValue"></div>
|
|
248
|
+
`;
|
|
249
|
+
};
|
|
235
250
|
```
|
|
236
251
|
|
|
237
252
|
## State & props
|
|
@@ -242,8 +257,8 @@ State is a plain object that belongs to your component instance. It is fully rea
|
|
|
242
257
|
|
|
243
258
|
You can update state in two main ways:
|
|
244
259
|
|
|
245
|
-
- `host.setState(partial)
|
|
246
|
-
- `host.updateState(partial)
|
|
260
|
+
- `host.setState(partial)` - Merges the partial state and triggers a full re-render.
|
|
261
|
+
- `host.updateState(partial)` - Merges the partial state and only schedules effects/computed, but does **NOT** re-render the template.
|
|
247
262
|
|
|
248
263
|
```typescript
|
|
249
264
|
// Initialize state in setup (no re-render)
|
|
@@ -282,7 +297,7 @@ Props are available as the `props` object in the setup function:
|
|
|
282
297
|
|
|
283
298
|
```javascript
|
|
284
299
|
define(
|
|
285
|
-
'c-my-
|
|
300
|
+
'c-my-component',
|
|
286
301
|
{
|
|
287
302
|
props: {
|
|
288
303
|
value: { type: Number, default: 10 },
|
|
@@ -291,9 +306,9 @@ define(
|
|
|
291
306
|
},
|
|
292
307
|
({ props }) => {
|
|
293
308
|
return () => `
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
309
|
+
<p>Value: ${props.value}</p>
|
|
310
|
+
${props.label}
|
|
311
|
+
`;
|
|
297
312
|
}
|
|
298
313
|
);
|
|
299
314
|
```
|
|
@@ -302,7 +317,7 @@ Props are always kept up to date with attribute changes, and updating props from
|
|
|
302
317
|
|
|
303
318
|
**Two-way Binding:**
|
|
304
319
|
|
|
305
|
-
Scoped allows props
|
|
320
|
+
Scoped allows **props** ↔️ **state** syncing using the `link` helper:
|
|
306
321
|
|
|
307
322
|
```typescript
|
|
308
323
|
({ link }) => {
|
|
@@ -324,31 +339,42 @@ This updates the prop, reflects it as an attribute if needed, and triggers all u
|
|
|
324
339
|
|
|
325
340
|
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
341
|
|
|
342
|
+
**Setting large objects/arrays as props:**
|
|
343
|
+
|
|
344
|
+
You can set large objects/arrays as props by using the `host.setProps(...)` method:
|
|
345
|
+
|
|
346
|
+
```typescript
|
|
347
|
+
const component = document.querySelector('c-my-component');
|
|
348
|
+
component.setProps({ data: largeArray, config: complexObject });
|
|
349
|
+
```
|
|
350
|
+
|
|
327
351
|
## Effects
|
|
328
352
|
|
|
329
353
|
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
354
|
|
|
331
355
|
```typescript
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
(
|
|
344
|
-
|
|
345
|
-
)
|
|
356
|
+
({ effect }) => {
|
|
357
|
+
// Run on every render
|
|
358
|
+
effect(() => console.log('Rendered'));
|
|
359
|
+
|
|
360
|
+
// Run once (empty deps)
|
|
361
|
+
effect(() => {
|
|
362
|
+
const sub = api.subscribe();
|
|
363
|
+
return () => sub.unsubscribe();
|
|
364
|
+
}, []);
|
|
365
|
+
|
|
366
|
+
// Run when deps change
|
|
367
|
+
effect(
|
|
368
|
+
(deps) => console.log('Count:', deps[0]),
|
|
369
|
+
() => [state.count]
|
|
370
|
+
);
|
|
346
371
|
|
|
347
|
-
// Manual cleanup
|
|
348
|
-
const cleanup = effect(() => {
|
|
349
|
-
|
|
350
|
-
});
|
|
351
|
-
cleanup();
|
|
372
|
+
// Manual cleanup
|
|
373
|
+
const cleanup = effect(() => {
|
|
374
|
+
/* ... */
|
|
375
|
+
});
|
|
376
|
+
cleanup();
|
|
377
|
+
};
|
|
352
378
|
```
|
|
353
379
|
|
|
354
380
|
## Computed
|
|
@@ -356,36 +382,36 @@ cleanup();
|
|
|
356
382
|
Computed values are memoized values used to derive data from state or props and automatically update when their dependencies change.
|
|
357
383
|
|
|
358
384
|
```typescript
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
)
|
|
363
|
-
|
|
385
|
+
({ computed }) => {
|
|
386
|
+
const fullName = computed(
|
|
387
|
+
() => `${state.firstName} ${state.lastName}`, // getter
|
|
388
|
+
() => [state.firstName, state.lastName] // dependencies
|
|
389
|
+
);
|
|
390
|
+
return () => `<p>Name: ${fullName()}</p>`;
|
|
391
|
+
};
|
|
364
392
|
```
|
|
365
393
|
|
|
366
394
|
## Custom events
|
|
367
395
|
|
|
396
|
+
Custom events are a way to communicate between components.
|
|
397
|
+
|
|
368
398
|
### Emit
|
|
369
399
|
|
|
370
400
|
To emit a custom event from your component, use `emit(name, detail?)`:
|
|
371
401
|
|
|
372
402
|
```typescript
|
|
373
|
-
|
|
374
|
-
|
|
403
|
+
({ emit }) => {
|
|
404
|
+
emit('my-event', { message: 'Hello from the component!' });
|
|
375
405
|
};
|
|
376
|
-
|
|
377
|
-
return () => `<button on:click="handleButtonClick">Emit Event</button>`;
|
|
378
406
|
```
|
|
379
407
|
|
|
380
|
-
|
|
408
|
+
Listening to custom events in parent:
|
|
381
409
|
|
|
382
410
|
```javascript
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
});
|
|
388
|
-
</script>
|
|
411
|
+
const component = document.querySelector('c-my-component');
|
|
412
|
+
component.addEventListener('my-event', (e) => {
|
|
413
|
+
console.log('Received:', e.detail.message);
|
|
414
|
+
});
|
|
389
415
|
```
|
|
390
416
|
|
|
391
417
|
### Listen
|
|
@@ -393,98 +419,73 @@ return () => `<button on:click="handleButtonClick">Emit Event</button>`;
|
|
|
393
419
|
You can use `listen` to subscribe to events on any EventTarget (automatically cleaned up on destroy):
|
|
394
420
|
|
|
395
421
|
```typescript
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
(e) => {
|
|
402
|
-
console.log('Got custom event with detail:', e.detail);
|
|
403
|
-
}
|
|
404
|
-
);
|
|
405
|
-
});
|
|
422
|
+
({ listen }) => {
|
|
423
|
+
listen(window, 'my-event', (e) => {
|
|
424
|
+
console.log('Received:', e.detail.message);
|
|
425
|
+
});
|
|
426
|
+
};
|
|
406
427
|
```
|
|
407
428
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
### Event Delegation
|
|
429
|
+
## Event Delegation
|
|
411
430
|
|
|
412
431
|
`delegate` lets you efficiently handle events on descendants matching a selector:
|
|
413
432
|
|
|
414
433
|
```typescript
|
|
415
|
-
onMount
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
434
|
+
({ onMount, delegate }) => {
|
|
435
|
+
onMount(() => {
|
|
436
|
+
delegate('click', '.item', (e, target) => {
|
|
437
|
+
console.log('Clicked item:', target.textContent);
|
|
438
|
+
target.classList.toggle('active');
|
|
439
|
+
});
|
|
419
440
|
});
|
|
420
|
-
});
|
|
421
441
|
|
|
422
|
-
return () => `
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
`;
|
|
442
|
+
return () => `
|
|
443
|
+
<ul>
|
|
444
|
+
<li class="item">Apple</li>
|
|
445
|
+
<li class="item">Banana</li>
|
|
446
|
+
<li class="item">Cherry</li>
|
|
447
|
+
</ul>
|
|
448
|
+
`;
|
|
449
|
+
};
|
|
429
450
|
```
|
|
430
451
|
|
|
431
452
|
## Slots
|
|
432
453
|
|
|
433
454
|
Slots allow you to render children inside your custom element, making it easy to compose interfaces or pass in dynamic content.
|
|
434
455
|
|
|
435
|
-
### Basic Usage
|
|
436
|
-
|
|
437
456
|
By default, any child content placed inside your component tag will be rendered in the default slot:
|
|
438
457
|
|
|
439
458
|
```html
|
|
440
|
-
<my-
|
|
441
|
-
<h2>Title goes here</h2>
|
|
442
|
-
<p>Some description or content.</p>
|
|
443
|
-
</my-
|
|
459
|
+
<c-my-component>
|
|
460
|
+
<h2 slot="title">Title goes here</h2>
|
|
461
|
+
<p slot="description">Some description or content.</p>
|
|
462
|
+
</c-my-component>
|
|
444
463
|
```
|
|
445
464
|
|
|
446
465
|
In your component template, use:
|
|
447
466
|
|
|
448
467
|
```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
|
-
`;
|
|
468
|
+
define('my-card', {}, () => {
|
|
469
|
+
return () => `
|
|
470
|
+
<aside><slot name="title"></slot></aside>
|
|
471
|
+
<main><slot name="description"></slot></main>
|
|
472
|
+
<slot></slot>
|
|
473
|
+
`;
|
|
474
|
+
});
|
|
474
475
|
```
|
|
475
476
|
|
|
476
477
|
## Lifecycle
|
|
477
478
|
|
|
478
479
|
Lifecycle hooks let you run code at specific moments in the component's life, such as mount, update, or destruction.
|
|
479
480
|
|
|
480
|
-
| Method
|
|
481
|
-
|
|
|
482
|
-
|
|
|
483
|
-
|
|
|
484
|
-
|
|
|
485
|
-
|
|
|
486
|
-
|
|
|
487
|
-
|
|
|
481
|
+
| Method | Description |
|
|
482
|
+
| ------------------------ | ------------------------ |
|
|
483
|
+
| **`onMount(cb)`** | After mount |
|
|
484
|
+
| **`onDestroy(cb)`** | On destroy |
|
|
485
|
+
| **`onUpdate(cb)`** | After each update |
|
|
486
|
+
| **`onBeforeUpdate(cb)`** | Before each update |
|
|
487
|
+
| **`onFirstUpdate(cb)`** | Once, after first render |
|
|
488
|
+
| **`onPropsChanged(cb)`** | When props change |
|
|
488
489
|
|
|
489
490
|
## Select
|
|
490
491
|
|
|
@@ -500,6 +501,7 @@ define('c-my-component', {}, ({ $, host }) => {
|
|
|
500
501
|
const el = document.querySelector('c-my-component'); // self
|
|
501
502
|
const inner = el.$('.list-item'); // same API on host
|
|
502
503
|
});
|
|
504
|
+
|
|
503
505
|
return () => `<div>
|
|
504
506
|
<button class="primary">OK</button>
|
|
505
507
|
<span class="list-item">
|
|
@@ -516,6 +518,8 @@ define('c-my-component', {}, ({ $, host }) => {
|
|
|
516
518
|
|
|
517
519
|
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
520
|
|
|
521
|
+
⏲ Document is working in progress
|
|
522
|
+
|
|
519
523
|
**Available Plugins:**
|
|
520
524
|
|
|
521
525
|
- **[lerpPlugin](src/plugins/lerp/README.md) & [springPlugin](src/plugins/spring/README.md)**
|
|
@@ -548,8 +552,7 @@ Scoped includes a set of optional plugins to extend or enhance component behavio
|
|
|
548
552
|
**Usage Example:**
|
|
549
553
|
|
|
550
554
|
```javascript
|
|
551
|
-
import { define } from '@petit-kit/scoped';
|
|
552
|
-
import { inViewPlugin, timerPlugin } from '@petit-kit/scoped/plugins';
|
|
555
|
+
import { define, inViewPlugin, timerPlugin } from '@petit-kit/scoped';
|
|
553
556
|
|
|
554
557
|
define(
|
|
555
558
|
'my-component',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@petit-kit/scoped",
|
|
3
|
-
"version": "0.0.6
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "A lightweight, reactive web component framework with built-in plugins for modern web development.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -32,15 +32,6 @@
|
|
|
32
32
|
"dist"
|
|
33
33
|
],
|
|
34
34
|
"sideEffects": false,
|
|
35
|
-
"scripts": {
|
|
36
|
-
"build": "npm run clean && npm run format && rollup -c && npm run build:types",
|
|
37
|
-
"build:types": "tsc -p tsconfig.declarations.json",
|
|
38
|
-
"dev": "rollup -c -w",
|
|
39
|
-
"clean": "rm -rf dist",
|
|
40
|
-
"format": "prettier --write .",
|
|
41
|
-
"format:check": "prettier --check .",
|
|
42
|
-
"publish": "pnpm build && pnpm publish --access public"
|
|
43
|
-
},
|
|
44
35
|
"author": "",
|
|
45
36
|
"license": "MIT",
|
|
46
37
|
"devDependencies": {
|
|
@@ -55,5 +46,14 @@
|
|
|
55
46
|
},
|
|
56
47
|
"dependencies": {
|
|
57
48
|
"@petit-kit/animate": "^0.0.1"
|
|
49
|
+
},
|
|
50
|
+
"scripts": {
|
|
51
|
+
"build": "pnpm run build:doc && pnpm run clean && pnpm run format && rollup -c && pnpm run build:types",
|
|
52
|
+
"build:types": "tsc -p tsconfig.declarations.json",
|
|
53
|
+
"build:doc": "node doc/index.js",
|
|
54
|
+
"dev": "rollup -c -w",
|
|
55
|
+
"clean": "rm -rf dist",
|
|
56
|
+
"format": "prettier --write .",
|
|
57
|
+
"format:check": "prettier --check ."
|
|
58
58
|
}
|
|
59
|
-
}
|
|
59
|
+
}
|
package/dist/index.cjs
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
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)}}}}});
|
|
2
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|