marko 6.0.3 → 6.0.5
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/dist/common/helpers.d.ts +2 -2
- package/dist/debug/dom.js +138 -136
- package/dist/debug/dom.mjs +138 -136
- package/dist/debug/html.js +250 -237
- package/dist/debug/html.mjs +250 -237
- package/dist/dom/dom.d.ts +5 -0
- package/dist/dom/queue.d.ts +1 -0
- package/dist/dom/scope.d.ts +0 -1
- package/dist/dom.d.ts +1 -1
- package/dist/dom.js +85 -90
- package/dist/dom.mjs +85 -90
- package/dist/html/dynamic-tag.d.ts +1 -1
- package/dist/html/writer.d.ts +8 -8
- package/dist/html.js +141 -145
- package/dist/html.mjs +141 -145
- package/dist/translator/index.js +677 -420
- package/dist/translator/util/css-px-props.d.ts +2 -0
- package/dist/translator/util/references.d.ts +1 -0
- package/dist/translator/visitors/program/html.d.ts +1 -1
- package/dist/translator/visitors/tag/native-tag.d.ts +2 -2
- package/package.json +2 -2
package/dist/debug/dom.mjs
CHANGED
@@ -45,48 +45,44 @@ function forTo(to, from, step, cb) {
|
|
45
45
|
}
|
46
46
|
|
47
47
|
// src/common/helpers.ts
|
48
|
-
function classValue(
|
49
|
-
return toDelimitedString(
|
48
|
+
function classValue(classValue2) {
|
49
|
+
return toDelimitedString(classValue2, " ", stringifyClassObject);
|
50
50
|
}
|
51
51
|
function stringifyClassObject(name, value2) {
|
52
52
|
return value2 ? name : "";
|
53
53
|
}
|
54
|
-
function styleValue(
|
55
|
-
return toDelimitedString(
|
54
|
+
function styleValue(styleValue2) {
|
55
|
+
return toDelimitedString(styleValue2, ";", stringifyStyleObject);
|
56
56
|
}
|
57
57
|
function stringifyStyleObject(name, value2) {
|
58
|
-
return value2 || value2 === 0 ? `${name}:${typeof value2 === "number" &&
|
58
|
+
return value2 || value2 === 0 ? `${name}:${value2 && typeof value2 === "number" && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name) ? value2 + "px" : value2}` : "";
|
59
59
|
}
|
60
60
|
function toDelimitedString(val, delimiter, stringify) {
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
result += curDelimiter + part;
|
82
|
-
curDelimiter = delimiter;
|
83
|
-
}
|
84
|
-
}
|
61
|
+
let str = "";
|
62
|
+
let sep = "";
|
63
|
+
let part;
|
64
|
+
if (val) {
|
65
|
+
if (typeof val !== "object") {
|
66
|
+
str += val;
|
67
|
+
} else if (Array.isArray(val)) {
|
68
|
+
for (const v of val) {
|
69
|
+
part = toDelimitedString(v, delimiter, stringify);
|
70
|
+
if (part) {
|
71
|
+
str += sep + part;
|
72
|
+
sep = delimiter;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
} else {
|
76
|
+
for (const name in val) {
|
77
|
+
part = stringify(name, val[name]);
|
78
|
+
if (part) {
|
79
|
+
str += sep + part;
|
80
|
+
sep = delimiter;
|
85
81
|
}
|
86
|
-
return result;
|
87
82
|
}
|
83
|
+
}
|
88
84
|
}
|
89
|
-
return
|
85
|
+
return str;
|
90
86
|
}
|
91
87
|
function isEventHandler(name) {
|
92
88
|
return /^on[A-Z-]/.test(name);
|
@@ -165,15 +161,15 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
|
|
165
161
|
`Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`
|
166
162
|
);
|
167
163
|
}
|
168
|
-
const descriptor = Object.getOwnPropertyDescriptor(
|
164
|
+
const descriptor = Object.getOwnPropertyDescriptor(self, runtimeId);
|
169
165
|
if (descriptor && (descriptor.set || descriptor.configurable === false)) {
|
170
166
|
throw new Error(
|
171
167
|
`Marko initialized multiple times with the same $global.runtimeId of ${JSON.stringify(runtimeId)}. It could be that there are multiple copies of Marko running on the page.`
|
172
168
|
);
|
173
169
|
}
|
174
170
|
}
|
175
|
-
const renders =
|
176
|
-
const defineRuntime = (desc) => Object.defineProperty(
|
171
|
+
const renders = self[runtimeId];
|
172
|
+
const defineRuntime = (desc) => Object.defineProperty(self, runtimeId, desc);
|
177
173
|
let resumeRender;
|
178
174
|
const initRuntime = (renders2) => {
|
179
175
|
defineRuntime({
|
@@ -188,34 +184,28 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
|
|
188
184
|
};
|
189
185
|
const branchIds = /* @__PURE__ */ new Set();
|
190
186
|
const parentBranchIds = /* @__PURE__ */ new Map();
|
191
|
-
|
187
|
+
const branchEnd = (branchId, reference) => {
|
188
|
+
const branch = scopeLookup[branchId] ||= {};
|
189
|
+
let endNode = reference;
|
190
|
+
let prevNode;
|
191
|
+
while ((prevNode = endNode.previousSibling) !== branch.___startNode && ~visits.indexOf(endNode = prevNode)) ;
|
192
|
+
branch.___endNode = lastEndNode = endNode === lastEndNode ? reference.parentNode.insertBefore(new Text(), reference) : endNode;
|
193
|
+
branch.___startNode ||= lastEndNode;
|
194
|
+
branchIds.add(branchId);
|
195
|
+
return branch;
|
196
|
+
};
|
192
197
|
let currentBranchId;
|
193
198
|
let $global;
|
194
199
|
let lastScopeId = 0;
|
200
|
+
let lastEffect;
|
201
|
+
let lastEndNode;
|
202
|
+
let visits;
|
203
|
+
let resumes;
|
195
204
|
render.w = () => {
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
const visitNodes = new Set(visits);
|
201
|
-
let lastEndNode;
|
202
|
-
visits.length = 0;
|
203
|
-
const branchEnd = (branchId, reference) => {
|
204
|
-
const branch = scopeLookup[branchId] ||= {};
|
205
|
-
let endNode = reference;
|
206
|
-
while (endNode.previousSibling !== branch.___startNode && visitNodes.has(endNode = endNode.previousSibling)) ;
|
207
|
-
if (endNode === lastEndNode) {
|
208
|
-
endNode = reference.parentNode.insertBefore(
|
209
|
-
new Text(),
|
210
|
-
reference
|
211
|
-
);
|
212
|
-
}
|
213
|
-
branch.___endNode = lastEndNode = endNode;
|
214
|
-
branch.___startNode ||= endNode;
|
215
|
-
branchIds.add(branchId);
|
216
|
-
return branch;
|
217
|
-
};
|
218
|
-
for (const visit of visitNodes) {
|
205
|
+
try {
|
206
|
+
walk2.call(render);
|
207
|
+
isResuming = 1;
|
208
|
+
for (const visit of visits = render.v) {
|
219
209
|
const commentText = visit.data;
|
220
210
|
const dataIndex = commentText.indexOf(" ") + 1;
|
221
211
|
const scopeId = +commentText.slice(
|
@@ -268,67 +258,58 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
|
|
268
258
|
}
|
269
259
|
}
|
270
260
|
}
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
261
|
+
for (const serialized of resumes = render.r || []) {
|
262
|
+
if (typeof serialized === "string") {
|
263
|
+
lastEffect = serialized;
|
264
|
+
} else if (typeof serialized === "number") {
|
265
|
+
registeredValues[lastEffect](
|
266
|
+
scopeLookup[serialized],
|
267
|
+
scopeLookup[serialized]
|
268
|
+
);
|
269
|
+
} else {
|
270
|
+
for (const scope of serialized(serializeContext)) {
|
271
|
+
if (!$global) {
|
272
|
+
$global = scope || {};
|
273
|
+
$global.runtimeId = runtimeId;
|
274
|
+
$global.renderId = renderId;
|
275
|
+
$global.___nextScopeId = 1e6;
|
276
|
+
} else if (typeof scope === "number") {
|
277
|
+
lastScopeId += scope;
|
278
|
+
} else {
|
279
|
+
const scopeId = ++lastScopeId;
|
280
|
+
const prevScope = scopeLookup[scopeId];
|
281
|
+
scope.$global = $global;
|
282
|
+
scope.___id = scopeId;
|
283
|
+
if (prevScope !== scope) {
|
284
|
+
scopeLookup[scopeId] = Object.assign(
|
285
|
+
scope,
|
286
|
+
prevScope
|
287
|
+
);
|
288
|
+
}
|
289
|
+
const parentBranchId = scope["#ClosestBranchId" /* ClosestBranchId */] || parentBranchIds.get(scopeId);
|
290
|
+
if (parentBranchId) {
|
291
|
+
scope.___closestBranch = scopeLookup[parentBranchId];
|
292
|
+
}
|
293
|
+
if (branchIds.has(scopeId)) {
|
294
|
+
const branch = scope;
|
295
|
+
const parentBranch = branch.___closestBranch;
|
296
|
+
scope.___closestBranch = branch;
|
297
|
+
if (parentBranch) {
|
298
|
+
branch.___parentBranch = parentBranch;
|
299
|
+
(parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(
|
300
|
+
branch
|
296
301
|
);
|
297
302
|
}
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
}
|
302
|
-
if (branchIds.has(scopeId)) {
|
303
|
-
const branch = scope;
|
304
|
-
const parentBranch = branch.___closestBranch;
|
305
|
-
scope.___closestBranch = branch;
|
306
|
-
if (parentBranch) {
|
307
|
-
branch.___parentBranch = parentBranch;
|
308
|
-
(parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(
|
309
|
-
branch
|
310
|
-
);
|
311
|
-
}
|
312
|
-
}
|
313
|
-
if (true) {
|
314
|
-
scope.___debugId = "server-" + scopeId;
|
315
|
-
}
|
303
|
+
}
|
304
|
+
if (true) {
|
305
|
+
scope.___debugId = "server-" + scopeId;
|
316
306
|
}
|
317
307
|
}
|
318
|
-
} else {
|
319
|
-
if (typeof serialized === "string") {
|
320
|
-
lastEffect = serialized;
|
321
|
-
serialized = resumes[++i];
|
322
|
-
}
|
323
|
-
registeredValues[lastEffect](
|
324
|
-
scopeLookup[serialized],
|
325
|
-
scopeLookup[serialized]
|
326
|
-
);
|
327
308
|
}
|
328
309
|
}
|
329
|
-
} finally {
|
330
|
-
isResuming = 0;
|
331
310
|
}
|
311
|
+
} finally {
|
312
|
+
isResuming = visits.length = resumes.length = 0;
|
332
313
|
}
|
333
314
|
};
|
334
315
|
return render;
|
@@ -660,9 +641,28 @@ function setAttribute(element, name, value2) {
|
|
660
641
|
function classAttr(element, value2) {
|
661
642
|
setAttribute(element, "class", classValue(value2) || void 0);
|
662
643
|
}
|
644
|
+
function classItems(element, items) {
|
645
|
+
for (const key in items) {
|
646
|
+
classItem(element, key, items[key]);
|
647
|
+
}
|
648
|
+
}
|
649
|
+
function classItem(element, name, value2) {
|
650
|
+
element.classList.toggle(name, !!value2);
|
651
|
+
}
|
663
652
|
function styleAttr(element, value2) {
|
664
653
|
setAttribute(element, "style", styleValue(value2) || void 0);
|
665
654
|
}
|
655
|
+
function styleItems(element, items) {
|
656
|
+
for (const key in items) {
|
657
|
+
styleItem(element, key, items[key]);
|
658
|
+
}
|
659
|
+
}
|
660
|
+
function styleItem(element, name, value2) {
|
661
|
+
element.style.setProperty(name, value2 || value2 === 0 ? value2 + "" : "");
|
662
|
+
}
|
663
|
+
function styleItemValue(value2) {
|
664
|
+
return value2 && typeof value2 === "number" ? value2 + "px" : value2;
|
665
|
+
}
|
666
666
|
function data(node, value2) {
|
667
667
|
const normalizedValue = normalizeString(value2);
|
668
668
|
if (node.data !== normalizedValue) {
|
@@ -895,7 +895,6 @@ function toInsertNode(startNode, endNode) {
|
|
895
895
|
}
|
896
896
|
|
897
897
|
// src/dom/scope.ts
|
898
|
-
var pendingScopes = [];
|
899
898
|
function createScope($global, closestBranch) {
|
900
899
|
const scope = {
|
901
900
|
___id: $global.___nextScopeId++,
|
@@ -909,12 +908,6 @@ function createScope($global, closestBranch) {
|
|
909
908
|
function skipScope(scope) {
|
910
909
|
return scope.$global.___nextScopeId++;
|
911
910
|
}
|
912
|
-
function finishPendingScopes() {
|
913
|
-
for (const scope of pendingScopes) {
|
914
|
-
scope.___creating = 0;
|
915
|
-
}
|
916
|
-
pendingScopes = [];
|
917
|
-
}
|
918
911
|
function findBranchWithKey(scope, key) {
|
919
912
|
let branch = scope.___closestBranch;
|
920
913
|
while (branch && !branch[key]) {
|
@@ -1298,21 +1291,8 @@ function createCloneableHTML(html2, ns) {
|
|
1298
1291
|
|
1299
1292
|
// src/dom/schedule.ts
|
1300
1293
|
var runTask;
|
1301
|
-
var port2 = /* @__PURE__ */ (() => {
|
1302
|
-
const { port1, port2: port22 } = new MessageChannel();
|
1303
|
-
port1.onmessage = () => {
|
1304
|
-
isScheduled = 0;
|
1305
|
-
if (true) {
|
1306
|
-
const run2 = runTask;
|
1307
|
-
runTask = void 0;
|
1308
|
-
run2();
|
1309
|
-
} else {
|
1310
|
-
run();
|
1311
|
-
}
|
1312
|
-
};
|
1313
|
-
return port22;
|
1314
|
-
})();
|
1315
1294
|
var isScheduled;
|
1295
|
+
var channel;
|
1316
1296
|
function schedule() {
|
1317
1297
|
if (!isScheduled) {
|
1318
1298
|
if (true) {
|
@@ -1336,7 +1316,20 @@ function flushAndWaitFrame() {
|
|
1336
1316
|
requestAnimationFrame(triggerMacroTask);
|
1337
1317
|
}
|
1338
1318
|
function triggerMacroTask() {
|
1339
|
-
|
1319
|
+
if (!channel) {
|
1320
|
+
channel = new MessageChannel();
|
1321
|
+
channel.port1.onmessage = () => {
|
1322
|
+
isScheduled = 0;
|
1323
|
+
if (true) {
|
1324
|
+
const run2 = runTask;
|
1325
|
+
runTask = void 0;
|
1326
|
+
run2();
|
1327
|
+
} else {
|
1328
|
+
run();
|
1329
|
+
}
|
1330
|
+
};
|
1331
|
+
}
|
1332
|
+
channel.port2.postMessage(0);
|
1340
1333
|
}
|
1341
1334
|
|
1342
1335
|
// src/dom/signals.ts
|
@@ -1881,6 +1874,7 @@ var pendingRendersLookup = /* @__PURE__ */ new Map();
|
|
1881
1874
|
var caughtError = /* @__PURE__ */ new WeakSet();
|
1882
1875
|
var placeholderShown = /* @__PURE__ */ new WeakSet();
|
1883
1876
|
var pendingEffects = [];
|
1877
|
+
var pendingScopes = [];
|
1884
1878
|
var rendering;
|
1885
1879
|
var scopeKeyOffset = 1e3;
|
1886
1880
|
function queueRender(scope, signal, signalKey, value2, scopeKey = scope.___id) {
|
@@ -1977,7 +1971,10 @@ function runRenders() {
|
|
1977
1971
|
runRender(render);
|
1978
1972
|
}
|
1979
1973
|
}
|
1980
|
-
|
1974
|
+
for (const scope of pendingScopes) {
|
1975
|
+
scope.___creating = 0;
|
1976
|
+
}
|
1977
|
+
pendingScopes = [];
|
1981
1978
|
}
|
1982
1979
|
var runRender = (render) => render.___signal(render.___scope, render.___value);
|
1983
1980
|
var enableCatch = () => {
|
@@ -2081,7 +2078,7 @@ var compat = {
|
|
2081
2078
|
if (Array.isArray(value2) && typeof value2[0] === "string") {
|
2082
2079
|
return getRegisteredWithScope(
|
2083
2080
|
value2[0],
|
2084
|
-
value2.length === 2 &&
|
2081
|
+
value2.length === 2 && self[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.s[value2[1]]
|
2085
2082
|
);
|
2086
2083
|
}
|
2087
2084
|
return value2;
|
@@ -2226,6 +2223,8 @@ export {
|
|
2226
2223
|
attrsEvents,
|
2227
2224
|
awaitTag,
|
2228
2225
|
classAttr,
|
2226
|
+
classItem,
|
2227
|
+
classItems,
|
2229
2228
|
compat,
|
2230
2229
|
conditional,
|
2231
2230
|
conditionalClosure,
|
@@ -2278,6 +2277,9 @@ export {
|
|
2278
2277
|
setTagVarChange,
|
2279
2278
|
state,
|
2280
2279
|
styleAttr,
|
2280
|
+
styleItem,
|
2281
|
+
styleItemValue,
|
2282
|
+
styleItems,
|
2281
2283
|
tagVarSignal,
|
2282
2284
|
tagVarSignalChange,
|
2283
2285
|
textContent,
|