solid-js 1.9.11 → 2.0.0-beta.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.
Files changed (82) hide show
  1. package/dist/dev.cjs +733 -1678
  2. package/dist/dev.js +598 -1643
  3. package/dist/server.cjs +769 -703
  4. package/dist/server.js +682 -670
  5. package/dist/solid.cjs +699 -1618
  6. package/dist/solid.js +563 -1582
  7. package/package.json +7 -151
  8. package/types/{render → client}/component.d.ts +1 -38
  9. package/types/client/core.d.ts +65 -0
  10. package/types/client/flow.d.ts +100 -0
  11. package/types/client/hydration.d.ts +76 -0
  12. package/types/index.d.ts +11 -14
  13. package/types/jsx.d.ts +1508 -1633
  14. package/types/server/component.d.ts +66 -0
  15. package/types/server/core.d.ts +44 -0
  16. package/types/server/flow.d.ts +60 -0
  17. package/types/server/hydration.d.ts +21 -0
  18. package/types/server/index.d.ts +12 -3
  19. package/types/server/shared.d.ts +45 -0
  20. package/types/server/signals.d.ts +60 -0
  21. package/h/dist/h.cjs +0 -115
  22. package/h/dist/h.js +0 -113
  23. package/h/jsx-dev-runtime/package.json +0 -8
  24. package/h/jsx-runtime/dist/jsx.cjs +0 -15
  25. package/h/jsx-runtime/dist/jsx.js +0 -10
  26. package/h/jsx-runtime/package.json +0 -8
  27. package/h/jsx-runtime/types/index.d.ts +0 -11
  28. package/h/jsx-runtime/types/jsx.d.ts +0 -4242
  29. package/h/package.json +0 -8
  30. package/h/types/hyperscript.d.ts +0 -20
  31. package/h/types/index.d.ts +0 -3
  32. package/html/dist/html.cjs +0 -583
  33. package/html/dist/html.js +0 -581
  34. package/html/package.json +0 -8
  35. package/html/types/index.d.ts +0 -3
  36. package/html/types/lit.d.ts +0 -41
  37. package/store/dist/dev.cjs +0 -458
  38. package/store/dist/dev.js +0 -449
  39. package/store/dist/server.cjs +0 -126
  40. package/store/dist/server.js +0 -114
  41. package/store/dist/store.cjs +0 -438
  42. package/store/dist/store.js +0 -429
  43. package/store/package.json +0 -46
  44. package/store/types/index.d.ts +0 -12
  45. package/store/types/modifiers.d.ts +0 -6
  46. package/store/types/mutable.d.ts +0 -5
  47. package/store/types/server.d.ts +0 -17
  48. package/store/types/store.d.ts +0 -107
  49. package/types/reactive/array.d.ts +0 -44
  50. package/types/reactive/observable.d.ts +0 -36
  51. package/types/reactive/scheduler.d.ts +0 -10
  52. package/types/reactive/signal.d.ts +0 -577
  53. package/types/render/Suspense.d.ts +0 -26
  54. package/types/render/flow.d.ts +0 -118
  55. package/types/render/hydration.d.ts +0 -24
  56. package/types/render/index.d.ts +0 -4
  57. package/types/server/reactive.d.ts +0 -98
  58. package/types/server/rendering.d.ts +0 -159
  59. package/universal/dist/dev.cjs +0 -245
  60. package/universal/dist/dev.js +0 -243
  61. package/universal/dist/universal.cjs +0 -245
  62. package/universal/dist/universal.js +0 -243
  63. package/universal/package.json +0 -20
  64. package/universal/types/index.d.ts +0 -3
  65. package/universal/types/universal.d.ts +0 -30
  66. package/web/dist/dev.cjs +0 -894
  67. package/web/dist/dev.js +0 -782
  68. package/web/dist/server.cjs +0 -892
  69. package/web/dist/server.js +0 -782
  70. package/web/dist/web.cjs +0 -883
  71. package/web/dist/web.js +0 -771
  72. package/web/package.json +0 -46
  73. package/web/storage/dist/storage.cjs +0 -12
  74. package/web/storage/dist/storage.js +0 -10
  75. package/web/storage/package.json +0 -15
  76. package/web/storage/types/index.d.ts +0 -2
  77. package/web/types/client.d.ts +0 -79
  78. package/web/types/core.d.ts +0 -2
  79. package/web/types/index.d.ts +0 -50
  80. package/web/types/jsx.d.ts +0 -1
  81. package/web/types/server-mock.d.ts +0 -65
  82. package/web/types/server.d.ts +0 -177
package/h/package.json DELETED
@@ -1,8 +0,0 @@
1
- {
2
- "name": "solid-js/h",
3
- "main": "./dist/h.cjs",
4
- "module": "./dist/h.js",
5
- "types": "./types/index.d.ts",
6
- "type": "module",
7
- "sideEffects": false
8
- }
@@ -1,20 +0,0 @@
1
- type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
2
- interface Runtime {
3
- insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
4
- spread(node: Element, accessor: any, isSVG?: Boolean, skipChildren?: Boolean): void;
5
- assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
6
- createComponent(Comp: (props: any) => any, props: any): any;
7
- dynamicProperty(props: any, key: string): any;
8
- SVGElements: Set<string>;
9
- }
10
- type ExpandableNode = Node & {
11
- [key: string]: any;
12
- };
13
- export type HyperScript = {
14
- (...args: any[]): () => ExpandableNode | ExpandableNode[];
15
- Fragment: (props: {
16
- children: (() => ExpandableNode) | (() => ExpandableNode)[];
17
- }) => ExpandableNode[];
18
- };
19
- export declare function createHyperScript(r: Runtime): HyperScript;
20
- export {};
@@ -1,3 +0,0 @@
1
- import type { HyperScript } from "./hyperscript.js";
2
- declare const h: HyperScript;
3
- export default h;
@@ -1,583 +0,0 @@
1
- 'use strict';
2
-
3
- var web = require('solid-js/web');
4
-
5
- const tagRE = /(?:<!--[\S\s]*?-->|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g;
6
- const attrRE = /(?:\s(?<boolean>[^/\s><=]+?)(?=[\s/>]))|(?:(?<name>\S+?)(?:\s*=\s*(?:(['"])(?<quotedValue>[\s\S]*?)\3|(?<unquotedValue>[^\s>]+))))/g;
7
- const lookup = {
8
- area: true,
9
- base: true,
10
- br: true,
11
- col: true,
12
- embed: true,
13
- hr: true,
14
- img: true,
15
- input: true,
16
- keygen: true,
17
- link: true,
18
- menuitem: true,
19
- meta: true,
20
- param: true,
21
- source: true,
22
- track: true,
23
- wbr: true
24
- };
25
- function parseTag(tag) {
26
- const res = {
27
- type: 'tag',
28
- name: '',
29
- voidElement: false,
30
- attrs: [],
31
- children: []
32
- };
33
- const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
34
- if (tagMatch) {
35
- res.name = tagMatch[1];
36
- if (lookup[tagMatch[1].toLowerCase()] || tag.charAt(tag.length - 2) === '/') {
37
- res.voidElement = true;
38
- }
39
- if (res.name.startsWith('!--')) {
40
- const endIndex = tag.indexOf('-->');
41
- return {
42
- type: 'comment',
43
- comment: endIndex !== -1 ? tag.slice(4, endIndex) : ''
44
- };
45
- }
46
- }
47
- const reg = new RegExp(attrRE);
48
- for (const match of tag.matchAll(reg)) {
49
- if ((match[1] || match[2]).startsWith('use:')) {
50
- res.attrs.push({
51
- type: 'directive',
52
- name: match[1] || match[2],
53
- value: match[4] || match[5] || ''
54
- });
55
- } else {
56
- res.attrs.push({
57
- type: 'attr',
58
- name: match[1] || match[2],
59
- value: match[4] || match[5] || ''
60
- });
61
- }
62
- }
63
- return res;
64
- }
65
- function pushTextNode(list, html, start) {
66
- const end = html.indexOf('<', start);
67
- const content = html.slice(start, end === -1 ? undefined : end);
68
- if (!/^\s*$/.test(content)) {
69
- list.push({
70
- type: 'text',
71
- content: content
72
- });
73
- }
74
- }
75
- function pushCommentNode(list, tag) {
76
- const content = tag.replace('<!--', '').replace('-->', '');
77
- if (!/^\s*$/.test(content)) {
78
- list.push({
79
- type: 'comment',
80
- content: content
81
- });
82
- }
83
- }
84
- function parse(html) {
85
- const result = [];
86
- let current = undefined;
87
- let level = -1;
88
- const arr = [];
89
- const byTag = {};
90
- html.replace(tagRE, (tag, index) => {
91
- const isOpen = tag.charAt(1) !== '/';
92
- const isComment = tag.slice(0, 4) === '<!--';
93
- const start = index + tag.length;
94
- const nextChar = html.charAt(start);
95
- let parent = undefined;
96
- if (isOpen && !isComment) {
97
- level++;
98
- current = parseTag(tag);
99
- if (!current.voidElement && nextChar && nextChar !== '<') {
100
- pushTextNode(current.children, html, start);
101
- }
102
- byTag[current.tagName] = current;
103
- if (level === 0) {
104
- result.push(current);
105
- }
106
- parent = arr[level - 1];
107
- if (parent) {
108
- parent.children.push(current);
109
- }
110
- arr[level] = current;
111
- }
112
- if (isComment) {
113
- if (level < 0) {
114
- pushCommentNode(result, tag);
115
- } else {
116
- pushCommentNode(arr[level].children, tag);
117
- }
118
- }
119
- if (isComment || !isOpen || current.voidElement) {
120
- if (!isComment) {
121
- level--;
122
- }
123
- if (nextChar !== '<' && nextChar) {
124
- parent = level === -1 ? result : arr[level].children;
125
- pushTextNode(parent, html, start);
126
- }
127
- }
128
- });
129
- return result;
130
- }
131
- function attrString(attrs) {
132
- const buff = [];
133
- for (const attr of attrs) {
134
- buff.push(attr.name + '="' + attr.value.replace(/"/g, '&quot;') + '"');
135
- }
136
- if (!buff.length) {
137
- return '';
138
- }
139
- return ' ' + buff.join(' ');
140
- }
141
- function stringifier(buff, doc) {
142
- switch (doc.type) {
143
- case 'text':
144
- return buff + doc.content;
145
- case 'tag':
146
- buff += '<' + doc.name + (doc.attrs ? attrString(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
147
- if (doc.voidElement) {
148
- return buff;
149
- }
150
- return buff + doc.children.reduce(stringifier, '') + '</' + doc.name + '>';
151
- case 'comment':
152
- return buff += '<!--' + doc.content + '-->';
153
- }
154
- }
155
- function stringify(doc) {
156
- return doc.reduce(function (token, rootEl) {
157
- return token + stringifier('', rootEl);
158
- }, '');
159
- }
160
- const cache = new Map();
161
- const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
162
- const spaces = " \\f\\n\\r\\t";
163
- const almostEverything = "[^" + spaces + "\\/>\"'=]+";
164
- const attrName = "[ " + spaces + "]+(?:use:<!--#-->|" + almostEverything + ')';
165
- const tagName = "<([A-Za-z$#]+[A-Za-z0-9:_-]*)((?:";
166
- const attrPartials = "(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|\\([^)]*?\\)|<[^>]*?>|" + almostEverything + "))?)";
167
- const attrSeeker = new RegExp(tagName + attrName + attrPartials + "+)([ " + spaces + "]*/?>)", "g");
168
- const findAttributes = new RegExp("(" + attrName + "\\s*=\\s*)(<!--#-->|['\"(]([\\w\\s]*<!--#-->[\\w\\s]*)*['\")])", "gi");
169
- const selfClosing = new RegExp(tagName + attrName + attrPartials + "*)([ " + spaces + "]*/>)", "g");
170
- const marker = "<!--#-->";
171
- const reservedNameSpaces = new Set(["class", "on", "oncapture", "style", "use", "prop", "attr"]);
172
- function attrReplacer($0, $1, $2, $3) {
173
- return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
174
- }
175
- function replaceAttributes($0, $1, $2) {
176
- return $1.replace(/<!--#-->/g, "###") + ($2[0] === '"' || $2[0] === "'" ? $2.replace(/<!--#-->/g, "###") : '"###"');
177
- }
178
- function fullClosing($0, $1, $2) {
179
- return VOID_ELEMENTS.test($1) ? $0 : "<" + $1 + $2 + "></" + $1 + ">";
180
- }
181
- function toPropertyName(name) {
182
- return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
183
- }
184
- function parseDirective(name, value, tag, options) {
185
- if (name === 'use:###' && value === '###') {
186
- const count = options.counter++;
187
- options.exprs.push(`typeof exprs[${count}] === "function" ? r.use(exprs[${count}], ${tag}, exprs[${options.counter++}]) : (()=>{throw new Error("use:### must be a function")})()`);
188
- } else {
189
- throw new Error(`Not support syntax ${name} must be use:{function}`);
190
- }
191
- }
192
- function createHTML(r, {
193
- delegateEvents = true,
194
- functionBuilder = (...args) => new Function(...args)
195
- } = {}) {
196
- let uuid = 1;
197
- r.wrapProps = props => {
198
- const d = Object.getOwnPropertyDescriptors(props);
199
- for (const k in d) {
200
- if (typeof d[k].value === "function" && !d[k].value.length) r.dynamicProperty(props, k);
201
- }
202
- return props;
203
- };
204
- function createTemplate(statics, opt) {
205
- let i = 0,
206
- markup = "";
207
- for (; i < statics.length - 1; i++) {
208
- markup = markup + statics[i] + "<!--#-->";
209
- }
210
- markup = markup + statics[i];
211
- const replaceList = [[selfClosing, fullClosing], [/<(<!--#-->)/g, "<###"], [/\.\.\.(<!--#-->)/g, "###"], [attrSeeker, attrReplacer], [/>\n+\s*/g, ">"], [/\n+\s*</g, "<"], [/\s+</g, " <"], [/>\s+/g, "> "]];
212
- markup = replaceList.reduce((acc, x) => {
213
- return acc.replace(x[0], x[1]);
214
- }, markup);
215
- const pars = parse(markup);
216
- const [html, code] = parseTemplate(pars, opt.funcBuilder),
217
- templates = [];
218
- for (let i = 0; i < html.length; i++) {
219
- templates.push(document.createElement("template"));
220
- templates[i].innerHTML = html[i];
221
- const nomarkers = templates[i].content.querySelectorAll("script,style");
222
- for (let j = 0; j < nomarkers.length; j++) {
223
- const d = nomarkers[j].firstChild?.data || "";
224
- if (d.indexOf(marker) > -1) {
225
- const parts = d.split(marker).reduce((memo, p, i) => {
226
- i && memo.push("");
227
- memo.push(p);
228
- return memo;
229
- }, []);
230
- nomarkers[i].firstChild.replaceWith(...parts);
231
- }
232
- }
233
- }
234
- templates[0].create = code;
235
- cache.set(statics, templates);
236
- return templates;
237
- }
238
- function parseKeyValue(node, tag, name, value, isSVG, isCE, options) {
239
- let expr = value === "###" ? `!doNotWrap ? exprs[${options.counter}]() : exprs[${options.counter++}]` : value.split("###").map((v, i) => i ? ` + (typeof exprs[${options.counter}] === "function" ? exprs[${options.counter}]() : exprs[${options.counter++}]) + "${v}"` : `"${v}"`).join(""),
240
- parts,
241
- namespace;
242
- if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
243
- name = parts[1];
244
- namespace = parts[0];
245
- }
246
- const isChildProp = r.ChildProperties.has(name);
247
- const isProp = r.Properties.has(name);
248
- if (name === "style") {
249
- const prev = `_$v${uuid++}`;
250
- options.decl.push(`${prev}={}`);
251
- options.exprs.push(`r.style(${tag},${expr},${prev})`);
252
- } else if (name === "classList") {
253
- const prev = `_$v${uuid++}`;
254
- options.decl.push(`${prev}={}`);
255
- options.exprs.push(`r.classList(${tag},${expr},${prev})`);
256
- } else if (namespace !== "attr" && (isChildProp || !isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp) || isCE || namespace === "prop")) {
257
- if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
258
- options.exprs.push(`${tag}.${r.getPropAlias(name, node.name.toUpperCase()) || name} = ${expr}`);
259
- } else {
260
- const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
261
- if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${r.Aliases[name] || name}",${expr})`);
262
- }
263
- }
264
- function parseAttribute(node, tag, name, value, isSVG, isCE, options) {
265
- if (name.slice(0, 2) === "on") {
266
- if (!name.includes(":")) {
267
- const lc = name.slice(2).toLowerCase();
268
- const delegate = delegateEvents && r.DelegatedEvents.has(lc);
269
- options.exprs.push(`r.addEventListener(${tag},"${lc}",exprs[${options.counter++}],${delegate})`);
270
- delegate && options.delegatedEvents.add(lc);
271
- } else {
272
- let capture = name.startsWith("oncapture:");
273
- options.exprs.push(`${tag}.addEventListener("${name.slice(capture ? 10 : 3)}",exprs[${options.counter++}]${capture ? ",true" : ""})`);
274
- }
275
- } else if (name === "ref") {
276
- options.exprs.push(`exprs[${options.counter++}](${tag})`);
277
- } else {
278
- const childOptions = Object.assign({}, options, {
279
- exprs: []
280
- }),
281
- count = options.counter;
282
- parseKeyValue(node, tag, name, value, isSVG, isCE, childOptions);
283
- options.decl.push(`_fn${count} = (${value === "###" ? "doNotWrap" : ""}) => {\n${childOptions.exprs.join(";\n")};\n}`);
284
- if (value === "###") {
285
- options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(_fn${count}) : _fn${count}(true)`);
286
- } else {
287
- let check = "";
288
- for (let i = count; i < childOptions.counter; i++) {
289
- i !== count && (check += " || ");
290
- check += `typeof exprs[${i}] === "function"`;
291
- }
292
- options.exprs.push(check + ` ? r.effect(_fn${count}) : _fn${count}()`);
293
- }
294
- options.counter = childOptions.counter;
295
- options.wrap = false;
296
- }
297
- }
298
- function processChildren(node, options) {
299
- const childOptions = Object.assign({}, options, {
300
- first: true,
301
- multi: false,
302
- parent: options.path
303
- });
304
- if (node.children.length > 1) {
305
- for (let i = 0; i < node.children.length; i++) {
306
- const child = node.children[i];
307
- if (child.type === "comment" && child.content === "#" || child.type === "tag" && child.name === "###") {
308
- childOptions.multi = true;
309
- break;
310
- }
311
- }
312
- }
313
- let i = 0;
314
- while (i < node.children.length) {
315
- const child = node.children[i];
316
- if (child.name === "###") {
317
- if (childOptions.multi) {
318
- node.children[i] = {
319
- type: "comment",
320
- content: "#"
321
- };
322
- i++;
323
- } else node.children.splice(i, 1);
324
- processComponent(child, childOptions);
325
- continue;
326
- }
327
- parseNode(child, childOptions);
328
- if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
329
- }
330
- options.counter = childOptions.counter;
331
- options.templateId = childOptions.templateId;
332
- options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
333
- options.isImportNode = options.isImportNode || childOptions.isImportNode;
334
- }
335
- function processComponentProps(propGroups) {
336
- let result = [];
337
- for (const props of propGroups) {
338
- if (Array.isArray(props)) {
339
- if (!props.length) continue;
340
- result.push(`r.wrapProps({${props.join(",") || ""}})`);
341
- } else result.push(props);
342
- }
343
- return result.length > 1 ? `r.mergeProps(${result.join(",")})` : result[0];
344
- }
345
- function processComponent(node, options) {
346
- let props = [];
347
- const keys = Object.keys(node.attrs),
348
- propGroups = [props],
349
- componentIdentifier = options.counter++;
350
- for (let i = 0; i < keys.length; i++) {
351
- const {
352
- type,
353
- name,
354
- value
355
- } = node.attrs[i];
356
- if (type === 'attr') {
357
- if (name === "###") {
358
- propGroups.push(`exprs[${options.counter++}]`);
359
- propGroups.push(props = []);
360
- } else if (value === "###") {
361
- props.push(`"${name}": exprs[${options.counter++}]`);
362
- } else props.push(`"${name}": "${value}"`);
363
- } else if (type === 'directive') {
364
- const tag = `_$el${uuid++}`;
365
- const topDecl = !options.decl.length;
366
- options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
367
- parseDirective(name, value, tag, options);
368
- }
369
- }
370
- if (node.children.length === 1 && node.children[0].type === "comment" && node.children[0].content === "#") {
371
- props.push(`children: () => exprs[${options.counter++}]`);
372
- } else if (node.children.length) {
373
- const children = {
374
- type: "fragment",
375
- children: node.children
376
- },
377
- childOptions = Object.assign({}, options, {
378
- first: true,
379
- decl: [],
380
- exprs: [],
381
- parent: false
382
- });
383
- parseNode(children, childOptions);
384
- props.push(`children: () => { ${childOptions.exprs.join(";\n")}}`);
385
- options.templateId = childOptions.templateId;
386
- options.counter = childOptions.counter;
387
- }
388
- let tag;
389
- if (options.multi) {
390
- tag = `_$el${uuid++}`;
391
- options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
392
- }
393
- if (options.parent) options.exprs.push(`r.insert(${options.parent}, r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})${tag ? `, ${tag}` : ""})`);else options.exprs.push(`${options.fragment ? "" : "return "}r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})`);
394
- options.path = tag;
395
- options.first = false;
396
- }
397
- function parseNode(node, options) {
398
- if (node.type === "fragment") {
399
- const parts = [];
400
- node.children.forEach(child => {
401
- if (child.type === "tag") {
402
- if (child.name === "###") {
403
- const childOptions = Object.assign({}, options, {
404
- first: true,
405
- fragment: true,
406
- decl: [],
407
- exprs: []
408
- });
409
- processComponent(child, childOptions);
410
- parts.push(childOptions.exprs[0]);
411
- options.counter = childOptions.counter;
412
- options.templateId = childOptions.templateId;
413
- return;
414
- }
415
- options.templateId++;
416
- const id = uuid;
417
- const childOptions = Object.assign({}, options, {
418
- first: true,
419
- decl: [],
420
- exprs: []
421
- });
422
- options.templateNodes.push([child]);
423
- parseNode(child, childOptions);
424
- parts.push(`function() { ${childOptions.decl.join(",\n") + ";\n" + childOptions.exprs.join(";\n") + `;\nreturn _$el${id};\n`}}()`);
425
- options.counter = childOptions.counter;
426
- options.templateId = childOptions.templateId;
427
- } else if (child.type === "text") {
428
- parts.push(`"${child.content}"`);
429
- } else if (child.type === "comment") {
430
- if (child.content === "#") parts.push(`exprs[${options.counter++}]`);else if (child.content) {
431
- for (let i = 0; i < child.content.split("###").length - 1; i++) {
432
- parts.push(`exprs[${options.counter++}]`);
433
- }
434
- }
435
- }
436
- });
437
- options.exprs.push(`return [${parts.join(", \n")}]`);
438
- } else if (node.type === "tag") {
439
- const tag = `_$el${uuid++}`;
440
- const topDecl = !options.decl.length;
441
- const templateId = options.templateId;
442
- options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
443
- const isSVG = r.SVGElements.has(node.name);
444
- const isCE = node.name.includes("-") || node.attrs.some(e => e.name === "is");
445
- options.hasCustomElement = isCE;
446
- options.isImportNode = (node.name === 'img' || node.name === 'iframe') && node.attrs.some(e => e.name === "loading" && e.value === 'lazy');
447
- if (node.attrs.some(e => e.name === "###")) {
448
- const spreadArgs = [];
449
- let current = "";
450
- const newAttrs = [];
451
- for (let i = 0; i < node.attrs.length; i++) {
452
- const {
453
- type,
454
- name,
455
- value
456
- } = node.attrs[i];
457
- if (type === 'attr') {
458
- if (value.includes("###")) {
459
- let count = options.counter++;
460
- current += `${name}: ${name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""}exprs[${count}],`;
461
- } else if (name === "###") {
462
- if (current.length) {
463
- spreadArgs.push(`()=>({${current}})`);
464
- current = "";
465
- }
466
- spreadArgs.push(`exprs[${options.counter++}]`);
467
- } else {
468
- newAttrs.push(node.attrs[i]);
469
- }
470
- } else if (type === 'directive') {
471
- parseDirective(name, value, tag, options);
472
- }
473
- }
474
- node.attrs = newAttrs;
475
- if (current.length) {
476
- spreadArgs.push(`()=>({${current}})`);
477
- }
478
- options.exprs.push(`r.spread(${tag},${spreadArgs.length === 1 ? `typeof ${spreadArgs[0]} === "function" ? r.mergeProps(${spreadArgs[0]}) : ${spreadArgs[0]}` : `r.mergeProps(${spreadArgs.join(",")})`},${isSVG},${!!node.children.length})`);
479
- } else {
480
- for (let i = 0; i < node.attrs.length; i++) {
481
- const {
482
- type,
483
- name,
484
- value
485
- } = node.attrs[i];
486
- if (type === 'directive') {
487
- parseDirective(name, value, tag, options);
488
- node.attrs.splice(i, 1);
489
- i--;
490
- } else if (type === "attr") {
491
- if (value.includes("###")) {
492
- node.attrs.splice(i, 1);
493
- i--;
494
- parseAttribute(node, tag, name, value, isSVG, isCE, options);
495
- }
496
- }
497
- }
498
- }
499
- options.path = tag;
500
- options.first = false;
501
- processChildren(node, options);
502
- if (topDecl) {
503
- options.decl[0] = options.hasCustomElement || options.isImportNode ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
504
- }
505
- } else if (node.type === "text") {
506
- const tag = `_$el${uuid++}`;
507
- options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
508
- options.path = tag;
509
- options.first = false;
510
- } else if (node.type === "comment") {
511
- const tag = `_$el${uuid++}`;
512
- options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
513
- if (node.content === "#") {
514
- if (options.multi) {
515
- options.exprs.push(`r.insert(${options.parent}, exprs[${options.counter++}], ${tag})`);
516
- } else options.exprs.push(`r.insert(${options.parent}, exprs[${options.counter++}])`);
517
- }
518
- options.path = tag;
519
- options.first = false;
520
- }
521
- }
522
- function parseTemplate(nodes, funcBuilder) {
523
- const options = {
524
- path: "",
525
- decl: [],
526
- exprs: [],
527
- delegatedEvents: new Set(),
528
- counter: 0,
529
- first: true,
530
- multi: false,
531
- templateId: 0,
532
- templateNodes: []
533
- },
534
- id = uuid,
535
- origNodes = nodes;
536
- let toplevel;
537
- if (nodes.length > 1) {
538
- nodes = [{
539
- type: "fragment",
540
- children: nodes
541
- }];
542
- }
543
- if (nodes[0].name === "###") {
544
- toplevel = true;
545
- processComponent(nodes[0], options);
546
- } else parseNode(nodes[0], options);
547
- r.delegateEvents(Array.from(options.delegatedEvents));
548
- const templateNodes = [origNodes].concat(options.templateNodes);
549
- return [templateNodes.map(t => stringify(t)), funcBuilder("tmpls", "exprs", "r", options.decl.join(",\n") + ";\n" + options.exprs.join(";\n") + (toplevel ? "" : `;\nreturn _$el${id};\n`))];
550
- }
551
- function html(statics, ...args) {
552
- const templates = cache.get(statics) || createTemplate(statics, {
553
- funcBuilder: functionBuilder
554
- });
555
- return templates[0].create(templates, args, r);
556
- }
557
- return html;
558
- }
559
-
560
- const html = createHTML({
561
- effect: web.effect,
562
- style: web.style,
563
- insert: web.insert,
564
- untrack: web.untrack,
565
- spread: web.spread,
566
- createComponent: web.createComponent,
567
- delegateEvents: web.delegateEvents,
568
- classList: web.classList,
569
- mergeProps: web.mergeProps,
570
- dynamicProperty: web.dynamicProperty,
571
- setAttribute: web.setAttribute,
572
- setAttributeNS: web.setAttributeNS,
573
- addEventListener: web.addEventListener,
574
- Aliases: web.Aliases,
575
- getPropAlias: web.getPropAlias,
576
- Properties: web.Properties,
577
- ChildProperties: web.ChildProperties,
578
- DelegatedEvents: web.DelegatedEvents,
579
- SVGElements: web.SVGElements,
580
- SVGNamespace: web.SVGNamespace
581
- });
582
-
583
- module.exports = html;