@takazudo/zfb 2.22.0 → 3.0.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 +5 -9
- package/dist/config.d.ts +62 -19
- package/dist/config.js +27 -6
- package/dist/config.js.map +1 -1
- package/dist/content.d.ts +8 -22
- package/dist/content.js +6 -28
- package/dist/content.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/island-boundary.d.ts +4 -0
- package/dist/island-boundary.js +42 -0
- package/dist/island-boundary.js.map +1 -0
- package/dist/island.d.ts +2 -118
- package/dist/island.js +4 -284
- package/dist/island.js.map +1 -1
- package/dist/jsx-types.d.ts +2 -38
- package/dist/jsx-types.js +3 -10
- package/dist/jsx-types.js.map +1 -1
- package/dist/plugins.d.ts +40 -0
- package/dist/plugins.js.map +1 -1
- package/dist/runtime.d.ts +23 -77
- package/dist/runtime.js +149 -320
- package/dist/runtime.js.map +1 -1
- package/dist/zudo-react/client.d.ts +3 -0
- package/dist/zudo-react/client.js +3 -0
- package/dist/zudo-react/client.js.map +1 -0
- package/dist/zudo-react/description.d.ts +16 -0
- package/dist/zudo-react/description.js +64 -0
- package/dist/zudo-react/description.js.map +1 -0
- package/dist/zudo-react/dom-bindings.d.ts +13 -0
- package/dist/zudo-react/dom-bindings.js +58 -0
- package/dist/zudo-react/dom-bindings.js.map +1 -0
- package/dist/zudo-react/escape.d.ts +2 -0
- package/dist/zudo-react/escape.js +7 -0
- package/dist/zudo-react/escape.js.map +1 -0
- package/dist/zudo-react/forms.d.ts +29 -0
- package/dist/zudo-react/forms.js +371 -0
- package/dist/zudo-react/forms.js.map +1 -0
- package/dist/zudo-react/hydrate.d.ts +4 -0
- package/dist/zudo-react/hydrate.js +909 -0
- package/dist/zudo-react/hydrate.js.map +1 -0
- package/dist/zudo-react/index.d.ts +47 -0
- package/dist/zudo-react/index.js +13 -0
- package/dist/zudo-react/index.js.map +1 -0
- package/dist/zudo-react/island-root-type.d.ts +1 -0
- package/dist/zudo-react/island-root-type.js +2 -0
- package/dist/zudo-react/island-root-type.js.map +1 -0
- package/dist/zudo-react/jsx-dev-runtime.d.ts +8 -0
- package/dist/zudo-react/jsx-dev-runtime.js +6 -0
- package/dist/zudo-react/jsx-dev-runtime.js.map +1 -0
- package/dist/zudo-react/jsx-runtime.d.ts +5 -0
- package/dist/zudo-react/jsx-runtime.js +7 -0
- package/dist/zudo-react/jsx-runtime.js.map +1 -0
- package/dist/zudo-react/jsx-types.d.ts +203 -0
- package/dist/zudo-react/jsx-types.js +2 -0
- package/dist/zudo-react/jsx-types.js.map +1 -0
- package/dist/zudo-react/props-transport.d.ts +2 -0
- package/dist/zudo-react/props-transport.js +95 -0
- package/dist/zudo-react/props-transport.js.map +1 -0
- package/dist/zudo-react/reactive-types.d.ts +8 -0
- package/dist/zudo-react/reactive-types.js +2 -0
- package/dist/zudo-react/reactive-types.js.map +1 -0
- package/dist/zudo-react/reactive.d.ts +20 -0
- package/dist/zudo-react/reactive.js +176 -0
- package/dist/zudo-react/reactive.js.map +1 -0
- package/dist/zudo-react/render-html.d.ts +3 -0
- package/dist/zudo-react/render-html.js +537 -0
- package/dist/zudo-react/render-html.js.map +1 -0
- package/dist/zudo-react/root.d.ts +20 -0
- package/dist/zudo-react/root.js +74 -0
- package/dist/zudo-react/root.js.map +1 -0
- package/dist/zudo-react/scheduler.d.ts +12 -0
- package/dist/zudo-react/scheduler.js +113 -0
- package/dist/zudo-react/scheduler.js.map +1 -0
- package/dist/zudo-react/scope.d.ts +42 -0
- package/dist/zudo-react/scope.js +220 -0
- package/dist/zudo-react/scope.js.map +1 -0
- package/dist/zudo-react/server.d.ts +15 -0
- package/dist/zudo-react/server.js +11 -0
- package/dist/zudo-react/server.js.map +1 -0
- package/dist/zudo-react/structure.d.ts +14 -0
- package/dist/zudo-react/structure.js +35 -0
- package/dist/zudo-react/structure.js.map +1 -0
- package/package.json +28 -24
|
@@ -0,0 +1,537 @@
|
|
|
1
|
+
import { Fragment, isDescription } from "./description.js";
|
|
2
|
+
import { escapeAttribute, escapeText } from "./escape.js";
|
|
3
|
+
import { readSnapshot } from "./reactive.js";
|
|
4
|
+
import { createScope, withScope } from "./scope.js";
|
|
5
|
+
import { serializeProps } from "./props-transport.js";
|
|
6
|
+
import { islandRootType } from "./island-root-type.js";
|
|
7
|
+
import { Show, For, showProps, forProps, keyed, keyPayload, view } from "./structure.js";
|
|
8
|
+
const words = (value) => new Set(value.split(" "));
|
|
9
|
+
const voidTags = words("area base br col embed hr img input link meta param source track wbr");
|
|
10
|
+
const booleanAttrs = words("hidden inert readonly autofocus required disabled checked selected multiple open controls muted loop autoplay novalidate formnovalidate allowfullscreen");
|
|
11
|
+
const commonAttrs = words("id class title lang dir slot role style hidden inert contenteditable draggable spellcheck tabindex accesskey translate onclick onload onerror");
|
|
12
|
+
const htmlAttrs = words("href target rel download src alt width height type name value placeholder for charset datetime readonly autofocus required disabled checked selected multiple open controls muted loop autoplay novalidate formnovalidate maxlength minlength min max step pattern autocomplete accept accept-charset http-equiv content media method action enctype rows cols colspan rowspan scope cite poster loading decoding sizes srcset crossorigin referrerpolicy sandbox allow allowfullscreen");
|
|
13
|
+
const svgAttrs = words("width height viewBox preserveAspectRatio gradientUnits gradientTransform markerWidth markerHeight refX refY xlink:href xml:lang stroke-width fill-rule clip-rule stroke-linecap stroke-linejoin stop-color stop-opacity fill stroke d x y x1 x2 y1 y2 cx cy r rx ry points transform opacity offset");
|
|
14
|
+
const svgTags = words("svg g path circle ellipse rect line polyline polygon text tspan defs symbol use clipPath mask linearGradient radialGradient stop title desc foreignObject");
|
|
15
|
+
const htmlTags = words("html head body title base link meta style script div span p a br hr main header footer nav section article aside h1 h2 h3 h4 h5 h6 ul ol li dl dt dd blockquote pre code strong em b i small mark time figure figcaption img picture source video audio track canvas form label input button textarea select option optgroup fieldset legend output progress meter datalist table caption thead tbody tfoot tr th td col colgroup details summary dialog template slot iframe noscript address abbr bdi bdo cite data del dfn ins kbd map area object param q rp rt ruby s samp sub sup u var wbr embed xmp noembed noframes plaintext");
|
|
16
|
+
const dialect = words("className htmlFor charSet dateTime tabIndex readOnly strokeWidth dangerouslySetInnerHTML");
|
|
17
|
+
const reserved = words("key ref children rawHtml");
|
|
18
|
+
const forms = words("modelValue modelChecked defaultValue defaultChecked");
|
|
19
|
+
const sensitive = words("noscript xmp iframe noembed noframes plaintext");
|
|
20
|
+
const tableChildren = {
|
|
21
|
+
table: words("caption colgroup thead tbody tfoot"),
|
|
22
|
+
thead: words("tr"),
|
|
23
|
+
tbody: words("tr"),
|
|
24
|
+
tfoot: words("tr"),
|
|
25
|
+
tr: words("td th"),
|
|
26
|
+
colgroup: words("col"),
|
|
27
|
+
};
|
|
28
|
+
function fail(code, context, detail) {
|
|
29
|
+
throw new TypeError(`${code}: ${detail} at ${context.path} in ${context.identity?.component ?? "static render"}`);
|
|
30
|
+
}
|
|
31
|
+
function reactive(value) {
|
|
32
|
+
return (typeof value === "object" &&
|
|
33
|
+
value !== null &&
|
|
34
|
+
"$$zudoReactive" in value &&
|
|
35
|
+
value.$$zudoReactive === "zudo-react.reactive.v1");
|
|
36
|
+
}
|
|
37
|
+
function read(value) {
|
|
38
|
+
return reactive(value) ? readSnapshot(value) : value;
|
|
39
|
+
}
|
|
40
|
+
function region(context, kind, content) {
|
|
41
|
+
if (!context.identity)
|
|
42
|
+
return content();
|
|
43
|
+
const id = context.next++;
|
|
44
|
+
return `<!--zr:1:${id}:${kind}-->${content()}<!--/zr:1:${id}-->`;
|
|
45
|
+
}
|
|
46
|
+
function at(context, part, fn) {
|
|
47
|
+
const old = context.path;
|
|
48
|
+
context.path += part;
|
|
49
|
+
try {
|
|
50
|
+
return fn();
|
|
51
|
+
}
|
|
52
|
+
finally {
|
|
53
|
+
context.path = old;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function children(value, context, namespace, parent) {
|
|
57
|
+
if (value == null || typeof value === "boolean")
|
|
58
|
+
return "";
|
|
59
|
+
if (Array.isArray(value))
|
|
60
|
+
return value
|
|
61
|
+
.map((item, index) => at(context, `[${index}]`, () => render(item, context, namespace, parent)))
|
|
62
|
+
.join("");
|
|
63
|
+
return render(value, context, namespace, parent);
|
|
64
|
+
}
|
|
65
|
+
function renderText(value, context) {
|
|
66
|
+
if (value == null || typeof value === "boolean")
|
|
67
|
+
return "";
|
|
68
|
+
if (typeof value === "string" || (typeof value === "number" && Number.isFinite(value)))
|
|
69
|
+
return escapeText(String(value));
|
|
70
|
+
fail("ZR_CHILD", context, `invalid scalar ${typeof value}`);
|
|
71
|
+
}
|
|
72
|
+
function style(value, context) {
|
|
73
|
+
if (typeof value === "string")
|
|
74
|
+
return value;
|
|
75
|
+
if (value === null ||
|
|
76
|
+
typeof value !== "object" ||
|
|
77
|
+
Array.isArray(value) ||
|
|
78
|
+
Object.getPrototypeOf(value) !== Object.prototype)
|
|
79
|
+
fail("ZR_STYLE", context, "style must be a string or flat object");
|
|
80
|
+
let result = "";
|
|
81
|
+
for (const [name, entry] of Object.entries(value)) {
|
|
82
|
+
if (!/^(--[a-zA-Z0-9_-]+|[a-z][a-z0-9-]*)$/.test(name) || /[A-Z]/.test(name))
|
|
83
|
+
fail("ZR_STYLE", context, `invalid property ${name}`);
|
|
84
|
+
if (entry == null)
|
|
85
|
+
continue;
|
|
86
|
+
if (typeof entry !== "string" && !(typeof entry === "number" && Number.isFinite(entry)))
|
|
87
|
+
fail("ZR_STYLE", context, `invalid value for ${name}`);
|
|
88
|
+
result += `${name}:${entry};`;
|
|
89
|
+
}
|
|
90
|
+
return result;
|
|
91
|
+
}
|
|
92
|
+
function attributes(tag, props, context, namespace, custom) {
|
|
93
|
+
let output = "";
|
|
94
|
+
for (const [name, original] of Object.entries(props)) {
|
|
95
|
+
if (reserved.has(name))
|
|
96
|
+
continue;
|
|
97
|
+
if (forms.has(name))
|
|
98
|
+
continue;
|
|
99
|
+
if (dialect.has(name) || /^on[A-Z]/.test(name))
|
|
100
|
+
fail("ZR_PROP_DIALECT", context, `${tag}.${name}`);
|
|
101
|
+
if (name.startsWith("on:")) {
|
|
102
|
+
if (!/^on:[A-Za-z][A-Za-z0-9_-]*(?::capture)?$/.test(name))
|
|
103
|
+
fail("ZR_LISTENER", context, `${tag}.${name}`);
|
|
104
|
+
if (typeof original !== "function")
|
|
105
|
+
fail("ZR_LISTENER", context, `${tag}.${name}`);
|
|
106
|
+
const inline = `on${name.slice(3).replace(/:capture$/, "")}`;
|
|
107
|
+
if (inline in props)
|
|
108
|
+
fail("ZR_LISTENER_CONFLICT", context, `${tag}.${inline}`);
|
|
109
|
+
continue;
|
|
110
|
+
}
|
|
111
|
+
if (!/^[A-Za-z_:][A-Za-z0-9_:.-]*$/.test(name))
|
|
112
|
+
fail("ZR_ATTRIBUTE", context, `${tag}.${name}`);
|
|
113
|
+
if (!custom &&
|
|
114
|
+
!commonAttrs.has(name) &&
|
|
115
|
+
!(namespace === "svg" ? svgAttrs.has(name) : htmlAttrs.has(name)) &&
|
|
116
|
+
!/^data-[\w.-]+$/.test(name) &&
|
|
117
|
+
!/^aria-[\w.-]+$/.test(name) &&
|
|
118
|
+
!/^on[a-z]+$/.test(name))
|
|
119
|
+
fail("ZR_ATTRIBUTE", context, `${tag}.${name}`);
|
|
120
|
+
const value = read(original);
|
|
121
|
+
if ((name === "value" || name === "checked") && reactive(original))
|
|
122
|
+
fail("ZR_MODEL_UNSUPPORTED", context, `${tag}.${name} requires modelValue/modelChecked`);
|
|
123
|
+
if (value == null)
|
|
124
|
+
continue;
|
|
125
|
+
if (/^on[a-z]/.test(name) && typeof value === "function")
|
|
126
|
+
fail("ZR_PROP_DIALECT", context, `${tag}.${name} must use on:${name.slice(2)}`);
|
|
127
|
+
if (custom && typeof value !== "string")
|
|
128
|
+
fail("ZR_ATTRIBUTE", context, `${tag}.${name} requires a string`);
|
|
129
|
+
if (name === "style")
|
|
130
|
+
output += ` style="${escapeAttribute(style(value, context))}"`;
|
|
131
|
+
else if (booleanAttrs.has(name)) {
|
|
132
|
+
if (typeof value !== "boolean")
|
|
133
|
+
fail("ZR_ATTRIBUTE", context, `${tag}.${name} requires a boolean`);
|
|
134
|
+
if (value)
|
|
135
|
+
output += ` ${name}`;
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
if (typeof value !== "string" &&
|
|
139
|
+
typeof value !== "boolean" &&
|
|
140
|
+
!(typeof value === "number" && Number.isFinite(value)))
|
|
141
|
+
fail("ZR_ATTRIBUTE", context, `${tag}.${name} requires a scalar`);
|
|
142
|
+
if (typeof value === "boolean" && !name.startsWith("aria-") && !name.startsWith("data-"))
|
|
143
|
+
fail("ZR_ATTRIBUTE", context, `${tag}.${name} requires a string`);
|
|
144
|
+
if (/^on[a-z]/.test(name) && typeof value !== "string")
|
|
145
|
+
fail("ZR_ATTRIBUTE", context, `${tag}.${name} requires a string`);
|
|
146
|
+
output += ` ${name}="${escapeAttribute(String(value))}"`;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
return output;
|
|
150
|
+
}
|
|
151
|
+
function restricted(value, context, namespace, parent) {
|
|
152
|
+
if (value == null || typeof value === "boolean")
|
|
153
|
+
return "";
|
|
154
|
+
if (Array.isArray(value))
|
|
155
|
+
return value
|
|
156
|
+
.map((item, index) => at(context, `[${index}]`, () => restricted(item, context, namespace, parent)))
|
|
157
|
+
.join("");
|
|
158
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
159
|
+
if (parent in tableChildren && String(value).trim())
|
|
160
|
+
fail("ZR_PARSER_CONTEXT", context, `${parent} text`);
|
|
161
|
+
return renderText(value, context);
|
|
162
|
+
}
|
|
163
|
+
if (parent === "title" || parent === "option")
|
|
164
|
+
fail("ZR_PARSER_CONTEXT", context, `${parent} requires static text`);
|
|
165
|
+
if (!isDescription(value) || typeof value.type !== "string")
|
|
166
|
+
fail("ZR_PARSER_CONTEXT", context, `${parent} requires intrinsic children`);
|
|
167
|
+
return element(value, context, namespace, parent);
|
|
168
|
+
}
|
|
169
|
+
function element(description, context, namespace, parent) {
|
|
170
|
+
const tag = description.type;
|
|
171
|
+
const custom = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)+$/.test(tag);
|
|
172
|
+
const elementNamespace = tag === "svg" || namespace === "svg" ? "svg" : "html";
|
|
173
|
+
const childNamespace = tag === "foreignObject" ? "html" : elementNamespace;
|
|
174
|
+
if (elementNamespace === "svg" ? !svgTags.has(tag) : !custom && !htmlTags.has(tag))
|
|
175
|
+
fail("ZR_TAG", context, tag);
|
|
176
|
+
if (context.identity && (tag === "template" || sensitive.has(tag)))
|
|
177
|
+
fail("ZR_PARSER_CONTEXT", context, tag);
|
|
178
|
+
if (parent in tableChildren && !tableChildren[parent]?.has(tag))
|
|
179
|
+
fail("ZR_PARSER_CONTEXT", context, `${parent} > ${tag}`);
|
|
180
|
+
if ((parent === "select" && tag !== "option" && tag !== "optgroup") ||
|
|
181
|
+
(parent === "optgroup" && tag !== "option"))
|
|
182
|
+
fail("ZR_PARSER_CONTEXT", context, `${parent} > ${tag}`);
|
|
183
|
+
const previousFormId = context.formId;
|
|
184
|
+
if (tag === "form")
|
|
185
|
+
context.formId =
|
|
186
|
+
typeof description.props.id === "string"
|
|
187
|
+
? `id:${description.props.id}`
|
|
188
|
+
: `form:${context.nextFormId++}`;
|
|
189
|
+
const source = description.props;
|
|
190
|
+
const props = { ...source };
|
|
191
|
+
const hasValue = source.modelValue !== undefined;
|
|
192
|
+
const hasChecked = source.modelChecked !== undefined;
|
|
193
|
+
if ((hasValue && hasChecked) ||
|
|
194
|
+
(source.defaultValue !== undefined && source.value !== undefined) ||
|
|
195
|
+
(source.defaultChecked !== undefined && source.checked !== undefined) ||
|
|
196
|
+
(hasValue &&
|
|
197
|
+
(source.defaultValue !== undefined ||
|
|
198
|
+
(source.type !== "radio" && source.value !== undefined))) ||
|
|
199
|
+
(hasChecked && (source.defaultChecked !== undefined || source.checked !== undefined)))
|
|
200
|
+
fail("ZR_MODEL_CONFLICT", context, tag);
|
|
201
|
+
if (hasValue || hasChecked) {
|
|
202
|
+
for (const name of ["type", "multiple", "name", "form"])
|
|
203
|
+
if (reactive(source[name]))
|
|
204
|
+
fail("ZR_MODEL_UNSUPPORTED", context, `reactive ${name} shape`);
|
|
205
|
+
const model = hasValue ? source.modelValue : source.modelChecked;
|
|
206
|
+
let prototype = model;
|
|
207
|
+
let writable = false;
|
|
208
|
+
while (prototype && typeof prototype === "object") {
|
|
209
|
+
const property = Object.getOwnPropertyDescriptor(prototype, "value");
|
|
210
|
+
if (property) {
|
|
211
|
+
writable = typeof property.set === "function";
|
|
212
|
+
break;
|
|
213
|
+
}
|
|
214
|
+
prototype = Object.getPrototypeOf(prototype);
|
|
215
|
+
}
|
|
216
|
+
if (!reactive(model) ||
|
|
217
|
+
!writable ||
|
|
218
|
+
!("$$zudoWritable" in model) ||
|
|
219
|
+
model.$$zudoWritable !== "zudo-react.writable.v1")
|
|
220
|
+
fail("ZR_MODEL_READONLY", context, tag);
|
|
221
|
+
}
|
|
222
|
+
if ((hasValue || hasChecked) && source.contenteditable !== undefined)
|
|
223
|
+
fail("ZR_MODEL_UNSUPPORTED", context, `${tag}[contenteditable]`);
|
|
224
|
+
const inputType = String(source.type ?? "text");
|
|
225
|
+
if (hasValue &&
|
|
226
|
+
!(tag === "textarea" ||
|
|
227
|
+
tag === "select" ||
|
|
228
|
+
(tag === "input" &&
|
|
229
|
+
["text", "search", "email", "url", "tel", "password", "radio"].includes(inputType))))
|
|
230
|
+
fail("ZR_MODEL_UNSUPPORTED", context, `${tag}[type=${inputType}]`);
|
|
231
|
+
if (hasChecked && !(tag === "input" && inputType === "checkbox"))
|
|
232
|
+
fail("ZR_MODEL_UNSUPPORTED", context, tag);
|
|
233
|
+
if (source.defaultValue !== undefined &&
|
|
234
|
+
!(tag === "textarea" || tag === "select" || tag === "input"))
|
|
235
|
+
fail("ZR_MODEL_UNSUPPORTED", context, tag);
|
|
236
|
+
if (source.defaultValue !== undefined &&
|
|
237
|
+
tag === "input" &&
|
|
238
|
+
!["text", "search", "email", "url", "tel", "password"].includes(inputType))
|
|
239
|
+
fail("ZR_MODEL_UNSUPPORTED", context, `${tag}[type=${inputType}]`);
|
|
240
|
+
if (source.defaultChecked !== undefined &&
|
|
241
|
+
!(tag === "input" && ["checkbox", "radio"].includes(inputType)))
|
|
242
|
+
fail("ZR_MODEL_UNSUPPORTED", context, tag);
|
|
243
|
+
if (tag === "input") {
|
|
244
|
+
if (source.defaultValue !== undefined || (hasValue && inputType !== "radio"))
|
|
245
|
+
props.value = read(source.modelValue ?? source.defaultValue);
|
|
246
|
+
if (source.defaultChecked !== undefined || hasChecked)
|
|
247
|
+
props.checked = read(source.modelChecked ?? source.defaultChecked);
|
|
248
|
+
if (hasValue && inputType === "radio") {
|
|
249
|
+
if (typeof source.name !== "string" || !source.name || typeof source.value !== "string")
|
|
250
|
+
fail("ZR_MODEL_UNSUPPORTED", context, "radio requires static name and value");
|
|
251
|
+
const selected = read(source.modelValue);
|
|
252
|
+
if (selected !== null && typeof selected !== "string")
|
|
253
|
+
fail("ZR_MODEL_VALUE", context, "radio requires string or null");
|
|
254
|
+
const form = typeof source.form === "string" ? `id:${source.form}` : context.formId;
|
|
255
|
+
const key = `${source.name}\u0000${form}`;
|
|
256
|
+
const owner = context.radioNames.get(key);
|
|
257
|
+
if (owner && owner !== source.modelValue)
|
|
258
|
+
fail("ZR_MODEL_CONFLICT", context, "same-name radios use different models");
|
|
259
|
+
context.radioNames.set(key, source.modelValue);
|
|
260
|
+
const group = context.radioGroups.get(source.modelValue);
|
|
261
|
+
if (group &&
|
|
262
|
+
(group.name !== source.name || group.form !== form || group.options.has(source.value)))
|
|
263
|
+
fail("ZR_MODEL_CONFLICT", context, "radio membership or duplicate value");
|
|
264
|
+
if (group)
|
|
265
|
+
group.options.add(source.value);
|
|
266
|
+
else
|
|
267
|
+
context.radioGroups.set(source.modelValue, {
|
|
268
|
+
name: source.name,
|
|
269
|
+
form,
|
|
270
|
+
value: selected,
|
|
271
|
+
options: new Set([source.value]),
|
|
272
|
+
});
|
|
273
|
+
props.checked = selected === source.value;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
if (tag === "option" && context.selectValue !== undefined) {
|
|
277
|
+
const value = source.value;
|
|
278
|
+
if (typeof value !== "string")
|
|
279
|
+
fail("ZR_MODEL_UNSUPPORTED", context, "select option requires static value");
|
|
280
|
+
if (context.selectSeen.has(value))
|
|
281
|
+
fail("ZR_MODEL_CONFLICT", context, "duplicate option value");
|
|
282
|
+
context.selectSeen.add(value);
|
|
283
|
+
if (source.selected !== undefined)
|
|
284
|
+
fail("ZR_MODEL_CONFLICT", context, "select-level value with option selected");
|
|
285
|
+
props.selected = value === context.selectValue;
|
|
286
|
+
if (props.selected)
|
|
287
|
+
context.selectMatches = (context.selectMatches ?? 0) + 1;
|
|
288
|
+
}
|
|
289
|
+
if (context.boundary && ("data-zfb-island" in props || "data-zfb-island-skip-ssr" in props))
|
|
290
|
+
fail("ZR_NESTED_ISLAND", context, tag);
|
|
291
|
+
if (tag === "select" &&
|
|
292
|
+
read(props.multiple) === true &&
|
|
293
|
+
(context.identity || hasValue || source.defaultValue !== undefined))
|
|
294
|
+
fail("ZR_MODEL_UNSUPPORTED", context, "select[multiple]");
|
|
295
|
+
const attrs = attributes(tag, props, context, elementNamespace, custom);
|
|
296
|
+
const raw = props.rawHtml;
|
|
297
|
+
const hasChildren = Object.hasOwn(props, "children");
|
|
298
|
+
if (raw !== undefined && hasChildren)
|
|
299
|
+
fail("ZR_RAW_HTML", context, `${tag} has children and rawHtml`);
|
|
300
|
+
if (voidTags.has(tag) && (hasChildren || raw !== undefined))
|
|
301
|
+
fail("ZR_VOID_CHILDREN", context, tag);
|
|
302
|
+
if (raw !== undefined &&
|
|
303
|
+
(elementNamespace === "svg" ||
|
|
304
|
+
tag === "textarea" ||
|
|
305
|
+
tag === "title" ||
|
|
306
|
+
tag === "select" ||
|
|
307
|
+
tag === "option"))
|
|
308
|
+
fail("ZR_RAW_HTML", context, tag);
|
|
309
|
+
if (tag === "textarea" && hasChildren && (hasValue || source.defaultValue !== undefined))
|
|
310
|
+
fail("ZR_MODEL_CONFLICT", context, tag);
|
|
311
|
+
let content = "";
|
|
312
|
+
if (raw !== undefined) {
|
|
313
|
+
if ((tag === "script" || tag === "style") && reactive(raw))
|
|
314
|
+
fail("ZR_RAW_HTML", context, `${tag} requires static rawHtml`);
|
|
315
|
+
const payload = read(raw);
|
|
316
|
+
if (typeof payload !== "string")
|
|
317
|
+
fail("ZR_RAW_HTML", context, `${tag} requires string rawHtml`);
|
|
318
|
+
if (/<!--\/?zr:1:|data-zfb-island(?:-skip-ssr)?\s*=/.test(payload))
|
|
319
|
+
fail("ZR_RAW_HTML", context, "reserved boundary in rawHtml");
|
|
320
|
+
if ((tag === "script" && /<\/script/i.test(payload)) ||
|
|
321
|
+
(tag === "style" && /<\/style/i.test(payload)))
|
|
322
|
+
fail("ZR_RAW_HTML", context, `closing ${tag} in rawHtml`);
|
|
323
|
+
content = tag === "script" || tag === "style" ? payload : region(context, "h", () => payload);
|
|
324
|
+
}
|
|
325
|
+
else if (tag === "textarea" && (hasValue || source.defaultValue !== undefined)) {
|
|
326
|
+
const value = read(source.modelValue ?? source.defaultValue);
|
|
327
|
+
if (typeof value !== "string")
|
|
328
|
+
fail("ZR_MODEL_VALUE", context, "textarea requires string");
|
|
329
|
+
content = `${value.startsWith("\n") ? "\n" : ""}${escapeText(value)}`;
|
|
330
|
+
}
|
|
331
|
+
else if (tag === "script" || tag === "style") {
|
|
332
|
+
if (hasChildren)
|
|
333
|
+
fail("ZR_RAW_HTML", context, `${tag} requires rawHtml`);
|
|
334
|
+
}
|
|
335
|
+
else if (tag === "title" ||
|
|
336
|
+
tag === "option" ||
|
|
337
|
+
tag === "optgroup" ||
|
|
338
|
+
tag === "select" ||
|
|
339
|
+
tag in tableChildren) {
|
|
340
|
+
if (tag === "select" && (hasValue || source.defaultValue !== undefined)) {
|
|
341
|
+
const value = read(source.modelValue ?? source.defaultValue);
|
|
342
|
+
if (typeof value !== "string")
|
|
343
|
+
fail("ZR_MODEL_VALUE", context, "select requires string");
|
|
344
|
+
const oldValue = context.selectValue;
|
|
345
|
+
const oldSeen = context.selectSeen;
|
|
346
|
+
const oldMatches = context.selectMatches;
|
|
347
|
+
context.selectValue = value;
|
|
348
|
+
context.selectSeen = new Set();
|
|
349
|
+
context.selectMatches = 0;
|
|
350
|
+
try {
|
|
351
|
+
content = restricted(props.children, context, childNamespace, tag);
|
|
352
|
+
if (context.selectMatches !== 1)
|
|
353
|
+
fail("ZR_MODEL_VALUE", context, `select has no option ${value}`);
|
|
354
|
+
}
|
|
355
|
+
finally {
|
|
356
|
+
context.selectValue = oldValue;
|
|
357
|
+
context.selectSeen = oldSeen;
|
|
358
|
+
context.selectMatches = oldMatches;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
else
|
|
362
|
+
content = restricted(props.children, context, childNamespace, tag);
|
|
363
|
+
}
|
|
364
|
+
else
|
|
365
|
+
content = children(props.children, context, childNamespace, tag);
|
|
366
|
+
context.formId = previousFormId;
|
|
367
|
+
return `<${tag}${attrs}>${voidTags.has(tag) ? "" : `${content}</${tag}>`}`;
|
|
368
|
+
}
|
|
369
|
+
function render(value, context, namespace, parent) {
|
|
370
|
+
if (value == null || typeof value === "boolean")
|
|
371
|
+
return "";
|
|
372
|
+
if (Array.isArray(value))
|
|
373
|
+
return region(context, "f", () => children(value, context, namespace, parent));
|
|
374
|
+
if (reactive(value))
|
|
375
|
+
return region(context, "t", () => renderText(read(value), context));
|
|
376
|
+
if (typeof value === "string" || typeof value === "number")
|
|
377
|
+
return renderText(value, context);
|
|
378
|
+
if (typeof value === "object" && value !== null && "then" in value)
|
|
379
|
+
fail("ZR_ASYNC_COMPONENT", context, "promise child");
|
|
380
|
+
if (!isDescription(value))
|
|
381
|
+
fail("ZR_CHILD", context, typeof value);
|
|
382
|
+
if (value.type === islandRootType)
|
|
383
|
+
return island(value, context, namespace, parent);
|
|
384
|
+
if (value.type === Fragment)
|
|
385
|
+
return region(context, "f", () => children(value.props.children, context, namespace, parent));
|
|
386
|
+
if (value.type === Show) {
|
|
387
|
+
if (parent in tableChildren ||
|
|
388
|
+
["select", "optgroup", "option", "title", "textarea", "script", "style"].includes(parent))
|
|
389
|
+
fail("ZR_PARSER_CONTEXT", context, parent);
|
|
390
|
+
const props = showProps(value);
|
|
391
|
+
if (!reactive(props.when) ||
|
|
392
|
+
typeof props.children !== "function" ||
|
|
393
|
+
(props.fallback !== undefined && typeof props.fallback !== "function"))
|
|
394
|
+
fail("ZR_CHILD", context, "Show requires signal and factories");
|
|
395
|
+
const selected = read(props.when);
|
|
396
|
+
if (typeof selected !== "boolean")
|
|
397
|
+
fail("ZR_CHILD", context, "Show.when requires boolean");
|
|
398
|
+
return region(context, `s:${selected ? 1 : 0}`, () => {
|
|
399
|
+
const factory = selected ? props.children : props.fallback;
|
|
400
|
+
if (!factory)
|
|
401
|
+
return "";
|
|
402
|
+
const scope = context.scope.child("Show");
|
|
403
|
+
const previous = context.scope;
|
|
404
|
+
context.scope = scope;
|
|
405
|
+
try {
|
|
406
|
+
return withScope(scope, () => render(factory(), context, namespace, parent));
|
|
407
|
+
}
|
|
408
|
+
finally {
|
|
409
|
+
context.scope = previous;
|
|
410
|
+
}
|
|
411
|
+
});
|
|
412
|
+
}
|
|
413
|
+
if (value.type === For) {
|
|
414
|
+
if (parent in tableChildren ||
|
|
415
|
+
["select", "optgroup", "option", "title", "textarea", "script", "style"].includes(parent))
|
|
416
|
+
fail("ZR_PARSER_CONTEXT", context, parent);
|
|
417
|
+
const props = forProps(value);
|
|
418
|
+
if (!reactive(props.each) ||
|
|
419
|
+
typeof props.by !== "function" ||
|
|
420
|
+
typeof props.children !== "function")
|
|
421
|
+
fail("ZR_CHILD", context, "For requires signal, key and factory");
|
|
422
|
+
const items = read(props.each);
|
|
423
|
+
if (!Array.isArray(items))
|
|
424
|
+
fail("ZR_CHILD", context, "For.each requires array");
|
|
425
|
+
const keys = keyed(items, props.by, context.path);
|
|
426
|
+
return region(context, "l", () => items
|
|
427
|
+
.map((item, index) => {
|
|
428
|
+
const scope = context.scope.child("For");
|
|
429
|
+
const previous = context.scope;
|
|
430
|
+
context.scope = scope;
|
|
431
|
+
try {
|
|
432
|
+
return region(context, `i:${keyPayload(keys[index])}`, () => withScope(scope, () => render(props.children(view(item).value, view(index).value), context, namespace, parent)));
|
|
433
|
+
}
|
|
434
|
+
finally {
|
|
435
|
+
context.scope = previous;
|
|
436
|
+
}
|
|
437
|
+
})
|
|
438
|
+
.join(""));
|
|
439
|
+
}
|
|
440
|
+
if (typeof value.type === "string")
|
|
441
|
+
return element(value, context, namespace, parent);
|
|
442
|
+
const component = value.type;
|
|
443
|
+
const scope = context.scope.child(component.name || "Anonymous");
|
|
444
|
+
const prior = context.scope;
|
|
445
|
+
context.scope = scope;
|
|
446
|
+
try {
|
|
447
|
+
return region(context, "c", () => {
|
|
448
|
+
const output = withScope(scope, () => component(value.props));
|
|
449
|
+
if (output && typeof output === "object" && "then" in output)
|
|
450
|
+
fail("ZR_ASYNC_COMPONENT", context, component.name);
|
|
451
|
+
return render(output, context, namespace, parent);
|
|
452
|
+
});
|
|
453
|
+
}
|
|
454
|
+
finally {
|
|
455
|
+
context.scope = prior;
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
function empty(value) {
|
|
459
|
+
return (value == null || typeof value === "boolean" || (Array.isArray(value) && value.every(empty)));
|
|
460
|
+
}
|
|
461
|
+
function island(description, context, namespace, parent) {
|
|
462
|
+
if (context.boundary)
|
|
463
|
+
fail("ZR_NESTED_ISLAND", context, "nested island");
|
|
464
|
+
if (namespace !== "html" || parent === "p" || parent in tableChildren || parent === "select")
|
|
465
|
+
fail("ZR_PARSER_CONTEXT", context, "island wrapper");
|
|
466
|
+
const child = description.props.child;
|
|
467
|
+
const options = description.props.options;
|
|
468
|
+
if (!isDescription(child) || typeof child.type !== "function")
|
|
469
|
+
fail("ZR_ISLAND_CHILD", context, "one function component required");
|
|
470
|
+
if (!options?.identity?.component || !options.identity.build)
|
|
471
|
+
fail("ZR_ISLAND_IDENTITY", context, "component/build required");
|
|
472
|
+
const component = child.type.displayName ?? child.type.name;
|
|
473
|
+
if (component !== options.identity.component)
|
|
474
|
+
fail("ZR_ISLAND_IDENTITY", context, `expected ${options.identity.component}, got ${component}`);
|
|
475
|
+
if (Object.hasOwn(child.props, "children") && !empty(child.props.children))
|
|
476
|
+
fail("ZR_ISLAND_CHILD", context, "nonempty children");
|
|
477
|
+
const props = { ...child.props };
|
|
478
|
+
delete props.children;
|
|
479
|
+
let payload;
|
|
480
|
+
try {
|
|
481
|
+
payload = serializeProps(props);
|
|
482
|
+
}
|
|
483
|
+
catch (error) {
|
|
484
|
+
throw new TypeError(`ZR_ISLAND_PROPS ${component}: ${error instanceof Error ? error.message : String(error)}`);
|
|
485
|
+
}
|
|
486
|
+
const when = options.when ?? "load";
|
|
487
|
+
if (!["load", "idle", "visible", "media"].includes(when) ||
|
|
488
|
+
(when === "media" && !options.media?.trim()) ||
|
|
489
|
+
(when !== "media" && options.media !== undefined))
|
|
490
|
+
fail("ZR_ISLAND_WHEN", context, when);
|
|
491
|
+
const marker = options.skipSsr ? "data-zfb-island-skip-ssr" : "data-zfb-island";
|
|
492
|
+
const attrs = ` ${marker}="${escapeAttribute(options.identity.component)}" data-when="${when}"${when === "media" ? ` data-media="${escapeAttribute(options.media)}"` : ""} data-zfb-transport="json/1" data-zfb-protocol="zudo-react/1" data-zfb-build="${escapeAttribute(options.identity.build)}" data-props="${escapeAttribute(payload)}"`;
|
|
493
|
+
const local = {
|
|
494
|
+
radioGroups: new Map(),
|
|
495
|
+
radioNames: new Map(),
|
|
496
|
+
formId: "",
|
|
497
|
+
nextFormId: 0,
|
|
498
|
+
identity: options.skipSsr ? undefined : options.identity,
|
|
499
|
+
boundary: true,
|
|
500
|
+
next: 0,
|
|
501
|
+
scope: context.scope,
|
|
502
|
+
path: context.path,
|
|
503
|
+
};
|
|
504
|
+
const content = options.skipSsr
|
|
505
|
+
? children(options.fallback, local, namespace, "div")
|
|
506
|
+
: render({ ...child, props }, local, "html", "div");
|
|
507
|
+
validateRadioGroups(local);
|
|
508
|
+
return `<div${attrs}>${content}</div>`;
|
|
509
|
+
}
|
|
510
|
+
function validateRadioGroups(context) {
|
|
511
|
+
for (const group of context.radioGroups.values())
|
|
512
|
+
if (group.value !== null && !group.options.has(group.value))
|
|
513
|
+
fail("ZR_MODEL_VALUE", context, `radio has no option ${group.value}`);
|
|
514
|
+
}
|
|
515
|
+
export function renderHtml(node, options) {
|
|
516
|
+
const root = createScope({ component: options.island?.component ?? "<root>" });
|
|
517
|
+
const context = {
|
|
518
|
+
radioGroups: new Map(),
|
|
519
|
+
radioNames: new Map(),
|
|
520
|
+
formId: "",
|
|
521
|
+
nextFormId: 0,
|
|
522
|
+
identity: options.island,
|
|
523
|
+
boundary: options.island !== undefined,
|
|
524
|
+
next: 0,
|
|
525
|
+
scope: root,
|
|
526
|
+
path: "root",
|
|
527
|
+
};
|
|
528
|
+
try {
|
|
529
|
+
const html = render(node, context, "html", "");
|
|
530
|
+
validateRadioGroups(context);
|
|
531
|
+
return html;
|
|
532
|
+
}
|
|
533
|
+
finally {
|
|
534
|
+
root.dispose();
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
//# sourceMappingURL=render-html.js.map
|