totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-14 12:04:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

CSS extraction and code-splitting

Browse Source 
closes #388
This commit is contained in:
Rich Harris
2018-09-02 14:46:27 -04:00
committed by GitHub
parent afba0491ed
commit bebb0dd595
62 changed files with 885 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/core/create_manifests.ts
View File

@@ -3,11 +3,11 @@ import * as path from 'path';
import glob from 'tiny-glob/sync.js';
import { posixify, write_if_changed } from './utils';
import { dev, locations } from '../config';
import { Page, PageComponent, ServerRoute } from '../interfaces';
import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';
export function create_main_manifests({ bundler, routes, dev_port }: {
export function create_main_manifests({ bundler, manifest_data, dev_port }: {
bundler: string,
routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
manifest_data: ManifestData;
dev_port?: number;
}) {
const manifest_dir = path.join(locations.app(), 'manifest');
@@ -15,8 +15,8 @@ export function create_main_manifests({ bundler, routes, dev_port }: {
const path_to_routes = path.relative(manifest_dir, locations.routes());
const client_manifest = generate_client(routes, path_to_routes, bundler, dev_port);
const server_manifest = generate_server(routes, path_to_routes);
const client_manifest = generate_client(manifest_data, path_to_routes, bundler, dev_port);
const server_manifest = generate_server(manifest_data, path_to_routes);
write_if_changed(
`${manifest_dir}/default-layout.html`,
@@ -26,8 +26,8 @@ export function create_main_manifests({ bundler, routes, dev_port }: {
write_if_changed(`${manifest_dir}/server.js`, server_manifest);
}
export function create_serviceworker_manifest({ routes, client_files }: {
routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
export function create_serviceworker_manifest({ manifest_data, client_files }: {
manifest_data: ManifestData;
client_files: string[];
}) {
const assets = glob('**', { cwd: 'assets', filesOnly: true });
@@ -40,44 +40,47 @@ export function create_serviceworker_manifest({ routes, client_files }: {
export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
export const routes = [\n\t${routes.pages.map((r: Page) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
export const routes = [\n\t${manifest_data.pages.map((r: Page) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
`.replace(/^\t\t/gm, '').trim();
write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
}
function generate_client(
routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
manifest_data: ManifestData,
path_to_routes: string,
bundler: string,
dev_port?: number
) {
const page_ids = new Set(routes.pages.map(page =>
const page_ids = new Set(manifest_data.pages.map(page =>
page.pattern.toString()));
const server_routes_to_ignore = routes.server_routes.filter(route =>
const server_routes_to_ignore = manifest_data.server_routes.filter(route =>
!page_ids.has(route.pattern.toString()));
let code = `
// This file is generated by Sapper — do not edit it!
import root from '${get_file(path_to_routes, routes.root)}';
import root from '${get_file(path_to_routes, manifest_data.root)}';
import error from '${posixify(`${path_to_routes}/_error.html`)}';
${routes.components.map(component => {
${manifest_data.components.map(component => {
const annotation = bundler === 'webpack'
? `/* webpackChunkName: "${component.name}" */ `
: '';
const source = get_file(path_to_routes, component);
return `const ${component.name} = () => import(${annotation}'${source}');`;
return `const ${component.name} = {
js: () => import(${annotation}'${source}'),
css: "__SAPPER_CSS_PLACEHOLDER:${component.file}__"
};`;
}).join('\n')}
export const manifest = {
ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
pages: [
${routes.pages.map(page => `{
${manifest_data.pages.map(page => `{
// ${page.parts[page.parts.length - 1].component.file}
pattern: ${page.pattern},
parts: [
@@ -119,15 +122,15 @@ function generate_client(
}
function generate_server(
routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
manifest_data: ManifestData,
path_to_routes: string
) {
const imports = [].concat(
routes.server_routes.map(route =>
manifest_data.server_routes.map(route =>
`import * as ${route.name} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
routes.components.map(component =>
manifest_data.components.map(component =>
`import ${component.name} from '${get_file(path_to_routes, component)}';`),
`import root from '${get_file(path_to_routes, routes.root)}';`,
`import root from '${get_file(path_to_routes, manifest_data.root)}';`,
`import error from '${posixify(`${path_to_routes}/_error.html`)}';`
);
@@ -137,7 +140,7 @@ function generate_server(
export const manifest = {
server_routes: [
${routes.server_routes.map(route => `{
${manifest_data.server_routes.map(route => `{
// ${route.file}
pattern: ${route.pattern},
handlers: ${route.name},
@@ -148,7 +151,7 @@ function generate_server(
],
pages: [
${routes.pages.map(page => `{
${manifest_data.pages.map(page => `{
// ${page.parts[page.parts.length - 1].component.file}
pattern: ${page.pattern},
parts: [
@@ -157,6 +160,7 @@ function generate_server(
const props = [
`name: "${part.component.name}"`,
`file: "${part.component.file}"`,
`component: ${part.component.name}`
];