Skip to content

Commit b6be027

Browse files
bkaradzic-microsoftbkaradzic-microsoft
committed
Add ES2020+ -> ES2019 syntax repair polyfill for Chakra
Babylon Native's Chakra-based builds parse only up to ES2019; modern Babylon.js playground snippets routinely use optional chaining (?.), nullish coalescing (??), numeric separators (1_000_000), and logical assignment (||= &&= ??=), causing 26 visual tests to fail with SyntaxError at the eval() site in validation_native.js. Add a lightweight regex-based syntax-repair polyfill loaded before babylon.max.js. The polyfill exposes __bnTranspileES2019(code) as a top-level global var. validation_native.js's new evalWithFallback helper catches SyntaxError on the first eval and retries once with the repaired source. Engines that already accept the source (V8, JSC) never hit the retry path. The polyfill is syntax-only (parse-time fix), not semantic - ?. is rewritten to . so a null target throws TypeError at runtime instead of short-circuiting to undefined. This is a deliberate trade-off: parse failures are 100% blocking; runtime TypeErrors are diagnosable and at worst surface a different bug that was previously hidden. Strip excludeFromAutomaticTesting from idx 403 (custom-handling-of-materials-for-render-target-pass) which now passes end-to-end. Updated reasons for the other 25 entries to describe their post-polyfill state: 9 hit runtime errors after parse repair, 12 hit asset/module gaps, 4 hit ES2022 syntax not covered by the polyfill (e.g. private class fields).
1 parent 0176518 commit b6be027

5 files changed

Lines changed: 163 additions & 29 deletions

File tree

‎Apps/Playground/CMakeLists.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ set(DEPENDENCIES
1515
set(SCRIPTS
1616
"Scripts/cube_texture_polyfill.js"
1717
"Scripts/dom_polyfill.js"
18+
"Scripts/es2019_transpile.js"
1819
"Scripts/experience.js"
1920
"Scripts/fetch_polyfill.js"
2021
"Scripts/playground_runner.js"

‎Apps/Playground/Scripts/config.json‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1465,7 +1465,7 @@
14651465
"playgroundId": "#8NTR5X#8",
14661466
"replace": "//options//, roundtrip = true;",
14671467
"excludeFromAutomaticTesting": true,
1468-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
1468+
"reason": "Chakra parse fails on ES2022 syntax not handled by ES2019 polyfill (e.g. private class fields).",
14691469
"referenceImage": "glTFSerializerTextureExport.png"
14701470
},
14711471
{
@@ -2212,7 +2212,7 @@
22122212
"title": "Material Plugin",
22132213
"playgroundId": "#22HT5Z#10",
22142214
"excludeFromAutomaticTesting": true,
2215-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
2215+
"reason": "Chakra parse fails on ES2022 syntax not handled by ES2019 polyfill (e.g. private class fields).",
22162216
"referenceImage": "materialPlugin.png"
22172217
},
22182218
{
@@ -2289,7 +2289,7 @@
22892289
"playgroundId": "#PCMH7A#2",
22902290
"renderCount": 120,
22912291
"excludeFromAutomaticTesting": true,
2292-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
2292+
"reason": "Chakra parse fails on ES2022 syntax not handled by ES2019 polyfill (e.g. private class fields).",
22932293
"referenceImage": "fluidBoxSphere.png"
22942294
},
22952295
{
@@ -2654,8 +2654,6 @@
26542654
"title": "custom-handling-of-materials-for-render-target-pass",
26552655
"playgroundId": "#FIVL25#21",
26562656
"renderCount": 60,
2657-
"excludeFromAutomaticTesting": true,
2658-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
26592657
"referenceImage": "custom-handling-of-materials-for-render-target-pass.png"
26602658
},
26612659
{
@@ -2745,7 +2743,7 @@
27452743
"renderCount": 2,
27462744
"replace": "//options//, modelIndex = 2;",
27472745
"excludeFromAutomaticTesting": true,
2748-
"reason": "Test crashes or hangs on Babylon Native",
2746+
"reason": "ES2020+ ?. parsed via ES2019 polyfill; runtime TypeError from .stop() on optional null field.",
27492747
"referenceImage": "computeMaxExtents-BoxAnimated.png"
27502748
},
27512749
{
@@ -2754,7 +2752,7 @@
27542752
"renderCount": 2,
27552753
"replace": "//options//, modelIndex = 4; animationIndex = 0;",
27562754
"excludeFromAutomaticTesting": true,
2757-
"reason": "Test crashes or hangs on Babylon Native",
2755+
"reason": "ES2020+ ?. parsed via ES2019 polyfill; runtime TypeError from .stop() on optional null field.",
27582756
"referenceImage": "computeMaxExtents-Fox0.png"
27592757
},
27602758
{
@@ -2763,7 +2761,7 @@
27632761
"renderCount": 2,
27642762
"replace": "//options//, modelIndex = 4; animationIndex = 1;",
27652763
"excludeFromAutomaticTesting": true,
2766-
"reason": "Test crashes or hangs on Babylon Native",
2764+
"reason": "ES2020+ ?. parsed via ES2019 polyfill; runtime TypeError from .stop() on optional null field.",
27672765
"referenceImage": "computeMaxExtents-Fox1.png"
27682766
},
27692767
{
@@ -2772,7 +2770,7 @@
27722770
"renderCount": 2,
27732771
"replace": "//options//, modelIndex = 5;",
27742772
"excludeFromAutomaticTesting": true,
2775-
"reason": "Test crashes or hangs on Babylon Native",
2773+
"reason": "ES2020+ ?. parsed via ES2019 polyfill; runtime TypeError from .stop() on optional null field.",
27762774
"referenceImage": "computeMaxExtents-MorphStressTest.png"
27772775
},
27782776
{
@@ -2883,7 +2881,7 @@
28832881
"title": "FrameGraph nrge custom rendering",
28842882
"playgroundId": "#1QCA2M#35",
28852883
"excludeFromAutomaticTesting": true,
2886-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
2884+
"reason": "Parse repaired via ES2019 polyfill; runtime fails (asset/URL load issue in FrameGraph snippet).",
28872885
"referenceImage": "FrameGraph-nrge-custom-rendering.png"
28882886
},
28892887
{
@@ -2897,14 +2895,14 @@
28972895
"title": "FrameGraph nrge glow layer",
28982896
"playgroundId": "#IG8NRC#84",
28992897
"excludeFromAutomaticTesting": true,
2900-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
2898+
"reason": "Parse repaired via ES2019 polyfill; runtime fails: cubemap files not defined (asset gap).",
29012899
"referenceImage": "FrameGraph-nrge-glow-layer.png"
29022900
},
29032901
{
29042902
"title": "FrameGraph nrge highlight layer",
29052903
"playgroundId": "#QZYNMK#3",
29062904
"excludeFromAutomaticTesting": true,
2907-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
2905+
"reason": "Parse repaired via ES2019 polyfill; runtime fails (asset/URL load issue in FrameGraph snippet).",
29082906
"referenceImage": "FrameGraph-nrge-highlight-layer.png"
29092907
},
29102908
{
@@ -2962,7 +2960,7 @@
29622960
"title": "FrameGraph nrge rig camera",
29632961
"playgroundId": "#ATL1CS#19",
29642962
"excludeFromAutomaticTesting": true,
2965-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
2963+
"reason": "Parse repaired via ES2019 polyfill; runtime fails (asset/URL load issue in FrameGraph snippet).",
29662964
"referenceImage": "FrameGraph-nrge-rig-camera.png"
29672965
},
29682966
{
@@ -2990,7 +2988,7 @@
29902988
"title": "FrameGraph nrge volumetric lighting",
29912989
"playgroundId": "#3VH0AC#2",
29922990
"excludeFromAutomaticTesting": true,
2993-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
2991+
"reason": "Parse repaired via ES2019 polyfill; runtime hangs (FrameGraph volumetric lighting).",
29942992
"referenceImage": "FrameGraph-nrge-volumetric-lighting.png"
29952993
},
29962994
{
@@ -3018,14 +3016,14 @@
30183016
"title": "FrameGraph nrge transmission",
30193017
"playgroundId": "#ZNTBN2#10",
30203018
"excludeFromAutomaticTesting": true,
3021-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3019+
"reason": "Chakra parse fails on ES2022 syntax not handled by ES2019 polyfill (e.g. private class fields).",
30223020
"referenceImage": "FrameGraph-nrge-transmission.png"
30233021
},
30243022
{
30253023
"title": "FrameGraph nrge selection outline layer",
30263024
"playgroundId": "#ADUC74#1",
30273025
"excludeFromAutomaticTesting": true,
3028-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3026+
"reason": "Parse repaired via ES2019 polyfill; runtime fails (asset/URL load issue in FrameGraph snippet).",
30293027
"referenceImage": "FrameGraph-nrge-selection-outline-layer.png"
30303028
},
30313029
{
@@ -3133,7 +3131,7 @@
31333131
"title": "FrameGraph volumetric lighting",
31343132
"playgroundId": "#3VH0AC",
31353133
"excludeFromAutomaticTesting": true,
3136-
"reason": "Test crashes or hangs on Babylon Native",
3134+
"reason": "Parse repaired via ES2019 polyfill; runtime TypeError (FrameGraph volumetric lighting).",
31373135
"referenceImage": "FrameGraph-volumetric-lighting.png"
31383136
},
31393137
{
@@ -3154,14 +3152,14 @@
31543152
"title": "FrameGraph selection outline",
31553153
"playgroundId": "#E1F0GP#4",
31563154
"excludeFromAutomaticTesting": true,
3157-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3155+
"reason": "Parse repaired via ES2019 polyfill; runtime fails: Unknown error opening URL.",
31583156
"referenceImage": "FrameGraph-selection-outline.png"
31593157
},
31603158
{
31613159
"title": "Render target texture with clustered lights",
31623160
"playgroundId": "#1QCA2M#11",
31633161
"excludeFromAutomaticTesting": true,
3164-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3162+
"reason": "Parse repaired via ES2019 polyfill; runtime fails: texture data size mismatch (clustered lighting gap).",
31653163
"referenceImage": "Render-target-texture-with-clustered-lights.png"
31663164
},
31673165
{
@@ -3283,14 +3281,14 @@
32833281
"title": "Sponza Clustered Lighting",
32843282
"playgroundId": "#CSCJO2#17",
32853283
"excludeFromAutomaticTesting": true,
3286-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3284+
"reason": "Parse repaired via ES2019 polyfill; runtime fails: texture data size mismatch (clustered lighting gap).",
32873285
"referenceImage": "sponza-clustered-lighting.png"
32883286
},
32893287
{
32903288
"title": "Sponza Clustered Lighting (2 viewports)",
32913289
"playgroundId": "#CSCJO2#20",
32923290
"excludeFromAutomaticTesting": true,
3293-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3291+
"reason": "Parse repaired via ES2019 polyfill; runtime fails: texture data size mismatch (clustered lighting gap).",
32943292
"referenceImage": "sponza-clustered-lighting-viewports.png"
32953293
},
32963294
{
@@ -3379,28 +3377,28 @@
33793377
"title": "Atmosphere Day",
33803378
"playgroundId": "#VO1Z0C#39",
33813379
"excludeFromAutomaticTesting": true,
3382-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3380+
"reason": "Requires babylonjs-addons (ADDONS.Atmosphere); not shipped by Babylon Native.",
33833381
"referenceImage": "atmosphere-day.png"
33843382
},
33853383
{
33863384
"title": "Atmosphere Day (Planet Origin)",
33873385
"playgroundId": "#VO1Z0C#40",
33883386
"excludeFromAutomaticTesting": true,
3389-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3387+
"reason": "Requires babylonjs-addons (ADDONS.Atmosphere); not shipped by Babylon Native.",
33903388
"referenceImage": "atmosphere-day.png"
33913389
},
33923390
{
33933391
"title": "Atmosphere Day (Ray Marching)",
33943392
"playgroundId": "#VO1Z0C#41",
33953393
"excludeFromAutomaticTesting": true,
3396-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3394+
"reason": "Requires babylonjs-addons (ADDONS.Atmosphere); not shipped by Babylon Native.",
33973395
"referenceImage": "atmosphere-day-ray-marching.png"
33983396
},
33993397
{
34003398
"title": "Atmosphere Sunset",
34013399
"playgroundId": "#VO1Z0C#42",
34023400
"excludeFromAutomaticTesting": true,
3403-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
3401+
"reason": "Requires babylonjs-addons (ADDONS.Atmosphere); not shipped by Babylon Native.",
34043402
"referenceImage": "atmosphere-sunset.png"
34053403
},
34063404
{
@@ -4063,7 +4061,7 @@
40634061
"renderCount": 180,
40644062
"useLargeWorldRendering": true,
40654063
"excludeFromAutomaticTesting": true,
4066-
"reason": "Test crashes or hangs on Babylon Native",
4064+
"reason": "Parse repaired via ES2019 polyfill; runtime fails: 'HK' (Havok) global not defined.",
40674065
"referenceImage": "Havok-FloatingOrigin-Multi-Region.png"
40684066
},
40694067
{
@@ -4466,7 +4464,7 @@
44664464
"title": "Selection outline layer with instances",
44674465
"playgroundId": "#UR9706#0",
44684466
"excludeFromAutomaticTesting": true,
4469-
"reason": "Pixel comparison fails (more than 20% pixels differ)",
4467+
"reason": "Parse repaired via ES2019 polyfill; runtime fails (asset/URL load issue).",
44704468
"referenceImage": "Selection-outline-layer-with-instances.png"
44714469
},
44724470
{

‎Apps/Playground/Scripts/es2019_transpile.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// es2019_transpile.js
2+
//
3+
// Lightweight regex-based ES2020+ -> ES2019 syntax repair for engines that
4+
// lack optional chaining (?.), nullish coalescing (??), and numeric
5+
// separators (1_000_000).
6+
//
7+
// This is a SYNTAX REPAIR, not a full transpile. It rewrites parse-time
8+
// failing tokens to the closest legal ES2019 expressions so that the host
9+
// engine accepts the code. Where native ES2020+ semantics differ from the
10+
// rewritten form, the rewritten form runs the "happy path" -- assumes the
11+
// target value is present. If the target is null at runtime the rewritten
12+
// code throws a TypeError where native ?. would have short-circuited to
13+
// undefined. This is an intentional trade-off: it produces valid syntax
14+
// (the prerequisite for the test running at all) while preserving the
15+
// common case behaviour. Tests that rely on the nullish-short-circuit
16+
// semantics may surface runtime errors that were previously hidden by
17+
// the parse failure -- a strict improvement for debuggability.
18+
//
19+
// Transforms applied:
20+
// * 1_000_000 -> 1000000 (strip numeric separators)
21+
// * a?.b -> a.b (optional chaining -> required chaining)
22+
// * a?.[x] -> a[x]
23+
// * a?.() -> a()
24+
// * a ?? b -> (a != null ? a : b)
25+
//
26+
// Not handled (still cause parse failures on Chakra):
27+
// * Logical assignment ||= &&= ??=
28+
// * Class private fields #name
29+
// * BigInt literals 1n
30+
//
31+
// String/regex/comment literals containing ? . sequences are not skipped,
32+
// but in Babylon snippet code such occurrences are rare.
33+
//
34+
// On engines with native ES2020+ support (V8, JSC) this code is never
35+
// invoked because the caller only retries with this transform after
36+
// initial eval throws a SyntaxError.
37+
//
38+
// Public API: top-level global function __bnTranspileES2019(code) -> string.
39+
// Chakra in Babylon Native does not define `self` or `globalThis`, so we
40+
// install via a top-level `var` declaration which becomes a property of
41+
// the script-global object across all our supported engines.
42+
var __bnTranspileES2019 = (function () {
43+
"use strict";
44+
45+
function stripNumericSeparators(code) {
46+
// Decimal / float: 1_000_000, 1.234_5, 1_000e3
47+
var out = code.replace(/\b(\d[\d_]*(?:\.[\d_]+)?(?:[eE][+\-]?[\d_]+)?)\b/g, function (m) {
48+
return m.indexOf("_") === -1 ? m : m.replace(/_/g, "");
49+
});
50+
// Hex / octal / binary: 0xFFFF_FFFF, 0o7_5, 0b1010_0101
51+
out = out.replace(/\b(0[xXoObB][0-9A-Fa-f_]+)\b/g, function (m) {
52+
return m.indexOf("_") === -1 ? m : m.replace(/_/g, "");
53+
});
54+
return out;
55+
}
56+
57+
function transformLogicalAssignment(code) {
58+
// a ||= b -> (a || (a = b))
59+
// a &&= b -> (a && (a = b))
60+
// a ??= b -> (a != null ? a : (a = b))
61+
// Only matches simple LHS (identifier, optional .prop / [idx] chain) to keep
62+
// the rewrite syntactically safe; complex LHS expressions are left alone.
63+
var lhs = "(?:[A-Za-z_$][\\w$]*)(?:\\.[A-Za-z_$][\\w$]*|\\[[^\\]\\n]*\\])*";
64+
var rhs = "[^;\\n]+";
65+
var prev = null, out = code, guard = 0;
66+
while (prev !== out && guard++ < 10) {
67+
prev = out;
68+
out = out
69+
.replace(new RegExp("(" + lhs + ")\\s*\\?\\?=\\s*(" + rhs + ")", "g"),
70+
"$1 = ($1 != null ? $1 : ($2))")
71+
.replace(new RegExp("(" + lhs + ")\\s*\\|\\|=\\s*(" + rhs + ")", "g"),
72+
"$1 = ($1 || ($2))")
73+
.replace(new RegExp("(" + lhs + ")\\s*&&=\\s*(" + rhs + ")", "g"),
74+
"$1 = ($1 && ($2))");
75+
}
76+
return out;
77+
}
78+
79+
function transformOptionalChaining(code) {
80+
var prev = null, out = code, guard = 0;
81+
while (prev !== out && guard++ < 50) {
82+
prev = out;
83+
out = out
84+
.replace(/\?\.(?=\()/g, "")
85+
.replace(/\?\.(?=\[)/g, "")
86+
.replace(/\?\./g, ".");
87+
}
88+
return out;
89+
}
90+
91+
function transformNullishCoalescing(code) {
92+
var prev = null, out = code, guard = 0;
93+
while (prev !== out && guard++ < 50) {
94+
prev = out;
95+
out = out.replace(
96+
/(\b[A-Za-z_$][\w$.]*(?:\[[^\]]*\])?)\s*\?\?\s*(\b[A-Za-z_$][\w$.]*(?:\[[^\]]*\])?|"[^"]*"|'[^']*'|\d+(?:\.\d+)?|true|false|null|undefined)/g,
97+
"($1 != null ? $1 : $2)"
98+
);
99+
}
100+
return out;
101+
}
102+
103+
function transpileES2019(code) {
104+
if (typeof code !== "string") { return code; }
105+
var out = code;
106+
out = stripNumericSeparators(out);
107+
out = transformLogicalAssignment(out);
108+
out = transformOptionalChaining(out);
109+
out = transformNullishCoalescing(out);
110+
return out;
111+
}
112+
113+
return transpileES2019;
114+
})();

‎Apps/Playground/Scripts/validation_native.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,26 @@
4545
done(false);
4646
}
4747

48+
// Run `eval(src)` directly. If the host engine throws a SyntaxError
49+
// (e.g. Chakra rejecting ?. ?? or numeric separators) and the
50+
// __bnTranspileES2019 helper is available, retry once with an ES2019
51+
// syntax-repaired version of the source. Re-throws on any other error.
52+
function evalWithFallback(src, test) {
53+
try {
54+
return eval(src);
55+
} catch (e) {
56+
if (e instanceof SyntaxError && typeof __bnTranspileES2019 === "function") {
57+
const repaired = __bnTranspileES2019(src);
58+
if (repaired !== src) {
59+
const title = test && test.title ? test.title : "(unknown)";
60+
console.log("Retrying '" + title + "' after ES2019 syntax repair (host engine lacks ES2020+ parse support).");
61+
return eval(repaired);
62+
}
63+
}
64+
throw e;
65+
}
66+
}
67+
4868
// Per-run counters surfaced as a final summary line on exit.
4969
let ranCount = 0;
5070
let passedCount = 0;
@@ -363,7 +383,7 @@
363383
}
364384
}
365385

366-
currentScene = eval(code + "\r\ncreateScene(engine)");
386+
currentScene = evalWithFallback(code + "\r\ncreateScene(engine)", test);
367387

368388
if (currentScene.then) {
369389
// Handle if createScene returns a promise
@@ -434,7 +454,7 @@
434454
}
435455
}
436456

437-
currentScene = eval(scriptToRun + test.functionToCall + "(engine)");
457+
currentScene = evalWithFallback(scriptToRun + test.functionToCall + "(engine)", test);
438458
processCurrentScene(test, renderImage, done, compareFunction);
439459
}
440460
catch (e) {

0 commit comments

Comments
 (0)