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> = {}; private readonly backendCodeCache: Record = {}; 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, ): Promise { 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('view.cache')); // Root template const templateFile = await this.resolveFileFromCanonicalName('layouts/svelte_layout.html'); const rawOutput = await this.fileCache.get(templateFile, !config.get('view.cache')); // Pre-compiled parts const [ backendLines, head, html, css, ] = view.split(SvelteViewEngine.getPreCompileSeparator(canonicalViewName)); const localMap: Record = {}; 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 = {}; 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 { await super.stop(); await this.stopRollup(); } public async preCompile(canonicalName: string, alsoCompileDependents: boolean): Promise { 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('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(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(); } 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('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(); 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 { await this.bundle(watch, ...Object.keys(this.backendCodeCache)); } public async onNewFile(): Promise { await this.stopRollup(); } public async onFileChange(file: string): Promise { delete this.backendCodeCache[this.toCanonicalName(file)]; } public async onFileRemove(file: string): Promise { 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('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 { 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('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 { if (this.rollup) { logger.info(`Stopping rollup (${this.rollup.pid})...`); await new Promise((resolve, reject) => { if (!this.rollup) return resolve(); this.rollup.once('exit', () => { resolve(); }); if (!this.rollup.kill("SIGTERM")) reject('Could not stop rollup.'); }); } } }