revojs 0.0.12 → 0.0.14
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/dist/html/index.d.ts +2 -1
- package/dist/index.js +25 -20
- package/dist/signals/index.d.ts +8 -5
- package/package.json +1 -1
package/dist/html/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type HtmlAttributes } from "../jsx";
|
|
2
|
-
import { Scope, type State, type Value } from "../signals";
|
|
2
|
+
import { Hooks, Scope, type State, type Value } from "../signals";
|
|
3
3
|
export type TypeOf<T> = {
|
|
4
4
|
(): T;
|
|
5
5
|
};
|
|
@@ -44,6 +44,7 @@ export interface ComponentOptions<TEvents extends Events, TAttributes extends At
|
|
|
44
44
|
}
|
|
45
45
|
export interface Component<TEvents extends Events, TAttributes extends Attributes> {
|
|
46
46
|
readonly scope: Scope;
|
|
47
|
+
readonly hooks: Hooks;
|
|
47
48
|
readonly events: EventOutput<TEvents>;
|
|
48
49
|
readonly attributes: State<AttributeOutput<TAttributes>>;
|
|
49
50
|
readonly shadowRoot: false | ShadowRootInit;
|
package/dist/index.js
CHANGED
|
@@ -107,32 +107,30 @@ const namespace = (tag) => {
|
|
|
107
107
|
|
|
108
108
|
//#endregion
|
|
109
109
|
//#region src/signals/index.ts
|
|
110
|
-
var
|
|
110
|
+
var Hooks = class {
|
|
111
111
|
hooks;
|
|
112
|
-
context;
|
|
113
|
-
dispose;
|
|
114
112
|
constructor() {
|
|
115
113
|
this.hooks = new Map();
|
|
116
|
-
this.context = new Map();
|
|
117
|
-
this.dispose = new Array();
|
|
118
114
|
}
|
|
119
|
-
on = (input, invoke) => {
|
|
115
|
+
on = (scope, input, invoke) => {
|
|
120
116
|
const key = descriptor(input);
|
|
121
117
|
const invokes = this.hooks.get(key) ?? new Set();
|
|
122
118
|
invokes.add(invoke);
|
|
123
119
|
this.hooks.set(key, invokes);
|
|
124
|
-
return
|
|
120
|
+
return scope.dispose.push(() => invokes.delete(invoke));
|
|
125
121
|
};
|
|
126
122
|
dispatch = (input, value) => {
|
|
127
123
|
const invokes = this.hooks.get(descriptor(input));
|
|
128
124
|
if (invokes) for (const invoke of invokes) invoke(value);
|
|
129
125
|
};
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
126
|
+
};
|
|
127
|
+
var Scope = class {
|
|
128
|
+
context;
|
|
129
|
+
dispose;
|
|
130
|
+
constructor() {
|
|
131
|
+
this.context = new Map();
|
|
132
|
+
this.dispose = new Array();
|
|
133
|
+
}
|
|
136
134
|
stop() {
|
|
137
135
|
while (this.dispose.length) this.dispose.pop()?.(this);
|
|
138
136
|
}
|
|
@@ -211,6 +209,12 @@ function defineHook(description) {
|
|
|
211
209
|
function defineContext(description) {
|
|
212
210
|
return { key: Symbol(description) };
|
|
213
211
|
}
|
|
212
|
+
function getContext(scope, input) {
|
|
213
|
+
return scope.context.get(descriptor(input)) ?? {};
|
|
214
|
+
}
|
|
215
|
+
function setContext(scope, input, value) {
|
|
216
|
+
scope.context.set(descriptor(input), value);
|
|
217
|
+
}
|
|
214
218
|
let activeCompute;
|
|
215
219
|
const targets = new WeakMap();
|
|
216
220
|
|
|
@@ -258,7 +262,7 @@ const renderToString = async (slot, context) => {
|
|
|
258
262
|
const children = await renderToString(slot.children, context);
|
|
259
263
|
if (customElement) {
|
|
260
264
|
const element = new customElement(slot.attributes);
|
|
261
|
-
for (const [input, value] of context) element.scope
|
|
265
|
+
for (const [input, value] of context) setContext(element.scope, input, value);
|
|
262
266
|
const template = await renderToString(await element.setup(), context);
|
|
263
267
|
if (element.shadowRoot) {
|
|
264
268
|
const shadow = await renderToString({
|
|
@@ -350,12 +354,14 @@ const defineComponent = (options) => {
|
|
|
350
354
|
static $events = options.events ?? {};
|
|
351
355
|
static $attributes = options.attributes ?? {};
|
|
352
356
|
scope;
|
|
357
|
+
hooks;
|
|
353
358
|
events;
|
|
354
359
|
attributes;
|
|
355
360
|
shadowRoot;
|
|
356
361
|
host;
|
|
357
362
|
constructor(input, host) {
|
|
358
363
|
this.scope = new Scope();
|
|
364
|
+
this.hooks = new Hooks();
|
|
359
365
|
this.events = Object.keys(options.events ?? {}).reduce((output, name) => {
|
|
360
366
|
Reflect.set(output, name, input?.[name], output);
|
|
361
367
|
return output;
|
|
@@ -368,7 +374,7 @@ const defineComponent = (options) => {
|
|
|
368
374
|
this.host = host;
|
|
369
375
|
}
|
|
370
376
|
onMounted = (invoke) => {
|
|
371
|
-
return this.
|
|
377
|
+
return this.hooks.on(this.scope, MOUNTED_HOOK, invoke);
|
|
372
378
|
};
|
|
373
379
|
setup = () => options.setup(this);
|
|
374
380
|
});
|
|
@@ -384,7 +390,6 @@ const toCustomElement = (component) => {
|
|
|
384
390
|
async connectedCallback() {
|
|
385
391
|
const shadow = this.component.shadowRoot ? this.attachShadow(this.component.shadowRoot) : this;
|
|
386
392
|
const parentNode = getCustomElement(this.parentNode);
|
|
387
|
-
for (const [name, set] of parentNode?.component.scope.hooks ?? []) for (const invoke of set) this.component.scope.on(name, invoke);
|
|
388
393
|
for (const [name, event] of Object.entries(component.$events)) Reflect.set(this.component.events, name, (value) => {
|
|
389
394
|
if (value instanceof Event) return;
|
|
390
395
|
this.dispatchEvent(new CustomEvent(name.substring(2).toLowerCase(), {
|
|
@@ -392,9 +397,9 @@ const toCustomElement = (component) => {
|
|
|
392
397
|
detail: value
|
|
393
398
|
}));
|
|
394
399
|
}, this.component.events);
|
|
395
|
-
if (parentNode) for (const
|
|
400
|
+
if (parentNode) for (const [name, value] of parentNode.component.scope.context) setContext(this.component.scope, name, value);
|
|
396
401
|
shadow.replaceChildren(await renderToNode(this.component.scope, await this.component.setup()));
|
|
397
|
-
this.component.
|
|
402
|
+
this.component.hooks.dispatch(MOUNTED_HOOK, this);
|
|
398
403
|
}
|
|
399
404
|
attributeChangedCallback(name, oldValue, value) {
|
|
400
405
|
if (value === oldValue) return;
|
|
@@ -749,7 +754,7 @@ const Outlet = defineComponent({
|
|
|
749
754
|
name: "x-outlet",
|
|
750
755
|
shadowRoot: false,
|
|
751
756
|
setup: async ({ scope }) => {
|
|
752
|
-
const { event } =
|
|
757
|
+
const { event } = getContext(scope, RUNTIME_CONTEXT);
|
|
753
758
|
const radix = new Radix();
|
|
754
759
|
const routes = await getRoutes();
|
|
755
760
|
for (const path in routes) {
|
|
@@ -782,4 +787,4 @@ const anchorNavigate = (event) => {
|
|
|
782
787
|
};
|
|
783
788
|
|
|
784
789
|
//#endregion
|
|
785
|
-
export { $fetch, Compute, Handler, MOUNTED_HOOK, Outlet, RUNTIME_CONTEXT, Radix, Scope, activeCompute, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createMemo, createRuntime, createState, defineComponent, defineContext, defineHook, defineRoute, descriptor, fileName, fromValue, getAssets, getCookies, getCustomElement, getGlobalStyles, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, navigate, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString };
|
|
790
|
+
export { $fetch, Compute, Handler, Hooks, MOUNTED_HOOK, Outlet, RUNTIME_CONTEXT, Radix, Scope, activeCompute, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createMemo, createRuntime, createState, defineComponent, defineContext, defineHook, defineRoute, descriptor, fileName, fromValue, getAssets, getContext, getCookies, getCustomElement, getGlobalStyles, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, navigate, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setContext, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString };
|
package/dist/signals/index.d.ts
CHANGED
|
@@ -5,15 +5,16 @@ export interface State<T> {
|
|
|
5
5
|
export type Descriptor<T> = {
|
|
6
6
|
key: symbol;
|
|
7
7
|
};
|
|
8
|
-
export declare class
|
|
8
|
+
export declare class Hooks {
|
|
9
9
|
readonly hooks: Map<string, Set<(value: any) => unknown>>;
|
|
10
|
+
constructor();
|
|
11
|
+
on: <T>(scope: Scope, input: string | Descriptor<T>, invoke: (value: T) => unknown) => number;
|
|
12
|
+
dispatch: <T>(input: string | Descriptor<T>, value: T) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare class Scope {
|
|
10
15
|
readonly context: Map<string, unknown>;
|
|
11
16
|
readonly dispose: Array<(scope: Scope) => void>;
|
|
12
17
|
constructor();
|
|
13
|
-
on: <T>(input: string | Descriptor<T>, invoke: (value: T) => unknown) => number;
|
|
14
|
-
dispatch: <T>(input: string | Descriptor<T>, value: T) => void;
|
|
15
|
-
getContext: <T>(input: string | Descriptor<T>) => T;
|
|
16
|
-
setContext: <T>(input: string | Descriptor<T>, value: T) => void;
|
|
17
18
|
stop(): void;
|
|
18
19
|
}
|
|
19
20
|
export declare class Compute<T = void> extends Scope {
|
|
@@ -34,5 +35,7 @@ export declare function fromValue<T>(value: Value<T>): T;
|
|
|
34
35
|
export declare function descriptor<T>(descriptor: string | Descriptor<T>): string;
|
|
35
36
|
export declare function defineHook<T>(description?: string | number): Descriptor<T>;
|
|
36
37
|
export declare function defineContext<T>(description?: string | number): Descriptor<T>;
|
|
38
|
+
export declare function getContext<T>(scope: Scope, input: string | Descriptor<T>): T;
|
|
39
|
+
export declare function setContext<T>(scope: Scope, input: string | Descriptor<T>, value: T): void;
|
|
37
40
|
export declare let activeCompute: Compute | undefined;
|
|
38
41
|
export declare const targets: WeakMap<object, Map<string | symbol, Set<Compute<void>>>>;
|