From 5f44b0ab854e68258392e81407091d7586aa7042 Mon Sep 17 00:00:00 2001 From: Ronan Doherty Date: Fri, 2 Oct 2020 20:12:50 +0100 Subject: [PATCH 1/5] Fix #1579 Includes tests. --- test/apps/css-nested-layout/rollup.config.js | 61 ++++++++++++++ test/apps/css-nested-layout/src/client.js | 9 ++ .../src/routes/_components/Test.svelte | 8 ++ .../src/routes/_error.svelte | 18 ++++ .../css-nested-layout/src/routes/index.svelte | 7 ++ .../src/routes/nested/_layout.svelte | 17 ++++ .../src/routes/nested/index.svelte | 1 + test/apps/css-nested-layout/src/server.js | 9 ++ .../css-nested-layout/src/service-worker.js | 82 +++++++++++++++++++ test/apps/css-nested-layout/src/template.html | 14 ++++ test/apps/css-nested-layout/test.ts | 40 +++++++++ 11 files changed, 266 insertions(+) create mode 100644 test/apps/css-nested-layout/rollup.config.js create mode 100644 test/apps/css-nested-layout/src/client.js create mode 100644 test/apps/css-nested-layout/src/routes/_components/Test.svelte create mode 100644 test/apps/css-nested-layout/src/routes/_error.svelte create mode 100644 test/apps/css-nested-layout/src/routes/index.svelte create mode 100644 test/apps/css-nested-layout/src/routes/nested/_layout.svelte create mode 100644 test/apps/css-nested-layout/src/routes/nested/index.svelte create mode 100644 test/apps/css-nested-layout/src/server.js create mode 100644 test/apps/css-nested-layout/src/service-worker.js create mode 100644 test/apps/css-nested-layout/src/template.html create mode 100644 test/apps/css-nested-layout/test.ts diff --git a/test/apps/css-nested-layout/rollup.config.js b/test/apps/css-nested-layout/rollup.config.js new file mode 100644 index 000000000..5f27c37ce --- /dev/null +++ b/test/apps/css-nested-layout/rollup.config.js @@ -0,0 +1,61 @@ +import resolve from '@rollup/plugin-node-resolve'; +import replace from '@rollup/plugin-replace'; +import svelte from 'rollup-plugin-svelte'; + +const mode = process.env.NODE_ENV; +const dev = mode === 'development'; + +const config = require('../../../config/rollup.js'); + +export default { + client: { + input: config.client.input(), + output: config.client.output(), + plugins: [ + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + dev, + hydratable: true, + emitCss: true + }), + resolve() + ], + preserveEntrySignatures: false + }, + + server: { + input: config.server.input(), + output: config.server.output(), + plugins: [ + replace({ + 'process.browser': false, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + generate: 'ssr', + dev + }), + resolve({ + preferBuiltins: true + }) + ], + external: ['sirv', 'polka'], + preserveEntrySignatures: 'strict' + }, + + serviceworker: { + input: config.serviceworker.input(), + output: config.serviceworker.output(), + plugins: [ + resolve(), + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }) + ], + preserveEntrySignatures: false + } +}; \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/client.js b/test/apps/css-nested-layout/src/client.js new file mode 100644 index 000000000..6cce7e658 --- /dev/null +++ b/test/apps/css-nested-layout/src/client.js @@ -0,0 +1,9 @@ +import * as sapper from '@sapper/app'; + +window.start = () => sapper.start({ + target: document.querySelector('#sapper') +}); + +window.prefetchRoutes = () => sapper.prefetchRoutes(); +window.prefetch = href => sapper.prefetch(href); +window.goto = href => sapper.goto(href); \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/_components/Test.svelte b/test/apps/css-nested-layout/src/routes/_components/Test.svelte new file mode 100644 index 000000000..b7893e145 --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/_components/Test.svelte @@ -0,0 +1,8 @@ +

This is content defined in a component imported by a layout in a nested routes.

+ + \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/_error.svelte b/test/apps/css-nested-layout/src/routes/_error.svelte new file mode 100644 index 000000000..acaa3e38b --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/_error.svelte @@ -0,0 +1,18 @@ + + + + +

This is an error page

+ +

{status}

+ +

{error.message}

+ +
{error.stack}
diff --git a/test/apps/css-nested-layout/src/routes/index.svelte b/test/apps/css-nested-layout/src/routes/index.svelte new file mode 100644 index 000000000..39cddd335 --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/index.svelte @@ -0,0 +1,7 @@ +

Great success!

+ + \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/nested/_layout.svelte b/test/apps/css-nested-layout/src/routes/nested/_layout.svelte new file mode 100644 index 000000000..6380b6ed6 --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/nested/_layout.svelte @@ -0,0 +1,17 @@ + + +

This is content defined in a layout in a nested route. It should have a green background.

+ + + + + + \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/nested/index.svelte b/test/apps/css-nested-layout/src/routes/nested/index.svelte new file mode 100644 index 000000000..8fadab4ac --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/nested/index.svelte @@ -0,0 +1 @@ +

This is slotted page content in a nested routes.

\ No newline at end of file diff --git a/test/apps/css-nested-layout/src/server.js b/test/apps/css-nested-layout/src/server.js new file mode 100644 index 000000000..e33d80400 --- /dev/null +++ b/test/apps/css-nested-layout/src/server.js @@ -0,0 +1,9 @@ +import polka from 'polka'; +import * as sapper from '@sapper/server'; + +import { start } from '../../common.js'; + +const app = polka() + .use(sapper.middleware()); + +start(app); diff --git a/test/apps/css-nested-layout/src/service-worker.js b/test/apps/css-nested-layout/src/service-worker.js new file mode 100644 index 000000000..4ba51adc3 --- /dev/null +++ b/test/apps/css-nested-layout/src/service-worker.js @@ -0,0 +1,82 @@ +import * as sapper from '@sapper/service-worker'; + +const ASSETS = `cache${sapper.timestamp}`; + +// `shell` is an array of all the files generated by webpack, +// `files` is an array of everything in the `static` directory +const to_cache = sapper.shell.concat(sapper.files); +const cached = new Set(to_cache); + +self.addEventListener('install', event => { + event.waitUntil( + caches + .open(ASSETS) + .then(cache => cache.addAll(to_cache)) + .then(() => { + self.skipWaiting(); + }) + ); +}); + +self.addEventListener('activate', event => { + event.waitUntil( + caches.keys().then(async keys => { + // delete old caches + for (const key of keys) { + if (key !== ASSETS) await caches.delete(key); + } + + self.clients.claim(); + }) + ); +}); + +self.addEventListener('fetch', event => { + if (event.request.method !== 'GET') return; + + const url = new URL(event.request.url); + + // don't try to handle e.g. data: URIs + if (!url.protocol.startsWith('http')) return; + + // ignore dev server requests + if (url.hostname === self.location.hostname && url.port !== self.location.port) return; + + // always serve assets and webpack-generated files from cache + if (url.host === self.location.host && cached.has(url.pathname)) { + event.respondWith(caches.match(event.request)); + return; + } + + // for pages, you might want to serve a shell `index.html` file, + // which Sapper has generated for you. It's not right for every + // app, but if it's right for yours then uncomment this section + /* + if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) { + event.respondWith(caches.match('/index.html')); + return; + } + */ + + if (event.request.cache === 'only-if-cached') return; + + // for everything else, try the network first, falling back to + // cache if the user is offline. (If the pages never change, you + // might prefer a cache-first approach to a network-first one.) + event.respondWith( + caches + .open(`offline${sapper.timestamp}`) + .then(async cache => { + try { + const response = await fetch(event.request); + cache.put(event.request, response.clone()); + return response; + } catch (err) { + const response = await cache.match(event.request); + if (response) return response; + + throw err; + } + }) + ); +}); diff --git a/test/apps/css-nested-layout/src/template.html b/test/apps/css-nested-layout/src/template.html new file mode 100644 index 000000000..75027cea6 --- /dev/null +++ b/test/apps/css-nested-layout/src/template.html @@ -0,0 +1,14 @@ + + + + + + %sapper.base% + %sapper.styles% + %sapper.head% + %sapper.scripts% + + +
%sapper.html%
+ + diff --git a/test/apps/css-nested-layout/test.ts b/test/apps/css-nested-layout/test.ts new file mode 100644 index 000000000..0732c408c --- /dev/null +++ b/test/apps/css-nested-layout/test.ts @@ -0,0 +1,40 @@ +import * as assert from 'assert'; +import { build } from '../../../api'; +import { AppRunner } from '../AppRunner'; + +describe('css-nested-layout', function() { + this.timeout(10000); + + let r: AppRunner; + + // hooks + before('build app', () => build({ cwd: __dirname })); + before('start runner', async () => { + r = await new AppRunner().start(__dirname); + }); + + after(() => r && r.end()); + + // tests + it('includes CSS defined in nested layout with server render', async () => { + await r.load('/nested'); + + assert.strictEqual( + await r.page.$eval('h2', node => getComputedStyle(node).backgroundColor), + 'rgb(0, 128, 0)' + ); + }); + + it('includes CSS defined in component imported by nested layout with server render', async () => { + await r.load('/nested'); + + assert.strictEqual( + await r.page.$eval('h3', node => getComputedStyle(node).backgroundColor), + 'rgb(255, 0, 0)' + ); + }); + + it('survives the tests with no server errors', () => { + assert.deepStrictEqual(r.errors, []); + }); +}); From f2cb6f44bd84e6a7881abc20aa1795275d342d4c Mon Sep 17 00:00:00 2001 From: Ronan Doherty Date: Fri, 2 Oct 2020 20:18:18 +0100 Subject: [PATCH 2/5] Revert "Fix #1579" This reverts commit 5f44b0ab854e68258392e81407091d7586aa7042. --- test/apps/css-nested-layout/rollup.config.js | 61 -------------- test/apps/css-nested-layout/src/client.js | 9 -- .../src/routes/_components/Test.svelte | 8 -- .../src/routes/_error.svelte | 18 ---- .../css-nested-layout/src/routes/index.svelte | 7 -- .../src/routes/nested/_layout.svelte | 17 ---- .../src/routes/nested/index.svelte | 1 - test/apps/css-nested-layout/src/server.js | 9 -- .../css-nested-layout/src/service-worker.js | 82 ------------------- test/apps/css-nested-layout/src/template.html | 14 ---- test/apps/css-nested-layout/test.ts | 40 --------- 11 files changed, 266 deletions(-) delete mode 100644 test/apps/css-nested-layout/rollup.config.js delete mode 100644 test/apps/css-nested-layout/src/client.js delete mode 100644 test/apps/css-nested-layout/src/routes/_components/Test.svelte delete mode 100644 test/apps/css-nested-layout/src/routes/_error.svelte delete mode 100644 test/apps/css-nested-layout/src/routes/index.svelte delete mode 100644 test/apps/css-nested-layout/src/routes/nested/_layout.svelte delete mode 100644 test/apps/css-nested-layout/src/routes/nested/index.svelte delete mode 100644 test/apps/css-nested-layout/src/server.js delete mode 100644 test/apps/css-nested-layout/src/service-worker.js delete mode 100644 test/apps/css-nested-layout/src/template.html delete mode 100644 test/apps/css-nested-layout/test.ts diff --git a/test/apps/css-nested-layout/rollup.config.js b/test/apps/css-nested-layout/rollup.config.js deleted file mode 100644 index 5f27c37ce..000000000 --- a/test/apps/css-nested-layout/rollup.config.js +++ /dev/null @@ -1,61 +0,0 @@ -import resolve from '@rollup/plugin-node-resolve'; -import replace from '@rollup/plugin-replace'; -import svelte from 'rollup-plugin-svelte'; - -const mode = process.env.NODE_ENV; -const dev = mode === 'development'; - -const config = require('../../../config/rollup.js'); - -export default { - client: { - input: config.client.input(), - output: config.client.output(), - plugins: [ - replace({ - 'process.browser': true, - 'process.env.NODE_ENV': JSON.stringify(mode) - }), - svelte({ - dev, - hydratable: true, - emitCss: true - }), - resolve() - ], - preserveEntrySignatures: false - }, - - server: { - input: config.server.input(), - output: config.server.output(), - plugins: [ - replace({ - 'process.browser': false, - 'process.env.NODE_ENV': JSON.stringify(mode) - }), - svelte({ - generate: 'ssr', - dev - }), - resolve({ - preferBuiltins: true - }) - ], - external: ['sirv', 'polka'], - preserveEntrySignatures: 'strict' - }, - - serviceworker: { - input: config.serviceworker.input(), - output: config.serviceworker.output(), - plugins: [ - resolve(), - replace({ - 'process.browser': true, - 'process.env.NODE_ENV': JSON.stringify(mode) - }) - ], - preserveEntrySignatures: false - } -}; \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/client.js b/test/apps/css-nested-layout/src/client.js deleted file mode 100644 index 6cce7e658..000000000 --- a/test/apps/css-nested-layout/src/client.js +++ /dev/null @@ -1,9 +0,0 @@ -import * as sapper from '@sapper/app'; - -window.start = () => sapper.start({ - target: document.querySelector('#sapper') -}); - -window.prefetchRoutes = () => sapper.prefetchRoutes(); -window.prefetch = href => sapper.prefetch(href); -window.goto = href => sapper.goto(href); \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/_components/Test.svelte b/test/apps/css-nested-layout/src/routes/_components/Test.svelte deleted file mode 100644 index b7893e145..000000000 --- a/test/apps/css-nested-layout/src/routes/_components/Test.svelte +++ /dev/null @@ -1,8 +0,0 @@ -

This is content defined in a component imported by a layout in a nested routes.

- - \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/_error.svelte b/test/apps/css-nested-layout/src/routes/_error.svelte deleted file mode 100644 index acaa3e38b..000000000 --- a/test/apps/css-nested-layout/src/routes/_error.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - - -

This is an error page

- -

{status}

- -

{error.message}

- -
{error.stack}
diff --git a/test/apps/css-nested-layout/src/routes/index.svelte b/test/apps/css-nested-layout/src/routes/index.svelte deleted file mode 100644 index 39cddd335..000000000 --- a/test/apps/css-nested-layout/src/routes/index.svelte +++ /dev/null @@ -1,7 +0,0 @@ -

Great success!

- - \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/nested/_layout.svelte b/test/apps/css-nested-layout/src/routes/nested/_layout.svelte deleted file mode 100644 index 6380b6ed6..000000000 --- a/test/apps/css-nested-layout/src/routes/nested/_layout.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - -

This is content defined in a layout in a nested route. It should have a green background.

- - - - - - \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/nested/index.svelte b/test/apps/css-nested-layout/src/routes/nested/index.svelte deleted file mode 100644 index 8fadab4ac..000000000 --- a/test/apps/css-nested-layout/src/routes/nested/index.svelte +++ /dev/null @@ -1 +0,0 @@ -

This is slotted page content in a nested routes.

\ No newline at end of file diff --git a/test/apps/css-nested-layout/src/server.js b/test/apps/css-nested-layout/src/server.js deleted file mode 100644 index e33d80400..000000000 --- a/test/apps/css-nested-layout/src/server.js +++ /dev/null @@ -1,9 +0,0 @@ -import polka from 'polka'; -import * as sapper from '@sapper/server'; - -import { start } from '../../common.js'; - -const app = polka() - .use(sapper.middleware()); - -start(app); diff --git a/test/apps/css-nested-layout/src/service-worker.js b/test/apps/css-nested-layout/src/service-worker.js deleted file mode 100644 index 4ba51adc3..000000000 --- a/test/apps/css-nested-layout/src/service-worker.js +++ /dev/null @@ -1,82 +0,0 @@ -import * as sapper from '@sapper/service-worker'; - -const ASSETS = `cache${sapper.timestamp}`; - -// `shell` is an array of all the files generated by webpack, -// `files` is an array of everything in the `static` directory -const to_cache = sapper.shell.concat(sapper.files); -const cached = new Set(to_cache); - -self.addEventListener('install', event => { - event.waitUntil( - caches - .open(ASSETS) - .then(cache => cache.addAll(to_cache)) - .then(() => { - self.skipWaiting(); - }) - ); -}); - -self.addEventListener('activate', event => { - event.waitUntil( - caches.keys().then(async keys => { - // delete old caches - for (const key of keys) { - if (key !== ASSETS) await caches.delete(key); - } - - self.clients.claim(); - }) - ); -}); - -self.addEventListener('fetch', event => { - if (event.request.method !== 'GET') return; - - const url = new URL(event.request.url); - - // don't try to handle e.g. data: URIs - if (!url.protocol.startsWith('http')) return; - - // ignore dev server requests - if (url.hostname === self.location.hostname && url.port !== self.location.port) return; - - // always serve assets and webpack-generated files from cache - if (url.host === self.location.host && cached.has(url.pathname)) { - event.respondWith(caches.match(event.request)); - return; - } - - // for pages, you might want to serve a shell `index.html` file, - // which Sapper has generated for you. It's not right for every - // app, but if it's right for yours then uncomment this section - /* - if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) { - event.respondWith(caches.match('/index.html')); - return; - } - */ - - if (event.request.cache === 'only-if-cached') return; - - // for everything else, try the network first, falling back to - // cache if the user is offline. (If the pages never change, you - // might prefer a cache-first approach to a network-first one.) - event.respondWith( - caches - .open(`offline${sapper.timestamp}`) - .then(async cache => { - try { - const response = await fetch(event.request); - cache.put(event.request, response.clone()); - return response; - } catch (err) { - const response = await cache.match(event.request); - if (response) return response; - - throw err; - } - }) - ); -}); diff --git a/test/apps/css-nested-layout/src/template.html b/test/apps/css-nested-layout/src/template.html deleted file mode 100644 index 75027cea6..000000000 --- a/test/apps/css-nested-layout/src/template.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - %sapper.base% - %sapper.styles% - %sapper.head% - %sapper.scripts% - - -
%sapper.html%
- - diff --git a/test/apps/css-nested-layout/test.ts b/test/apps/css-nested-layout/test.ts deleted file mode 100644 index 0732c408c..000000000 --- a/test/apps/css-nested-layout/test.ts +++ /dev/null @@ -1,40 +0,0 @@ -import * as assert from 'assert'; -import { build } from '../../../api'; -import { AppRunner } from '../AppRunner'; - -describe('css-nested-layout', function() { - this.timeout(10000); - - let r: AppRunner; - - // hooks - before('build app', () => build({ cwd: __dirname })); - before('start runner', async () => { - r = await new AppRunner().start(__dirname); - }); - - after(() => r && r.end()); - - // tests - it('includes CSS defined in nested layout with server render', async () => { - await r.load('/nested'); - - assert.strictEqual( - await r.page.$eval('h2', node => getComputedStyle(node).backgroundColor), - 'rgb(0, 128, 0)' - ); - }); - - it('includes CSS defined in component imported by nested layout with server render', async () => { - await r.load('/nested'); - - assert.strictEqual( - await r.page.$eval('h3', node => getComputedStyle(node).backgroundColor), - 'rgb(255, 0, 0)' - ); - }); - - it('survives the tests with no server errors', () => { - assert.deepStrictEqual(r.errors, []); - }); -}); From b3d42c360330a365fa2148c6a9073becbc878cd4 Mon Sep 17 00:00:00 2001 From: Ronan Doherty Date: Fri, 2 Oct 2020 20:19:06 +0100 Subject: [PATCH 3/5] Revert "Revert "Fix #1579"" This reverts commit f2cb6f44bd84e6a7881abc20aa1795275d342d4c. --- test/apps/css-nested-layout/rollup.config.js | 61 ++++++++++++++ test/apps/css-nested-layout/src/client.js | 9 ++ .../src/routes/_components/Test.svelte | 8 ++ .../src/routes/_error.svelte | 18 ++++ .../css-nested-layout/src/routes/index.svelte | 7 ++ .../src/routes/nested/_layout.svelte | 17 ++++ .../src/routes/nested/index.svelte | 1 + test/apps/css-nested-layout/src/server.js | 9 ++ .../css-nested-layout/src/service-worker.js | 82 +++++++++++++++++++ test/apps/css-nested-layout/src/template.html | 14 ++++ test/apps/css-nested-layout/test.ts | 40 +++++++++ 11 files changed, 266 insertions(+) create mode 100644 test/apps/css-nested-layout/rollup.config.js create mode 100644 test/apps/css-nested-layout/src/client.js create mode 100644 test/apps/css-nested-layout/src/routes/_components/Test.svelte create mode 100644 test/apps/css-nested-layout/src/routes/_error.svelte create mode 100644 test/apps/css-nested-layout/src/routes/index.svelte create mode 100644 test/apps/css-nested-layout/src/routes/nested/_layout.svelte create mode 100644 test/apps/css-nested-layout/src/routes/nested/index.svelte create mode 100644 test/apps/css-nested-layout/src/server.js create mode 100644 test/apps/css-nested-layout/src/service-worker.js create mode 100644 test/apps/css-nested-layout/src/template.html create mode 100644 test/apps/css-nested-layout/test.ts diff --git a/test/apps/css-nested-layout/rollup.config.js b/test/apps/css-nested-layout/rollup.config.js new file mode 100644 index 000000000..5f27c37ce --- /dev/null +++ b/test/apps/css-nested-layout/rollup.config.js @@ -0,0 +1,61 @@ +import resolve from '@rollup/plugin-node-resolve'; +import replace from '@rollup/plugin-replace'; +import svelte from 'rollup-plugin-svelte'; + +const mode = process.env.NODE_ENV; +const dev = mode === 'development'; + +const config = require('../../../config/rollup.js'); + +export default { + client: { + input: config.client.input(), + output: config.client.output(), + plugins: [ + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + dev, + hydratable: true, + emitCss: true + }), + resolve() + ], + preserveEntrySignatures: false + }, + + server: { + input: config.server.input(), + output: config.server.output(), + plugins: [ + replace({ + 'process.browser': false, + 'process.env.NODE_ENV': JSON.stringify(mode) + }), + svelte({ + generate: 'ssr', + dev + }), + resolve({ + preferBuiltins: true + }) + ], + external: ['sirv', 'polka'], + preserveEntrySignatures: 'strict' + }, + + serviceworker: { + input: config.serviceworker.input(), + output: config.serviceworker.output(), + plugins: [ + resolve(), + replace({ + 'process.browser': true, + 'process.env.NODE_ENV': JSON.stringify(mode) + }) + ], + preserveEntrySignatures: false + } +}; \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/client.js b/test/apps/css-nested-layout/src/client.js new file mode 100644 index 000000000..6cce7e658 --- /dev/null +++ b/test/apps/css-nested-layout/src/client.js @@ -0,0 +1,9 @@ +import * as sapper from '@sapper/app'; + +window.start = () => sapper.start({ + target: document.querySelector('#sapper') +}); + +window.prefetchRoutes = () => sapper.prefetchRoutes(); +window.prefetch = href => sapper.prefetch(href); +window.goto = href => sapper.goto(href); \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/_components/Test.svelte b/test/apps/css-nested-layout/src/routes/_components/Test.svelte new file mode 100644 index 000000000..b7893e145 --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/_components/Test.svelte @@ -0,0 +1,8 @@ +

This is content defined in a component imported by a layout in a nested routes.

+ + \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/_error.svelte b/test/apps/css-nested-layout/src/routes/_error.svelte new file mode 100644 index 000000000..acaa3e38b --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/_error.svelte @@ -0,0 +1,18 @@ + + + + +

This is an error page

+ +

{status}

+ +

{error.message}

+ +
{error.stack}
diff --git a/test/apps/css-nested-layout/src/routes/index.svelte b/test/apps/css-nested-layout/src/routes/index.svelte new file mode 100644 index 000000000..39cddd335 --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/index.svelte @@ -0,0 +1,7 @@ +

Great success!

+ + \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/nested/_layout.svelte b/test/apps/css-nested-layout/src/routes/nested/_layout.svelte new file mode 100644 index 000000000..6380b6ed6 --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/nested/_layout.svelte @@ -0,0 +1,17 @@ + + +

This is content defined in a layout in a nested route. It should have a green background.

+ + + + + + \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/nested/index.svelte b/test/apps/css-nested-layout/src/routes/nested/index.svelte new file mode 100644 index 000000000..8fadab4ac --- /dev/null +++ b/test/apps/css-nested-layout/src/routes/nested/index.svelte @@ -0,0 +1 @@ +

This is slotted page content in a nested routes.

\ No newline at end of file diff --git a/test/apps/css-nested-layout/src/server.js b/test/apps/css-nested-layout/src/server.js new file mode 100644 index 000000000..e33d80400 --- /dev/null +++ b/test/apps/css-nested-layout/src/server.js @@ -0,0 +1,9 @@ +import polka from 'polka'; +import * as sapper from '@sapper/server'; + +import { start } from '../../common.js'; + +const app = polka() + .use(sapper.middleware()); + +start(app); diff --git a/test/apps/css-nested-layout/src/service-worker.js b/test/apps/css-nested-layout/src/service-worker.js new file mode 100644 index 000000000..4ba51adc3 --- /dev/null +++ b/test/apps/css-nested-layout/src/service-worker.js @@ -0,0 +1,82 @@ +import * as sapper from '@sapper/service-worker'; + +const ASSETS = `cache${sapper.timestamp}`; + +// `shell` is an array of all the files generated by webpack, +// `files` is an array of everything in the `static` directory +const to_cache = sapper.shell.concat(sapper.files); +const cached = new Set(to_cache); + +self.addEventListener('install', event => { + event.waitUntil( + caches + .open(ASSETS) + .then(cache => cache.addAll(to_cache)) + .then(() => { + self.skipWaiting(); + }) + ); +}); + +self.addEventListener('activate', event => { + event.waitUntil( + caches.keys().then(async keys => { + // delete old caches + for (const key of keys) { + if (key !== ASSETS) await caches.delete(key); + } + + self.clients.claim(); + }) + ); +}); + +self.addEventListener('fetch', event => { + if (event.request.method !== 'GET') return; + + const url = new URL(event.request.url); + + // don't try to handle e.g. data: URIs + if (!url.protocol.startsWith('http')) return; + + // ignore dev server requests + if (url.hostname === self.location.hostname && url.port !== self.location.port) return; + + // always serve assets and webpack-generated files from cache + if (url.host === self.location.host && cached.has(url.pathname)) { + event.respondWith(caches.match(event.request)); + return; + } + + // for pages, you might want to serve a shell `index.html` file, + // which Sapper has generated for you. It's not right for every + // app, but if it's right for yours then uncomment this section + /* + if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) { + event.respondWith(caches.match('/index.html')); + return; + } + */ + + if (event.request.cache === 'only-if-cached') return; + + // for everything else, try the network first, falling back to + // cache if the user is offline. (If the pages never change, you + // might prefer a cache-first approach to a network-first one.) + event.respondWith( + caches + .open(`offline${sapper.timestamp}`) + .then(async cache => { + try { + const response = await fetch(event.request); + cache.put(event.request, response.clone()); + return response; + } catch (err) { + const response = await cache.match(event.request); + if (response) return response; + + throw err; + } + }) + ); +}); diff --git a/test/apps/css-nested-layout/src/template.html b/test/apps/css-nested-layout/src/template.html new file mode 100644 index 000000000..75027cea6 --- /dev/null +++ b/test/apps/css-nested-layout/src/template.html @@ -0,0 +1,14 @@ + + + + + + %sapper.base% + %sapper.styles% + %sapper.head% + %sapper.scripts% + + +
%sapper.html%
+ + diff --git a/test/apps/css-nested-layout/test.ts b/test/apps/css-nested-layout/test.ts new file mode 100644 index 000000000..0732c408c --- /dev/null +++ b/test/apps/css-nested-layout/test.ts @@ -0,0 +1,40 @@ +import * as assert from 'assert'; +import { build } from '../../../api'; +import { AppRunner } from '../AppRunner'; + +describe('css-nested-layout', function() { + this.timeout(10000); + + let r: AppRunner; + + // hooks + before('build app', () => build({ cwd: __dirname })); + before('start runner', async () => { + r = await new AppRunner().start(__dirname); + }); + + after(() => r && r.end()); + + // tests + it('includes CSS defined in nested layout with server render', async () => { + await r.load('/nested'); + + assert.strictEqual( + await r.page.$eval('h2', node => getComputedStyle(node).backgroundColor), + 'rgb(0, 128, 0)' + ); + }); + + it('includes CSS defined in component imported by nested layout with server render', async () => { + await r.load('/nested'); + + assert.strictEqual( + await r.page.$eval('h3', node => getComputedStyle(node).backgroundColor), + 'rgb(255, 0, 0)' + ); + }); + + it('survives the tests with no server errors', () => { + assert.deepStrictEqual(r.errors, []); + }); +}); From 4a5ec1d09ebe0f1393c2d2bff89e650b1d3ded5d Mon Sep 17 00:00:00 2001 From: Ronan Doherty Date: Fri, 2 Oct 2020 20:20:55 +0100 Subject: [PATCH 4/5] Update RollupCompiler.ts This time, include the actual fix and not just the tests --- src/core/create_compilers/RollupCompiler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/create_compilers/RollupCompiler.ts b/src/core/create_compilers/RollupCompiler.ts index 0066c5442..7c290f5b6 100644 --- a/src/core/create_compilers/RollupCompiler.ts +++ b/src/core/create_compilers/RollupCompiler.ts @@ -241,7 +241,7 @@ export default class RollupCompiler { async generateBundle(this: PluginContext, options: NormalizedOutputOptions, bundle: OutputBundle): Promise { function is_route(file_path: string) { - return file_path.includes(that.routes) && !file_path.includes(path.sep + '_') && !file_path.endsWith('.css'); + return file_path.includes(that.routes) && !file_path.endsWith('.css'); } function js_deps(chunk: RenderedChunk, opts?: DependencyTreeOptions) { From 1fb4a37f4a5662199a8a8d299cc49629a8d52658 Mon Sep 17 00:00:00 2001 From: Ronan Doherty Date: Fri, 2 Oct 2020 20:40:46 +0100 Subject: [PATCH 5/5] Combine tests with existing css tests --- test/apps/css-nested-layout/rollup.config.js | 61 -------------- test/apps/css-nested-layout/src/client.js | 9 -- .../src/routes/_error.svelte | 18 ---- .../css-nested-layout/src/routes/index.svelte | 7 -- test/apps/css-nested-layout/src/server.js | 9 -- .../css-nested-layout/src/service-worker.js | 82 ------------------- test/apps/css-nested-layout/src/template.html | 14 ---- test/apps/css-nested-layout/test.ts | 40 --------- .../_components/NestedRouteTest.svelte} | 0 .../src/routes/nested/_layout.svelte | 4 +- .../src/routes/nested/index.svelte | 0 test/apps/css/test.ts | 18 ++++ 12 files changed, 20 insertions(+), 242 deletions(-) delete mode 100644 test/apps/css-nested-layout/rollup.config.js delete mode 100644 test/apps/css-nested-layout/src/client.js delete mode 100644 test/apps/css-nested-layout/src/routes/_error.svelte delete mode 100644 test/apps/css-nested-layout/src/routes/index.svelte delete mode 100644 test/apps/css-nested-layout/src/server.js delete mode 100644 test/apps/css-nested-layout/src/service-worker.js delete mode 100644 test/apps/css-nested-layout/src/template.html delete mode 100644 test/apps/css-nested-layout/test.ts rename test/apps/{css-nested-layout/src/routes/_components/Test.svelte => css/src/routes/_components/NestedRouteTest.svelte} (100%) rename test/apps/{css-nested-layout => css}/src/routes/nested/_layout.svelte (73%) rename test/apps/{css-nested-layout => css}/src/routes/nested/index.svelte (100%) diff --git a/test/apps/css-nested-layout/rollup.config.js b/test/apps/css-nested-layout/rollup.config.js deleted file mode 100644 index 5f27c37ce..000000000 --- a/test/apps/css-nested-layout/rollup.config.js +++ /dev/null @@ -1,61 +0,0 @@ -import resolve from '@rollup/plugin-node-resolve'; -import replace from '@rollup/plugin-replace'; -import svelte from 'rollup-plugin-svelte'; - -const mode = process.env.NODE_ENV; -const dev = mode === 'development'; - -const config = require('../../../config/rollup.js'); - -export default { - client: { - input: config.client.input(), - output: config.client.output(), - plugins: [ - replace({ - 'process.browser': true, - 'process.env.NODE_ENV': JSON.stringify(mode) - }), - svelte({ - dev, - hydratable: true, - emitCss: true - }), - resolve() - ], - preserveEntrySignatures: false - }, - - server: { - input: config.server.input(), - output: config.server.output(), - plugins: [ - replace({ - 'process.browser': false, - 'process.env.NODE_ENV': JSON.stringify(mode) - }), - svelte({ - generate: 'ssr', - dev - }), - resolve({ - preferBuiltins: true - }) - ], - external: ['sirv', 'polka'], - preserveEntrySignatures: 'strict' - }, - - serviceworker: { - input: config.serviceworker.input(), - output: config.serviceworker.output(), - plugins: [ - resolve(), - replace({ - 'process.browser': true, - 'process.env.NODE_ENV': JSON.stringify(mode) - }) - ], - preserveEntrySignatures: false - } -}; \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/client.js b/test/apps/css-nested-layout/src/client.js deleted file mode 100644 index 6cce7e658..000000000 --- a/test/apps/css-nested-layout/src/client.js +++ /dev/null @@ -1,9 +0,0 @@ -import * as sapper from '@sapper/app'; - -window.start = () => sapper.start({ - target: document.querySelector('#sapper') -}); - -window.prefetchRoutes = () => sapper.prefetchRoutes(); -window.prefetch = href => sapper.prefetch(href); -window.goto = href => sapper.goto(href); \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/routes/_error.svelte b/test/apps/css-nested-layout/src/routes/_error.svelte deleted file mode 100644 index acaa3e38b..000000000 --- a/test/apps/css-nested-layout/src/routes/_error.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - - -

This is an error page

- -

{status}

- -

{error.message}

- -
{error.stack}
diff --git a/test/apps/css-nested-layout/src/routes/index.svelte b/test/apps/css-nested-layout/src/routes/index.svelte deleted file mode 100644 index 39cddd335..000000000 --- a/test/apps/css-nested-layout/src/routes/index.svelte +++ /dev/null @@ -1,7 +0,0 @@ -

Great success!

- - \ No newline at end of file diff --git a/test/apps/css-nested-layout/src/server.js b/test/apps/css-nested-layout/src/server.js deleted file mode 100644 index e33d80400..000000000 --- a/test/apps/css-nested-layout/src/server.js +++ /dev/null @@ -1,9 +0,0 @@ -import polka from 'polka'; -import * as sapper from '@sapper/server'; - -import { start } from '../../common.js'; - -const app = polka() - .use(sapper.middleware()); - -start(app); diff --git a/test/apps/css-nested-layout/src/service-worker.js b/test/apps/css-nested-layout/src/service-worker.js deleted file mode 100644 index 4ba51adc3..000000000 --- a/test/apps/css-nested-layout/src/service-worker.js +++ /dev/null @@ -1,82 +0,0 @@ -import * as sapper from '@sapper/service-worker'; - -const ASSETS = `cache${sapper.timestamp}`; - -// `shell` is an array of all the files generated by webpack, -// `files` is an array of everything in the `static` directory -const to_cache = sapper.shell.concat(sapper.files); -const cached = new Set(to_cache); - -self.addEventListener('install', event => { - event.waitUntil( - caches - .open(ASSETS) - .then(cache => cache.addAll(to_cache)) - .then(() => { - self.skipWaiting(); - }) - ); -}); - -self.addEventListener('activate', event => { - event.waitUntil( - caches.keys().then(async keys => { - // delete old caches - for (const key of keys) { - if (key !== ASSETS) await caches.delete(key); - } - - self.clients.claim(); - }) - ); -}); - -self.addEventListener('fetch', event => { - if (event.request.method !== 'GET') return; - - const url = new URL(event.request.url); - - // don't try to handle e.g. data: URIs - if (!url.protocol.startsWith('http')) return; - - // ignore dev server requests - if (url.hostname === self.location.hostname && url.port !== self.location.port) return; - - // always serve assets and webpack-generated files from cache - if (url.host === self.location.host && cached.has(url.pathname)) { - event.respondWith(caches.match(event.request)); - return; - } - - // for pages, you might want to serve a shell `index.html` file, - // which Sapper has generated for you. It's not right for every - // app, but if it's right for yours then uncomment this section - /* - if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) { - event.respondWith(caches.match('/index.html')); - return; - } - */ - - if (event.request.cache === 'only-if-cached') return; - - // for everything else, try the network first, falling back to - // cache if the user is offline. (If the pages never change, you - // might prefer a cache-first approach to a network-first one.) - event.respondWith( - caches - .open(`offline${sapper.timestamp}`) - .then(async cache => { - try { - const response = await fetch(event.request); - cache.put(event.request, response.clone()); - return response; - } catch (err) { - const response = await cache.match(event.request); - if (response) return response; - - throw err; - } - }) - ); -}); diff --git a/test/apps/css-nested-layout/src/template.html b/test/apps/css-nested-layout/src/template.html deleted file mode 100644 index 75027cea6..000000000 --- a/test/apps/css-nested-layout/src/template.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - %sapper.base% - %sapper.styles% - %sapper.head% - %sapper.scripts% - - -
%sapper.html%
- - diff --git a/test/apps/css-nested-layout/test.ts b/test/apps/css-nested-layout/test.ts deleted file mode 100644 index 0732c408c..000000000 --- a/test/apps/css-nested-layout/test.ts +++ /dev/null @@ -1,40 +0,0 @@ -import * as assert from 'assert'; -import { build } from '../../../api'; -import { AppRunner } from '../AppRunner'; - -describe('css-nested-layout', function() { - this.timeout(10000); - - let r: AppRunner; - - // hooks - before('build app', () => build({ cwd: __dirname })); - before('start runner', async () => { - r = await new AppRunner().start(__dirname); - }); - - after(() => r && r.end()); - - // tests - it('includes CSS defined in nested layout with server render', async () => { - await r.load('/nested'); - - assert.strictEqual( - await r.page.$eval('h2', node => getComputedStyle(node).backgroundColor), - 'rgb(0, 128, 0)' - ); - }); - - it('includes CSS defined in component imported by nested layout with server render', async () => { - await r.load('/nested'); - - assert.strictEqual( - await r.page.$eval('h3', node => getComputedStyle(node).backgroundColor), - 'rgb(255, 0, 0)' - ); - }); - - it('survives the tests with no server errors', () => { - assert.deepStrictEqual(r.errors, []); - }); -}); diff --git a/test/apps/css-nested-layout/src/routes/_components/Test.svelte b/test/apps/css/src/routes/_components/NestedRouteTest.svelte similarity index 100% rename from test/apps/css-nested-layout/src/routes/_components/Test.svelte rename to test/apps/css/src/routes/_components/NestedRouteTest.svelte diff --git a/test/apps/css-nested-layout/src/routes/nested/_layout.svelte b/test/apps/css/src/routes/nested/_layout.svelte similarity index 73% rename from test/apps/css-nested-layout/src/routes/nested/_layout.svelte rename to test/apps/css/src/routes/nested/_layout.svelte index 6380b6ed6..8b050f402 100644 --- a/test/apps/css-nested-layout/src/routes/nested/_layout.svelte +++ b/test/apps/css/src/routes/nested/_layout.svelte @@ -1,10 +1,10 @@

This is content defined in a layout in a nested route. It should have a green background.

- + diff --git a/test/apps/css-nested-layout/src/routes/nested/index.svelte b/test/apps/css/src/routes/nested/index.svelte similarity index 100% rename from test/apps/css-nested-layout/src/routes/nested/index.svelte rename to test/apps/css/src/routes/nested/index.svelte diff --git a/test/apps/css/test.ts b/test/apps/css/test.ts index 605dbce30..ed09e3fef 100644 --- a/test/apps/css/test.ts +++ b/test/apps/css/test.ts @@ -25,6 +25,24 @@ describe('css', function() { ); }); + it('includes CSS defined in nested layout with server render', async () => { + await r.load('/nested'); + + assert.strictEqual( + await r.page.$eval('h2', node => getComputedStyle(node).backgroundColor), + 'rgb(0, 128, 0)' + ); + }); + + it('includes CSS defined in component imported by nested layout with server render', async () => { + await r.load('/nested'); + + assert.strictEqual( + await r.page.$eval('h3', node => getComputedStyle(node).backgroundColor), + 'rgb(255, 0, 0)' + ); + }); + it('includes CSS on error page', async () => { await r.load('/doesnotexist');