solid-js 1.9.3 → 2.0.0-experimental.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 (76) hide show
  1. package/dist/dev.cjs +213 -1603
  2. package/dist/dev.js +159 -1749
  3. package/dist/server.cjs +88 -11
  4. package/dist/server.js +91 -11
  5. package/dist/solid.cjs +196 -1558
  6. package/dist/solid.js +139 -1682
  7. package/package.json +8 -154
  8. package/types/{render → client}/component.d.ts +0 -61
  9. package/types/client/core.d.ts +75 -0
  10. package/types/client/flow.d.ts +114 -0
  11. package/types/{render → client}/hydration.d.ts +0 -2
  12. package/types/{reactive → client}/observable.d.ts +1 -1
  13. package/types/index.d.ts +44 -55
  14. package/types/jsx.d.ts +1944 -174
  15. package/types/server/index.d.ts +1 -1
  16. package/types/server/reactive.d.ts +6 -1
  17. package/types/server/store.d.ts +6 -0
  18. package/h/dist/h.cjs +0 -115
  19. package/h/dist/h.js +0 -144
  20. package/h/jsx-dev-runtime/package.json +0 -8
  21. package/h/jsx-runtime/dist/jsx.cjs +0 -15
  22. package/h/jsx-runtime/dist/jsx.js +0 -10
  23. package/h/jsx-runtime/package.json +0 -8
  24. package/h/jsx-runtime/types/index.d.ts +0 -14
  25. package/h/jsx-runtime/types/jsx.d.ts +0 -2276
  26. package/h/package.json +0 -8
  27. package/h/types/hyperscript.d.ts +0 -20
  28. package/h/types/index.d.ts +0 -3
  29. package/html/dist/html.cjs +0 -583
  30. package/html/dist/html.js +0 -706
  31. package/html/package.json +0 -8
  32. package/html/types/index.d.ts +0 -3
  33. package/html/types/lit.d.ts +0 -60
  34. package/store/dist/dev.cjs +0 -454
  35. package/store/dist/dev.js +0 -525
  36. package/store/dist/server.cjs +0 -126
  37. package/store/dist/server.js +0 -126
  38. package/store/dist/store.cjs +0 -434
  39. package/store/dist/store.js +0 -499
  40. package/store/package.json +0 -46
  41. package/store/types/index.d.ts +0 -26
  42. package/store/types/modifiers.d.ts +0 -9
  43. package/store/types/mutable.d.ts +0 -8
  44. package/store/types/server.d.ts +0 -37
  45. package/store/types/store.d.ts +0 -263
  46. package/types/reactive/array.d.ts +0 -52
  47. package/types/reactive/scheduler.d.ts +0 -13
  48. package/types/reactive/signal.d.ts +0 -664
  49. package/types/render/Suspense.d.ts +0 -26
  50. package/types/render/flow.d.ts +0 -130
  51. package/types/render/index.d.ts +0 -4
  52. package/universal/dist/dev.cjs +0 -243
  53. package/universal/dist/dev.js +0 -257
  54. package/universal/dist/universal.cjs +0 -243
  55. package/universal/dist/universal.js +0 -257
  56. package/universal/package.json +0 -20
  57. package/universal/types/index.d.ts +0 -4
  58. package/universal/types/universal.d.ts +0 -29
  59. package/web/dist/dev.cjs +0 -804
  60. package/web/dist/dev.js +0 -1241
  61. package/web/dist/server.cjs +0 -793
  62. package/web/dist/server.js +0 -1214
  63. package/web/dist/web.cjs +0 -793
  64. package/web/dist/web.js +0 -1220
  65. package/web/package.json +0 -46
  66. package/web/storage/dist/storage.cjs +0 -12
  67. package/web/storage/dist/storage.js +0 -10
  68. package/web/storage/package.json +0 -15
  69. package/web/storage/types/index.d.ts +0 -2
  70. package/web/storage/types/index.js +0 -13
  71. package/web/types/client.d.ts +0 -79
  72. package/web/types/core.d.ts +0 -10
  73. package/web/types/index.d.ts +0 -54
  74. package/web/types/jsx.d.ts +0 -1
  75. package/web/types/server-mock.d.ts +0 -80
  76. 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 ? void 0 : 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 = void 0;
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 = void 0;
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;