swaf/src/frontend/SvelteViewEngine.ts

399 lines
15 KiB
TypeScript

import crypto from "crypto";
import path from "path";
import config from "config";
import ViewEngine from "./ViewEngine";
import {logger} from "../Logger";
import FileCache from "../utils/FileCache";
import {afs} from "../Utils";
import {compile, preprocess} from "svelte/compiler";
import {sveltePreprocess} from "svelte-preprocess/dist/autoProcess";
import requireFromString from "require-from-string";
import {CssResult} from "svelte/types/compiler/interfaces";
import * as child_process from "child_process";
import fs from "fs";
const BACKEND_CODE_PREFIX = 'swaf.';
const COMPILED_SVELTE_EXTENSION = '.swafview';
export default class SvelteViewEngine extends ViewEngine {
public static getPreCompileSeparator(canonicalViewName: string): string {
return '\n---' +
crypto.createHash('sha1')
.update(path.basename(path.resolve(canonicalViewName)))
.digest('base64') +
'---\n';
}
private readonly fileCache: FileCache = new FileCache();
private readonly dependencyCache: Record<string, Set<string>> = {};
private readonly backendCodeCache: Record<string, {
backendReplacedCode: string,
backendLines: string[],
}> = {};
private rollup?: child_process.ChildProcess;
/**
* @param buildDir A temporary directory that will contain any non-final or final non-public asset.
* @param publicDir The output directory that should contain all final and public assets.
* @param devWatchedViewDir see {@link ViewEngine}.
* @param additionalViewPaths see {@link ViewEngine}.
*/
public constructor(
private readonly buildDir: string,
private readonly publicDir: string,
devWatchedViewDir: string,
...additionalViewPaths: string[]
) {
super(devWatchedViewDir, ...additionalViewPaths);
if (!fs.existsSync(this.buildDir)) {
fs.mkdirSync(this.buildDir, {recursive: true});
}
}
public getExtension(): string {
return 'svelte';
}
/**
* TODO: add replaces on ssr html
*/
public async render(
file: string,
locals: Record<string, unknown>,
): Promise<string> {
const canonicalViewName = this.toCanonicalName(file);
// View
const actualFile = path.join(this.buildDir, canonicalViewName + COMPILED_SVELTE_EXTENSION);
const view = await this.fileCache.get(actualFile, !config.get<boolean>('view.cache'));
// Root template
const templateFile = await this.resolveFileFromCanonicalName('layouts/svelte_layout.html');
const rawOutput = await this.fileCache.get(templateFile, !config.get<boolean>('view.cache'));
// Pre-compiled parts
const [
backendLines,
head,
html,
css,
] = view.split(SvelteViewEngine.getPreCompileSeparator(canonicalViewName));
const localMap: Record<string, unknown> = {};
backendLines.split('\n').forEach(line => {
const key = line.substring(1, line.indexOf(',') >= 0 ? line.indexOf(',') - 1 : line.length - 1);
if (line.indexOf('[') >= 0) {
const args = line.substring(line.indexOf('[') + 1, line.length - 1)
.split(/, *?/)
.map(arg => {
if (arg.startsWith("'")) return '"' + arg.substring(1, arg.length - 1) + '"';
return arg;
})
.map(arg => JSON.parse(arg));
const f = locals[key];
if (typeof f !== 'function') throw new Error(key + ' is not a function.');
localMap[`'${key}', ${JSON.stringify(args)}`] = f.call(locals, ...args);
} else {
localMap[`'${key}'`] = locals[key];
}
});
const props = JSON.stringify(localMap);
// Replaces
const replaces: { [key: string]: string } = {
canonicalViewName: canonicalViewName,
props: props,
head: head,
html: html,
css: css,
};
const replaceOperations: Record<number, {
key: string;
replaceValue: string;
} | undefined> = {};
for (const entry of Object.entries(replaces)) {
const matches = rawOutput.matchAll(new RegExp(`%${entry[0]}%`, 'g'));
for (const match of matches) {
if (typeof match.index === 'number') {
replaceOperations[match.index] = {
key: `%${entry[0]}%`,
replaceValue: entry[1],
};
}
}
}
let output = '';
for (let i = 0; i < rawOutput.length; i++) {
const replaceOperation = replaceOperations[i];
if (replaceOperation) {
output += replaceOperation.replaceValue;
i += replaceOperation.key.length - 1;
} else {
output += rawOutput[i];
}
}
return output;
}
public async stop(): Promise<void> {
await super.stop();
await this.stopRollup();
}
public async preCompile(canonicalName: string, alsoCompileDependents: boolean): Promise<void> {
const file = await this.resolveFileFromCanonicalName(canonicalName);
const intermediateFile = path.join(this.buildDir, canonicalName);
logger.info(canonicalName + ' > ', 'Pre-compiling', file, '->', intermediateFile);
const source = await this.fileCache.get(file, !config.get<boolean>('view.cache'));
const allBackendLines: string[] = [];
for (const dependency of this.resolveDependencies(source, canonicalName)) {
allBackendLines.push(...(await this.replaceBackendCode(dependency)).backendLines);
}
const {backendReplacedCode, backendLines} = await this.replaceBackendCode(canonicalName, source);
allBackendLines.push(...backendLines);
// Server Side Render (initial HTML and CSS, no-js)
const ssr = await this.compileSsr(canonicalName, intermediateFile, backendReplacedCode);
const separator = SvelteViewEngine.getPreCompileSeparator(canonicalName);
const finalCode = [
[...new Set<string>(allBackendLines).values()].join('\n'),
ssr.head,
ssr.html,
ssr.css.code,
].join(separator);
const swafViewFile = path.join(this.buildDir, canonicalName + COMPILED_SVELTE_EXTENSION);
await afs.mkdir(path.dirname(swafViewFile), {recursive: true});
await afs.writeFile(swafViewFile, finalCode);
if (alsoCompileDependents && Object.keys(this.dependencyCache).indexOf(canonicalName) >= 0) {
logger.info(canonicalName + ' > ', 'Compiling dependents...');
for (const dependent of [...this.dependencyCache[canonicalName]]) {
await this.preCompile(dependent, true);
}
}
}
private resolveDependencies(source: string, canonicalViewName: string): string[] {
const dependencies: string[] = [];
for (const match of source.matchAll(/import .+ from ['"](.+?\.svelte)['"];/gm)) {
dependencies.push(path.join(path.dirname(canonicalViewName), match[1]));
}
// Clear existing links from cache
for (const dependency of Object.keys(this.dependencyCache)) {
this.dependencyCache[dependency].delete(canonicalViewName);
}
// Add new links to cache
for (const dependency of dependencies) {
if (Object.keys(this.dependencyCache).indexOf(dependency) < 0) {
this.dependencyCache[dependency] = new Set<string>();
}
this.dependencyCache[dependency].add(canonicalViewName);
}
return dependencies;
}
private async replaceBackendCode(canonicalViewName: string, code?: string): Promise<{
backendReplacedCode: string,
backendLines: string[],
}> {
// Cache
if (Object.keys(this.backendCodeCache).indexOf(canonicalViewName) >= 0) {
return this.backendCodeCache[canonicalViewName];
}
// mkdir output file dir
const outputFile = path.join(this.buildDir, canonicalViewName);
await afs.mkdir(path.dirname(outputFile), {recursive: true});
// Read source file if code was not already provided
if (!code) {
const file = await this.resolveFileFromCanonicalName(canonicalViewName);
code = await this.fileCache.get(file, !config.get<boolean>('view.cache'));
}
// Skip replace if there is no swaf export
if (!code.match(/export[ \n]+let[ \n]+swaf[ \n]*=[ \n]*{[ \n]*}/)) {
const generated = {
backendReplacedCode: code,
backendLines: [],
};
await afs.writeFile(outputFile, generated.backendReplacedCode);
this.backendCodeCache[canonicalViewName] = generated;
return generated;
}
let output = code;
const backendLines = new Set<string>();
let index = 0;
while ((index = output.indexOf(BACKEND_CODE_PREFIX, index + 1)) >= 0) {
// Escaping
if (index > 0 && output[index - 1] === '\\') {
const isEscapingEscaped: boolean = index > 1 && output[index - 2] === '\\';
output = output.substring(0, index - 1 - (isEscapingEscaped ? 1 : 0)) +
output.substring(index, output.length);
continue;
}
const startIndex = index + BACKEND_CODE_PREFIX.length;
let endIndex = startIndex;
let struct = 0;
while (endIndex < output.length) {
if (['(', '[', '{'].indexOf(output[endIndex]) >= 0) struct++;
if ([')', ']', '}'].indexOf(output[endIndex]) >= 0) {
struct--;
if (struct <= 0) {
if (struct === 0) endIndex++;
break;
}
}
if ([' ', '\n', '<'].indexOf(output[endIndex]) >= 0 && struct === 0) break;
endIndex++;
}
let backendLine = output.substring(startIndex, endIndex);
if (backendLine.match(/([^()]+)\((.+?)\)/)) {
backendLine = backendLine.replace(/([^()]+)\((.+?)\)/, "'$1', [$2]");
} else {
backendLine = backendLine.replace(/([^()]+)/, "'$1'");
}
backendLines.add(backendLine);
output = output.substring(0, index) +
'swaf(' + backendLine + ')' +
output.substring(endIndex, output.length);
}
const generated = {
backendReplacedCode: output,
backendLines: [...backendLines],
};
await afs.writeFile(outputFile, generated.backendReplacedCode);
this.backendCodeCache[canonicalViewName] = generated;
return generated;
}
public async afterPreCompile(watch: boolean): Promise<void> {
await this.bundle(watch, ...Object.keys(this.backendCodeCache));
}
public async onNewFile(): Promise<void> {
await this.stopRollup();
}
public async onFileChange(file: string): Promise<void> {
delete this.backendCodeCache[this.toCanonicalName(file)];
}
public async onFileRemove(file: string): Promise<void> {
const canonicalName = this.toCanonicalName(file);
delete this.backendCodeCache[canonicalName];
delete this.dependencyCache[canonicalName];
Object.values(this.dependencyCache).forEach(set => set.delete(canonicalName));
await this.stopRollup();
await this.afterPreCompile(true);
}
private async compileSsr(canonicalName: string, file: string, code: string): Promise<{
head: string,
css: CssResult,
html: string,
}> {
// Svelte preprocess
logger.info(canonicalName + ' > ', 'Preprocessing svelte', file);
const preprocessed = await preprocess(
code,
sveltePreprocess({
typescript: {
tsconfigFile: 'tsconfig.views.json',
},
}),
{
filename: file,
},
);
// Svelte compile
logger.info(canonicalName + ' > ', 'Compiling svelte ssr', file);
const svelteSsr = compile(preprocessed.code, {
dev: config.get<boolean>('view.dev'),
generate: 'ssr',
format: 'cjs',
cssOutputFilename: file + '.css',
});
const globals = ViewEngine.getGlobals();
delete require.cache[path.resolve(file)];
return requireFromString(svelteSsr.js.code, file).default.render({
swaf: (key: string, args?: unknown[]) => {
if (!args) return globals[key];
const f = globals[key];
if (typeof f !== 'function') throw new Error(key + ' is not a function.');
return f.call(globals, ...args);
},
});
}
private async bundle(watch: boolean, ...canonicalViewNames: string[]): Promise<void> {
logger.info('Bundling...');
// Prepare output dir
for (const name of canonicalViewNames) {
await afs.mkdir(path.dirname(path.join(this.publicDir, 'js', name)), {recursive: true});
}
const production = !config.get<boolean>('view.dev');
const input = canonicalViewNames.map(name => path.join(this.buildDir, name));
if (!this.rollup) {
const args = [
'rollup',
'-c', 'rollup.config.js',
'--environment', `ENV:${production ? 'production' : 'dev'},BUILD_DIR:${this.buildDir},PUBLIC_DIR:${this.publicDir},INPUT:${input.join(':')}`,
];
if (watch) args.push('--watch');
this.rollup = child_process.spawn('yarn', args, {stdio: [process.stdin, process.stdout, process.stderr]});
logger.info('Rollup started');
this.rollup.once('exit', () => {
logger.info('Rollup stopped');
this.rollup = undefined;
});
}
}
private async stopRollup(): Promise<void> {
if (this.rollup) {
logger.info(`Stopping rollup (${this.rollup.pid})...`);
await new Promise<void>((resolve, reject) => {
if (!this.rollup) return resolve();
this.rollup.once('exit', () => {
resolve();
});
if (!this.rollup.kill("SIGTERM")) reject('Could not stop rollup.');
});
}
}
}