Cache correct assets (GoogleChromeLabs#887)

* Cache correct assets * Update lib/entry-data-plugin.js Co-authored-by: Surma <surma@surma.dev> * Actually commit the fix this time Co-authored-by: Surma <surma@surma.dev>
SM-125F · Dec 9, 2020 · 9062a75 · 9062a75
1 parent fec826b
commit 9062a75
Show file tree

Hide file tree

Showing 9 changed files with 329 additions and 77 deletions.
diff --git a/lib/client-bundle-plugin.js b/lib/client-bundle-plugin.js
@@ -137,9 +137,10 @@ export default function (inputOptions, outputOptions, resolveFileUrl) {
       const dependencies = getDependencies(clientOutput, clientEntry);
 
       if (property.startsWith(allSrcPlaceholder)) {
-        return JSON.stringify(
-          [clientEntry.code, ...dependencies.map((d) => d.code)].join(';'),
+        const depCodes = dependencies.map(
+          (name) => clientOutput.find((item) => item.fileName === name).code,
         );
+        return JSON.stringify([clientEntry.code, ...depCodes].join(';'));
       }
 
       return (

diff --git a/lib/entry-data-plugin.js b/lib/entry-data-plugin.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getDependencies } from './client-bundle-plugin';
+import * as path from 'path';
+
+const prefix = 'entry-data:';
+const mainNamePlaceholder = 'ENTRY_DATA_PLUGIN_MAIN_NAME';
+const dependenciesPlaceholder = 'ENTRY_DATA_PLUGIN_DEPS';
+const placeholderRe = /(ENTRY_DATA_PLUGIN_(?:MAIN_NAME|DEPS))(\d+)/g;
+const filenamePrefix = 'static/';
+
+export default function entryDataPlugin() {
+  /** @type {string} */
+  let exportCounter;
+  /** @type {Map<number, string>} */
+  let counterToIdMap;
+
+  return {
+    name: 'entry-data-plugin',
+    buildStart() {
+      exportCounter = 0;
+      counterToIdMap = new Map();
+    },
+    async resolveId(id, importer) {
+      if (!id.startsWith(prefix)) return;
+      const realId = id.slice(prefix.length);
+      const resolveResult = await this.resolve(realId, importer);
+
+      if (!resolveResult) throw Error(`Cannot find ${realId}`);
+      // Add an additional .js to the end so it ends up with .js at the end in the _virtual folder.
+      return prefix + resolveResult.id + '.js';
+    },
+    load(id) {
+      if (!id.startsWith(prefix)) return;
+      const realId = id.slice(prefix.length, -'.js'.length);
+      exportCounter++;
+
+      counterToIdMap.set(exportCounter, path.normalize(realId));
+
+      return [
+        `export const main = ${mainNamePlaceholder + exportCounter};`,
+        `export const deps = ${dependenciesPlaceholder + exportCounter};`,
+      ].join('\n');
+    },
+    generateBundle(_, bundle) {
+      const chunks = Object.values(bundle).filter(
+        (item) => item.type === 'chunk',
+      );
+      for (const chunk of chunks) {
+        chunk.code = chunk.code.replace(
+          placeholderRe,
+          (_, placeholder, numStr) => {
+            const id = counterToIdMap.get(Number(numStr));
+            const chunk = chunks.find(
+              (chunk) =>
+                chunk.facadeModuleId &&
+                path.normalize(chunk.facadeModuleId) === id,
+            );
+            if (!chunk) throw Error(`Cannot find ${id}`);
+
+            if (placeholder === mainNamePlaceholder) {
+              return JSON.stringify(
+                chunk.fileName.slice(filenamePrefix.length),
+              );
+            }
+
+            return JSON.stringify(
+              getDependencies(chunks, chunk).map((item) =>
+                item.slice(filenamePrefix.length),
+              ),
+            );
+          },
+        );
+      }
+    },
+  };
+}
diff --git a/missing-types.d.ts b/missing-types.d.ts
@@ -12,6 +12,11 @@
  */
 /// <reference path="./emscripten-types.d.ts" />
 
+declare module 'entry-data:*' {
+  export const main: string;
+  export const deps: string[];
+}
+
 declare module 'url:*' {
   const value: string;
   export default value;

diff --git a/rollup.config.js b/rollup.config.js
@@ -31,6 +31,7 @@ import featurePlugin from './lib/feature-plugin';
 import initialCssPlugin from './lib/initial-css-plugin';
 import serviceWorkerPlugin from './lib/sw-plugin';
 import dataURLPlugin from './lib/data-url-plugin';
+import entryDataPlugin from './lib/entry-data-plugin';
 
 function resolveFileUrl({ fileName }) {
   return JSON.stringify(fileName.replace(/^static\//, '/'));
@@ -116,6 +117,7 @@ export default async function ({ watch }) {
             commonjs(),
             resolve(),
             replace({ __PRERENDER__: false, __PRODUCTION__: isProduction }),
+            entryDataPlugin(),
             isProduction ? terser({ module: true }) : {},
           ],
           preserveEntrySignatures: false,

diff --git a/src/features/decoders/avif/worker/avifDecode.ts b/src/features/decoders/avif/worker/avifDecode.ts
@@ -10,15 +10,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import avifDecoder, { AVIFModule } from 'codecs/avif/dec/avif_dec';
+import type { AVIFModule } from 'codecs/avif/dec/avif_dec';
 import wasmUrl from 'url:codecs/avif/dec/avif_dec.wasm';
 import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
 
 let emscriptenModule: Promise<AVIFModule>;
 
 export default async function decode(blob: Blob): Promise<ImageData> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(avifDecoder, wasmUrl);
+    const decoder = await import('codecs/avif/dec/avif_dec');
+    emscriptenModule = initEmscriptenModule(decoder.default, wasmUrl);
   }
 
   const [module, data] = await Promise.all([

diff --git a/src/features/decoders/webp/worker/webpDecode.ts b/src/features/decoders/webp/worker/webpDecode.ts
@@ -10,15 +10,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import webpDecoder, { WebPModule } from 'codecs/webp/dec/webp_dec';
+import type { WebPModule } from 'codecs/webp/dec/webp_dec';
 import wasmUrl from 'url:codecs/webp/dec/webp_dec.wasm';
 import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
 
 let emscriptenModule: Promise<WebPModule>;
 
 export default async function decode(blob: Blob): Promise<ImageData> {
   if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(webpDecoder, wasmUrl);
+    const decoder = await import('codecs/webp/dec/webp_dec');
+    emscriptenModule = initEmscriptenModule(decoder.default, wasmUrl);
   }
 
   const [module, data] = await Promise.all([

diff --git a/src/sw/index.ts b/src/sw/index.ts
@@ -19,11 +19,11 @@ self.addEventListener('install', (event) => {
   event.waitUntil(
     (async function () {
       const promises = [];
-      promises.push(cacheBasics(versionedCache, ASSETS));
+      promises.push(cacheBasics(versionedCache));
 
       // If the user has already interacted with the app, update the codecs too.
       if (await get('user-interacted')) {
-        promises.push(cacheAdditionalProcessors(versionedCache, ASSETS));
+        promises.push(cacheAdditionalProcessors(versionedCache));
       }
 
       await Promise.all(promises);
@@ -53,6 +53,11 @@ self.addEventListener('fetch', (event) => {
   // Don't care about other-origin URLs
   if (url.origin !== location.origin) return;
 
+  if (url.pathname === '/editor') {
+    event.respondWith(Response.redirect('/'));
+    return;
+  }
+
   if (
     url.pathname === '/' &&
     url.searchParams.has('share-target') &&
@@ -77,7 +82,7 @@ self.addEventListener('fetch', (event) => {
 self.addEventListener('message', (event) => {
   switch (event.data) {
     case 'cache-all':
-      event.waitUntil(cacheAdditionalProcessors(versionedCache, ASSETS));
+      event.waitUntil(cacheAdditionalProcessors(versionedCache));
       break;
     case 'skip-waiting':
       self.skipWaiting();