@manyducks.co/dolla 2.0.0-alpha.2 → 2.0.0-alpha.21
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 +168 -513
- package/dist/index.d.ts +12 -10
- package/dist/index.js +994 -727
- package/dist/index.js.map +1 -1
- package/dist/jsx-dev-runtime.js +2 -2
- package/dist/jsx-runtime.js +2 -2
- package/dist/markup.d.ts +39 -26
- package/dist/modules/dolla.d.ts +28 -14
- package/dist/modules/i18n.d.ts +129 -0
- package/dist/modules/render.d.ts +5 -8
- package/dist/modules/router.d.ts +8 -8
- package/dist/nodes/cond.d.ts +7 -7
- package/dist/nodes/html.d.ts +12 -6
- package/dist/nodes/observer.d.ts +9 -8
- package/dist/nodes/outlet.d.ts +8 -8
- package/dist/nodes/portal.d.ts +4 -4
- package/dist/nodes/repeat.d.ts +14 -14
- package/dist/nodes/text.d.ts +6 -6
- package/dist/passthrough-6Lrg96Id.js +1393 -0
- package/dist/passthrough-6Lrg96Id.js.map +1 -0
- package/dist/state.d.ts +151 -0
- package/dist/types.d.ts +12 -12
- package/dist/utils.d.ts +0 -1
- package/dist/view.d.ts +45 -9
- package/docs/http.md +5 -0
- package/docs/i18n.md +5 -0
- package/docs/router.md +5 -0
- package/docs/states.md +5 -0
- package/docs/views.md +5 -0
- package/notes/context-vars.md +21 -0
- package/notes/readme-scratch.md +222 -0
- package/notes/route-middleware.md +42 -0
- package/notes/scratch.md +93 -6
- package/package.json +13 -13
- package/tests/{signals.test.js → state.test.js} +6 -6
- package/dist/modules/language.d.ts +0 -41
- package/dist/passthrough-DrtCifRF.js +0 -1228
- package/dist/passthrough-DrtCifRF.js.map +0 -1
- package/dist/signals.d.ts +0 -101
package/dist/jsx-dev-runtime.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { P as m } from "./passthrough-
|
|
1
|
+
import { s } from "./passthrough-6Lrg96Id.js";
|
|
2
|
+
import { P as m } from "./passthrough-6Lrg96Id.js";
|
|
3
3
|
function d(n, r, t, e, a, l) {
|
|
4
4
|
const i = { ...o(["children", "key"], r) }, c = Array.isArray(r.children) ? r.children : [r.children];
|
|
5
5
|
return s(n, i, ...c);
|
package/dist/jsx-runtime.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { P as l } from "./passthrough-
|
|
1
|
+
import { s as t } from "./passthrough-6Lrg96Id.js";
|
|
2
|
+
import { P as l } from "./passthrough-6Lrg96Id.js";
|
|
3
3
|
function d(n, e, r) {
|
|
4
4
|
return t(n, e ? { ...u(["children", "key"], e) } : void 0, e.children);
|
|
5
5
|
}
|
package/dist/markup.d.ts
CHANGED
|
@@ -1,57 +1,78 @@
|
|
|
1
1
|
import type { Dolla } from "./modules/dolla.js";
|
|
2
|
-
import {
|
|
2
|
+
import { MaybeState, type State } from "./state.js";
|
|
3
3
|
import type { Renderable, Stringable } from "./types.js";
|
|
4
|
-
import { type
|
|
4
|
+
import { type ViewContext, type ViewFunction, type ViewResult } from "./view.js";
|
|
5
5
|
export interface ElementContext {
|
|
6
6
|
/**
|
|
7
7
|
* The root Dolla instance this element belongs to.
|
|
8
8
|
*/
|
|
9
9
|
root: Dolla;
|
|
10
|
+
/**
|
|
11
|
+
* Storage for context variables.
|
|
12
|
+
*/
|
|
13
|
+
data: Record<string | symbol, unknown>;
|
|
14
|
+
/**
|
|
15
|
+
* A reference to the parent context.
|
|
16
|
+
*/
|
|
17
|
+
parent?: ElementContext;
|
|
10
18
|
/**
|
|
11
19
|
* Whether to create DOM nodes in the SVG namespace. An `<svg>` element will set this to true and pass it down to children.
|
|
12
20
|
*/
|
|
13
21
|
isSVG?: boolean;
|
|
14
22
|
}
|
|
15
23
|
/**
|
|
16
|
-
* Markup is a set of element metadata that hasn't been constructed into a
|
|
24
|
+
* Markup is a set of element metadata that hasn't been constructed into a MarkupElement yet.
|
|
17
25
|
*/
|
|
18
26
|
export interface Markup {
|
|
27
|
+
/**
|
|
28
|
+
* In the case of a view, type will be the View function itself. It can also hold an identifier for special nodes like "$cond", "$repeat", etc.
|
|
29
|
+
* DOM nodes can be created by name, such as HTML elements like "div", "ul" or "span", SVG elements like ""
|
|
30
|
+
*/
|
|
19
31
|
type: string | ViewFunction<any>;
|
|
32
|
+
/**
|
|
33
|
+
* Data that will be passed to a new MarkupElement instance when it is constructed.
|
|
34
|
+
*/
|
|
20
35
|
props?: Record<string, any>;
|
|
36
|
+
/**
|
|
37
|
+
*
|
|
38
|
+
*/
|
|
21
39
|
children?: Markup[];
|
|
22
40
|
}
|
|
23
41
|
/**
|
|
24
42
|
* A DOM node that has been constructed from a Markup object.
|
|
25
43
|
*/
|
|
26
|
-
export interface
|
|
44
|
+
export interface MarkupElement {
|
|
27
45
|
readonly node?: Node;
|
|
28
46
|
readonly isMounted: boolean;
|
|
29
47
|
mount(parent: Node, after?: Node): void;
|
|
30
|
-
|
|
48
|
+
/**
|
|
49
|
+
* Disconnect from the DOM and clean up. If parentIsUnmounting, DOM operations are skipped.
|
|
50
|
+
*/
|
|
51
|
+
unmount(parentIsUnmounting?: boolean): void;
|
|
31
52
|
}
|
|
32
53
|
export declare function isMarkup(value: unknown): value is Markup;
|
|
33
|
-
export declare function
|
|
54
|
+
export declare function isMarkupElement(value: unknown): value is MarkupElement;
|
|
34
55
|
export declare function toMarkup(renderables: Renderable | Renderable[]): Markup[];
|
|
35
56
|
export interface MarkupAttributes {
|
|
36
57
|
$text: {
|
|
37
|
-
value:
|
|
58
|
+
value: MaybeState<Stringable>;
|
|
38
59
|
};
|
|
39
60
|
$cond: {
|
|
40
|
-
$predicate:
|
|
61
|
+
$predicate: State<any>;
|
|
41
62
|
thenContent?: Renderable;
|
|
42
63
|
elseContent?: Renderable;
|
|
43
64
|
};
|
|
44
65
|
$repeat: {
|
|
45
|
-
$items:
|
|
66
|
+
$items: State<any[]>;
|
|
46
67
|
keyFn: (value: any, index: number) => string | number | symbol;
|
|
47
|
-
renderFn: ($item:
|
|
68
|
+
renderFn: ($item: State<any>, $index: State<number>, c: ViewContext) => ViewResult;
|
|
48
69
|
};
|
|
49
70
|
$observer: {
|
|
50
|
-
|
|
71
|
+
states: State<any>[];
|
|
51
72
|
renderFn: (...items: any) => Renderable;
|
|
52
73
|
};
|
|
53
74
|
$outlet: {
|
|
54
|
-
$children:
|
|
75
|
+
$children: State<MarkupElement[]>;
|
|
55
76
|
};
|
|
56
77
|
$node: {
|
|
57
78
|
value: Node;
|
|
@@ -71,30 +92,22 @@ export declare const html: (strings: TemplateStringsArray, ...values: any[]) =>
|
|
|
71
92
|
/**
|
|
72
93
|
* Displays content conditionally. When `predicate` holds a truthy value, `thenContent` is displayed; when `predicate` holds a falsy value, `elseContent` is displayed.
|
|
73
94
|
*/
|
|
74
|
-
export declare function cond(predicate:
|
|
95
|
+
export declare function cond(predicate: MaybeState<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
|
|
75
96
|
/**
|
|
76
97
|
* Calls `renderFn` for each item in `items`. Dynamically adds and removes views as items change.
|
|
77
98
|
* The result of `keyFn` is used to compare items and decide if item was added, removed or updated.
|
|
78
99
|
*/
|
|
79
|
-
export declare function repeat<T>(items:
|
|
100
|
+
export declare function repeat<T>(items: MaybeState<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult): Markup;
|
|
80
101
|
/**
|
|
81
102
|
* Render `content` into a `parent` node anywhere in the page, rather than at its position in the view.
|
|
82
103
|
*/
|
|
83
104
|
export declare function portal(parent: Node, content: Renderable): Markup;
|
|
84
105
|
/**
|
|
85
|
-
*
|
|
86
|
-
*/
|
|
87
|
-
export declare function createRef<T extends Node>(): Ref<T>;
|
|
88
|
-
export declare function isRef<T extends Node>(value: any): value is Ref<T>;
|
|
89
|
-
export interface Ref<T extends Node> extends Signal<T | undefined> {
|
|
90
|
-
node: T | undefined;
|
|
91
|
-
}
|
|
92
|
-
/**
|
|
93
|
-
* Construct Markup metadata into a set of MarkupNodes.
|
|
106
|
+
* Construct Markup metadata into a set of MarkupElements.
|
|
94
107
|
*/
|
|
95
|
-
export declare function constructMarkup(elementContext: ElementContext, markup: Markup | Markup[]):
|
|
108
|
+
export declare function constructMarkup(elementContext: ElementContext, markup: Markup | Markup[]): MarkupElement[];
|
|
96
109
|
/**
|
|
97
|
-
* Combines one or more
|
|
110
|
+
* Combines one or more MarkupElements into a single MarkupElement.
|
|
98
111
|
*/
|
|
99
|
-
export declare function
|
|
112
|
+
export declare function groupElements(nodes: MarkupElement[]): MarkupElement;
|
|
100
113
|
export declare function isRenderable(value: unknown): value is Renderable;
|
package/dist/modules/dolla.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { type
|
|
1
|
+
import { type Markup, type MarkupElement } from "../markup.js";
|
|
2
|
+
import { createRef, createSettableState, createState, createWatcher, derive, isRef, toSettableState, toState, valueOf } from "../state.js";
|
|
3
|
+
import { type ViewElement, type ViewFunction } from "../view.js";
|
|
4
4
|
import { type CrashViewProps } from "../views/default-crash-view.js";
|
|
5
5
|
import { HTTP } from "./http.js";
|
|
6
|
-
import {
|
|
6
|
+
import { I18n } from "./i18n.js";
|
|
7
7
|
import { Render } from "./render.js";
|
|
8
8
|
import { Router } from "./router.js";
|
|
9
9
|
export type Environment = "development" | "production";
|
|
@@ -22,6 +22,7 @@ export interface Logger {
|
|
|
22
22
|
warn(...args: any[]): void;
|
|
23
23
|
error(...args: any[]): void;
|
|
24
24
|
crash(error: Error): void;
|
|
25
|
+
setName(name: string): Logger;
|
|
25
26
|
}
|
|
26
27
|
export interface LoggerErrorContext {
|
|
27
28
|
error: Error;
|
|
@@ -41,17 +42,18 @@ export type LoggerOptions = {
|
|
|
41
42
|
export declare class Dolla {
|
|
42
43
|
#private;
|
|
43
44
|
readonly http: HTTP;
|
|
44
|
-
readonly
|
|
45
|
+
readonly i18n: I18n;
|
|
45
46
|
readonly render: Render;
|
|
46
47
|
readonly router: Router;
|
|
47
48
|
constructor();
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
watch: <I extends import("../state.js").MaybeState<any>[]>(states: [...I], fn: (...currentValues: import("../state.js").StateValues<I>) => void) => import("../state.js").StopFunction;
|
|
50
|
+
createState: typeof createState;
|
|
51
|
+
createSettableState: typeof createSettableState;
|
|
52
|
+
toSettableState: typeof toSettableState;
|
|
53
|
+
toState: typeof toState;
|
|
54
|
+
valueOf: typeof valueOf;
|
|
53
55
|
derive: typeof derive;
|
|
54
|
-
|
|
56
|
+
createWatcher: typeof createWatcher;
|
|
55
57
|
createRef: typeof createRef;
|
|
56
58
|
isRef: typeof isRef;
|
|
57
59
|
/**
|
|
@@ -73,6 +75,18 @@ export declare class Dolla {
|
|
|
73
75
|
* When a crash is reported the app will be unmounted and replaced with this crash page.
|
|
74
76
|
*/
|
|
75
77
|
setCrashView(view: ViewFunction<CrashViewProps>): void;
|
|
78
|
+
/**
|
|
79
|
+
* Sets a context variable and returns its value. Context variables are accessible on the app and in child views.
|
|
80
|
+
*/
|
|
81
|
+
set<T>(key: string | symbol, value: T): T;
|
|
82
|
+
/**
|
|
83
|
+
* Gets the value of a context variable. Returns null if the variable is not set.
|
|
84
|
+
*/
|
|
85
|
+
get<T>(key: string | symbol): T | null;
|
|
86
|
+
/**
|
|
87
|
+
* Returns an object of all context variables stored at the app level.
|
|
88
|
+
*/
|
|
89
|
+
getAll(): Record<string | symbol, unknown>;
|
|
76
90
|
mount(selector: string, view?: ViewFunction<any>): Promise<void>;
|
|
77
91
|
mount(element: HTMLElement, view?: ViewFunction<any>): Promise<void>;
|
|
78
92
|
unmount(): Promise<void>;
|
|
@@ -99,13 +113,13 @@ export declare class Dolla {
|
|
|
99
113
|
*/
|
|
100
114
|
setLoggles(options: Partial<Loggles>): void;
|
|
101
115
|
setLogFilter(filter: string | RegExp): void;
|
|
102
|
-
createLogger(name: string
|
|
116
|
+
createLogger(name: string, options?: LoggerOptions): Logger;
|
|
103
117
|
/**
|
|
104
118
|
*
|
|
105
119
|
*/
|
|
106
|
-
constructView<P>(view: ViewFunction<P>, props: P, children?: Markup[]):
|
|
120
|
+
constructView<P>(view: ViewFunction<P>, props: P, children?: Markup[]): ViewElement;
|
|
107
121
|
/**
|
|
108
122
|
*
|
|
109
123
|
*/
|
|
110
|
-
constructMarkup(markup: Markup | Markup[]):
|
|
124
|
+
constructMarkup(markup: Markup | Markup[]): MarkupElement;
|
|
111
125
|
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { type MaybeState, type State } from "../state.js";
|
|
2
|
+
import type { Dolla } from "./dolla.js";
|
|
3
|
+
/**
|
|
4
|
+
* A JSON object of translated strings. Values can be string templates or nested objects.
|
|
5
|
+
*/
|
|
6
|
+
interface LocalizedStrings extends Record<string, string | LocalizedStrings> {
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A formatter to be applied to a variable.
|
|
10
|
+
*/
|
|
11
|
+
type Format = {
|
|
12
|
+
name: string;
|
|
13
|
+
options: Record<string, any>;
|
|
14
|
+
};
|
|
15
|
+
export interface TranslationConfig {
|
|
16
|
+
/**
|
|
17
|
+
* Name of the locale this translation is for (BCP 47 locale names recommended).
|
|
18
|
+
*/
|
|
19
|
+
locale: string;
|
|
20
|
+
/**
|
|
21
|
+
* Path to a JSON file with translated strings for this language.
|
|
22
|
+
*/
|
|
23
|
+
path?: string;
|
|
24
|
+
/**
|
|
25
|
+
* A callback function that returns a Promise that resolves to the translation object for this language.
|
|
26
|
+
*/
|
|
27
|
+
fetch?: () => Promise<LocalizedStrings>;
|
|
28
|
+
}
|
|
29
|
+
export type I18nSetupOptions = {
|
|
30
|
+
/**
|
|
31
|
+
* Default locale to load on startup
|
|
32
|
+
*/
|
|
33
|
+
locale?: string | null;
|
|
34
|
+
translations: TranslationConfig[];
|
|
35
|
+
};
|
|
36
|
+
export type TOptions = {
|
|
37
|
+
/**
|
|
38
|
+
*
|
|
39
|
+
*/
|
|
40
|
+
count?: MaybeState<number>;
|
|
41
|
+
/**
|
|
42
|
+
*
|
|
43
|
+
*/
|
|
44
|
+
context?: MaybeState<string>;
|
|
45
|
+
/**
|
|
46
|
+
* Override formats specified in the template with the ones in the array for each named variable.
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* t("example_key", {
|
|
50
|
+
* count: 5,
|
|
51
|
+
* formatOverrides: {
|
|
52
|
+
* count: [ { name: "datetime", options: { style: "currency", currency: "JPY" } } ]
|
|
53
|
+
* }
|
|
54
|
+
* });
|
|
55
|
+
*/
|
|
56
|
+
formatOverrides?: MaybeState<Record<string, Record<string, Format[]>>>;
|
|
57
|
+
[value: string]: MaybeState<any>;
|
|
58
|
+
};
|
|
59
|
+
export type Formatter = (locale: string, value: unknown, options: Record<string, any>) => string;
|
|
60
|
+
/**
|
|
61
|
+
* Dolla's I(nternationalizatio)n module. Manages language translations and locale-based formatting.
|
|
62
|
+
*/
|
|
63
|
+
export declare class I18n {
|
|
64
|
+
#private;
|
|
65
|
+
$locale: State<string | undefined>;
|
|
66
|
+
constructor(dolla: Dolla);
|
|
67
|
+
get locales(): string[];
|
|
68
|
+
setup(options: I18nSetupOptions): void;
|
|
69
|
+
setLocale(name: string): Promise<void>;
|
|
70
|
+
/**
|
|
71
|
+
* Returns a State containing the value at `key`.
|
|
72
|
+
|
|
73
|
+
* @param selector - Key to the translated value.
|
|
74
|
+
* @param options - A map of `{{placeholder}}` names and the values to replace them with.
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* const $value = t("your.key.here", { count: 5 });
|
|
78
|
+
*/
|
|
79
|
+
t(selector: string, options?: TOptions): State<string>;
|
|
80
|
+
/**
|
|
81
|
+
* Add a custom format callback.
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* Dolla.i18n.addFormat("uppercase", (locale, value, options) => {
|
|
85
|
+
* return value.toUpperCase();
|
|
86
|
+
* });
|
|
87
|
+
*
|
|
88
|
+
* {
|
|
89
|
+
* "greeting": "Hello, {{name|uppercase}}!"
|
|
90
|
+
* }
|
|
91
|
+
*
|
|
92
|
+
* t("greeting", {name: "world"}); // State<"Hello, WORLD!">
|
|
93
|
+
*/
|
|
94
|
+
addFormat(name: string, callback: (locale: string, value: unknown, options: Record<string, any>) => string): void;
|
|
95
|
+
/**
|
|
96
|
+
* Creates an `Intl.Collator` configured for the current locale.
|
|
97
|
+
* NOTE: The Collator remains bound to the locale it was created with, even when the app's locale changes.
|
|
98
|
+
*
|
|
99
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#options
|
|
100
|
+
*/
|
|
101
|
+
collator(options?: Intl.CollatorOptions): Intl.Collator;
|
|
102
|
+
/**
|
|
103
|
+
* Returns a State containing the number formatted for the current locale. Uses `Intl.NumberFormat` under the hood.
|
|
104
|
+
*
|
|
105
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
|
|
106
|
+
*/
|
|
107
|
+
number(count: MaybeState<number | bigint>, options?: Intl.NumberFormatOptions): State<string>;
|
|
108
|
+
/**
|
|
109
|
+
* Returns a State containing the date formatted for the current locale. Uses `Intl.DateTimeFormat` under the hood.
|
|
110
|
+
*
|
|
111
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options
|
|
112
|
+
*
|
|
113
|
+
* @example
|
|
114
|
+
* const date = new Date();
|
|
115
|
+
* const $formatted = Dolla.i18n.dateTime(date, { dateFormat: "short" });
|
|
116
|
+
*/
|
|
117
|
+
dateTime(date?: MaybeState<string | number | Date | undefined>, options?: Intl.DateTimeFormatOptions): State<string>;
|
|
118
|
+
/**
|
|
119
|
+
* Returns a State containing the date formatted for the current locale. Uses `Intl.DateTimeFormat` under the hood.
|
|
120
|
+
*
|
|
121
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* const list = new Date();
|
|
125
|
+
* const $formatted = Dolla.i18n.list(list, { });
|
|
126
|
+
*/
|
|
127
|
+
list(list: MaybeState<Iterable<string>>, options?: Intl.ListFormatOptions): State<string>;
|
|
128
|
+
}
|
|
129
|
+
export {};
|
package/dist/modules/render.d.ts
CHANGED
|
@@ -3,15 +3,12 @@ export declare class Render {
|
|
|
3
3
|
#private;
|
|
4
4
|
constructor(dolla: Dolla);
|
|
5
5
|
/**
|
|
6
|
-
* Queues a callback
|
|
7
|
-
* Running your DOM mutations in update callbacks reduces layout thrashing.
|
|
8
|
-
* Returns a Promise that resolves once the callback has run.
|
|
6
|
+
* Queues a callback that runs before the next batch of writes.
|
|
9
7
|
*/
|
|
10
|
-
|
|
8
|
+
read(callback: () => void): void;
|
|
11
9
|
/**
|
|
12
|
-
* Queues a callback
|
|
13
|
-
*
|
|
14
|
-
* Returns a Promise that resolves once the callback has run.
|
|
10
|
+
* Queues a callback to run in the next render batch.
|
|
11
|
+
* Always put DOM mutations in a write callback when possible to help Dolla batch them efficiently.
|
|
15
12
|
*/
|
|
16
|
-
|
|
13
|
+
write(callback: () => void, key?: string): void;
|
|
17
14
|
}
|
package/dist/modules/router.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Stringable } from "../types.js";
|
|
2
|
-
import {
|
|
2
|
+
import { type ViewElement, type ViewFunction } from "../view.js";
|
|
3
3
|
import type { Dolla } from "./dolla.js";
|
|
4
4
|
export interface RouteMatchContext {
|
|
5
5
|
/**
|
|
@@ -100,34 +100,34 @@ export interface RouterSetupOptions {
|
|
|
100
100
|
}
|
|
101
101
|
export interface RouterElements {
|
|
102
102
|
readonly rootElement?: HTMLElement;
|
|
103
|
-
readonly rootView?:
|
|
103
|
+
readonly rootView?: ViewElement;
|
|
104
104
|
}
|
|
105
105
|
export declare class Router {
|
|
106
106
|
#private;
|
|
107
107
|
/**
|
|
108
108
|
* The currently matched route pattern, if any.
|
|
109
109
|
*/
|
|
110
|
-
$pattern: import("../
|
|
110
|
+
$pattern: import("../state.js").State<string | null>;
|
|
111
111
|
/**
|
|
112
112
|
* The current URL path.
|
|
113
113
|
*/
|
|
114
|
-
$path: import("../
|
|
114
|
+
$path: import("../state.js").State<string>;
|
|
115
115
|
/**
|
|
116
116
|
* The current named path params.
|
|
117
117
|
*/
|
|
118
|
-
$params: import("../
|
|
118
|
+
$params: import("../state.js").State<ParsedParams>;
|
|
119
119
|
/**
|
|
120
120
|
* The current query params. Changes to this object will be reflected in the URL.
|
|
121
121
|
*/
|
|
122
|
-
$query: import("../
|
|
122
|
+
$query: import("../state.js").State<ParsedQuery>;
|
|
123
123
|
constructor(dolla: Dolla, elements: RouterElements);
|
|
124
124
|
setup(options: RouterSetupOptions): void;
|
|
125
125
|
/**
|
|
126
126
|
* Navigates to another route.
|
|
127
127
|
*
|
|
128
128
|
* @example
|
|
129
|
-
*
|
|
130
|
-
*
|
|
129
|
+
* Dolla.router.go("/login"); // navigate to `/login`
|
|
130
|
+
* Dolla.router.go["/users", 215], { replace: true }); // replace current history entry with `/users/215`
|
|
131
131
|
*/
|
|
132
132
|
go(path: Stringable | Stringable[], options?: NavigateOptions): void;
|
|
133
133
|
/**
|
package/dist/nodes/cond.d.ts
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type
|
|
1
|
+
import { type MarkupElement, type ElementContext, type Markup } from "../markup.js";
|
|
2
|
+
import { type State, type StopFunction } from "../state.js";
|
|
3
3
|
import { type Renderable } from "../types.js";
|
|
4
4
|
export interface ConditionalConfig {
|
|
5
|
-
$predicate:
|
|
5
|
+
$predicate: State<any>;
|
|
6
6
|
thenContent?: Renderable;
|
|
7
7
|
elseContent?: Renderable;
|
|
8
8
|
elementContext: ElementContext;
|
|
9
9
|
}
|
|
10
|
-
export declare class Conditional implements
|
|
10
|
+
export declare class Conditional implements MarkupElement {
|
|
11
11
|
node: Node;
|
|
12
12
|
endNode: Node;
|
|
13
|
-
$predicate:
|
|
13
|
+
$predicate: State<any>;
|
|
14
14
|
stopCallback?: StopFunction;
|
|
15
15
|
thenContent?: Markup[];
|
|
16
16
|
elseContent?: Markup[];
|
|
17
|
-
connectedContent:
|
|
17
|
+
connectedContent: MarkupElement[];
|
|
18
18
|
elementContext: ElementContext;
|
|
19
19
|
initialUpdateHappened: boolean;
|
|
20
20
|
previousValue?: any;
|
|
21
21
|
constructor(config: ConditionalConfig);
|
|
22
22
|
get isMounted(): boolean;
|
|
23
23
|
mount(parent: Node, after?: Node | undefined): void;
|
|
24
|
-
unmount(): void;
|
|
24
|
+
unmount(parentIsUnmounting?: boolean): void;
|
|
25
25
|
update(value: any): void;
|
|
26
26
|
}
|
package/dist/nodes/html.d.ts
CHANGED
|
@@ -1,26 +1,32 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type StopFunction } from "../
|
|
1
|
+
import { type ElementContext, type Markup, type MarkupElement } from "../markup.js";
|
|
2
|
+
import { type Ref, type State, type StopFunction } from "../state.js";
|
|
3
3
|
type HTMLOptions = {
|
|
4
4
|
elementContext: ElementContext;
|
|
5
5
|
tag: string;
|
|
6
6
|
props: Record<string, any>;
|
|
7
7
|
children?: Markup[];
|
|
8
8
|
};
|
|
9
|
-
export declare class HTML implements
|
|
9
|
+
export declare class HTML implements MarkupElement {
|
|
10
10
|
node: HTMLElement | SVGElement;
|
|
11
11
|
props: Record<string, any>;
|
|
12
|
-
children:
|
|
12
|
+
children: MarkupElement[];
|
|
13
13
|
stopCallbacks: StopFunction[];
|
|
14
14
|
elementContext: ElementContext;
|
|
15
15
|
uniqueId: string;
|
|
16
|
+
ref?: Ref<any>;
|
|
16
17
|
canClickAway: boolean;
|
|
17
18
|
get isMounted(): boolean;
|
|
18
19
|
constructor({ tag, props, children, elementContext }: HTMLOptions);
|
|
19
20
|
mount(parent: Node, after?: Node): void;
|
|
20
|
-
unmount(): void;
|
|
21
|
+
unmount(parentIsUnmounting?: boolean): void;
|
|
21
22
|
getUpdateKey(type: string, value: string | number): string;
|
|
23
|
+
attachProp<T>(value: State<T> | T, callback: (value: T) => void, updateKey: string): void;
|
|
22
24
|
applyProps(element: HTMLElement | SVGElement, props: Record<string, unknown>): void;
|
|
23
|
-
applyStyles(element: HTMLElement | SVGElement, styles:
|
|
25
|
+
applyStyles(element: HTMLElement | SVGElement, styles: unknown, stopCallbacks: StopFunction[]): () => void;
|
|
24
26
|
applyClasses(element: HTMLElement | SVGElement, classes: unknown, stopCallbacks: StopFunction[]): () => void;
|
|
25
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* Converts a camelCase string to kebab-case.
|
|
30
|
+
*/
|
|
31
|
+
export declare function camelToKebab(value: string): string;
|
|
26
32
|
export {};
|
package/dist/nodes/observer.d.ts
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type
|
|
1
|
+
import { type ElementContext, type MarkupElement } from "../markup.js";
|
|
2
|
+
import { type State } from "../state.js";
|
|
3
3
|
import type { Renderable } from "../types.js";
|
|
4
4
|
interface ObserverOptions {
|
|
5
5
|
elementContext: ElementContext;
|
|
6
|
-
|
|
6
|
+
states: State<any>[];
|
|
7
7
|
renderFn: (...values: any) => Renderable;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* Displays dynamic children without a parent element.
|
|
11
11
|
*/
|
|
12
|
-
export declare class Observer implements
|
|
12
|
+
export declare class Observer implements MarkupElement {
|
|
13
13
|
node: Node;
|
|
14
14
|
endNode: Node;
|
|
15
|
-
connectedViews:
|
|
15
|
+
connectedViews: MarkupElement[];
|
|
16
16
|
renderFn: (...values: any) => Renderable;
|
|
17
17
|
elementContext: ElementContext;
|
|
18
18
|
observerControls: {
|
|
19
19
|
start: () => void;
|
|
20
20
|
stop: () => void;
|
|
21
21
|
};
|
|
22
|
+
watcher: import("../state.js").StateWatcher;
|
|
22
23
|
get isMounted(): boolean;
|
|
23
|
-
constructor({
|
|
24
|
+
constructor({ states, renderFn, elementContext }: ObserverOptions);
|
|
24
25
|
mount(parent: Node, after?: Node): void;
|
|
25
|
-
unmount(): void;
|
|
26
|
-
cleanup(): void;
|
|
26
|
+
unmount(parentIsUnmounting?: boolean): void;
|
|
27
|
+
cleanup(parentIsUnmounting: boolean): void;
|
|
27
28
|
update(...children: Renderable[]): void;
|
|
28
29
|
}
|
|
29
30
|
export {};
|
package/dist/nodes/outlet.d.ts
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type
|
|
1
|
+
import { type MarkupElement, type ElementContext } from "../markup.js";
|
|
2
|
+
import { type State, type StopFunction } from "../state.js";
|
|
3
3
|
export interface OutletConfig {
|
|
4
|
-
$children:
|
|
4
|
+
$children: State<MarkupElement[]>;
|
|
5
5
|
elementContext: ElementContext;
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
8
|
* Manages an array of DOMHandles.
|
|
9
9
|
*/
|
|
10
|
-
export declare class Outlet implements
|
|
10
|
+
export declare class Outlet implements MarkupElement {
|
|
11
11
|
node: Node;
|
|
12
12
|
endNode: Node;
|
|
13
|
-
$children:
|
|
13
|
+
$children: State<MarkupElement[]>;
|
|
14
14
|
stopCallback?: StopFunction;
|
|
15
|
-
|
|
15
|
+
mountedChildren: MarkupElement[];
|
|
16
16
|
elementContext: ElementContext;
|
|
17
17
|
constructor(config: OutletConfig);
|
|
18
18
|
get isMounted(): boolean;
|
|
19
19
|
mount(parent: Node, after?: Node | undefined): void;
|
|
20
|
-
unmount(): void;
|
|
21
|
-
update(newChildren:
|
|
20
|
+
unmount(parentIsUnmounting?: boolean): void;
|
|
21
|
+
update(newChildren: MarkupElement[]): void;
|
|
22
22
|
}
|
package/dist/nodes/portal.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type MarkupElement, type ElementContext } from "../markup.js";
|
|
2
2
|
import { type Renderable } from "../types.js";
|
|
3
3
|
interface PortalConfig {
|
|
4
4
|
content: Renderable;
|
|
@@ -8,12 +8,12 @@ interface PortalConfig {
|
|
|
8
8
|
/**
|
|
9
9
|
* Renders content into a specified parent node.
|
|
10
10
|
*/
|
|
11
|
-
export declare class Portal implements
|
|
11
|
+
export declare class Portal implements MarkupElement {
|
|
12
12
|
config: PortalConfig;
|
|
13
|
-
|
|
13
|
+
element?: MarkupElement;
|
|
14
14
|
get isMounted(): boolean;
|
|
15
15
|
constructor(config: PortalConfig);
|
|
16
16
|
mount(_parent: Node, _after?: Node): void;
|
|
17
|
-
unmount(): void;
|
|
17
|
+
unmount(parentIsUnmounting?: boolean): void;
|
|
18
18
|
}
|
|
19
19
|
export {};
|
package/dist/nodes/repeat.d.ts
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type
|
|
1
|
+
import { type MarkupElement, type ElementContext } from "../markup.js";
|
|
2
|
+
import { type State, type Setter, type StopFunction } from "../state.js";
|
|
3
3
|
import { type ViewContext, type ViewResult } from "../view.js";
|
|
4
4
|
interface RepeatOptions<T> {
|
|
5
5
|
elementContext: ElementContext;
|
|
6
|
-
$items:
|
|
6
|
+
$items: State<T[]>;
|
|
7
7
|
keyFn: (value: T, index: number) => string | number | symbol;
|
|
8
|
-
renderFn: ($value:
|
|
8
|
+
renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult;
|
|
9
9
|
}
|
|
10
10
|
type ConnectedItem<T> = {
|
|
11
11
|
key: any;
|
|
12
|
-
$value:
|
|
13
|
-
setValue:
|
|
14
|
-
$index:
|
|
15
|
-
setIndex:
|
|
16
|
-
|
|
12
|
+
$value: State<T>;
|
|
13
|
+
setValue: Setter<T>;
|
|
14
|
+
$index: State<number>;
|
|
15
|
+
setIndex: Setter<number>;
|
|
16
|
+
element: MarkupElement;
|
|
17
17
|
};
|
|
18
|
-
export declare class Repeat<T> implements
|
|
18
|
+
export declare class Repeat<T> implements MarkupElement {
|
|
19
19
|
node: Node;
|
|
20
20
|
endNode: Node;
|
|
21
|
-
$items:
|
|
21
|
+
$items: State<T[]>;
|
|
22
22
|
stopCallback?: StopFunction;
|
|
23
23
|
connectedItems: ConnectedItem<T>[];
|
|
24
24
|
elementContext: ElementContext;
|
|
25
|
-
renderFn: ($value:
|
|
25
|
+
renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult;
|
|
26
26
|
keyFn: (value: T, index: number) => string | number | symbol;
|
|
27
27
|
get isMounted(): boolean;
|
|
28
28
|
constructor({ elementContext, $items, renderFn, keyFn }: RepeatOptions<T>);
|
|
29
29
|
mount(parent: Node, after?: Node): void;
|
|
30
|
-
unmount(): void;
|
|
31
|
-
_cleanup(): void;
|
|
30
|
+
unmount(parentIsUnmounting?: boolean): void;
|
|
31
|
+
_cleanup(parentIsUnmounting: boolean): void;
|
|
32
32
|
_update(value: T[]): void;
|
|
33
33
|
}
|
|
34
34
|
export {};
|