swaf/src/frontend/SvelteViewEngine.ts

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.');
            });
        }
    }
}