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 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/sw/index.js b/packages/cli/sw/index.js index 0e2fcac15..52259f9ae 100644 --- a/packages/cli/sw/index.js +++ b/packages/cli/sw/index.js @@ -20,7 +20,9 @@ export function setupRouting() { setCatchHandler(({ event }) => { if (isNav(event)) { - return caches.match(getCacheKeyForURL('/200.html')); + return caches.match( + getCacheKeyForURL('/200.html') || getCacheKeyForURL('/index.html') + ); } return Response.error(); }); 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, diff --git a/packages/cli/tests/service-worker.test.js b/packages/cli/tests/service-worker.test.js index 4bd11391c..4cd43ecb9 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,13 +86,11 @@ 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)))' - ); + 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', { @@ -101,8 +99,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']); });