This repository was archived by the owner on Sep 9, 2021. It is now read-only.
feat: add option crossOrigin
#291
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /* eslint-env browser */ | ||
| /* eslint-disable no-undef, no-use-before-define, new-cap */ | ||
| // initial solution by Benohead's Software Blog https://benohead.com/blog/2017/12/06/cross-domain-cross-browser-web-workers/ | ||
|
|
||
| module.exports = (workerConstructor, workerOptions, workerUrl) => { | ||
| let worker = null; | ||
| let blob; | ||
|
|
||
| try { | ||
| blob = new Blob([`importScripts('${workerUrl}');`], { | ||
| type: 'application/javascript', | ||
| }); | ||
| } catch (e) { | ||
| const BlobBuilder = | ||
| window.BlobBuilder || | ||
| window.WebKitBlobBuilder || | ||
| window.MozBlobBuilder || | ||
| window.MSBlobBuilder; | ||
|
|
||
| blobBuilder = new BlobBuilder(); | ||
|
|
||
| blobBuilder.append(`importScripts('${workerUrl}');`); | ||
|
|
||
| blob = blobBuilder.getBlob('application/javascript'); | ||
| } | ||
|
|
||
| const URL = window.URL || window.webkitURL; | ||
| const blobUrl = URL.createObjectURL(blob); | ||
| worker = new window[workerConstructor](blobUrl, workerOptions); | ||
|
|
||
| URL.revokeObjectURL(blobUrl); | ||
|
|
||
| return worker; | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`"crossOrigin" option should not work by default: errors 1`] = `Array []`; | ||
|
|
||
| exports[`"crossOrigin" option should not work by default: module 1`] = ` | ||
| "export default function() { | ||
| return new Worker(__webpack_public_path__ + \\"test.worker.js\\"); | ||
| } | ||
| " | ||
| `; | ||
|
|
||
| exports[`"crossOrigin" option should not work by default: result 1`] = `"{\\"postMessage\\":true,\\"onmessage\\":true}"`; | ||
|
|
||
| exports[`"crossOrigin" option should not work by default: warnings 1`] = `Array []`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled and "esModule" with "false" value: errors 1`] = `Array []`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled and "esModule" with "false" value: result 1`] = `"{\\"postMessage\\":true,\\"onmessage\\":true}"`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled and "esModule" with "false" value: warnings 1`] = `Array []`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled and "esModule" with "true" value: errors 1`] = `Array []`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled and "esModule" with "true" value: result 1`] = `"{\\"postMessage\\":true,\\"onmessage\\":true}"`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled and "esModule" with "true" value: warnings 1`] = `Array []`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled: errors 1`] = `Array []`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled: result 1`] = `"{\\"postMessage\\":true,\\"onmessage\\":true}"`; | ||
|
|
||
| exports[`"crossOrigin" option should work with crossOrigin enabled: warnings 1`] = `Array []`; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import getPort from 'get-port'; | ||
|
|
||
| import { | ||
| compile, | ||
| getCompiler, | ||
| getErrors, | ||
| getModuleSource, | ||
| getResultFromBrowser, | ||
| getWarnings, | ||
| } from './helpers'; | ||
|
|
||
| describe('"crossOrigin" option', () => { | ||
| it('should not work by default', async () => { | ||
| const compiler = getCompiler('./basic/entry.js'); | ||
| const stats = await compile(compiler); | ||
| const result = await getResultFromBrowser(stats); | ||
|
|
||
| expect(getModuleSource('./basic/worker.js', stats)).toMatchSnapshot( | ||
| 'module' | ||
| ); | ||
| expect(stats.compilation.assets['test.worker.js']).toBeDefined(); | ||
| expect(result).toMatchSnapshot('result'); | ||
| expect(getWarnings(stats)).toMatchSnapshot('warnings'); | ||
| expect(getErrors(stats)).toMatchSnapshot('errors'); | ||
| }); | ||
|
|
||
| it('should work with crossOrigin enabled', async () => { | ||
| const port = await getPort(); | ||
| const compiler = getCompiler('./basic/entry.js', { | ||
| crossOrigin: `http://localhost:${port}/public-path-static/`, | ||
| }); | ||
| const stats = await compile(compiler); | ||
| const result = await getResultFromBrowser(stats, port); | ||
| const moduleSource = getModuleSource('./basic/worker.js', stats); | ||
|
|
||
| expect(moduleSource.indexOf('crossOrigin.js') > 0).toBe(true); | ||
| expect( | ||
| moduleSource.indexOf('__webpack_public_path__ + "test.worker.js"') === -1 | ||
| ).toBe(true); | ||
| expect( | ||
| moduleSource.indexOf( | ||
| `"http://localhost:${port}/public-path-static/" + "test.worker.js"` | ||
| ) > 0 | ||
| ).toBe(true); | ||
| expect(stats.compilation.assets['test.worker.js']).toBeDefined(); | ||
| expect(result).toMatchSnapshot('result'); | ||
| expect(getWarnings(stats)).toMatchSnapshot('warnings'); | ||
| expect(getErrors(stats)).toMatchSnapshot('errors'); | ||
| }); | ||
|
|
||
| it('should work with crossOrigin enabled and "esModule" with "false" value', async () => { | ||
| const port = await getPort(); | ||
| const compiler = getCompiler('./basic/entry.js', { | ||
| crossOrigin: `http://localhost:${port}/public-path-static/`, | ||
| esModule: false, | ||
| }); | ||
| const stats = await compile(compiler); | ||
| const result = await getResultFromBrowser(stats, port); | ||
| const moduleSource = getModuleSource('./basic/worker.js', stats); | ||
|
|
||
| expect(moduleSource.indexOf('crossOrigin.js') > 0).toBe(true); | ||
| expect( | ||
| moduleSource.indexOf('__webpack_public_path__ + "test.worker.js"') === -1 | ||
| ).toBe(true); | ||
| expect( | ||
| moduleSource.indexOf( | ||
| `"http://localhost:${port}/public-path-static/" + "test.worker.js"` | ||
| ) > 0 | ||
| ).toBe(true); | ||
| expect(stats.compilation.assets['test.worker.js']).toBeDefined(); | ||
| expect(result).toMatchSnapshot('result'); | ||
| expect(getWarnings(stats)).toMatchSnapshot('warnings'); | ||
| expect(getErrors(stats)).toMatchSnapshot('errors'); | ||
| }); | ||
|
|
||
| it('should work with crossOrigin enabled and "esModule" with "true" value', async () => { | ||
| const port = await getPort(); | ||
| const compiler = getCompiler('./basic/entry.js', { | ||
| crossOrigin: `http://localhost:${port}/public-path-static/`, | ||
| esModule: true, | ||
| }); | ||
| const stats = await compile(compiler); | ||
| const result = await getResultFromBrowser(stats, port); | ||
| const moduleSource = getModuleSource('./basic/worker.js', stats); | ||
|
|
||
| expect(moduleSource.indexOf('crossOrigin.js') > 0).toBe(true); | ||
| expect( | ||
| moduleSource.indexOf('__webpack_public_path__ + "test.worker.js"') === -1 | ||
| ).toBe(true); | ||
| expect( | ||
| moduleSource.indexOf( | ||
| `"http://localhost:${port}/public-path-static/" + "test.worker.js"` | ||
| ) > 0 | ||
| ).toBe(true); | ||
| expect(stats.compilation.assets['test.worker.js']).toBeDefined(); | ||
| expect(result).toMatchSnapshot('result'); | ||
| expect(getWarnings(stats)).toMatchSnapshot('warnings'); | ||
| expect(getErrors(stats)).toMatchSnapshot('errors'); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am fine with this PR, but let's do better name for this option,
crossOriginsounds misleading even for me although I understand that we are trying to solve thisThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe
originPath?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change runtime logic, so I think we should point it out
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe
workerChunkUrl? Hard for me too, here we have two changes, usingimport-scriptsand pass filename like URL, it can be misleading withinline, I think ideally we should havechunkLoadingType: 'inline-fallback' | 'inline-no-fallback' | 'import-scripts'and setpublicPathtoAbsoluteURL, in runtime we should dopublicPath+filenameforimport-scriptsThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I understand the need to use
publicPathbut there's a need to have different public paths for different assets. Maybe I should test whether I can changepublicPathon the fly before importing worker. Also why do you refer to worker as "chunk" instead of "script"? Maybe have something likescriptType: "inline-fallback" | "inline-no-fallback" | "import-scripts"?