From e787bbd289605ba80e49488ef9b1d116687c4e2e Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Sat, 12 Dec 2020 18:54:50 -0600 Subject: [PATCH 1/5] refactor: Removing unnecessary build outputs --- .../cli/lib/lib/webpack/render-html-plugin.js | 19 ++++++++++++------- packages/cli/tests/build.test.js | 2 +- packages/cli/tests/images/build.js | 1 - 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/cli/lib/lib/webpack/render-html-plugin.js b/packages/cli/lib/lib/webpack/render-html-plugin.js index 55d365e87..c6ef14787 100644 --- a/packages/cli/lib/lib/webpack/render-html-plugin.js +++ b/packages/cli/lib/lib/webpack/render-html-plugin.js @@ -55,7 +55,7 @@ module.exports = async function (config) { writeFileSync(template, content); } - const htmlWebpackConfig = (values) => { + const htmlWebpackConfig = values => { const { url, title, ...routeData } = values; // Do not create a folder if the url is for a specific file. const filename = url.endsWith('.html') @@ -151,15 +151,20 @@ module.exports = async function (config) { * And we dont have to cache every single html file. * Go easy on network usage of clients. */ - !pages.find((page) => page.url === PREACT_FALLBACK_URL) && + !pages.find(page => page.url === PREACT_FALLBACK_URL) && + config.sw && pages.push({ url: PREACT_FALLBACK_URL }); const resultPages = pages .map(htmlWebpackConfig) - .map((conf) => new HtmlWebpackPlugin(conf)) - .concat([new HtmlWebpackExcludeAssetsPlugin()]) - .concat([...pages.map((page) => new PrerenderDataExtractPlugin(page))]); - return resultPages; + .map(conf => new HtmlWebpackPlugin(conf)) + .concat([new HtmlWebpackExcludeAssetsPlugin()]); + + return config.prerender + ? resultPages.concat([ + ...pages.map(page => new PrerenderDataExtractPlugin(page)), + ]) + : resultPages; }; // Adds a preact_prerender_data in every folder so that the data could be fetched separately. @@ -171,7 +176,7 @@ class PrerenderDataExtractPlugin { this.data_ = JSON.stringify(cliData.preRenderData || {}); } apply(compiler) { - compiler.hooks.emit.tap('PrerenderDataExtractPlugin', (compilation) => { + compiler.hooks.emit.tap('PrerenderDataExtractPlugin', compilation => { if (this.location_ === `${PREACT_FALLBACK_URL}/`) { // We dont build prerender data for `200.html`. It can re-use the one for homepage. return; diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js index 65b4ddb12..568180708 100644 --- a/packages/cli/tests/build.test.js +++ b/packages/cli/tests/build.test.js @@ -42,7 +42,7 @@ function getRegExpFromMarkup(markup) { function testMatch(src, tar) { let k, tmp; let keys = Object.keys(tar); - expect(keys).toHaveLength(Object.keys(src).length); + expect(Object.keys(src)).toHaveLength(keys.length); for (k in src) { expect(hasKey(k, keys)).toBeTruthy(); if (!isWithin(src[k], tar[tmp])) return false; diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js index afd1fcb91..617c0cde1 100644 --- a/packages/cli/tests/images/build.js +++ b/packages/cli/tests/images/build.js @@ -16,7 +16,6 @@ exports.default = exports.full = Object.assign({}, common, { 'bundle.7e56a.css': 901, 'favicon.ico': 15086, 'index.html': 2034, - '200.html': 613, 'manifest.json': 455, 'preact_prerender_data.json': 11, 'push-manifest.json': 812, From 188c4f448c120fd0f48a882287c3f8a578968130 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Sat, 12 Dec 2020 18:59:41 -0600 Subject: [PATCH 2/5] docs: Adding changeset --- .changeset/empty-ladybugs-attend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/empty-ladybugs-attend.md diff --git a/.changeset/empty-ladybugs-attend.md b/.changeset/empty-ladybugs-attend.md new file mode 100644 index 000000000..44c1d6190 --- /dev/null +++ b/.changeset/empty-ladybugs-attend.md @@ -0,0 +1,5 @@ +--- +'preact-cli': patch +--- + +CLI now only conditionally outputs 200.html & preact_prerender_data.json From df29518c6cebf72657f727d6cbc7fb2a76b9d1d3 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Sun, 13 Dec 2020 02:01:20 -0600 Subject: [PATCH 3/5] fix: Adding fallback for SW when 200.html not present --- packages/cli/sw/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/cli/sw/index.js b/packages/cli/sw/index.js index 0e2fcac15..0ef5f7870 100644 --- a/packages/cli/sw/index.js +++ b/packages/cli/sw/index.js @@ -20,7 +20,10 @@ export function setupRouting() { setCatchHandler(({ event }) => { if (isNav(event)) { - return caches.match(getCacheKeyForURL('/200.html')); + return ( + caches.match(getCacheKeyForURL('/200.html')) || + caches.match(getCacheKeyForURL('/index.html')) + ); } return Response.error(); }); From a98bec11297657e290ba3a34a1dc1337ac1ef726 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Sun, 13 Dec 2020 02:16:06 -0600 Subject: [PATCH 4/5] test: Correcting SW test --- packages/cli/tests/service-worker.test.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/cli/tests/service-worker.test.js b/packages/cli/tests/service-worker.test.js index 4bd11391c..30b8c51a5 100644 --- a/packages/cli/tests/service-worker.test.js +++ b/packages/cli/tests/service-worker.test.js @@ -9,7 +9,7 @@ async function enableOfflineMode(page, browser) { await sleep(2000); // wait for service worker installation. await page.setOfflineMode(true); const targets = await browser.targets(); - const serviceWorker = targets.find((t) => t.type() === 'service_worker'); + const serviceWorker = targets.find(t => t.type() === 'service_worker'); const serviceWorkerConnection = await serviceWorker.createCDPSession(); await serviceWorkerConnection.send('Network.enable'); await serviceWorkerConnection.send('Network.emulateNetworkConditions', { @@ -57,7 +57,7 @@ describe('preact service worker tests', () => { const offlineContent = await page.content(); await page.waitForSelector('h1'); expect( - await page.$$eval('h1', (nodes) => nodes.map((n) => n.innerText)) + await page.$$eval('h1', nodes => nodes.map(n => n.innerText)) ).toEqual(['Preact App', 'Home']); expect(offlineContent).not.toEqual(initialContent); }); @@ -86,12 +86,12 @@ describe('preact service worker tests', () => { }); it('should respond with 200.html when offline', async () => { - const swText = await fetch('http://localhost:3000/sw-esm.js').then((res) => + const swText = await fetch('http://localhost:3000/sw-esm.js').then(res => res.text() ); // eslint-disable-next-line no-useless-escape expect(swText).toContain( - 'caches.match((t="/200.html",ce().getCacheKeyForURL(t)))' + 'caches.match(T("/200.html"))||caches.match(T("/index.html"))' ); const page = await browser.newPage(); await page.setCacheEnabled(false); @@ -101,8 +101,8 @@ describe('preact service worker tests', () => { await enableOfflineMode(page, browser); await page.reload({ waitUntil: 'networkidle0' }); expect( - await page.$$eval('script[type=__PREACT_CLI_DATA__]', (nodes) => - nodes.map((n) => n.innerText) + await page.$$eval('script[type=__PREACT_CLI_DATA__]', nodes => + nodes.map(n => n.innerText) ) ).toEqual(['%7B%22preRenderData%22:%7B%22url%22:%22/200.html%22%7D%7D']); }); From 392dcc50540fd51c11c80becdb56b29917a061f1 Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Tue, 22 Dec 2020 00:45:44 -0600 Subject: [PATCH 5/5] fix: PR comments --- packages/cli/sw/index.js | 5 ++--- packages/cli/tests/service-worker.test.js | 4 +--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/cli/sw/index.js b/packages/cli/sw/index.js index 0ef5f7870..52259f9ae 100644 --- a/packages/cli/sw/index.js +++ b/packages/cli/sw/index.js @@ -20,9 +20,8 @@ export function setupRouting() { setCatchHandler(({ event }) => { if (isNav(event)) { - return ( - caches.match(getCacheKeyForURL('/200.html')) || - caches.match(getCacheKeyForURL('/index.html')) + return caches.match( + getCacheKeyForURL('/200.html') || getCacheKeyForURL('/index.html') ); } return Response.error(); diff --git a/packages/cli/tests/service-worker.test.js b/packages/cli/tests/service-worker.test.js index 30b8c51a5..4cd43ecb9 100644 --- a/packages/cli/tests/service-worker.test.js +++ b/packages/cli/tests/service-worker.test.js @@ -90,9 +90,7 @@ describe('preact service worker tests', () => { res.text() ); // eslint-disable-next-line no-useless-escape - expect(swText).toContain( - 'caches.match(T("/200.html"))||caches.match(T("/index.html"))' - ); + expect(swText).toContain('caches.match(T("/200.html")||T("/index.html"))'); const page = await browser.newPage(); await page.setCacheEnabled(false); await page.goto('http://localhost:3000', {