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/common/helpers.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
export declare function classValue(
|
2
|
-
export declare function styleValue(
|
1
|
+
export declare function classValue(classValue: unknown): string;
|
2
|
+
export declare function styleValue(styleValue: unknown): string;
|
3
3
|
export declare function isEventHandler(name: string): name is `on${string}`;
|
4
4
|
export declare function getEventHandlerName(name: `on${string}`): string;
|
5
5
|
export declare function isVoid(value: unknown): value is false | null | undefined;
|
package/dist/debug/dom.js
CHANGED
@@ -27,6 +27,8 @@ __export(dom_exports, {
|
|
27
27
|
attrsEvents: () => attrsEvents,
|
28
28
|
awaitTag: () => awaitTag,
|
29
29
|
classAttr: () => classAttr,
|
30
|
+
classItem: () => classItem,
|
31
|
+
classItems: () => classItems,
|
30
32
|
compat: () => compat,
|
31
33
|
conditional: () => conditional,
|
32
34
|
conditionalClosure: () => conditionalClosure,
|
@@ -79,6 +81,9 @@ __export(dom_exports, {
|
|
79
81
|
setTagVarChange: () => setTagVarChange,
|
80
82
|
state: () => state,
|
81
83
|
styleAttr: () => styleAttr,
|
84
|
+
styleItem: () => styleItem,
|
85
|
+
styleItemValue: () => styleItemValue,
|
86
|
+
styleItems: () => styleItems,
|
82
87
|
tagVarSignal: () => tagVarSignal,
|
83
88
|
tagVarSignalChange: () => tagVarSignalChange,
|
84
89
|
textContent: () => textContent,
|
@@ -133,48 +138,44 @@ function forTo(to, from, step, cb) {
|
|
133
138
|
}
|
134
139
|
|
135
140
|
// src/common/helpers.ts
|
136
|
-
function classValue(
|
137
|
-
return toDelimitedString(
|
141
|
+
function classValue(classValue2) {
|
142
|
+
return toDelimitedString(classValue2, " ", stringifyClassObject);
|
138
143
|
}
|
139
144
|
function stringifyClassObject(name, value2) {
|
140
145
|
return value2 ? name : "";
|
141
146
|
}
|
142
|
-
function styleValue(
|
143
|
-
return toDelimitedString(
|
147
|
+
function styleValue(styleValue2) {
|
148
|
+
return toDelimitedString(styleValue2, ";", stringifyStyleObject);
|
144
149
|
}
|
145
150
|
function stringifyStyleObject(name, value2) {
|
146
|
-
return value2 || value2 === 0 ? `${name}:${typeof value2 === "number" &&
|
151
|
+
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}` : "";
|
147
152
|
}
|
148
153
|
function toDelimitedString(val, delimiter, stringify) {
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
result += curDelimiter + part;
|
170
|
-
curDelimiter = delimiter;
|
171
|
-
}
|
172
|
-
}
|
154
|
+
let str = "";
|
155
|
+
let sep = "";
|
156
|
+
let part;
|
157
|
+
if (val) {
|
158
|
+
if (typeof val !== "object") {
|
159
|
+
str += val;
|
160
|
+
} else if (Array.isArray(val)) {
|
161
|
+
for (const v of val) {
|
162
|
+
part = toDelimitedString(v, delimiter, stringify);
|
163
|
+
if (part) {
|
164
|
+
str += sep + part;
|
165
|
+
sep = delimiter;
|
166
|
+
}
|
167
|
+
}
|
168
|
+
} else {
|
169
|
+
for (const name in val) {
|
170
|
+
part = stringify(name, val[name]);
|
171
|
+
if (part) {
|
172
|
+
str += sep + part;
|
173
|
+
sep = delimiter;
|
173
174
|
}
|
174
|
-
return result;
|
175
175
|
}
|
176
|
+
}
|
176
177
|
}
|
177
|
-
return
|
178
|
+
return str;
|
178
179
|
}
|
179
180
|
function isEventHandler(name) {
|
180
181
|
return /^on[A-Z-]/.test(name);
|
@@ -253,15 +254,15 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
|
|
253
254
|
`Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`
|
254
255
|
);
|
255
256
|
}
|
256
|
-
const descriptor = Object.getOwnPropertyDescriptor(
|
257
|
+
const descriptor = Object.getOwnPropertyDescriptor(self, runtimeId);
|
257
258
|
if (descriptor && (descriptor.set || descriptor.configurable === false)) {
|
258
259
|
throw new Error(
|
259
260
|
`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.`
|
260
261
|
);
|
261
262
|
}
|
262
263
|
}
|
263
|
-
const renders =
|
264
|
-
const defineRuntime = (desc) => Object.defineProperty(
|
264
|
+
const renders = self[runtimeId];
|
265
|
+
const defineRuntime = (desc) => Object.defineProperty(self, runtimeId, desc);
|
265
266
|
let resumeRender;
|
266
267
|
const initRuntime = (renders2) => {
|
267
268
|
defineRuntime({
|
@@ -276,34 +277,28 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
|
|
276
277
|
};
|
277
278
|
const branchIds = /* @__PURE__ */ new Set();
|
278
279
|
const parentBranchIds = /* @__PURE__ */ new Map();
|
279
|
-
|
280
|
+
const branchEnd = (branchId, reference) => {
|
281
|
+
const branch = scopeLookup[branchId] ||= {};
|
282
|
+
let endNode = reference;
|
283
|
+
let prevNode;
|
284
|
+
while ((prevNode = endNode.previousSibling) !== branch.___startNode && ~visits.indexOf(endNode = prevNode)) ;
|
285
|
+
branch.___endNode = lastEndNode = endNode === lastEndNode ? reference.parentNode.insertBefore(new Text(), reference) : endNode;
|
286
|
+
branch.___startNode ||= lastEndNode;
|
287
|
+
branchIds.add(branchId);
|
288
|
+
return branch;
|
289
|
+
};
|
280
290
|
let currentBranchId;
|
281
291
|
let $global;
|
282
292
|
let lastScopeId = 0;
|
293
|
+
let lastEffect;
|
294
|
+
let lastEndNode;
|
295
|
+
let visits;
|
296
|
+
let resumes;
|
283
297
|
render.w = () => {
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
const visitNodes = new Set(visits);
|
289
|
-
let lastEndNode;
|
290
|
-
visits.length = 0;
|
291
|
-
const branchEnd = (branchId, reference) => {
|
292
|
-
const branch = scopeLookup[branchId] ||= {};
|
293
|
-
let endNode = reference;
|
294
|
-
while (endNode.previousSibling !== branch.___startNode && visitNodes.has(endNode = endNode.previousSibling)) ;
|
295
|
-
if (endNode === lastEndNode) {
|
296
|
-
endNode = reference.parentNode.insertBefore(
|
297
|
-
new Text(),
|
298
|
-
reference
|
299
|
-
);
|
300
|
-
}
|
301
|
-
branch.___endNode = lastEndNode = endNode;
|
302
|
-
branch.___startNode ||= endNode;
|
303
|
-
branchIds.add(branchId);
|
304
|
-
return branch;
|
305
|
-
};
|
306
|
-
for (const visit of visitNodes) {
|
298
|
+
try {
|
299
|
+
walk2.call(render);
|
300
|
+
isResuming = 1;
|
301
|
+
for (const visit of visits = render.v) {
|
307
302
|
const commentText = visit.data;
|
308
303
|
const dataIndex = commentText.indexOf(" ") + 1;
|
309
304
|
const scopeId = +commentText.slice(
|
@@ -356,67 +351,58 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
|
|
356
351
|
}
|
357
352
|
}
|
358
353
|
}
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
354
|
+
for (const serialized of resumes = render.r || []) {
|
355
|
+
if (typeof serialized === "string") {
|
356
|
+
lastEffect = serialized;
|
357
|
+
} else if (typeof serialized === "number") {
|
358
|
+
registeredValues[lastEffect](
|
359
|
+
scopeLookup[serialized],
|
360
|
+
scopeLookup[serialized]
|
361
|
+
);
|
362
|
+
} else {
|
363
|
+
for (const scope of serialized(serializeContext)) {
|
364
|
+
if (!$global) {
|
365
|
+
$global = scope || {};
|
366
|
+
$global.runtimeId = runtimeId;
|
367
|
+
$global.renderId = renderId;
|
368
|
+
$global.___nextScopeId = 1e6;
|
369
|
+
} else if (typeof scope === "number") {
|
370
|
+
lastScopeId += scope;
|
371
|
+
} else {
|
372
|
+
const scopeId = ++lastScopeId;
|
373
|
+
const prevScope = scopeLookup[scopeId];
|
374
|
+
scope.$global = $global;
|
375
|
+
scope.___id = scopeId;
|
376
|
+
if (prevScope !== scope) {
|
377
|
+
scopeLookup[scopeId] = Object.assign(
|
378
|
+
scope,
|
379
|
+
prevScope
|
380
|
+
);
|
381
|
+
}
|
382
|
+
const parentBranchId = scope["#ClosestBranchId" /* ClosestBranchId */] || parentBranchIds.get(scopeId);
|
383
|
+
if (parentBranchId) {
|
384
|
+
scope.___closestBranch = scopeLookup[parentBranchId];
|
385
|
+
}
|
386
|
+
if (branchIds.has(scopeId)) {
|
387
|
+
const branch = scope;
|
388
|
+
const parentBranch = branch.___closestBranch;
|
389
|
+
scope.___closestBranch = branch;
|
390
|
+
if (parentBranch) {
|
391
|
+
branch.___parentBranch = parentBranch;
|
392
|
+
(parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(
|
393
|
+
branch
|
384
394
|
);
|
385
395
|
}
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
}
|
390
|
-
if (branchIds.has(scopeId)) {
|
391
|
-
const branch = scope;
|
392
|
-
const parentBranch = branch.___closestBranch;
|
393
|
-
scope.___closestBranch = branch;
|
394
|
-
if (parentBranch) {
|
395
|
-
branch.___parentBranch = parentBranch;
|
396
|
-
(parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(
|
397
|
-
branch
|
398
|
-
);
|
399
|
-
}
|
400
|
-
}
|
401
|
-
if (true) {
|
402
|
-
scope.___debugId = "server-" + scopeId;
|
403
|
-
}
|
396
|
+
}
|
397
|
+
if (true) {
|
398
|
+
scope.___debugId = "server-" + scopeId;
|
404
399
|
}
|
405
400
|
}
|
406
|
-
} else {
|
407
|
-
if (typeof serialized === "string") {
|
408
|
-
lastEffect = serialized;
|
409
|
-
serialized = resumes[++i];
|
410
|
-
}
|
411
|
-
registeredValues[lastEffect](
|
412
|
-
scopeLookup[serialized],
|
413
|
-
scopeLookup[serialized]
|
414
|
-
);
|
415
401
|
}
|
416
402
|
}
|
417
|
-
} finally {
|
418
|
-
isResuming = 0;
|
419
403
|
}
|
404
|
+
} finally {
|
405
|
+
isResuming = visits.length = resumes.length = 0;
|
420
406
|
}
|
421
407
|
};
|
422
408
|
return render;
|
@@ -748,9 +734,28 @@ function setAttribute(element, name, value2) {
|
|
748
734
|
function classAttr(element, value2) {
|
749
735
|
setAttribute(element, "class", classValue(value2) || void 0);
|
750
736
|
}
|
737
|
+
function classItems(element, items) {
|
738
|
+
for (const key in items) {
|
739
|
+
classItem(element, key, items[key]);
|
740
|
+
}
|
741
|
+
}
|
742
|
+
function classItem(element, name, value2) {
|
743
|
+
element.classList.toggle(name, !!value2);
|
744
|
+
}
|
751
745
|
function styleAttr(element, value2) {
|
752
746
|
setAttribute(element, "style", styleValue(value2) || void 0);
|
753
747
|
}
|
748
|
+
function styleItems(element, items) {
|
749
|
+
for (const key in items) {
|
750
|
+
styleItem(element, key, items[key]);
|
751
|
+
}
|
752
|
+
}
|
753
|
+
function styleItem(element, name, value2) {
|
754
|
+
element.style.setProperty(name, value2 || value2 === 0 ? value2 + "" : "");
|
755
|
+
}
|
756
|
+
function styleItemValue(value2) {
|
757
|
+
return value2 && typeof value2 === "number" ? value2 + "px" : value2;
|
758
|
+
}
|
754
759
|
function data(node, value2) {
|
755
760
|
const normalizedValue = normalizeString(value2);
|
756
761
|
if (node.data !== normalizedValue) {
|
@@ -983,7 +988,6 @@ function toInsertNode(startNode, endNode) {
|
|
983
988
|
}
|
984
989
|
|
985
990
|
// src/dom/scope.ts
|
986
|
-
var pendingScopes = [];
|
987
991
|
function createScope($global, closestBranch) {
|
988
992
|
const scope = {
|
989
993
|
___id: $global.___nextScopeId++,
|
@@ -997,12 +1001,6 @@ function createScope($global, closestBranch) {
|
|
997
1001
|
function skipScope(scope) {
|
998
1002
|
return scope.$global.___nextScopeId++;
|
999
1003
|
}
|
1000
|
-
function finishPendingScopes() {
|
1001
|
-
for (const scope of pendingScopes) {
|
1002
|
-
scope.___creating = 0;
|
1003
|
-
}
|
1004
|
-
pendingScopes = [];
|
1005
|
-
}
|
1006
1004
|
function findBranchWithKey(scope, key) {
|
1007
1005
|
let branch = scope.___closestBranch;
|
1008
1006
|
while (branch && !branch[key]) {
|
@@ -1386,21 +1384,8 @@ function createCloneableHTML(html2, ns) {
|
|
1386
1384
|
|
1387
1385
|
// src/dom/schedule.ts
|
1388
1386
|
var runTask;
|
1389
|
-
var port2 = /* @__PURE__ */ (() => {
|
1390
|
-
const { port1, port2: port22 } = new MessageChannel();
|
1391
|
-
port1.onmessage = () => {
|
1392
|
-
isScheduled = 0;
|
1393
|
-
if (true) {
|
1394
|
-
const run2 = runTask;
|
1395
|
-
runTask = void 0;
|
1396
|
-
run2();
|
1397
|
-
} else {
|
1398
|
-
run();
|
1399
|
-
}
|
1400
|
-
};
|
1401
|
-
return port22;
|
1402
|
-
})();
|
1403
1387
|
var isScheduled;
|
1388
|
+
var channel;
|
1404
1389
|
function schedule() {
|
1405
1390
|
if (!isScheduled) {
|
1406
1391
|
if (true) {
|
@@ -1424,7 +1409,20 @@ function flushAndWaitFrame() {
|
|
1424
1409
|
requestAnimationFrame(triggerMacroTask);
|
1425
1410
|
}
|
1426
1411
|
function triggerMacroTask() {
|
1427
|
-
|
1412
|
+
if (!channel) {
|
1413
|
+
channel = new MessageChannel();
|
1414
|
+
channel.port1.onmessage = () => {
|
1415
|
+
isScheduled = 0;
|
1416
|
+
if (true) {
|
1417
|
+
const run2 = runTask;
|
1418
|
+
runTask = void 0;
|
1419
|
+
run2();
|
1420
|
+
} else {
|
1421
|
+
run();
|
1422
|
+
}
|
1423
|
+
};
|
1424
|
+
}
|
1425
|
+
channel.port2.postMessage(0);
|
1428
1426
|
}
|
1429
1427
|
|
1430
1428
|
// src/dom/signals.ts
|
@@ -1969,6 +1967,7 @@ var pendingRendersLookup = /* @__PURE__ */ new Map();
|
|
1969
1967
|
var caughtError = /* @__PURE__ */ new WeakSet();
|
1970
1968
|
var placeholderShown = /* @__PURE__ */ new WeakSet();
|
1971
1969
|
var pendingEffects = [];
|
1970
|
+
var pendingScopes = [];
|
1972
1971
|
var rendering;
|
1973
1972
|
var scopeKeyOffset = 1e3;
|
1974
1973
|
function queueRender(scope, signal, signalKey, value2, scopeKey = scope.___id) {
|
@@ -2065,7 +2064,10 @@ function runRenders() {
|
|
2065
2064
|
runRender(render);
|
2066
2065
|
}
|
2067
2066
|
}
|
2068
|
-
|
2067
|
+
for (const scope of pendingScopes) {
|
2068
|
+
scope.___creating = 0;
|
2069
|
+
}
|
2070
|
+
pendingScopes = [];
|
2069
2071
|
}
|
2070
2072
|
var runRender = (render) => render.___signal(render.___scope, render.___value);
|
2071
2073
|
var enableCatch = () => {
|
@@ -2169,7 +2171,7 @@ var compat = {
|
|
2169
2171
|
if (Array.isArray(value2) && typeof value2[0] === "string") {
|
2170
2172
|
return getRegisteredWithScope(
|
2171
2173
|
value2[0],
|
2172
|
-
value2.length === 2 &&
|
2174
|
+
value2.length === 2 && self[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.s[value2[1]]
|
2173
2175
|
);
|
2174
2176
|
}
|
2175
2177
|
return value2;
|