diff --git a/examples/hn.svelte.dev/src/routes/$error.svelte b/examples/hn.svelte.dev/src/routes/$error.svelte
index 6d8f982a8202..8a624d35056f 100644
--- a/examples/hn.svelte.dev/src/routes/$error.svelte
+++ b/examples/hn.svelte.dev/src/routes/$error.svelte
@@ -1,8 +1,9 @@
Line ${error.line}, column ${error.col}: ${error.message} (${ - error.code - })
-${escape(lines[error.line - 1])}
- `
- )
- .join('\n\n')}
- `;
- }
- }
-
- return rendered.replace(
- '',
- `
-
-
-
- `.replace(/^\t{6}/gm, '')
- );
+ const rendered = await render(
+ {
+ headers: req.headers,
+ method: req.method,
+ path: parsed.pathname,
+ query: new URLSearchParams(parsed.query),
+ body
},
- manifest: this.manifest,
- target: this.config.target,
- entry: 'assets/runtime/internal/start.js',
- dev: true,
- amp: this.config.amp,
- root,
- setup,
- only_prerender: false,
- start_global: this.config.startGlobal,
- app_dir: this.config.appDir,
- host: this.config.host,
- host_header: this.config.hostHeader,
- get_stack: (error) =>
- sourcemap_stacktrace(error.stack, async (address) => {
- if (existsSync(address)) {
- // it's a filepath
- return readFileSync(address, 'utf-8');
+ {
+ paths: this.config.paths,
+ template: ({ head, body }) => {
+ let rendered = template
+ .replace('%svelte.head%', () => head)
+ .replace('%svelte.body%', () => body);
+
+ if (this.config.amp) {
+ const result = validator.validateString(rendered);
+
+ if (result.status !== 'PASS') {
+ const lines = rendered.split('\n');
+
+ const escape = (str) =>
+ str.replace(/&/g, '&').replace(//g, '>');
+
+ rendered = `
+
+
+
+
+
+ Line ${error.line}, column ${error.col}: ${error.message} (${ + error.code + })
+${escape(lines[error.line - 1])}
+ `
+ )
+ .join('\n\n')}
+ `;
+ }
}
- try {
- const { contents } = await this.snowpack.loadUrl(address, {
- isSSR: true,
- encoding: 'utf8'
- });
- return contents;
- } catch {
- // fail gracefully
- }
- }),
- get_static_file: (file) => readFileSync(join(this.config.files.assets, file)),
- get_amp_css: (url) =>
- this.snowpack.loadUrl(url, { encoding: 'utf-8' }).then(({ contents }) => contents)
+ return rendered;
+ },
+ manifest: this.manifest,
+ target: this.config.target,
+ entry: `/${dev_dir}/runtime/internal/start.js`,
+ dev: true,
+ amp: this.config.amp,
+ root,
+ setup,
+ only_prerender: false,
+ start_global: this.config.startGlobal,
+ host: this.config.host,
+ host_header: this.config.hostHeader,
+ get_stack: (error) => {
+ this.viteDevServer.ssrFixStacktrace(error);
+ return error.stack;
+ },
+ get_static_file: (file) => readFileSync(join(this.config.files.assets, file)),
+ get_amp_css: (url) => '' // TODO: implement this
+ }
+ );
+
+ if (rendered) {
+ res.writeHead(rendered.status, rendered.headers);
+ res.end(rendered.body);
+ } else {
+ res.statusCode = 404;
+ res.end('Not found');
}
- );
-
- if (rendered) {
- res.writeHead(rendered.status, rendered.headers);
- res.end(rendered.body);
- } else {
- res.statusCode = 404;
- res.end('Not found');
+ } catch (e) {
+ this.viteDevServer.ssrFixStacktrace(e);
+ res.end(e.stack);
}
});
});
@@ -285,51 +232,90 @@ class Watcher extends EventEmitter {
}
update() {
- const manifest_data = create_manifest_data(this.config);
+ const manifest_data = create_manifest_data({
+ config: this.config,
+ output: dev_dir
+ });
create_app({
manifest_data,
- output: '.svelte/assets'
+ output: dev_dir
});
const common_css_deps = new Set();
+ const load = async (url) => {
+ const mod = await this.viteDevServer.ssrLoadModule(url);
+ const node = await this.viteDevServer.moduleGraph.getModuleByUrl(url);
+
+ const deps = new Set();
+ find_deps(node, deps);
+
+ const css = new Set();
+ for (const dep of deps) {
+ // TODO what about .scss files, etc?
+ if (dep.file.endsWith('.css')) {
+ const mod = await this.viteDevServer.ssrLoadModule(dep.url);
+ css.add(mod.default);
+ }
+ }
+
+ return { mod, css };
+ };
+
+ const find_deps = (node, deps) => {
+ for (const dep of node.importedModules) {
+ if (!deps.has(dep)) {
+ deps.add(dep);
+ find_deps(dep, deps);
+ }
+ }
+ };
+
this.manifest = {
assets: manifest_data.assets,
layout: async () => {
- const { exports, css } = await this.load(manifest_data.layout.url);
- css.forEach((dep) => common_css_deps.add(dep));
- return exports;
+ const { mod, css } = await load(manifest_data.layout);
+ css.forEach((mod) => {
+ common_css_deps.add(mod);
+ });
+ return mod;
},
error: async () => {
- const { exports, css } = await this.load(manifest_data.error.url);
- css.forEach((dep) => common_css_deps.add(dep));
- return exports;
+ const { mod, css } = await load(manifest_data.error);
+ css.forEach((mod) => {
+ common_css_deps.add(mod);
+ });
+ return mod;
},
pages: manifest_data.pages.map((data) => {
- // This is a bit of a hack, but it means we can inject the correct
- // elements without needing to do any analysis before loading
+ // This is a bit of a hack, but it means we can inject the correct `
+ ? ``
: [
...js_deps.map((dep) => ``),
...css_deps.map((dep) => ``)
@@ -274,7 +275,7 @@ async function get_response({ request, options, $session, route, status = 200, e
`
: `
`;
- const head = [rendered.head, links, init].join('\n\n');
+ const head = [
+ rendered.head,
+ options.amp ? '' : ``,
+ links,
+ init
+ ].join('\n\n');
const body = options.amp
? rendered.html
diff --git a/packages/kit/src/runtime/internal/renderer/index.js b/packages/kit/src/runtime/internal/renderer/index.js
index ad0163579acb..d4348e1dbf31 100644
--- a/packages/kit/src/runtime/internal/renderer/index.js
+++ b/packages/kit/src/runtime/internal/renderer/index.js
@@ -119,6 +119,15 @@ export class Renderer {
this.current = hydrated.state;
}
+ // remove dev-mode SSR