@ryupold/vode 1.7.1 → 1.7.2
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 +10 -10
- package/package.json +13 -7
package/README.md
CHANGED
|
@@ -18,7 +18,8 @@ The use cases can be single page applications or isolated components with comple
|
|
|
18
18
|
<!DOCTYPE html>
|
|
19
19
|
<html>
|
|
20
20
|
<head>
|
|
21
|
-
<
|
|
21
|
+
<meta charset="utf-8">
|
|
22
|
+
<title>Vode ESM Example</title>
|
|
22
23
|
</head>
|
|
23
24
|
<body>
|
|
24
25
|
<div id="app"></div>
|
|
@@ -51,18 +52,15 @@ Binds the library to the global `V` variable.
|
|
|
51
52
|
```html
|
|
52
53
|
<!DOCTYPE html>
|
|
53
54
|
<html>
|
|
54
|
-
|
|
55
55
|
<head>
|
|
56
56
|
<meta charset="utf-8">
|
|
57
57
|
<script src="https://unpkg.com/@ryupold/vode/dist/vode.es5.min.js"></script>
|
|
58
|
-
<title>
|
|
58
|
+
<title>Vode ES5 (iife) Script Example</title>
|
|
59
59
|
</head>
|
|
60
|
-
|
|
61
60
|
<body>
|
|
62
61
|
<div id="app"></div>
|
|
63
62
|
<script>
|
|
64
63
|
var appNode = document.getElementById('app');
|
|
65
|
-
appNode.innerHTML = 'initializing...';
|
|
66
64
|
|
|
67
65
|
var state = { counter: 0 };
|
|
68
66
|
|
|
@@ -76,7 +74,7 @@ Binds the library to the global `V` variable.
|
|
|
76
74
|
}
|
|
77
75
|
],
|
|
78
76
|
["br"],
|
|
79
|
-
["span", { style: { color: 'red' } }, s.counter
|
|
77
|
+
["span", { style: { color: 'red' } }, '' + s.counter]
|
|
80
78
|
]
|
|
81
79
|
});
|
|
82
80
|
</script>
|
|
@@ -93,7 +91,8 @@ index.html
|
|
|
93
91
|
```html
|
|
94
92
|
<html>
|
|
95
93
|
<head>
|
|
96
|
-
<
|
|
94
|
+
<meta charset="utf-8">
|
|
95
|
+
<title>Vode NPM Example</title>
|
|
97
96
|
<script type="module" src="main.js"></script>
|
|
98
97
|
</head>
|
|
99
98
|
<body>
|
|
@@ -362,7 +361,7 @@ Also a `patch` function is added to the state object; it is the same function th
|
|
|
362
361
|
A re-render happens when a patch object is supplied to the `patch` function or via event.
|
|
363
362
|
When an object is passed to `patch`, its properties are recursively deep merged onto the state object.
|
|
364
363
|
|
|
365
|
-
```
|
|
364
|
+
```javascript
|
|
366
365
|
const s = {
|
|
367
366
|
counter: 0,
|
|
368
367
|
pointing: false,
|
|
@@ -596,7 +595,7 @@ app(element, state,
|
|
|
596
595
|
);
|
|
597
596
|
|
|
598
597
|
function SettingsForm(ctx: SubStateContext<Settings>) {
|
|
599
|
-
const settings = ctx.get()!; // { theme: 'dark', lang: '
|
|
598
|
+
const settings = ctx.get()!; // { theme: 'dark', lang: 'es' }
|
|
600
599
|
|
|
601
600
|
return <Vode>[FORM,
|
|
602
601
|
[P, "current theme:", settings.theme],
|
|
@@ -649,6 +648,7 @@ export function IsolatedVodeApp<OuterState, InnerState>(
|
|
|
649
648
|
);
|
|
650
649
|
}
|
|
651
650
|
```
|
|
651
|
+
|
|
652
652
|
The memo with empty dependency array prevents further render calls from the outer app
|
|
653
653
|
so rendering of the subtree inside is controlled by the inner app.
|
|
654
654
|
Take note of the fact that the top-level element of the inner app refers to the surrounding element and will change its state accordingly.
|
|
@@ -662,7 +662,7 @@ Patching an empty array `[]` will skip the current view transition and set the q
|
|
|
662
662
|
|
|
663
663
|
Scheduling behaviour can in theory be overridden with `containerNode._vode.asyncRenderer`.
|
|
664
664
|
|
|
665
|
-
```
|
|
665
|
+
```javascript
|
|
666
666
|
// or globally disable view transitions for the vode framework
|
|
667
667
|
import { globals } from '@ryupold/vode';
|
|
668
668
|
globals.startViewTransition = null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ryupold/vode",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"description": "a minimalist web framework",
|
|
5
5
|
"author": "Michael Scherbakow (ryupold)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -24,7 +24,13 @@
|
|
|
24
24
|
"url": "https://github.com/ryupold/vode/issues"
|
|
25
25
|
},
|
|
26
26
|
"homepage": "https://github.com/ryupold/vode#readme",
|
|
27
|
-
"
|
|
27
|
+
"type": "module",
|
|
28
|
+
"main": "./dist/vode.mjs",
|
|
29
|
+
"exports": {
|
|
30
|
+
"import": "./dist/vode.min.mjs",
|
|
31
|
+
"require": "./dist/vode.min.js",
|
|
32
|
+
"default": "./dist/vode.min.mjs"
|
|
33
|
+
},
|
|
28
34
|
"scripts": {
|
|
29
35
|
"build": "esbuild index.ts --bundle --format=esm --outfile=dist/vode.mjs",
|
|
30
36
|
"build-min": "esbuild index.ts --bundle --format=esm --minify --outfile=dist/vode.min.mjs",
|
|
@@ -34,15 +40,15 @@
|
|
|
34
40
|
"babel-classic": "npx babel dist/vode.js --out-file dist/vode.es5.min.js",
|
|
35
41
|
"release": "npm run build && npm run build-min && npm run build-classic && npm run build-classic-min && npm run babel && npm run babel-classic",
|
|
36
42
|
"publish": "npm publish --access public",
|
|
37
|
-
"clean": "tsc -b --clean",
|
|
43
|
+
"clean": "tsc -b --clean && rm dist/*",
|
|
38
44
|
"watch": "tsc -b -w"
|
|
39
45
|
},
|
|
40
46
|
"devDependencies": {
|
|
41
|
-
"@babel/cli": "7.28.
|
|
42
|
-
"@babel/core": "7.
|
|
43
|
-
"@babel/preset-env": "7.
|
|
47
|
+
"@babel/cli": "7.28.6",
|
|
48
|
+
"@babel/core": "7.29.0",
|
|
49
|
+
"@babel/preset-env": "7.29.0",
|
|
44
50
|
"babel-preset-minify": "0.5.2",
|
|
45
|
-
"esbuild": "0.27.
|
|
51
|
+
"esbuild": "0.27.3",
|
|
46
52
|
"typescript": "5.9.3"
|
|
47
53
|
}
|
|
48
54
|
}
|