@jsenv/core 24.6.4 → 25.0.0-alpha.2
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/browser_runtime/asset-manifest.json +2 -1
- package/dist/browser_runtime/{browser_runtime-bb0e3aa4.js → browser_runtime_91c5a3b8.js} +137 -26
- package/dist/browser_runtime/browser_runtime_91c5a3b8.js.map +1089 -0
- package/dist/build_manifest.js +6 -6
- package/dist/compile_proxy/asset-manifest.json +2 -1
- package/dist/compile_proxy/{compile_proxy-6eb67db4.html → compile_proxy_7ad5faa6.html} +119 -26
- package/dist/compile_proxy/{compile_proxy.html__inline__20-9e168143.js.map → compile_proxy_e3b0c442_809f35f7.js.map} +6 -6
- package/dist/event_source_client/asset-manifest.json +2 -1
- package/dist/event_source_client/{event_source_client-9f14c8b9.js → event_source_client_80644aee.js} +2 -2
- package/dist/event_source_client/{event_source_client-9f14c8b9.js.map → event_source_client_80644aee.js.map} +4 -3
- package/dist/redirector/asset-manifest.json +2 -1
- package/dist/redirector/{redirector.html__inline__15-3a34a156.js.map → redirector_e3b0c442_e391410e.js.map} +6 -6
- package/dist/redirector/{redirector-b6ad84bf.html → redirector_eb92e8a7.html} +119 -26
- package/dist/toolbar/asset-manifest.json +11 -10
- package/dist/toolbar/assets/{compilation.css-209d68b4.map → compilation.css_e37c747b.map} +1 -1
- package/dist/toolbar/assets/{eventsource.css-38cd0a36.map → eventsource.css_c0c71e7b.map} +1 -1
- package/dist/toolbar/assets/{execution.css-0ebe522f.map → execution.css_f3377c10.map} +1 -1
- package/dist/toolbar/assets/{focus.css-3f9c156d.map → focus.css_896f3e45.map} +1 -1
- package/dist/toolbar/assets/{light-theme.css-78b19a80.map → light-theme.css_72a60fa3.map} +1 -1
- package/dist/toolbar/assets/{overflow-menu.css-d9688a1c.map → overflow-menu.css_2859d519.map} +1 -1
- package/dist/toolbar/assets/{settings.css-2b81b245.map → settings.css_61548139.map} +1 -1
- package/dist/toolbar/assets/{toolbar.main.css-846920e9.map → toolbar.main.css_269d7ce2.map} +9 -9
- package/dist/toolbar/assets/{tooltip.css-03395ee6.map → tooltip.css_a94a8bdd.map} +1 -1
- package/dist/toolbar/{toolbar.main-a5ef2c60.js.map → toolbar.main2_6c1b3d82.js.map} +8 -8
- package/dist/toolbar/{toolbar-1fbf8dcb.html → toolbar_04ba410c.html} +129 -36
- package/dist/toolbar_injector/asset-manifest.json +3 -2
- package/dist/toolbar_injector/assets/{jsenv-logo-188b9ca6.svg → jsenv-logo_188b9ca6.svg} +0 -0
- package/dist/toolbar_injector/{toolbar_injector-997dbaa0.js → toolbar_injector_4a48bc53.js} +3 -3
- package/dist/toolbar_injector/{toolbar_injector-997dbaa0.js.map → toolbar_injector_4a48bc53.js.map} +2 -2
- package/package.json +5 -4
- package/readme.md +24 -91
- package/src/buildProject.js +42 -27
- package/src/dev_server.js +8 -2
- package/src/execute.js +7 -1
- package/src/executeTestPlan.js +17 -0
- package/src/internal/browser_feature_detection/browser_feature_detection.js +18 -25
- package/src/internal/browser_runtime/browser_runtime.js +2 -2
- package/src/internal/browser_runtime/createBrowserRuntime.js +1 -1
- package/src/internal/browser_runtime/displayErrorInDocument.js +2 -0
- package/src/internal/browser_runtime/displayErrorNotification.js +1 -1
- package/src/internal/building/buildUsingRollup.js +12 -15
- package/src/internal/building/build_logs.js +2 -2
- package/src/internal/building/build_stats.js +11 -1
- package/src/internal/building/html/parseHtmlRessource.js +2 -26
- package/src/internal/building/js/parseJsRessource.js +3 -2
- package/src/internal/building/json_module.js +11 -0
- package/src/internal/building/parseRessource.js +1 -1
- package/src/internal/building/ressource_builder.js +210 -216
- package/src/internal/building/rollup_plugin_jsenv.js +530 -365
- package/src/internal/building/url_loader.js +8 -145
- package/src/internal/building/url_versioning.js +220 -0
- package/src/internal/compiling/compileHtml.js +8 -1
- package/src/internal/compiling/createCompiledFileService.js +28 -40
- package/src/internal/compiling/html_source_file_service.js +66 -51
- package/src/internal/compiling/js-compilation-service/babel_plugin_systemjs_prepend.js +23 -0
- package/src/internal/compiling/js-compilation-service/jsenvTransform.js +16 -12
- package/src/internal/compiling/js-compilation-service/transformJs.js +2 -0
- package/src/internal/compiling/jsenvCompilerForHtml.js +43 -44
- package/src/internal/compiling/jsenvCompilerForImportmap.js +15 -76
- package/src/internal/compiling/jsenvCompilerForJavaScript.js +9 -0
- package/src/internal/compiling/startCompileServer.js +29 -5
- package/src/internal/dev_server/event_source_client/livereload_preference.js +1 -1
- package/src/internal/dev_server/toolbar/compilation/toolbar.compilation.js +9 -9
- package/src/internal/executing/executePlan.js +6 -0
- package/src/internal/generateGroupMap/{jsenvBabelPluginCompatMap.js → babel_plugins_compatibility.js} +0 -0
- package/src/internal/generateGroupMap/{featuresCompatMap.js → features_compatibility.js} +9 -1
- package/src/internal/generateGroupMap/generateGroupMap.js +6 -35
- package/src/internal/generateGroupMap/one_runtime_compat.js +9 -12
- package/src/internal/generateGroupMap/runtime_compat.js +10 -15
- package/src/internal/generateGroupMap/runtime_compat_composition.js +2 -2
- package/src/internal/generateGroupMap/shake_babel_plugin_map.js +21 -0
- package/src/internal/import-resolution/importmap_default.js +52 -0
- package/src/internal/node_feature_detection/node_feature_detection.js +25 -19
- package/src/internal/runtime/s.js +101 -6
- package/src/internal/unevalException.js +1 -1
- package/src/jsenvServiceWorkerFinalizer.js +10 -9
- package/dist/browser_runtime/browser_runtime-bb0e3aa4.js.map +0 -1067
- package/src/internal/building/asset_url_versioning.js +0 -50
- package/src/internal/building/rollup_build_sourcemap.js +0 -54
- package/src/internal/building/url-versioning.js +0 -96
- package/src/internal/generateGroupMap/jsenvPluginCompatMap.js +0 -1
- package/src/internal/import-resolution/importmap-default.js +0 -34
- package/src/internal/renderNamePattern.js +0 -6
|
@@ -790,7 +790,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
790
790
|
color: inherit;
|
|
791
791
|
}
|
|
792
792
|
|
|
793
|
-
/*# sourceMappingURL=assets/toolbar.main.
|
|
793
|
+
/*# sourceMappingURL=assets/toolbar.main.css_269d7ce2.map */</style>
|
|
794
794
|
<script id="jsenv_inject_systemjs">/*
|
|
795
795
|
* SJS 6.11.0
|
|
796
796
|
* Minimal SystemJS Build
|
|
@@ -1290,6 +1290,8 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
1290
1290
|
|
|
1291
1291
|
var importMapPromise = Promise.resolve();
|
|
1292
1292
|
var importMap = { imports: {}, scopes: {}, depcache: {}, integrity: {} };
|
|
1293
|
+
systemJSPrototype.importMap = importMap;
|
|
1294
|
+
systemJSPrototype.baseUrl = baseUrl;
|
|
1293
1295
|
|
|
1294
1296
|
// Scripts are processed immediately, on the first System.import, and on DOMReady.
|
|
1295
1297
|
// Import map scripts are processed only once (by being marked) and in order for each phase.
|
|
@@ -1345,6 +1347,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
1345
1347
|
return fetchPromise;
|
|
1346
1348
|
}).then(function (text) {
|
|
1347
1349
|
extendImportMap(importMap, text, script.src || baseUrl);
|
|
1350
|
+
return importMap
|
|
1348
1351
|
});
|
|
1349
1352
|
}
|
|
1350
1353
|
});
|
|
@@ -1359,6 +1362,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
1359
1362
|
}
|
|
1360
1363
|
resolveAndComposeImportMap(newMap, newMapUrl, importMap);
|
|
1361
1364
|
}
|
|
1365
|
+
System.extendImportMap = extendImportMap
|
|
1362
1366
|
|
|
1363
1367
|
/*
|
|
1364
1368
|
* Script instantiation loading
|
|
@@ -1512,23 +1516,33 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
1512
1516
|
* Supports loading System.register in workers
|
|
1513
1517
|
*/
|
|
1514
1518
|
|
|
1515
|
-
if (hasSelf && typeof importScripts === 'function')
|
|
1519
|
+
if (hasSelf && typeof importScripts === 'function') {
|
|
1516
1520
|
systemJSPrototype.instantiate = function (url) {
|
|
1517
1521
|
var loader = this;
|
|
1518
|
-
return
|
|
1519
|
-
|
|
1522
|
+
return self.fetch(url, {
|
|
1523
|
+
credentials: 'same-origin',
|
|
1524
|
+
}).then(function (response) {
|
|
1525
|
+
if (!response.ok) {
|
|
1526
|
+
throw Error(errMsg(7, [response.status, response.statusText, url].join(', ') ));
|
|
1527
|
+
}
|
|
1528
|
+
return response.text()
|
|
1529
|
+
}).then(function (source) {
|
|
1530
|
+
if (source.indexOf('//# sourceURL=') < 0) source += '\n//# sourceURL=' + url;
|
|
1531
|
+
(0, eval)(source);
|
|
1520
1532
|
return loader.getRegister(url);
|
|
1521
|
-
})
|
|
1533
|
+
})
|
|
1522
1534
|
};
|
|
1535
|
+
}
|
|
1523
1536
|
|
|
1524
1537
|
}());
|
|
1525
1538
|
|
|
1526
1539
|
(function(){
|
|
1527
1540
|
var envGlobal = typeof self !== 'undefined' ? self : global;
|
|
1528
1541
|
var System = envGlobal.System;
|
|
1529
|
-
var register = System.register;
|
|
1530
|
-
var registerRegistry = Object.create(null)
|
|
1531
1542
|
|
|
1543
|
+
var registerRegistry = Object.create(null)
|
|
1544
|
+
var register = System.register;
|
|
1545
|
+
System.registerRegistry = registerRegistry;
|
|
1532
1546
|
System.register = function (name, deps, declare) {
|
|
1533
1547
|
if (typeof name !== 'string') return register.apply(this, arguments);
|
|
1534
1548
|
var define = [deps, declare];
|
|
@@ -1558,6 +1572,87 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
1558
1572
|
var result = registerRegistry[url] || register;
|
|
1559
1573
|
return result;
|
|
1560
1574
|
};
|
|
1575
|
+
}());
|
|
1576
|
+
|
|
1577
|
+
(function () {
|
|
1578
|
+
// worker or service worker
|
|
1579
|
+
if (typeof WorkerGlobalScope === 'function' && self instanceof WorkerGlobalScope) {
|
|
1580
|
+
var importMapFromParentPromise = new Promise((resolve) => {
|
|
1581
|
+
var importmapMessageCallback = function (e) {
|
|
1582
|
+
if (e.data === "__importmap_init__") {
|
|
1583
|
+
self.removeEventListener("message", importmapMessageCallback)
|
|
1584
|
+
e.ports[0].onmessage = (message) => {
|
|
1585
|
+
resolve(message.data)
|
|
1586
|
+
}
|
|
1587
|
+
e.ports[0].postMessage('__importmap_request__')
|
|
1588
|
+
}
|
|
1589
|
+
};
|
|
1590
|
+
self.addEventListener("message", importmapMessageCallback)
|
|
1591
|
+
})
|
|
1592
|
+
// var prepareImport = System.prepareImport
|
|
1593
|
+
System.prepareImport = function () {
|
|
1594
|
+
return importMapFromParentPromise.then(function (importmap) {
|
|
1595
|
+
System.extendImportMap(System.importMap, JSON.stringify(importmap), System.baseUrl)
|
|
1596
|
+
})
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
// auto import first register
|
|
1600
|
+
var messageEvents = []
|
|
1601
|
+
var messageCallback = (event) => {
|
|
1602
|
+
messageEvents.push(event)
|
|
1603
|
+
}
|
|
1604
|
+
self.addEventListener('message', messageCallback)
|
|
1605
|
+
var register = System.register;
|
|
1606
|
+
System.register = function(deps, declare) {
|
|
1607
|
+
System.register = register;
|
|
1608
|
+
System.registerRegistry[self.location.href] = [deps, declare];
|
|
1609
|
+
System.import(self.location.href).then(() => {
|
|
1610
|
+
self.removeEventListener('message', messageCallback)
|
|
1611
|
+
messageEvents.forEach((messageEvent) => {
|
|
1612
|
+
self.dispatchEvent(messageEvent)
|
|
1613
|
+
})
|
|
1614
|
+
messageEvents = null
|
|
1615
|
+
})
|
|
1616
|
+
}
|
|
1617
|
+
}
|
|
1618
|
+
else if (typeof window === 'object') {
|
|
1619
|
+
var WorkerConstructor = window.Worker;
|
|
1620
|
+
if (typeof WorkerConstructor === 'function') {
|
|
1621
|
+
window.Worker = function (url, options) {
|
|
1622
|
+
var worker = new WorkerConstructor(url, options);
|
|
1623
|
+
var importmapChannel = new MessageChannel();
|
|
1624
|
+
importmapChannel.port1.onmessage = function (message) {
|
|
1625
|
+
System.prepareImport().then(function (importmap) {
|
|
1626
|
+
message.target.postMessage(importmap);
|
|
1627
|
+
});
|
|
1628
|
+
}
|
|
1629
|
+
worker.postMessage('__importmap_init__', [importmapChannel.port2]);
|
|
1630
|
+
return worker
|
|
1631
|
+
}
|
|
1632
|
+
}
|
|
1633
|
+
|
|
1634
|
+
var serviceWorker = navigator.serviceWorker;
|
|
1635
|
+
if (serviceWorker) {
|
|
1636
|
+
var register = serviceWorker.register;
|
|
1637
|
+
serviceWorker.register = function(url, options) {
|
|
1638
|
+
var registrationPromise = register.call(this, url, options);
|
|
1639
|
+
registrationPromise.then(function(registration) {
|
|
1640
|
+
var installing = registration.installing;
|
|
1641
|
+
var waiting = registration.waiting;
|
|
1642
|
+
var active = registration.active;
|
|
1643
|
+
var worker = installing || waiting || active;
|
|
1644
|
+
var importmapChannel = new MessageChannel();
|
|
1645
|
+
importmapChannel.port1.onmessage = function (message) {
|
|
1646
|
+
System.prepareImport().then(function (importmap) {
|
|
1647
|
+
message.target.postMessage(importmap)
|
|
1648
|
+
});
|
|
1649
|
+
}
|
|
1650
|
+
worker.postMessage('__importmap_init__', [importmapChannel.port2]);
|
|
1651
|
+
})
|
|
1652
|
+
return registrationPromise
|
|
1653
|
+
}
|
|
1654
|
+
}
|
|
1655
|
+
}
|
|
1561
1656
|
}());</script>
|
|
1562
1657
|
</head>
|
|
1563
1658
|
<body>
|
|
@@ -1906,9 +2001,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
1906
2001
|
-->
|
|
1907
2002
|
<script type="systemjs-importmap">
|
|
1908
2003
|
{
|
|
1909
|
-
"imports": {
|
|
1910
|
-
"./toolbar.main.js": "./toolbar.main-a5ef2c60.js"
|
|
1911
|
-
}
|
|
2004
|
+
"imports": {}
|
|
1912
2005
|
}</script>
|
|
1913
2006
|
<script>
|
|
1914
2007
|
// here we should create something like window.toolbar = {}
|
|
@@ -4127,16 +4220,16 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4127
4220
|
failFastOnFeatureDetection: failFastOnFeatureDetection,
|
|
4128
4221
|
inlineImportMapIntoHTML: inlineImportMapIntoHTML
|
|
4129
4222
|
}), function () {
|
|
4130
|
-
return _await(
|
|
4223
|
+
return _await(adjustMissingFeatureNames(groupInfo, {
|
|
4131
4224
|
featuresReport: featuresReport,
|
|
4132
4225
|
coverageHandledFromOutside: coverageHandledFromOutside
|
|
4133
|
-
}), function (
|
|
4134
|
-
var canAvoidCompilation = customCompilerPatterns.length === 0 &&
|
|
4226
|
+
}), function (missingFeatureNames) {
|
|
4227
|
+
var canAvoidCompilation = customCompilerPatterns.length === 0 && missingFeatureNames.length === 0 && featuresReport.importmap && featuresReport.dynamicImport && featuresReport.topLevelAwait;
|
|
4135
4228
|
return {
|
|
4136
4229
|
canAvoidCompilation: canAvoidCompilation,
|
|
4137
4230
|
featuresReport: featuresReport,
|
|
4138
4231
|
customCompilerPatterns: customCompilerPatterns,
|
|
4139
|
-
|
|
4232
|
+
missingFeatureNames: missingFeatureNames,
|
|
4140
4233
|
inlineImportMapIntoHTML: inlineImportMapIntoHTML,
|
|
4141
4234
|
outDirectoryRelativeUrl: outDirectoryRelativeUrl,
|
|
4142
4235
|
compileId: compileId,
|
|
@@ -4147,17 +4240,17 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4147
4240
|
});
|
|
4148
4241
|
});
|
|
4149
4242
|
|
|
4150
|
-
var
|
|
4243
|
+
var adjustMissingFeatureNames = _async$1(function (groupInfo, _ref3) {
|
|
4151
4244
|
var featuresReport = _ref3.featuresReport,
|
|
4152
4245
|
coverageHandledFromOutside = _ref3.coverageHandledFromOutside;
|
|
4153
|
-
var
|
|
4154
|
-
var
|
|
4246
|
+
var missingFeatureNames = groupInfo.missingFeatureNames;
|
|
4247
|
+
var missingFeatureNamesCopy = missingFeatureNames.slice();
|
|
4155
4248
|
|
|
4156
|
-
var
|
|
4157
|
-
var index =
|
|
4249
|
+
var markAsSupported = function markAsSupported(name) {
|
|
4250
|
+
var index = missingFeatureNamesCopy.indexOf(name);
|
|
4158
4251
|
|
|
4159
4252
|
if (index > -1) {
|
|
4160
|
-
|
|
4253
|
+
missingFeatureNamesCopy.splice(index, 1);
|
|
4161
4254
|
}
|
|
4162
4255
|
}; // When instrumentation CAN be handed by playwright
|
|
4163
4256
|
// https://playwright.dev/docs/api/class-chromiumcoverage#chromiumcoveragestartjscoverageoptions
|
|
@@ -4165,30 +4258,30 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4165
4258
|
|
|
4166
4259
|
|
|
4167
4260
|
if (coverageHandledFromOutside) {
|
|
4168
|
-
|
|
4261
|
+
markAsSupported("transform-instrument");
|
|
4169
4262
|
}
|
|
4170
4263
|
|
|
4171
4264
|
return _invoke(function () {
|
|
4172
|
-
if (
|
|
4265
|
+
if (missingFeatureNames.includes("transform-import-assertions")) {
|
|
4173
4266
|
return _call$1(supportsJsonImportAssertions, function (jsonImportAssertions) {
|
|
4174
4267
|
featuresReport.jsonImportAssertions = jsonImportAssertions;
|
|
4175
4268
|
return _call$1(supportsCssImportAssertions, function (cssImportAssertions) {
|
|
4176
4269
|
featuresReport.cssImportAssertions = cssImportAssertions;
|
|
4177
4270
|
|
|
4178
4271
|
if (jsonImportAssertions && cssImportAssertions) {
|
|
4179
|
-
|
|
4272
|
+
markAsSupported("transform-import-assertions");
|
|
4180
4273
|
}
|
|
4181
4274
|
});
|
|
4182
4275
|
});
|
|
4183
4276
|
}
|
|
4184
4277
|
}, function () {
|
|
4185
|
-
if (
|
|
4278
|
+
if (missingFeatureNames.includes("new-stylesheet-as-jsenv-import")) {
|
|
4186
4279
|
var newStylesheet = supportsNewStylesheet();
|
|
4187
4280
|
featuresReport.newStylesheet = newStylesheet;
|
|
4188
|
-
|
|
4281
|
+
markAsSupported("new-stylesheet-as-jsenv-import");
|
|
4189
4282
|
}
|
|
4190
4283
|
|
|
4191
|
-
return
|
|
4284
|
+
return missingFeatureNamesCopy;
|
|
4192
4285
|
});
|
|
4193
4286
|
});
|
|
4194
4287
|
|
|
@@ -4363,7 +4456,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4363
4456
|
var canAvoidCompilation = _ref2.canAvoidCompilation,
|
|
4364
4457
|
featuresReport = _ref2.featuresReport,
|
|
4365
4458
|
customCompilerPatterns = _ref2.customCompilerPatterns,
|
|
4366
|
-
|
|
4459
|
+
missingFeatureNames = _ref2.missingFeatureNames,
|
|
4367
4460
|
inlineImportMapIntoHTML = _ref2.inlineImportMapIntoHTML,
|
|
4368
4461
|
outDirectoryRelativeUrl = _ref2.outDirectoryRelativeUrl,
|
|
4369
4462
|
compileId = _ref2.compileId;
|
|
@@ -4379,7 +4472,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4379
4472
|
missingOnly: true,
|
|
4380
4473
|
featuresReport: featuresReport,
|
|
4381
4474
|
customCompilerPatterns: customCompilerPatterns,
|
|
4382
|
-
|
|
4475
|
+
missingFeatureNames: missingFeatureNames,
|
|
4383
4476
|
inlineImportMapIntoHTML: inlineImportMapIntoHTML
|
|
4384
4477
|
})));
|
|
4385
4478
|
};
|
|
@@ -4389,7 +4482,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4389
4482
|
window.alert("Source files (except html) can be executed directly in this browser because: ".concat(getBrowserSupportMessage({
|
|
4390
4483
|
featuresReport: featuresReport,
|
|
4391
4484
|
customCompilerPatterns: customCompilerPatterns,
|
|
4392
|
-
|
|
4485
|
+
missingFeatureNames: missingFeatureNames,
|
|
4393
4486
|
inlineImportMapIntoHTML: inlineImportMapIntoHTML
|
|
4394
4487
|
})));
|
|
4395
4488
|
};
|
|
@@ -4399,7 +4492,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4399
4492
|
window.alert("Source files can be executed directly in this browser because: ".concat(getBrowserSupportMessage({
|
|
4400
4493
|
featuresReport: featuresReport,
|
|
4401
4494
|
customCompilerPatterns: customCompilerPatterns,
|
|
4402
|
-
|
|
4495
|
+
missingFeatureNames: missingFeatureNames,
|
|
4403
4496
|
inlineImportMapIntoHTML: inlineImportMapIntoHTML
|
|
4404
4497
|
})));
|
|
4405
4498
|
};
|
|
@@ -4437,7 +4530,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4437
4530
|
var missingOnly = _ref3.missingOnly,
|
|
4438
4531
|
featuresReport = _ref3.featuresReport,
|
|
4439
4532
|
customCompilerPatterns = _ref3.customCompilerPatterns,
|
|
4440
|
-
|
|
4533
|
+
missingFeatureNames = _ref3.missingFeatureNames,
|
|
4441
4534
|
inlineImportMapIntoHTML = _ref3.inlineImportMapIntoHTML;
|
|
4442
4535
|
var parts = [];
|
|
4443
4536
|
|
|
@@ -4469,14 +4562,14 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4469
4562
|
parts.push("top level await is not supported");
|
|
4470
4563
|
}
|
|
4471
4564
|
|
|
4472
|
-
var
|
|
4565
|
+
var missingFeatureCount = missingFeatureNames.length;
|
|
4473
4566
|
|
|
4474
|
-
if (
|
|
4567
|
+
if (missingFeatureCount === 0) {
|
|
4475
4568
|
if (!missingOnly) {
|
|
4476
|
-
parts.push("all
|
|
4569
|
+
parts.push("all features are natively supported");
|
|
4477
4570
|
}
|
|
4478
4571
|
} else {
|
|
4479
|
-
parts.push("".concat(
|
|
4572
|
+
parts.push("".concat(missingFeatureCount, " features are missing: ").concat(missingFeatureNames));
|
|
4480
4573
|
}
|
|
4481
4574
|
|
|
4482
4575
|
var customCompilerCount = customCompilerPatterns.length;
|
|
@@ -4917,7 +5010,7 @@ html[data-toolbar-visible] #toolbar-trigger {
|
|
|
4917
5010
|
};
|
|
4918
5011
|
});
|
|
4919
5012
|
|
|
4920
|
-
//# sourceMappingURL=toolbar.
|
|
5013
|
+
//# sourceMappingURL=toolbar.main2_6c1b3d82.js.map</script>
|
|
4921
5014
|
|
|
4922
5015
|
|
|
4923
5016
|
</body></html>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
"toolbar_injector.js": "
|
|
2
|
+
".jsenv/build/best/src/internal/dev_server/toolbar/jsenv-logo.svg": "assets/jsenv-logo_188b9ca6.svg",
|
|
3
|
+
"toolbar_injector.js": "toolbar_injector_4a48bc53.js",
|
|
4
|
+
"toolbar_injector.js.map": "toolbar_injector_4a48bc53.js.map"
|
|
4
5
|
}
|
|
File without changes
|
|
@@ -746,7 +746,7 @@
|
|
|
746
746
|
return then ? value.then(then) : value;
|
|
747
747
|
}
|
|
748
748
|
|
|
749
|
-
var TOOLBAR_BUILD_RELATIVE_URL = "dist/toolbar/
|
|
749
|
+
var TOOLBAR_BUILD_RELATIVE_URL = "dist/toolbar/toolbar_04ba410c.html";
|
|
750
750
|
|
|
751
751
|
function _call(body, then, direct) {
|
|
752
752
|
if (direct) {
|
|
@@ -761,7 +761,7 @@
|
|
|
761
761
|
}
|
|
762
762
|
}
|
|
763
763
|
|
|
764
|
-
var jsenvLogoSvgUrl = new URL("assets/jsenv-
|
|
764
|
+
var jsenvLogoSvgUrl = new URL("assets/jsenv-logo_188b9ca6.svg", document.currentScript && document.currentScript.src || document.baseURI);
|
|
765
765
|
|
|
766
766
|
function _async(f) {
|
|
767
767
|
return function () {
|
|
@@ -970,4 +970,4 @@
|
|
|
970
970
|
|
|
971
971
|
})();
|
|
972
972
|
|
|
973
|
-
//# sourceMappingURL=
|
|
973
|
+
//# sourceMappingURL=toolbar_injector_4a48bc53.js.map
|
package/dist/toolbar_injector/{toolbar_injector-997dbaa0.js.map → toolbar_injector_4a48bc53.js.map}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"file": "
|
|
3
|
+
"file": "toolbar_injector_4a48bc53.js",
|
|
4
4
|
"sources": [
|
|
5
5
|
"../../helpers/babel/typeof/typeof.js",
|
|
6
6
|
"../../helpers/babel/defineProperty/defineProperty.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"import { fetchUrl } from \"./fetch-browser.js\"\n\nexport const fetchJson = async (url, options = {}) => {\n const response = await fetchUrl(url, options)\n const object = await response.json()\n return object\n}\n",
|
|
26
26
|
"import { fetchJson } from \"../../browser_utils/fetchJson.js\"\n\nexport const fetchExploringJson = async ({ signal } = {}) => {\n try {\n const exploringInfo = await fetchJson(\"/.jsenv/exploring.json\", {\n signal,\n })\n return exploringInfo\n } catch (e) {\n if (signal && signal.aborted && e.name === \"AbortError\") {\n throw e\n }\n throw new Error(\n `Cannot communicate with exploring server due to a network error\n--- error stack ---\n${e.stack}`,\n )\n }\n}\n",
|
|
27
27
|
"export const updateIframeOverflowOnParentWindow = () => {\n if (!window.parent) {\n // can happen while parent iframe reloads\n return\n }\n\n const aTooltipIsOpened =\n document.querySelector(\"[data-tooltip-visible]\") ||\n document.querySelector(\"[data-tooltip-auto-visible]\")\n const settingsAreOpened = document.querySelector(\"#settings[data-active]\")\n\n if (aTooltipIsOpened || settingsAreOpened) {\n enableIframeOverflowOnParentWindow()\n } else {\n disableIframeOverflowOnParentWindow()\n }\n}\n\nlet iframeOverflowEnabled = false\nconst enableIframeOverflowOnParentWindow = () => {\n if (iframeOverflowEnabled) return\n iframeOverflowEnabled = true\n\n const iframe = getToolbarIframe()\n const transitionDuration = iframe.style.transitionDuration\n setStyles(iframe, { \"height\": \"100%\", \"transition-duration\": \"0ms\" })\n if (transitionDuration) {\n setTimeout(() => {\n setStyles(iframe, { \"transition-duration\": transitionDuration })\n })\n }\n}\n\nconst disableIframeOverflowOnParentWindow = () => {\n if (!iframeOverflowEnabled) return\n iframeOverflowEnabled = false\n\n const iframe = getToolbarIframe()\n const transitionDuration = iframe.style.transitionDuration\n setStyles(iframe, { \"height\": \"40px\", \"transition-duration\": \"0ms\" })\n if (transitionDuration) {\n setTimeout(() => {\n setStyles(iframe, { \"transition-duration\": transitionDuration })\n })\n }\n}\n\nexport const getToolbarIframe = () => {\n const iframes = Array.from(window.parent.document.querySelectorAll(\"iframe\"))\n return iframes.find((iframe) => iframe.contentWindow === window)\n}\n\nexport const forceHideElement = (element) => {\n element.setAttribute(\"data-force-hide\", \"\")\n}\n\nexport const removeForceHideElement = (element) => {\n element.removeAttribute(\"data-force-hide\")\n}\n\nexport const setStyles = (element, styles) => {\n const elementStyle = element.style\n const restoreStyles = Object.keys(styles).map((styleName) => {\n let restore\n if (styleName in elementStyle) {\n const currentStyle = elementStyle[styleName]\n restore = () => {\n elementStyle[styleName] = currentStyle\n }\n } else {\n restore = () => {\n delete elementStyle[styleName]\n }\n }\n\n elementStyle[styleName] = styles[styleName]\n\n return restore\n })\n return () => {\n restoreStyles.forEach((restore) => restore())\n }\n}\n\nexport const setAttributes = (element, attributes) => {\n Object.keys(attributes).forEach((name) => {\n element.setAttribute(name, attributes[name])\n })\n}\n\nexport const getDocumentScroll = () => {\n return {\n x: document.documentElement.scrollLeft,\n y: document.documentElement.scrollTop,\n }\n}\n\nexport const toolbarSectionIsActive = (element) => {\n return element.hasAttribute(\"data-active\")\n}\n\nexport const activateToolbarSection = (element) => {\n element.setAttribute(\"data-active\", \"\")\n}\n\nexport const deactivateToolbarSection = (element) => {\n element.removeAttribute(\"data-active\")\n}\n",
|
|
28
|
-
"import { fetchExploringJson } from \"@jsenv/core/src/internal/dev_server/exploring/fetchExploringJson.js\"\nimport { setAttributes, setStyles } from \"./util/dom.js\"\n\n// eslint-disable-next-line no-undef\nconst TOOLBAR_BUILD_RELATIVE_URL = \"dist/toolbar/
|
|
28
|
+
"import { fetchExploringJson } from \"@jsenv/core/src/internal/dev_server/exploring/fetchExploringJson.js\"\nimport { setAttributes, setStyles } from \"./util/dom.js\"\n\n// eslint-disable-next-line no-undef\nconst TOOLBAR_BUILD_RELATIVE_URL = \"dist/toolbar/toolbar_04ba410c.html\"\nconst jsenvLogoSvgUrl = new URL(\"./jsenv-logo.svg\", import.meta.url)\n\nconst injectToolbar = async () => {\n await new Promise((resolve) => {\n if (window.requestIdleCallback) {\n window.requestIdleCallback(resolve)\n } else {\n window.requestAnimationFrame(resolve)\n }\n })\n\n const { jsenvDirectoryRelativeUrl } = await fetchExploringJson()\n const jsenvDirectoryServerUrl = resolveUrl(\n jsenvDirectoryRelativeUrl,\n document.location.origin,\n )\n\n const placeholder = getToolbarPlaceholder()\n\n const iframe = document.createElement(\"iframe\")\n setAttributes(iframe, {\n tabindex: -1,\n // sandbox: \"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation\",\n // allow: \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr\",\n allowtransparency: true,\n })\n setStyles(iframe, {\n \"position\": \"fixed\",\n \"zIndex\": 1000,\n \"bottom\": 0,\n \"left\": 0,\n \"width\": \"100%\",\n \"height\": 0,\n /* ensure toolbar children are not focusable when hidden */\n \"visibility\": \"hidden\",\n \"transition-duration\": \"300ms\",\n \"transition-property\": \"height, visibility\",\n \"border\": \"none\",\n })\n const iframeLoadedPromise = iframeToLoadedPromise(iframe)\n const jsenvToolbarHtmlServerUrl = resolveUrl(\n TOOLBAR_BUILD_RELATIVE_URL,\n jsenvDirectoryServerUrl,\n )\n // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)\n iframe.setAttribute(\"src\", jsenvToolbarHtmlServerUrl)\n placeholder.parentNode.replaceChild(iframe, placeholder)\n\n await iframeLoadedPromise\n iframe.removeAttribute(\"tabindex\")\n\n const div = document.createElement(\"div\")\n div.innerHTML = `\n<div id=\"jsenv-toolbar-trigger\">\n <svg id=\"jsenv-toolbar-trigger-icon\">\n <use xlink:href=\"${jsenvLogoSvgUrl}#jsenv-logo\"></use>\n </svg>\n <style>\n #jsenv-toolbar-trigger {\n display: block;\n overflow: hidden;\n position: fixed;\n z-index: 1000;\n bottom: -32px;\n right: 20px;\n height: 40px;\n width: 40px;\n padding: 0;\n margin: 0;\n border-radius: 5px 5px 0 0;\n border: 1px solid rgba(0, 0, 0, 0.33);\n border-bottom: none;\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n background: transparent;\n text-align: center;\n transition: 600ms;\n }\n\n #jsenv-toolbar-trigger:hover {\n cursor: pointer;\n }\n\n #jsenv-toolbar-trigger[data-expanded] {\n bottom: 0;\n }\n\n #jsenv-toolbar-trigger-icon {\n width: 35px;\n height: 35px;\n opacity: 0;\n transition: 600ms;\n }\n\n #jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {\n opacity: 1;\n }\n </style>\n</div>`\n const toolbarTrigger = div.firstElementChild\n iframe.parentNode.appendChild(toolbarTrigger)\n\n let timer\n toolbarTrigger.onmouseenter = () => {\n toolbarTrigger.setAttribute(\"data-animate\", \"\")\n timer = setTimeout(expandToolbarTrigger, 500)\n }\n toolbarTrigger.onmouseleave = () => {\n clearTimeout(timer)\n collapseToolbarTrigger()\n }\n toolbarTrigger.onfocus = () => {\n toolbarTrigger.removeAttribute(\"data-animate\")\n expandToolbarTrigger()\n }\n toolbarTrigger.onblur = () => {\n toolbarTrigger.removeAttribute(\"data-animate\")\n clearTimeout(timer)\n collapseToolbarTrigger()\n }\n toolbarTrigger.onclick = () => {\n sendCommandToToolbar(iframe, \"showToolbar\")\n }\n\n const showToolbarTrigger = () => {\n toolbarTrigger.style.display = \"block\"\n }\n\n const hideToolbarTrigger = () => {\n toolbarTrigger.style.display = \"none\"\n }\n\n const expandToolbarTrigger = () => {\n toolbarTrigger.setAttribute(\"data-expanded\", \"\")\n }\n\n const collapseToolbarTrigger = () => {\n toolbarTrigger.removeAttribute(\"data-expanded\", \"\")\n }\n\n hideToolbarTrigger()\n addToolbarEventCallback(iframe, \"toolbar-visibility-change\", (visible) => {\n if (visible) {\n hideToolbarTrigger()\n } else {\n showToolbarTrigger()\n }\n })\n addToolbarEventCallback(iframe, \"toolbar_ready\", () => {\n sendCommandToToolbar(iframe, \"renderToolbar\")\n })\n\n return iframe\n}\n\nconst addToolbarEventCallback = (iframe, eventName, callback) => {\n const messageEventCallback = (messageEvent) => {\n const { data } = messageEvent\n if (typeof data !== \"object\") {\n return\n }\n const { __jsenv__ } = data\n if (!__jsenv__) {\n return\n }\n if (__jsenv__.event !== eventName) {\n return\n }\n callback(__jsenv__.data)\n }\n\n window.addEventListener(\"message\", messageEventCallback, false)\n return () => {\n window.removeEventListener(\"message\", messageEventCallback, false)\n }\n}\n\nconst sendCommandToToolbar = (iframe, command, ...args) => {\n iframe.contentWindow.postMessage(\n {\n __jsenv__: {\n command,\n args,\n },\n },\n window.origin,\n )\n}\n\nconst getToolbarPlaceholder = () => {\n const placeholder = queryPlaceholder()\n if (placeholder) {\n if (document.body.contains(placeholder)) {\n return placeholder\n }\n // otherwise iframe would not be visible because in <head>\n console.warn(\n \"element with [data-jsenv-toolbar-placeholder] must be inside document.body\",\n )\n return createTooolbarPlaceholder()\n }\n return createTooolbarPlaceholder()\n}\n\nconst queryPlaceholder = () => {\n return document.querySelector(\"[data-jsenv-toolbar-placeholder]\")\n}\n\nconst createTooolbarPlaceholder = () => {\n const placeholder = document.createElement(\"span\")\n document.body.appendChild(placeholder)\n return placeholder\n}\n\nconst iframeToLoadedPromise = (iframe) => {\n return new Promise((resolve) => {\n const onload = () => {\n iframe.removeEventListener(\"load\", onload, true)\n resolve()\n }\n iframe.addEventListener(\"load\", onload, true)\n })\n}\n\nconst resolveUrl = (url, baseUrl) => String(new URL(url, baseUrl))\n\nif (document.readyState === \"complete\") {\n injectToolbar()\n} else {\n window.addEventListener(\"load\", injectToolbar)\n}\n"
|
|
29
29
|
],
|
|
30
30
|
"names": [
|
|
31
31
|
"nativeTypeOf",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jsenv/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha.2",
|
|
4
4
|
"description": "Tool to develop, test and build js projects",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -11,8 +11,7 @@
|
|
|
11
11
|
"node": ">=14.9.0"
|
|
12
12
|
},
|
|
13
13
|
"publishConfig": {
|
|
14
|
-
"access": "public"
|
|
15
|
-
"registry": "https://registry.npmjs.org"
|
|
14
|
+
"access": "public"
|
|
16
15
|
},
|
|
17
16
|
"type": "module",
|
|
18
17
|
"exports": {
|
|
@@ -35,11 +34,13 @@
|
|
|
35
34
|
"test": "node --experimental-import-meta-resolve ./script/test/test.js",
|
|
36
35
|
"test-with-coverage": "npm run test -- --coverage",
|
|
37
36
|
"dev": "node ./script/dev/start_dev_server.js",
|
|
37
|
+
"start_file_server": "node ./script/dev/start_file_server.js",
|
|
38
38
|
"performances": "node --expose-gc ./script/performance/generate_performance_report.js --log --once",
|
|
39
39
|
"file-size": "node ./script/file_size/file_size.mjs --log",
|
|
40
40
|
"prettier": "prettier --write .",
|
|
41
41
|
"playwright-install": "npx playwright install-deps && npx playwright install",
|
|
42
42
|
"packages-install": "node ./script/packages/packages_install.js",
|
|
43
|
+
"certificate-install": "node ./script/dev/install_certificate_authority.mjs",
|
|
43
44
|
"prepublishOnly": "npm run build"
|
|
44
45
|
},
|
|
45
46
|
"optionalDependencies": {
|
|
@@ -136,4 +137,4 @@
|
|
|
136
137
|
"redux": "4.1.2",
|
|
137
138
|
"rollup-plugin-import-assert": "1.1.1"
|
|
138
139
|
}
|
|
139
|
-
}
|
|
140
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
# jsenv [](https://www.npmjs.com/package/@jsenv/core) [](https://github.com/jsenv/jsenv-core/actions?workflow=main) [](https://codecov.io/gh/jsenv/jsenv-core)
|
|
2
2
|
|
|
3
|
-
_@jsenv/core_
|
|
3
|
+
_@jsenv/core_ is a quick start pack to launch a js project.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
- A development server
|
|
7
|
-
- A build tool to optimize files for production
|
|
8
|
-
|
|
9
|
-
Jsenv integrates naturally with standard html, css and js. It can be configured to work with React and JSX.
|
|
5
|
+
You don't have to pick a JavaScript framework: jsenv integrates naturally with standard HTML, CSS and JS. It provides what you need from the beginning: a dev server, a build tool and a test "framework", all in one.
|
|
10
6
|
|
|
11
7
|
# Test runner overview
|
|
12
8
|
|
|
@@ -196,8 +192,8 @@ import { buildProject } from "@jsenv/core"
|
|
|
196
192
|
await buildProject({
|
|
197
193
|
projectDirectoryUrl: new URL("./", import.meta.url),
|
|
198
194
|
buildDirectoryRelativeUrl: "dist",
|
|
199
|
-
|
|
200
|
-
"./main.html": "
|
|
195
|
+
entryPoints: {
|
|
196
|
+
"./main.html": "main.prod.html",
|
|
201
197
|
},
|
|
202
198
|
format: "esmodule",
|
|
203
199
|
minify: true,
|
|
@@ -251,6 +247,12 @@ To read more about jsenv build tool, check [jsenv build documentation](./docs/bu
|
|
|
251
247
|
|
|
252
248
|
# About
|
|
253
249
|
|
|
250
|
+
Jsenv was first created to write tests that could be executed in different runtimes. It has naturally evolved to cover the core needs of a JavaScript project:
|
|
251
|
+
|
|
252
|
+
- A development server
|
|
253
|
+
- A test runner to execute test files
|
|
254
|
+
- A build tool to optimize files for production
|
|
255
|
+
|
|
254
256
|
Jsenv relies on standard web features. Each standard listed below is potentially supported natively by the browser. When browser supports all of them, jsenv will use source files without modification. Otherwise, the files are compiled to be executable in the browser.
|
|
255
257
|
|
|
256
258
|
- `<script type="module">`
|
|
@@ -260,7 +262,7 @@ Jsenv relies on standard web features. Each standard listed below is potentially
|
|
|
260
262
|
- dynamic imports
|
|
261
263
|
- import assertions
|
|
262
264
|
|
|
263
|
-
## When to use it
|
|
265
|
+
## When to use it?
|
|
264
266
|
|
|
265
267
|
Amongst other use cases, the ease of use and flexibility of jsenv makes it a great tool to start and learn web development.
|
|
266
268
|
|
|
@@ -286,7 +288,7 @@ An overview of the main dependencies used by _@jsenv/core_.
|
|
|
286
288
|
|
|
287
289
|
## Name
|
|
288
290
|
|
|
289
|
-
The name "jsenv" stands for JavaScript environments. This is because the original purpose of jsenv was to bring closer two JavaScript runtimes: web browsers and Node.js.
|
|
291
|
+
The name "jsenv" stands for JavaScript environments. This is because the original purpose of jsenv was to bring closer two JavaScript runtimes: web browsers and Node.js.
|
|
290
292
|
|
|
291
293
|
Maybe "jsenv" should be written "JSEnv"? That makes typing the name too complex:
|
|
292
294
|
|
|
@@ -362,86 +364,17 @@ module.exports = {
|
|
|
362
364
|
}
|
|
363
365
|
```
|
|
364
366
|
|
|
365
|
-
## CommonJS
|
|
366
|
-
|
|
367
|
-
CommonJS module format rely on `module.exports` and `require`. It was invented by Node.js and is not standard JavaScript. If your code or one of your dependency uses it, it requires some configuration. The jsenv config below makes jsenv compatible with a package named _"whatever"_ that would be written in CommonJS.
|
|
368
|
-
|
|
369
|
-
_jsenv.config.mjs to use code written in CommonJS_:
|
|
370
|
-
|
|
371
|
-
```js
|
|
372
|
-
import { commonJsToJavaScriptModule } from "@jsenv/core"
|
|
373
|
-
|
|
374
|
-
export const customCompilers = {
|
|
375
|
-
"./node_modules/whatever/index.js": commonJsToJavaScriptModule,
|
|
376
|
-
}
|
|
377
|
-
```
|
|
378
|
-
|
|
379
|
-
## React
|
|
380
|
-
|
|
381
|
-
When your code imports react, it needs to be configured as shown below.
|
|
382
|
-
|
|
383
|
-
_jsenv.config.mjs for react:_
|
|
384
|
-
|
|
385
|
-
```js
|
|
386
|
-
import { commonJsToJavaScriptModule } from "@jsenv/core"
|
|
387
|
-
|
|
388
|
-
// "react" and "react-dom" are written in commonJs, they
|
|
389
|
-
// must be converted to javascript modules
|
|
390
|
-
// see https://github.com/jsenv/jsenv-core/blob/master/docs/shared-parameters.md#customCompilers
|
|
391
|
-
export const customCompilers = {
|
|
392
|
-
"./node_modules/react/index.js": commonJsToJavaScriptModule,
|
|
393
|
-
"./node_modules/react-dom/index.js": (options) => {
|
|
394
|
-
return commonJsToJavaScriptModule({ ...options, external: ["react"] })
|
|
395
|
-
},
|
|
396
|
-
}
|
|
397
|
-
```
|
|
398
|
-
|
|
399
|
-
You must also add an [importmap](https://github.com/WICG/import-maps#import-maps) file in your html to remap react imports.
|
|
400
|
-
|
|
401
|
-
```html
|
|
402
|
-
<script type="importmap">
|
|
403
|
-
{
|
|
404
|
-
"imports": {
|
|
405
|
-
"react": "./node_modules/react/index.js",
|
|
406
|
-
"react-dom": "./node_modules/react-dom/index.js"
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
</script>
|
|
410
|
-
```
|
|
411
|
-
|
|
412
|
-
The import mappings can be generated programmatically, you can use https://github.com/jsenv/importmap-node-module to do that.
|
|
413
|
-
|
|
414
|
-
## JSX
|
|
415
|
-
|
|
416
|
-
If you want to use jsx, you need [@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html) in your babel config file.
|
|
417
|
-
|
|
418
|
-
```console
|
|
419
|
-
npm i --save-dev @babel/plugin-transform-react-jsx
|
|
420
|
-
```
|
|
421
|
-
|
|
422
|
-
_babel.config.cjs for JSX_:
|
|
423
|
-
|
|
424
|
-
```js
|
|
425
|
-
module.exports = {
|
|
426
|
-
presets: ["@jsenv/babel-preset"],
|
|
427
|
-
plugins: [
|
|
428
|
-
[
|
|
429
|
-
"@babel/plugin-transform-react-jsx",
|
|
430
|
-
{
|
|
431
|
-
pragma: "React.createElement",
|
|
432
|
-
pragmaFrag: "React.Fragment",
|
|
433
|
-
},
|
|
434
|
-
],
|
|
435
|
-
],
|
|
436
|
-
}
|
|
437
|
-
```
|
|
438
|
-
|
|
439
367
|
# See also
|
|
440
368
|
|
|
441
|
-
| Link
|
|
442
|
-
|
|
|
443
|
-
| [
|
|
444
|
-
| [
|
|
445
|
-
| [
|
|
446
|
-
| [
|
|
447
|
-
| [
|
|
369
|
+
| Link | Description |
|
|
370
|
+
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
|
|
371
|
+
| [Browser support](./docs/config/browser_support.md) | Document how to configure browser support |
|
|
372
|
+
| [Web workers](./docs/config/web_workers.md) | Document how to use web workers |
|
|
373
|
+
| [React](./docs/config/react.md) | Document how to enable react/preact and JSX |
|
|
374
|
+
| [CommonJS modules](./docs/config/commonjs.md) | Document how to use code written in CommonJS |
|
|
375
|
+
| [TypeScript (Experimental)](./docs/config/typescript.md) | Document how to enable TypeScript |
|
|
376
|
+
| [@jsenv/template-pwa](https://github.com/jsenv/jsenv-template-pwa) | GitHub repository template for a progressive web application |
|
|
377
|
+
| [@jsenv/template-node-package](https://github.com/jsenv/jsenv-template-node-package) | GitHub repository template for a node package |
|
|
378
|
+
| [@jsenv/assert](https://github.com/jsenv/assert) | NPM package to write assertions |
|
|
379
|
+
| [I am too lazy for a test framework](shorturl.at/rFY39) | Article presenting a straightforward testing experience |
|
|
380
|
+
| [Jsenv compile server](./docs/jsenv-compile-server.md) | Documentation about jsenv progressive compilation with a filesystem cache |
|