ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

Add svelte as a view engine to swaf #33

Merged
ashpie merged 97 commits from svelte into develop 2021-11-09 19:31:22 +01:00
Conversation 0 Commits 97 Files Changed 199 +86 -73
4 changed files with 86 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e385986aca - Show all commits

115
src/frontend/SvelteViewEngine.ts
View File

@ -12,8 +12,9 @@ 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';
const BACKEND_CODE_PREFIX = 'locals.';
const BACKEND_CODE_PREFIX_TEMPORARY_HOLDER = '$$locals$$';
const COMPILED_SVELTE_EXTENSION = '.precompiled';
export default class SvelteViewEngine extends ViewEngine {
public static getPreCompileSeparator(canonicalViewName: string): string {
@ -27,9 +28,9 @@ export default class SvelteViewEngine extends ViewEngine {
private readonly fileCache: FileCache = new FileCache();
private readonly dependencyCache: Record<string, Set<string>> = {};
private readonly backendCodeCache: Record<string, {
backendReplacedCode: string,
backendLines: string[],
private readonly backendCallsCache: Record<string, {
replacedBackendCall: string,
backendCalls: string[],
}> = {};
private rollup?: child_process.ChildProcess;
@ -76,47 +77,48 @@ export default class SvelteViewEngine extends ViewEngine {
// Pre-compiled parts
const [
backendLines,
backendCalls,
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)
backendCalls.split('\n').forEach(code => {
const key = code.substring(1, code.indexOf(',') >= 0 ? code.indexOf(',') - 1 : code.length - 1);
if (code.indexOf('`[') >= 0) {
const args = code.substring(code.indexOf('`[') + 2, code.length - 2)
.split(/, *?/)
.map(arg => {
if (arg.startsWith("'")) return '"' + arg.substring(1, arg.length - 1) + '"';
return arg;
})
.map(arg => JSON.parse(arg));
.map(arg => Function(`"use strict";const locals = arguments[0];return (${arg});`)(locals)); // Uses named parameter locals
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);
localMap[`'${key}', \`[${code.substring(code.indexOf('`[') + 2, code.length - 2)}]\``] = f.call(locals, ...args);
} else {
localMap[`'${key}'`] = locals[key];
}
});
const props = JSON.stringify(localMap);
const actualLocals = JSON.stringify(localMap, (key, value) => {
return typeof value === 'function' ?
value.toString() :
value;
});
// Replaces
const replaceMap: Record<string, string> = {
canonicalViewName: canonicalViewName,
props: props,
locals: actualLocals,
head: head,
html: html,
css: css,
};
return rawOutput.replace(
new RegExp(Object.keys(replaceMap).map(str => `%${str}%`).join('|'), 'g'),
(substring) => {
console.log(substring);
return replaceMap[substring.slice(1, substring.length - 1)];
},
(substring) => replaceMap[substring.slice(1, substring.length - 1)],
);
}
@ -132,20 +134,20 @@ export default class SvelteViewEngine extends ViewEngine {
logger.info(canonicalName + ' > ', 'Pre-compiling', file, '->', intermediateFile);
const source = await this.fileCache.get(file, !config.get<boolean>('view.cache'));
const allBackendLines: string[] = [];
const allBackendCalls: string[] = [];
for (const dependency of this.resolveDependencies(source, canonicalName)) {
allBackendLines.push(...(await this.replaceBackendCode(dependency)).backendLines);
allBackendCalls.push(...(await this.replaceBackendCalls(dependency)).backendCalls);
}
const {backendReplacedCode, backendLines} = await this.replaceBackendCode(canonicalName, source);
allBackendLines.push(...backendLines);
const {replacedBackendCall, backendCalls} = await this.replaceBackendCalls(canonicalName, source);
allBackendCalls.push(...backendCalls);
// Server Side Render (initial HTML and CSS, no-js)
const ssr = await this.compileSsr(canonicalName, intermediateFile, backendReplacedCode);
const ssr = await this.compileSsr(canonicalName, intermediateFile, replacedBackendCall);
const separator = SvelteViewEngine.getPreCompileSeparator(canonicalName);
const finalCode = [
[...new Set<string>(allBackendLines).values()].join('\n'),
[...new Set<string>(allBackendCalls).values()].join('\n'),
ssr.head,
ssr.html,
ssr.css.code,
@ -186,13 +188,13 @@ export default class SvelteViewEngine extends ViewEngine {
return dependencies;
}
private async replaceBackendCode(canonicalViewName: string, code?: string): Promise<{
backendReplacedCode: string,
backendLines: string[],
private async replaceBackendCalls(canonicalViewName: string, code?: string): Promise<{
replacedBackendCall: string,
backendCalls: string[],
}> {
// Cache
if (Object.keys(this.backendCodeCache).indexOf(canonicalViewName) >= 0) {
return this.backendCodeCache[canonicalViewName];
if (Object.keys(this.backendCallsCache).indexOf(canonicalViewName) >= 0) {
return this.backendCallsCache[canonicalViewName];
}
// mkdir output file dir
@ -206,19 +208,19 @@ export default class SvelteViewEngine extends ViewEngine {
}
// Skip replace if there is no swaf export
if (!code.match(/export[ \n]+let[ \n]+swaf[ \n]*=[ \n]*{[ \n]*}/)) {
if (!code.match(/export[ \n]+let[ \n]+locals[ \n]*=[ \n]*{[ \n]*}/)) {
const generated = {
backendReplacedCode: code,
backendLines: [],
replacedBackendCall: code,
backendCalls: [],
};
await afs.writeFile(outputFile, generated.backendReplacedCode);
this.backendCodeCache[canonicalViewName] = generated;
await afs.writeFile(outputFile, generated.replacedBackendCall);
this.backendCallsCache[canonicalViewName] = generated;
return generated;
}
let output = code;
const backendLines = new Set<string>();
const backendCalls = new Set<string>();
let index = 0;
while ((index = output.indexOf(BACKEND_CODE_PREFIX, index + 1)) >= 0) {
@ -247,31 +249,32 @@ export default class SvelteViewEngine extends ViewEngine {
endIndex++;
}
let backendLine = output.substring(startIndex, endIndex);
if (backendLine.match(/([^()]+)\((.+?)\)/)) {
backendLine = backendLine.replace(/([^()]+)\((.+?)\)/, "'$1', [$2]");
let backendCall = output.substring(startIndex, endIndex);
if (backendCall.match(/([^()]+)\((.+?)\)/)) {
backendCall = backendCall.replace(/([^()]+)\((.+?)\)/, "'$1', `[$2]`");
} else {
backendLine = backendLine.replace(/([^()]+)/, "'$1'");
backendCall = backendCall.replace(/([^()]+)/, "'$1'");
}
backendCalls.add(backendCall);
backendLines.add(backendLine);
output = output.substring(0, index) +
'swaf(' + backendLine + ')' +
'locals(' + backendCall.split(BACKEND_CODE_PREFIX).join(BACKEND_CODE_PREFIX_TEMPORARY_HOLDER) + ')' +
output.substring(endIndex, output.length);
}
output = output.split(BACKEND_CODE_PREFIX_TEMPORARY_HOLDER).join(BACKEND_CODE_PREFIX);
const generated = {
backendReplacedCode: output,
backendLines: [...backendLines],
replacedBackendCall: output,
backendCalls: [...backendCalls],
};
await afs.writeFile(outputFile, generated.backendReplacedCode);
this.backendCodeCache[canonicalViewName] = generated;
await afs.writeFile(outputFile, generated.replacedBackendCall);
this.backendCallsCache[canonicalViewName] = generated;
return generated;
}
public async afterPreCompile(watch: boolean): Promise<void> {
await this.bundle(watch, ...Object.keys(this.backendCodeCache));
await this.bundle(watch, ...Object.keys(this.backendCallsCache));
}
@ -280,12 +283,12 @@ export default class SvelteViewEngine extends ViewEngine {
}
public async onFileChange(file: string): Promise<void> {
delete this.backendCodeCache[this.toCanonicalName(file)];
delete this.backendCallsCache[this.toCanonicalName(file)];
}
public async onFileRemove(file: string): Promise<void> {
const canonicalName = this.toCanonicalName(file);
delete this.backendCodeCache[canonicalName];
delete this.backendCallsCache[canonicalName];
delete this.dependencyCache[canonicalName];
Object.values(this.dependencyCache).forEach(set => set.delete(canonicalName));
await this.stopRollup();
@ -322,14 +325,16 @@ export default class SvelteViewEngine extends ViewEngine {
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 localsFunction = (key: string, rawArgs?: string) => {
if (!rawArgs) return globals[key];
const args = Function(`"use strict";const locals = Object.assign(arguments[0], arguments[1]);return (${rawArgs});`)(localsFunction, globals) as string[];
const f = globals[key];
if (typeof f !== 'function') throw new Error(key + ' is not a function.');
return f.call(globals, ...args);
},
const f = globals[key];
if (typeof f !== 'function') throw new Error(key + ' is not a function.');
return f.call(globals, ...args);
};
return requireFromString(svelteSsr.js.code, file).default.render({
locals: localsFunction,
});
}

17
views/home.svelte
View File

@ -2,13 +2,14 @@
import HomeDep from "./home_dep.svelte";
import Layout from "./layout.svelte";
export let swaf = {};
export let locals = {};
let count = 5;
function handleClick() {
count++;
}
let depTest;
</script>
@ -34,24 +35,24 @@
<button on:click={handleClick}>More hellos!!</button>
<p>Direct access: {swaf.direct}</p>
<p>Direct access: {locals.direct}</p>
{#if swaf.route('auth') === '/'}
{#if locals.route('auth') === '/'}
We're home!
{:else}
We're somewhere else... {swaf.route('auth')}
We're somewhere else... {locals.route('auth')}
{/if}
<p>The route to auth is {swaf.route('auth')}</p>
<p>The route to auth is {locals.route('auth')}</p>
<p>\swaf.notcode</p>
<p>\locals.notcode</p>
<p>{`{\\swaf.escaped}`}</p>
<p>{`{\\locals.escaped}`}</p>
<div class="style-test">
<p>Blue!</p>
</div>
<HomeDep swaf={swaf} bind:depTest={depTest}/>
<HomeDep locals={locals} bind:depTest={depTest}/>
<p>Dependency test: {depTest}</p>

16
views/home_dep.svelte
View File

@ -1,6 +1,8 @@
<script lang="ts">
export let depTest = 'Success';
export let swaf = {};
export let locals = {};
let locallyDefinedVar = 'correct value';
</script>
<style>
@ -11,7 +13,13 @@
<p>Simple dep test</p>
<p>\locals.</p>
<p>\locals.</p>
<p>Nested swaf call: {swaf.direct}</p>
<p>Nested swaf call: {swaf.route('auth')}</p>
<p>Nested swaf call: {swaf.route('home')}</p>
<p>locals: {locals}</p>
<p>\locals.route: {locals.route} <br> {locals.dump(typeof locals.route)}</p>
<p>\locals.dump: {locals.dump('bonjour')}</p>
<p>\locals.dump: {locals.dump(locals.app)}</p>
<p>\locals.dump: {locals.dump(NaN)}</p>
<p>\locals.route: {locals.route('auth')}</p>
<p>\locals.route: {locals.route('home')}</p>

11
views/layouts/svelte_layout.html
View File

@ -7,17 +7,16 @@
<script type="module" defer>
import View from '/js/%canonicalViewName%.js';
const props = %props%;
const locals = %locals%;
new View({
hydrate: true,
target: document.body,
props: {
swaf: (key, args) => {
const line = args ?
`'${key}', ${JSON.stringify(args)}`
: `'${key}'`;
return props[line];
locals: (key, args) => {
return locals[args ?
`'${key}', \`${args}\``
: `'${key}'`];
},
},
});