diff --git a/examples/resources/common.js b/examples/resources/common.js
index 893fe51c1a..a59685d3d5 100644
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -57,6 +57,8 @@
event.preventDefault();
const html = document.getElementById('example-html-source').innerText;
const js = document.getElementById('example-js-source').innerText;
+ const workerContainer = document.getElementById('example-worker-source');
+ const worker = workerContainer ? workerContainer.innerText : undefined;
const pkgJson = document.getElementById('example-pkg-source').innerText;
const form = document.getElementById('codepen-form');
@@ -68,22 +70,28 @@
Promise.all(promises)
.then(results => {
- const data = {
- files: {
- 'index.html': {
- content: html
- },
- 'index.js': {
- content: js
- },
- "package.json": {
- content: pkgJson
- },
- 'sandbox.config.json': {
- content: '{"template": "parcel"}'
- }
+ const files = {
+ 'index.html': {
+ content: html
+ },
+ 'index.js': {
+ content: js
+ },
+ "package.json": {
+ content: pkgJson
+ },
+ 'sandbox.config.json': {
+ content: '{"template": "parcel"}'
}
};
+ if (worker) {
+ files['worker.js'] = {
+ content: worker
+ }
+ }
+ const data = {
+ files: files
+ };
for (let i = 0; i < localResources.length; i++) {
data.files[localResources[i]] = results[i];
diff --git a/examples/templates/example.html b/examples/templates/example.html
index a45f88e7be..b0c5cee4b7 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -160,6 +160,14 @@
import 'ol/ol.css';
{{ js.source }}
+{{#if worker.source}}
+
+
+
{{ worker.source }}
+
+{{/if}}
Copy
@@ -167,7 +175,6 @@
{{ pkgJson }}
-
{{{ js.tag }}}
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index 22a7867500..d25306b897 100644
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -208,6 +208,10 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
jsSource = jsSource.replace(new RegExp(entry.key, 'g'), entry.value);
}
}
+ // Remove worker loader import and modify `new Worker()` to add source
+ jsSource = jsSource.replace(/import Worker from 'worker-loader![^\n]*\n/g, '');
+ jsSource = jsSource.replace('new Worker()', 'new Worker(\'./worker.js\')');
+
data.js = {
tag: ``,
source: jsSource
@@ -218,9 +222,33 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
data.js.tag = prelude + data.js.tag;
}
+ // check for worker js
+ const workerName = `${name}.worker.js`;
+ const workerPath = path.join(dir, workerName);
+ let workerSource;
+ try {
+ workerSource = await readFile(workerPath, readOptions);
+ } catch (err) {
+ // pass
+ }
+ if (workerSource) {
+ // remove "../src/" prefix and ".js" to have the same import syntax as the documentation
+ workerSource = workerSource.replace(/'\.\.\/src\//g, '\'');
+ workerSource = workerSource.replace(/\.js';/g, '\';');
+ if (data.cloak) {
+ for (const entry of data.cloak) {
+ workerSource = workerSource.replace(new RegExp(entry.key, 'g'), entry.value);
+ }
+ }
+ data.worker = {
+ source: workerSource
+ };
+ assets[workerName] = workerSource;
+ }
+
data.pkgJson = JSON.stringify({
name: name,
- dependencies: getDependencies(jsSource),
+ dependencies: getDependencies(jsSource + workerSource ? `\n${workerSource}` : ''),
devDependencies: {
parcel: '1.11.0'
},