totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-19 22:05:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

first crack at context-driven store

Browse Source
This commit is contained in:
Rich Harris
2019-01-31 21:42:29 -05:00
parent d486542a8b
commit f587161d7d
38 changed files with 150 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/build.ts
View File

@@ -70,7 +70,7 @@ export async function build({
const manifest_data = create_manifest_data(routes);
// create src/manifest/client.js and src/manifest/server.js
// create src/node_modules/@sapper/app.mjs and server.mjs
create_main_manifests({
bundler,
manifest_data,

6
src/api/dev.ts
View File

@@ -72,7 +72,7 @@ class Watcher extends EventEmitter {
cwd = '.',
src = 'src',
routes = 'src/routes',
output = '__sapper__',
output = 'src/node_modules/@sapper',
static: static_files = 'static',
dest = '__sapper__/dev',
'dev-port': dev_port,
@@ -144,6 +144,10 @@ class Watcher extends EventEmitter {
}
const { cwd, src, dest, routes, output, static: static_files } = this.dirs;
rimraf.sync(path.join(output, '**/*'));
mkdirp.sync(output);
rimraf.sync(dest);
mkdirp.sync(`${dest}/client`);
if (this.bundler === 'rollup') copy_shimport(dest);

36
src/cli.ts
View File

@@ -10,7 +10,7 @@ const prog = sade('sapper').version(pkg.version);
if (process.argv[2] === 'start') {
// remove this in a future version
console.error(colors.bold.red(`'sapper start' has been removed`));
console.error(colors.bold().red(`'sapper start' has been removed`));
console.error(`Use 'node [build_dir]' instead`);
process.exit(1);
}
@@ -74,7 +74,7 @@ prog.command('dev')
watcher.on('ready', async (event: ReadyEvent) => {
if (first) {
console.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
console.log(colors.bold().cyan(`> Listening on http://localhost:${event.port}`));
if (opts.open) {
const { exec } = await import('child_process');
exec(`open http://localhost:${event.port}`);
@@ -85,7 +85,7 @@ prog.command('dev')
watcher.on('invalid', (event: InvalidEvent) => {
const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
console.log(`\n${colors.bold().cyan(changed)} changed. rebuilding...`);
});
watcher.on('error', (event: ErrorEvent) => {
@@ -94,16 +94,16 @@ prog.command('dev')
});
watcher.on('fatal', (event: FatalEvent) => {
console.log(colors.bold.red(`> ${event.message}`));
console.log(colors.bold().red(`> ${event.message}`));
if (event.log) console.log(event.log);
});
watcher.on('build', (event: BuildEvent) => {
if (event.errors.length) {
console.log(colors.bold.red(`✗ ${event.type}`));
console.log(colors.bold().red(`✗ ${event.type}`));
event.errors.filter(e => !e.duplicate).forEach(error => {
if (error.file) console.log(colors.bold(error.file));
if (error.file) console.log(colors.bold()(error.file));
console.log(error.message);
});
@@ -112,10 +112,10 @@ prog.command('dev')
console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
}
} else if (event.warnings.length) {
console.log(colors.bold.yellow(`• ${event.type}`));
console.log(colors.bold().yellow(`• ${event.type}`));
event.warnings.filter(e => !e.duplicate).forEach(warning => {
if (warning.file) console.log(colors.bold(warning.file));
if (warning.file) console.log(colors.bold()(warning.file));
console.log(warning.message);
});
@@ -124,11 +124,11 @@ prog.command('dev')
console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
}
} else {
console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${format_milliseconds(event.duration)})`)}`);
console.log(`${colors.bold().green(`✔ ${event.type}`)} ${colors.gray(`(${format_milliseconds(event.duration)})`)}`);
}
});
} catch (err) {
console.log(colors.bold.red(`> ${err.message}`));
console.log(colors.bold().red(`> ${err.message}`));
console.log(colors.gray(err.stack));
process.exit(1);
}
@@ -169,9 +169,9 @@ prog.command('build [dest]')
require('./server/server.js');
`.replace(/^\t+/gm, '').trim());
console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`node ${dest}`)} to run the app.`);
console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold().cyan(`node ${dest}`)} to run the app.`);
} catch (err) {
console.log(`${colors.bold.red(`> ${err.message}`)}`);
console.log(`${colors.bold().red(`> ${err.message}`)}`);
console.log(colors.gray(err.stack));
process.exit(1);
}
@@ -222,24 +222,24 @@ prog.command('export [dest]')
timeout: opts.timeout,
oninfo: event => {
console.log(colors.bold.cyan(`> ${event.message}`));
console.log(colors.bold().cyan(`> ${event.message}`));
},
onfile: event => {
const size_color = event.size > 150000 ? colors.bold().red : event.size > 50000 ? colors.bold().yellow : colors.bold().gray;
const size_color = event.size > 150000 ? colors.bold()().red : event.size > 50000 ? colors.bold()().yellow : colors.bold()().gray;
const size_label = size_color(left_pad(pb(event.size), 10));
const file_label = event.status === 200
? event.file
: colors.bold[event.status >= 400 ? 'red' : 'yellow'](`(${event.status}) ${event.file}`);
: colors.bold()[event.status >= 400 ? 'red' : 'yellow'](`(${event.status}) ${event.file}`);
console.log(`${size_label} ${file_label}`);
}
});
console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`npx serve ${dest}`)} to run the app.`);
console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold().cyan(`npx serve ${dest}`)} to run the app.`);
} catch (err) {
console.error(colors.bold.red(`> ${err.message}`));
console.error(colors.bold().red(`> ${err.message}`));
process.exit(1);
}
});
@@ -278,7 +278,7 @@ async function _build(
console.log();
console.log(c(`┌─${repeat('─', banner.length)}─┐`));
console.log(c(`│ ${colors.bold(banner) } │`));
console.log(c(`│ ${colors.bold()(banner) } │`));
console.log(c(`└─${repeat('─', banner.length)}─┘`));
console.log(event.result.print());

2
src/core/create_compilers/extract_css.ts
View File

@@ -153,7 +153,7 @@ export default function extract_css(client_result: CompileResult, components: Pa
chunks_with_css.add(chunk);
});
const entry = path.resolve(dirs.src, 'client.js');
const entry = path.resolve(dirs.src, 'app.mjs');
const entry_chunk = client_result.chunks.find(chunk => chunk.modules.indexOf(entry) !== -1);
const entry_chunk_dependencies: Set<Chunk> = new Set([entry_chunk]);

19
src/core/create_manifests.ts
View File

@@ -3,6 +3,10 @@ import * as path from 'path';
import { posixify, stringify, walk, write_if_changed } from '../utils';
import { Page, PageComponent, ManifestData } from '../interfaces';
const app = fs.readFileSync(path.resolve(__dirname, '../templates/App.html'), 'utf-8');
const internal = fs.readFileSync(path.resolve(__dirname, '../templates/internal.mjs'), 'utf-8');
const layout = `<svelte:component this={child.component} {...child.props}/>`;
export function create_main_manifests({
bundler,
manifest_data,
@@ -31,12 +35,11 @@ export function create_main_manifests({
const client_manifest = generate_client(manifest_data, path_to_routes, bundler, dev, dev_port);
const server_manifest = generate_server(manifest_data, path_to_routes, cwd, src, dest, dev);
write_if_changed(
`${output}/_layout.html`,
`<svelte:component this={child.component} {...child.props}/>`
);
write_if_changed(`${output}/client.js`, client_manifest);
write_if_changed(`${output}/server.js`, server_manifest);
write_if_changed(`${output}/_layout.html`, layout);
write_if_changed(`${output}/internal.mjs`, internal);
write_if_changed(`${output}/App.html`, app);
write_if_changed(`${output}/app.mjs`, client_manifest);
write_if_changed(`${output}/server.mjs`, server_manifest);
}
export function create_serviceworker_manifest({ manifest_data, output, client_files, static_files }: {
@@ -80,7 +83,7 @@ function generate_client(
dev: boolean,
dev_port?: number
) {
const template_file = path.resolve(__dirname, '../templates/client.js');
const template_file = path.resolve(__dirname, '../templates/app.mjs');
const template = fs.readFileSync(template_file, 'utf-8');
const page_ids = new Set(manifest_data.pages.map(page =>
@@ -167,7 +170,7 @@ function generate_server(
dest: string,
dev: boolean
) {
const template_file = path.resolve(__dirname, '../templates/server.js');
const template_file = path.resolve(__dirname, '../templates/server.mjs');
const template = fs.readFileSync(template_file, 'utf-8');
const imports = [].concat(

6
src/interfaces.ts
View File

@@ -19,8 +19,10 @@ export type Template = {
stream: (req, res, data: Record<string, string | Promise<string>>) => void;
};
export type Store = {
get: () => any;
export type WritableStore<T> = {
set: (value: T) => void;
update: (fn: (value: T) => T) => void;
subscribe: (fn: (T: any) => void) => () => void;
};
export type PageComponent = {