From 84a0ae562f2b66ff4b6cb82d74c906abdd40327d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 8 Feb 2019 11:34:33 -0500 Subject: [PATCH] support .svelte or .html extensions --- .../internal/{Sapper.html => Sapper.svelte} | 0 .../internal/{layout.html => error.svelte} | 0 runtime/internal/layout.svelte | 1 + runtime/src/app/app.ts | 2 +- .../src/server/middleware/get_page_handler.ts | 2 +- src/api/utils/copy_runtime.ts | 5 ++- src/core/create_manifest_data.ts | 45 ++++++++++++++----- src/core/create_manifests.ts | 12 ++--- src/interfaces.ts | 2 + test/apps/with-sourcemaps-webpack/test.ts | 2 +- .../with-sourcemaps-webpack/webpack.config.js | 8 ++-- 11 files changed, 51 insertions(+), 28 deletions(-) rename runtime/internal/{Sapper.html => Sapper.svelte} (100%) rename runtime/internal/{layout.html => error.svelte} (100%) create mode 100644 runtime/internal/layout.svelte diff --git a/runtime/internal/Sapper.html b/runtime/internal/Sapper.svelte similarity index 100% rename from runtime/internal/Sapper.html rename to runtime/internal/Sapper.svelte diff --git a/runtime/internal/layout.html b/runtime/internal/error.svelte similarity index 100% rename from runtime/internal/layout.html rename to runtime/internal/error.svelte diff --git a/runtime/internal/layout.svelte b/runtime/internal/layout.svelte new file mode 100644 index 0000000..8c0dcbb --- /dev/null +++ b/runtime/internal/layout.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/runtime/src/app/app.ts b/runtime/src/app/app.ts index 21c0451..1c2d1be 100644 --- a/runtime/src/app/app.ts +++ b/runtime/src/app/app.ts @@ -1,5 +1,5 @@ import { writable } from 'svelte/store.mjs'; -import Sapper from '@sapper/internal/Sapper.html'; +import Sapper from '@sapper/internal/Sapper.svelte'; import { stores } from '@sapper/internal/shared'; import { Root, root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client'; import { diff --git a/runtime/src/server/middleware/get_page_handler.ts b/runtime/src/server/middleware/get_page_handler.ts index 4b57ded..bb79970 100644 --- a/runtime/src/server/middleware/get_page_handler.ts +++ b/runtime/src/server/middleware/get_page_handler.ts @@ -9,7 +9,7 @@ import { IGNORE } from '../constants'; import { Manifest, Page, Props, Req, Res } from './types'; import { build_dir, dev, src_dir } from '@sapper/internal/manifest-server'; import { stores } from '@sapper/internal/shared'; -import Sapper from '@sapper/internal/Sapper.html'; +import Sapper from '@sapper/internal/Sapper.svelte'; export function get_page_handler( manifest: Manifest, diff --git a/src/api/utils/copy_runtime.ts b/src/api/utils/copy_runtime.ts index ac5da2c..008eaca 100644 --- a/src/api/utils/copy_runtime.ts +++ b/src/api/utils/copy_runtime.ts @@ -6,8 +6,9 @@ const runtime = [ 'app.mjs', 'server.mjs', 'internal/shared.mjs', - 'internal/Sapper.html', - 'internal/layout.html' + 'internal/Sapper.svelte', + 'internal/layout.svelte', + 'internal/error.svelte' ].map(file => ({ file, source: fs.readFileSync(path.join(__dirname, `../runtime/${file}`), 'utf-8') diff --git a/src/core/create_manifest_data.ts b/src/core/create_manifest_data.ts index c3586b5..10125ed 100644 --- a/src/core/create_manifest_data.ts +++ b/src/core/create_manifest_data.ts @@ -4,6 +4,8 @@ import svelte from 'svelte/compiler'; import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces'; import { posixify, reserved_words } from '../utils'; +const component_extensions = ['.svelte', '.html']; // TODO make this configurable (to include e.g. .svelte.md?) + export default function create_manifest_data(cwd: string): ManifestData { // TODO remove in a future version if (!fs.existsSync(cwd)) { @@ -32,11 +34,20 @@ export default function create_manifest_data(cwd: string): ManifestData { const default_layout: PageComponent = { default: true, + type: 'layout', name: '_default_layout', file: null, has_preload: false }; + const default_error: PageComponent = { + default: true, + type: 'error', + name: '_default_error', + file: null, + has_preload: false + }; + function walk( dir: string, parent_segments: Part[][], @@ -61,7 +72,7 @@ export default function create_manifest_data(cwd: string): ManifestData { const parts = get_parts(segment); const is_index = is_dir ? false : basename.startsWith('index.'); - const is_page = ext === '.html'; + const is_page = component_extensions.indexOf(ext) !== -1; parts.forEach(part => { if (/\]\[/.test(part.content)) { @@ -75,6 +86,7 @@ export default function create_manifest_data(cwd: string): ManifestData { return { basename, + ext, parts, file: posixify(file), is_dir, @@ -121,12 +133,15 @@ export default function create_manifest_data(cwd: string): ManifestData { params.push(...item.parts.filter(p => p.dynamic).map(p => p.content)); if (item.is_dir) { - const index = path.join(dir, item.basename, '_layout.html'); + const ext = component_extensions.find((ext: string) => { + const index = path.join(dir, item.basename, `_layout${ext}`); + return fs.existsSync(index); + }); - const component = fs.existsSync(index) && { + const component = ext && { name: `${get_slug(item.file)}__layout`, - file: `${item.file}/_layout.html`, - has_preload: has_preload(`${item.file}/_layout.html`) + file: `${item.file}/_layout${ext}`, + has_preload: has_preload(`${item.file}/_layout${ext}`) }; if (component) components.push(component); @@ -142,7 +157,7 @@ export default function create_manifest_data(cwd: string): ManifestData { } else if (item.is_page) { - const is_index = item.basename === 'index.html'; + const is_index = item.basename === `index${item.ext}`; const component = { name: get_slug(item.file), @@ -175,15 +190,24 @@ export default function create_manifest_data(cwd: string): ManifestData { }); } - const root_file = path.join(cwd, '_layout.html'); - const root = fs.existsSync(root_file) + const root_ext = component_extensions.find(ext => fs.existsSync(path.join(cwd, `_layout${ext}`))); + const root = root_ext ? { name: 'main', - file: '_layout.html', - has_preload: has_preload('_layout.html') + file: `_layout${root_ext}`, + has_preload: has_preload(`_layout${root_ext}`) } : default_layout; + const error_ext = component_extensions.find(ext => fs.existsSync(path.join(cwd, `_error${ext}`))); + const error = error_ext + ? { + name: 'error', + file: `_error${error_ext}`, + has_preload: has_preload(`_error${error_ext}`) + } + : default_error; + walk(cwd, [], [], []); // check for clashes @@ -214,6 +238,7 @@ export default function create_manifest_data(cwd: string): ManifestData { return { root, + error, components, pages, server_routes diff --git a/src/core/create_manifests.ts b/src/core/create_manifests.ts index a409b74..04d2b6a 100644 --- a/src/core/create_manifests.ts +++ b/src/core/create_manifests.ts @@ -129,7 +129,7 @@ function generate_client_manifest( // This file is generated by Sapper — do not edit it! export { default as Root } from '${stringify(get_file(path_to_routes, manifest_data.root), false)}'; export { preload as root_preload } from '${manifest_data.root.has_preload ? stringify(get_file(path_to_routes, manifest_data.root), false) : './shared'}'; - export { default as ErrorComponent } from '${stringify(posixify(`${path_to_routes}/_error.html`), false)}'; + export { default as ErrorComponent } from '${stringify(get_file(path_to_routes, manifest_data.error), false)}'; export const ignore = [${server_routes_to_ignore.map(route => route.pattern).join(', ')}]; @@ -159,7 +159,7 @@ function generate_server_manifest( manifest_data.components.map((component, i) => `import component_${i}${component.has_preload ? `, { preload as preload_${i} }` : ''} from ${stringify(get_file(path_to_routes, component))};`), `import root${manifest_data.root.has_preload ? `, { preload as root_preload }` : ''} from ${stringify(get_file(path_to_routes, manifest_data.root))};`, - `import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};` + `import error from ${stringify(get_file(path_to_routes, manifest_data.error))};` ); const component_lookup: Record = {}; @@ -228,15 +228,9 @@ function generate_server_manifest( export const dev = ${dev ? 'true' : 'false'}; `.replace(/^\t{2}/gm, '').trim(); - - return `// This file is generated by Sapper — do not edit it!\n` + template - .replace('__BUILD__DIR__', JSON.stringify(build_dir)) - .replace('__SRC__DIR__', JSON.stringify(src_dir)) - .replace('__DEV__', dev ? 'true' : 'false') - .replace(/const manifest = __MANIFEST__;/, code); } function get_file(path_to_routes: string, component: PageComponent) { - if (component.default) return `./layout.html`; + if (component.default) return `./${component.type}.svelte`; return posixify(`${path_to_routes}/${component.file}`); } diff --git a/src/interfaces.ts b/src/interfaces.ts index 50dc6ab..8b2f377 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -27,6 +27,7 @@ export type WritableStore = { export type PageComponent = { default?: boolean; + type?: string; name: string; file: string; has_preload: boolean; @@ -55,6 +56,7 @@ export type Dirs = { export type ManifestData = { root: PageComponent; + error: PageComponent; components: PageComponent[]; pages: Page[]; server_routes: ServerRoute[]; diff --git a/test/apps/with-sourcemaps-webpack/test.ts b/test/apps/with-sourcemaps-webpack/test.ts index 802fa05..d270919 100644 --- a/test/apps/with-sourcemaps-webpack/test.ts +++ b/test/apps/with-sourcemaps-webpack/test.ts @@ -3,7 +3,7 @@ import * as assert from "assert"; import * as fs from 'fs'; import * as path from "path"; -describe('with-sourcemaps', function() { +describe('with-sourcemaps-webpack', function() { this.timeout(10000); // hooks diff --git a/test/apps/with-sourcemaps-webpack/webpack.config.js b/test/apps/with-sourcemaps-webpack/webpack.config.js index eca656b..a8b950f 100644 --- a/test/apps/with-sourcemaps-webpack/webpack.config.js +++ b/test/apps/with-sourcemaps-webpack/webpack.config.js @@ -9,13 +9,13 @@ module.exports = { entry: config.client.entry(), output: config.client.output(), resolve: { - extensions: ['.mjs', '.js', '.json', '.html'], + extensions: ['.mjs', '.js', '.json', '.html', '.svelte'], mainFields: ['svelte', 'module', 'browser', 'main'] }, module: { rules: [ { - test: /\.html$/, + test: /\.(html|svelte)$/, use: { loader: 'svelte-loader', options: { @@ -43,13 +43,13 @@ module.exports = { output: config.server.output(), target: 'node', resolve: { - extensions: ['.mjs', '.js', '.json', '.html'], + extensions: ['.mjs', '.js', '.json', '.html', '.svelte'], mainFields: ['svelte', 'module', 'browser', 'main'] }, module: { rules: [ { - test: /\.html$/, + test: /\.(html|svelte)$/, use: { loader: 'svelte-loader', options: {