Update webpack-require-from to next

package.json

@@ -65,7 +65,7 @@
     "webpack": "^4.16.5",
     "webpack-assets-manifest": "^3.0.2",
     "webpack-cli": "^3.1.0",
-    "webpack-require-from": "^1.7.0",
+    "webpack-require-from": "https://github.com/agoldis/webpack-require-from.git#next",
     "worker-loader": "^2.0.0"
   }
 }

src/scripts/index.tsx

@@ -206,6 +206,10 @@ class App extends React.Component<IAppProps, IAppState> {
       onWrapToggle: this.handleWrapToggle,
     });
 
+    this.worker.postMessage({
+      path: `${window.location.protocol}//${window.location.host}/`,
+      type: WorkerMessageType.INITIALIZE,
+    });
     this.worker.addEventListener('message', this.handleWorkerMessage);
     this.requestWorkerContentRender();
   }

src/scripts/types.d.ts

@@ -7,6 +7,7 @@ export const enum Mode {
 }
 
 export const enum WorkerMessageType {
+  INITIALIZE = 'INITIALIZE',
   RESULT = 'RESULT',
   ERROR = 'ERROR',
   RENDER_CODE = 'RENDER_CODE',
@@ -33,7 +34,13 @@ interface WorkerRenderMarkdownRequestMessage {
   content: string;
 }
 
+interface WorkerInitializeRequestMessage {
+  type: WorkerMessageType.INITIALIZE;
+  path: string;
+}
+
 export type WorkerRequestMessage =
+  | WorkerInitializeRequestMessage
   | WorkerRenderCodeRequestMessage
   | WorkerListLanguagesRequestMessage
   | WorkerRenderMarkdownRequestMessage;

src/scripts/worker.ts

@@ -24,7 +24,6 @@ const getCodeRenderer = async () => {
 
 const getMarkdownRenderer = async () => {
   if (!ctx.MarkdownIt) {
-    (self as any).__webpack_public_path__ = '/assets/';
     const md = await import(/* webpackChunkName: "markdown-it" */ 'markdown-it');
     ctx.MarkdownIt = setupMarkdown(((md as any).default as typeof MarkdownIt | undefined) || md);
   }
@@ -33,7 +32,7 @@ const getMarkdownRenderer = async () => {
 };
 
 const respond = <T extends WorkerRequestMessage>(request: T, result: WorkerResultForRequest<T>) => {
-  // Unable to figure out a way to have this type more cleanly.
+  // TODO: get this to type more cleanly
   const message = {
     request,
     request_type: request.type,
@@ -50,6 +49,12 @@ ctx.addEventListener('message', async ({ data: request }) => {
 
   try {
     switch (request.type) {
+      case WorkerMessageType.INITIALIZE: {
+        (self as any).mungeImportScriptsUrl = (url: string) => {
+          return `${request.path}/assets/${url}`;
+        };
+        break;
+      }
       case WorkerMessageType.RENDER_CODE: {
         const { language, content } = request;
         const highlightJs = await getCodeRenderer();
@@ -75,13 +80,12 @@ ctx.addEventListener('message', async ({ data: request }) => {
         const _: never = request;
     }
   } catch (error) {
-    throw error;
-    // ctx.postMessage({
-    //   error: error.toString(),
-    //   request,
-    //   request_type: request.type,
-    //   type: WorkerMessageType.ERROR,
-    // });
+    ctx.postMessage({
+      error: error.toString(),
+      request,
+      request_type: request.type,
+      type: WorkerMessageType.ERROR,
+    });
   }
 });
 

webpack.config.js

@@ -85,7 +85,7 @@ module.exports = {
     }),
     new WebpackAssetsManifest(),
     new WebpackRequireFrom({
-      path: 'http://localhost:8080/',
+      replaceSrcMethodName: 'mungeImportScriptsUrl',
       suppressErrors: true,
     }),
   ],

yarn.lock

@@ -5601,9 +5601,9 @@ webpack-log@^1.1.2:
     loglevelnext "^1.0.1"
     uuid "^3.1.0"
 
-webpack-require-from@^1.7.0:
+"webpack-require-from@https://github.com/agoldis/webpack-require-from.git#next":
   version "1.7.0"
-  resolved "https://registry.yarnpkg.com/webpack-require-from/-/webpack-require-from-1.7.0.tgz#6618ef294e8070a57f32563aaf6bb04a3757f17a"
+  resolved "https://github.com/agoldis/webpack-require-from.git#2b3811bee24fb0e3ba81f052548c61c52085297d"
 
 webpack-sources@^1.0.0, webpack-sources@^1.0.1, webpack-sources@^1.1.0:
   version "1.1.0"