@manyducks.co/dolla 2.0.0 → 3.1.0
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 +133 -284
- package/dist/context-B5blupD2.js +363 -0
- package/dist/context-B5blupD2.js.map +1 -0
- package/dist/core/context.d.ts +29 -144
- package/dist/core/debug.d.ts +19 -0
- package/dist/core/index.d.ts +15 -16
- package/dist/core/markup/helpers.d.ts +34 -0
- package/dist/core/markup/html.d.ts +3 -0
- package/dist/core/{nodes → markup/nodes}/dom.d.ts +5 -4
- package/dist/core/markup/nodes/dynamic.d.ts +16 -0
- package/dist/core/markup/nodes/element.d.ts +14 -0
- package/dist/core/markup/nodes/portal.d.ts +15 -0
- package/dist/core/markup/nodes/repeat.d.ts +21 -0
- package/dist/core/markup/nodes/view.d.ts +17 -0
- package/dist/core/markup/scheduler.d.ts +1 -0
- package/dist/core/markup/types.d.ts +62 -0
- package/dist/core/markup/utils.d.ts +22 -0
- package/dist/core/ref.d.ts +6 -12
- package/dist/core/root.d.ts +36 -0
- package/dist/core/signals.d.ts +46 -76
- package/dist/core/symbols.d.ts +2 -0
- package/dist/core-JHktdqjt.js +242 -0
- package/dist/core-JHktdqjt.js.map +1 -0
- package/dist/http/index.d.ts +21 -33
- package/dist/http.js +89 -149
- package/dist/http.js.map +1 -1
- package/dist/index.js +4 -174
- package/dist/jsx-dev-runtime.d.ts +4 -3
- package/dist/jsx-dev-runtime.js +12 -9
- package/dist/jsx-dev-runtime.js.map +1 -1
- package/dist/jsx-runtime.d.ts +5 -4
- package/dist/jsx-runtime.js +17 -12
- package/dist/jsx-runtime.js.map +1 -1
- package/dist/router/index.d.ts +4 -3
- package/dist/router/router.d.ts +19 -162
- package/dist/router/store.d.ts +12 -0
- package/dist/router/types.d.ts +152 -0
- package/dist/router/utils.d.ts +99 -0
- package/dist/router/utils.test.d.ts +1 -0
- package/dist/router.js +428 -5
- package/dist/router.js.map +1 -1
- package/dist/signals-CMJPGr_M.js +354 -0
- package/dist/signals-CMJPGr_M.js.map +1 -0
- package/dist/translate/index.d.ts +82 -0
- package/dist/translate.js +125 -0
- package/dist/translate.js.map +1 -0
- package/dist/types.d.ts +21 -39
- package/dist/utils.d.ts +41 -29
- package/dist/utils.test.d.ts +1 -0
- package/dist/virtual/index.d.ts +1 -0
- package/dist/virtual/list.d.ts +53 -0
- package/package.json +19 -16
- package/dist/core/app.d.ts +0 -24
- package/dist/core/env.d.ts +0 -3
- package/dist/core/hooks.d.ts +0 -70
- package/dist/core/logger.d.ts +0 -42
- package/dist/core/logger.test.d.ts +0 -0
- package/dist/core/markup.d.ts +0 -82
- package/dist/core/markup.test.d.ts +0 -0
- package/dist/core/nodes/_markup.d.ts +0 -36
- package/dist/core/nodes/dynamic.d.ts +0 -22
- package/dist/core/nodes/element.d.ts +0 -27
- package/dist/core/nodes/portal.d.ts +0 -18
- package/dist/core/nodes/repeat.d.ts +0 -27
- package/dist/core/nodes/view.d.ts +0 -25
- package/dist/core/views/default-crash-view.d.ts +0 -25
- package/dist/core/views/for.d.ts +0 -21
- package/dist/core/views/fragment.d.ts +0 -7
- package/dist/core/views/portal.d.ts +0 -16
- package/dist/core/views/show.d.ts +0 -25
- package/dist/fragment-BahD_BJA.js +0 -7
- package/dist/fragment-BahD_BJA.js.map +0 -1
- package/dist/i18n/index.d.ts +0 -134
- package/dist/i18n.js +0 -309
- package/dist/i18n.js.map +0 -1
- package/dist/index-DRJlxs-Q.js +0 -535
- package/dist/index-DRJlxs-Q.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/logger-Aqi9m1CF.js +0 -565
- package/dist/logger-Aqi9m1CF.js.map +0 -1
- package/dist/markup-8jNhoqDe.js +0 -1089
- package/dist/markup-8jNhoqDe.js.map +0 -1
- package/dist/router/hooks.d.ts +0 -2
- package/dist/router/router.utils.d.ts +0 -93
- package/dist/typeChecking-5kmX0ulW.js +0 -65
- package/dist/typeChecking-5kmX0ulW.js.map +0 -1
- package/dist/typeChecking.d.ts +0 -95
- package/docs/buildless.md +0 -132
- package/docs/components.md +0 -238
- package/docs/hooks.md +0 -356
- package/docs/http.md +0 -178
- package/docs/i18n.md +0 -220
- package/docs/index.md +0 -10
- package/docs/markup.md +0 -136
- package/docs/mixins.md +0 -176
- package/docs/ref.md +0 -77
- package/docs/router.md +0 -281
- package/docs/setup.md +0 -137
- package/docs/signals.md +0 -262
- package/docs/stores.md +0 -113
- package/docs/views.md +0 -356
- package/notes/atomic.md +0 -452
- package/notes/elimination.md +0 -33
- package/notes/observable.md +0 -180
- package/notes/scratch.md +0 -565
- package/notes/splitting.md +0 -5
- package/notes/views.md +0 -195
- package/vite.config.js +0 -22
- /package/dist/core/{hooks.test.d.ts → markup/html.test.d.ts} +0 -0
- /package/dist/core/{ref.test.d.ts → markup/utils.test.d.ts} +0 -0
- /package/dist/router/{router.utils.test.d.ts → matcher.test.d.ts} +0 -0
- /package/dist/{typeChecking.test.d.ts → router/router.test.d.ts} +0 -0
package/notes/views.md
DELETED
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
```tsx
|
|
2
|
-
import { View, Store, $, $$ } from "@manyducks.co/dolla";
|
|
3
|
-
|
|
4
|
-
const SomeView = View("SomeView")
|
|
5
|
-
.props((t) => ({
|
|
6
|
-
// Define prop types which are validated and enforced in dev mode
|
|
7
|
-
$name: t.readable(t.string().optional()).optional(), // Readable<string | undefined> | undefined
|
|
8
|
-
}))
|
|
9
|
-
.build(({ $name }, ctx) => {
|
|
10
|
-
const { $value } = ctx.getStore(SomeStore);
|
|
11
|
-
|
|
12
|
-
return <h1>Hello {$name}</h1>;
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
const SomeStore = Store("SomeStore").build((ctx) => {
|
|
16
|
-
const $$value = $$(0);
|
|
17
|
-
|
|
18
|
-
return {
|
|
19
|
-
$value: $($$value),
|
|
20
|
-
};
|
|
21
|
-
});
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
Thoughts on reintegrating core APIs instead of keeping them as modular stores. In the case of things like the router, they really are core pieces masquerading as modular stores.
|
|
25
|
-
|
|
26
|
-
```tsx
|
|
27
|
-
import { App } from "@manyducks.co/dolla";
|
|
28
|
-
|
|
29
|
-
const app = new App();
|
|
30
|
-
|
|
31
|
-
// All routes are defined using a config object.
|
|
32
|
-
app.route({
|
|
33
|
-
path: "/",
|
|
34
|
-
view: RootView,
|
|
35
|
-
routes: [
|
|
36
|
-
{ path: "/example", view: ExampleView },
|
|
37
|
-
{ path: "/notes", view: NotesView },
|
|
38
|
-
],
|
|
39
|
-
});
|
|
40
|
-
app.route({ path: "*", redirect: "/example" });
|
|
41
|
-
|
|
42
|
-
function SomeView(props, ctx) {
|
|
43
|
-
// Route info and routing are exposed on ctx.route
|
|
44
|
-
ctx.route.go("/some-route", { preserveQuery: true, replace: false });
|
|
45
|
-
ctx.route.back();
|
|
46
|
-
ctx.route.forward();
|
|
47
|
-
ctx.route.$$query;
|
|
48
|
-
ctx.route.$params;
|
|
49
|
-
ctx.route.$path;
|
|
50
|
-
ctx.route.$pattern;
|
|
51
|
-
}
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
HTTP is also integrated:
|
|
55
|
-
|
|
56
|
-
```tsx
|
|
57
|
-
function SomeView(props, ctx) {
|
|
58
|
-
ctx.http.get("/some-route");
|
|
59
|
-
ctx.http.post("/some-route", { body: { data: 123 } });
|
|
60
|
-
// ... and the rest of the methods
|
|
61
|
-
}
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
Language support is also integrated:
|
|
65
|
-
|
|
66
|
-
```tsx
|
|
67
|
-
const app = new App();
|
|
68
|
-
|
|
69
|
-
app.language({ name: "en", path: "/locale/en.json" });
|
|
70
|
-
app.language({ name: "ja", path: "/locale/ja.json" });
|
|
71
|
-
app.setLanguage("en" /* or localStorage.getItem("appLanguage") or something */);
|
|
72
|
-
|
|
73
|
-
function SomeView(props, ctx) {
|
|
74
|
-
ctx.language.$current;
|
|
75
|
-
ctx.language.set("ja");
|
|
76
|
-
ctx.language.translate$("some.key");
|
|
77
|
-
|
|
78
|
-
// I would probably use it like this:
|
|
79
|
-
const { translate$ } = ctx.language;
|
|
80
|
-
translate$("some.key");
|
|
81
|
-
}
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## Stores vs Context variables
|
|
85
|
-
|
|
86
|
-
Now, these are going away as stores. But what about stores? I'd like to replace stores with context variables, like this:
|
|
87
|
-
|
|
88
|
-
```tsx
|
|
89
|
-
function ParentView(props, ctx) {
|
|
90
|
-
// Variables can be set in this context...
|
|
91
|
-
|
|
92
|
-
ctx.set("fixedValue", 1);
|
|
93
|
-
|
|
94
|
-
const $$writable = $$(2);
|
|
95
|
-
ctx.set("$$writableValue", $$writable);
|
|
96
|
-
|
|
97
|
-
return <ChildView />;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
function ChildView(props, ctx) {
|
|
101
|
-
// ... and accessed in a child context.
|
|
102
|
-
|
|
103
|
-
const fixed = ctx.get<number>("fixedValue"); // 1
|
|
104
|
-
const $$writable = ctx.get<Writable<number>>("$$writableValue"); // Writable(2)
|
|
105
|
-
|
|
106
|
-
// Overriding values will not change parent variables. This value will take effect for this context and any child context.
|
|
107
|
-
ctx.set("fixedValue", 2);
|
|
108
|
-
|
|
109
|
-
return <span>{$$writable}</span>;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// Now stores can be written and used in this way:
|
|
113
|
-
|
|
114
|
-
function ExampleStore(ctx: ViewContext) {
|
|
115
|
-
ctx.beforeConnect(() => {
|
|
116
|
-
// Takes whatever arguments, in this case the ViewContext itself so it can attach lifecycle methods.
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
return {
|
|
120
|
-
whatever: 1,
|
|
121
|
-
};
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
function ExampleView(props, ctx) {
|
|
125
|
-
ctx.set("example", ExampleStore(ctx));
|
|
126
|
-
|
|
127
|
-
// ...
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function ChildView(props, ctx) {
|
|
131
|
-
const example = ctx.get("example");
|
|
132
|
-
|
|
133
|
-
ctx.log(example.whatever); // prints: 1
|
|
134
|
-
}
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
Or as a class-based thing:
|
|
138
|
-
|
|
139
|
-
```tsx
|
|
140
|
-
import { View, Store } from "@manyducks.co/dolla";
|
|
141
|
-
|
|
142
|
-
// Stores are basically an observable map with computed properties.
|
|
143
|
-
const example = new Store({
|
|
144
|
-
computed: {
|
|
145
|
-
uppercased: (values) => values.key.toUpperCase(),
|
|
146
|
-
},
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
// Set one or more properties at a time.
|
|
150
|
-
example.set({ key: "value" });
|
|
151
|
-
|
|
152
|
-
// Get the current value of any property by name.
|
|
153
|
-
example.get("uppercased"); // "VALUE"
|
|
154
|
-
|
|
155
|
-
// Can subscribe to specific entries.
|
|
156
|
-
const sub = example.subscribe("key", (value) => {
|
|
157
|
-
// Do something when value changes.
|
|
158
|
-
});
|
|
159
|
-
sub.unsubscribe();
|
|
160
|
-
sub.current; // get current value of entry
|
|
161
|
-
|
|
162
|
-
// Get a two-way binding to a particular entry.
|
|
163
|
-
const bound = example.bind("key");
|
|
164
|
-
const boundSub = bound.subscribe((value) => {
|
|
165
|
-
// Do something when value changes.
|
|
166
|
-
});
|
|
167
|
-
boundSub.current; // get current value
|
|
168
|
-
bound.get();
|
|
169
|
-
bound.set(newValue);
|
|
170
|
-
|
|
171
|
-
// Now Views have a state that works in a very similar way.
|
|
172
|
-
|
|
173
|
-
interface ExampleViewState {
|
|
174
|
-
whatever: number;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
interface ExampleViewProps {
|
|
178
|
-
// Bound values can be passed as props to child views.
|
|
179
|
-
something: Bound<string>;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
class ExampleView extends View<ExampleViewState, ExampleViewProps> {
|
|
183
|
-
create() {
|
|
184
|
-
this.state.set({ whatever: 5 });
|
|
185
|
-
|
|
186
|
-
const whatever = this.state.bind("whatever");
|
|
187
|
-
|
|
188
|
-
this.state.subscribe("whatever", (value) => {
|
|
189
|
-
// This will be automatically cleaned up when the view is disconnected.
|
|
190
|
-
});
|
|
191
|
-
|
|
192
|
-
this.props.something.get(); // get the value of the bound prop.
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
```
|
package/vite.config.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { resolve } from "node:path";
|
|
2
|
-
import { defineConfig } from "vite";
|
|
3
|
-
|
|
4
|
-
export default defineConfig({
|
|
5
|
-
build: {
|
|
6
|
-
sourcemap: true,
|
|
7
|
-
minify: true,
|
|
8
|
-
|
|
9
|
-
lib: {
|
|
10
|
-
entry: {
|
|
11
|
-
index: resolve(__dirname, "src/core/index.ts"),
|
|
12
|
-
http: resolve(__dirname, "src/http/index.ts"),
|
|
13
|
-
i18n: resolve(__dirname, "src/i18n/index.ts"),
|
|
14
|
-
router: resolve(__dirname, "src/router/index.ts"),
|
|
15
|
-
"jsx-runtime": resolve(__dirname, "src/jsx-runtime.js"),
|
|
16
|
-
"jsx-dev-runtime": resolve(__dirname, "src/jsx-dev-runtime.js"),
|
|
17
|
-
},
|
|
18
|
-
name: "Dolla",
|
|
19
|
-
formats: ["es"],
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
});
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|