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

Add svelte pre-compilation

Browse Source
This commit is contained in:
Alice Gaudon 2021-03-18 16:22:25 +01:00
parent caae753d74
commit 19a776bdd2
13 changed files with 1445 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
.eslintrc.js Normal file
View File

@ -0,0 +1,124 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'svelte3',
'@typescript-eslint'
],
parserOptions: {
tsconfigRootDir: __dirname,
project: [
'./tsconfig.json',
'./tsconfig.test.json'
]
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
rules: {
indent: [
'error',
4,
{
SwitchCase: 1
}
],
'no-trailing-spaces': 'error',
'max-len': [
'error',
{
code: 120,
ignoreTemplateLiterals: true,
ignoreRegExpLiterals: true
}
],
semi: 'off',
'@typescript-eslint/semi': [
'error'
],
'no-extra-semi': 'error',
'eol-last': 'error',
'comma-dangle': 'off',
'@typescript-eslint/comma-dangle': [
'error',
{
arrays: 'always-multiline',
objects: 'always-multiline',
imports: 'always-multiline',
exports: 'always-multiline',
functions: 'always-multiline',
enums: 'always-multiline',
generics: 'always-multiline',
tuples: 'always-multiline'
}
],
'no-extra-parens': 'off',
'@typescript-eslint/no-extra-parens': [
'error'
],
'no-nested-ternary': 'error',
'@typescript-eslint/no-inferrable-types': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'error',
'@typescript-eslint/no-unnecessary-condition': 'error',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_'
}
],
'@typescript-eslint/no-non-null-assertion': 'error',
'no-useless-return': 'error',
'no-useless-constructor': 'off',
'@typescript-eslint/no-useless-constructor': [
'error'
],
'no-return-await': 'off',
'@typescript-eslint/return-await': [
'error',
'always'
],
'@typescript-eslint/explicit-member-accessibility': [
'error',
{
accessibility: 'explicit'
}
],
'@typescript-eslint/no-floating-promises': 'error'
},
ignorePatterns: [
'.eslintrc.js',
'jest.config.js',
'dist/**/*',
'config/**/*',
'public/**/*'
],
overrides: [
{
files: [
'test/**/*'
],
rules: {
'max-len': [
'error',
{
code: 120,
ignoreTemplateLiterals: true,
ignoreRegExpLiterals: true,
ignoreStrings: true
}
]
}
},
{
files: ['*.svelte'],
processor: 'svelte3/svelte3'
}
],
settings: {
'svelte3/typescript': require('typescript'),
'svelte3/ignore-styles': function (attributes) {
return !!(attributes['lang'] && attributes['lang'] !== 'css');
}
},
}

110
.eslintrc.json
View File

@ -1,110 +0,0 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"parserOptions": {
"project": [
"./tsconfig.json",
"./tsconfig.test.json"
]
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"indent": [
"error",
4,
{
"SwitchCase": 1
}
],
"no-trailing-spaces": "error",
"max-len": [
"error",
{
"code": 120,
"ignoreTemplateLiterals": true,
"ignoreRegExpLiterals": true
}
],
"semi": "off",
"@typescript-eslint/semi": [
"error"
],
"no-extra-semi": "error",
"eol-last": "error",
"comma-dangle": "off",
"@typescript-eslint/comma-dangle": [
"error",
{
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "always-multiline",
"enums": "always-multiline",
"generics": "always-multiline",
"tuples": "always-multiline"
}
],
"no-extra-parens": "off",
"@typescript-eslint/no-extra-parens": [
"error"
],
"no-nested-ternary": "error",
"@typescript-eslint/no-inferrable-types": "off",
"@typescript-eslint/explicit-module-boundary-types": "error",
"@typescript-eslint/no-unnecessary-condition": "error",
"@typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^_"
}
],
"@typescript-eslint/no-non-null-assertion": "error",
"no-useless-return": "error",
"no-useless-constructor": "off",
"@typescript-eslint/no-useless-constructor": [
"error"
],
"no-return-await": "off",
"@typescript-eslint/return-await": [
"error",
"always"
],
"@typescript-eslint/explicit-member-accessibility": [
"error",
{
"accessibility": "explicit"
}
],
"@typescript-eslint/no-floating-promises": "error"
},
"ignorePatterns": [
"jest.config.js",
"dist/**/*",
"config/**/*"
],
"overrides": [
{
"files": [
"test/**/*"
],
"rules": {
"max-len": [
"error",
{
"code": 120,
"ignoreTemplateLiterals": true,
"ignoreRegExpLiterals": true,
"ignoreStrings": true
}
]
}
}
]
}

2
.gitignore vendored
View File

@ -1,6 +1,8 @@
.idea .idea
node_modules node_modules
build
dist dist
public
yarn-error.log yarn-error.log
src/package.json src/package.json

114
config/default.json5
View File

@ -1,57 +1,61 @@
{ {
app: { app: {
name: 'Example App', name: 'Example App',
contact_email: 'contact@example.net', contact_email: 'contact@example.net',
display_email_warning: true, display_email_warning: true,
}, },
log: { log: {
level: "DEBUG", level: "DEBUG",
verbose: true, verbose: true,
db_level: "ERROR", db_level: "ERROR",
}, },
public_url: "http://localhost:4899", public_url: "http://localhost:4899",
public_websocket_url: "ws://localhost:4899", public_websocket_url: "ws://localhost:4899",
listen_addr: '127.0.0.1', listen_addr: '127.0.0.1',
port: 4899, port: 4899,
gitlab_webhook_token: 'default', gitlab_webhook_token: 'default',
mysql: { mysql: {
connectionLimit: 10, connectionLimit: 10,
host: "localhost", host: "localhost",
user: "root", user: "root",
password: "", password: "",
database: "swaf", database: "swaf",
create_database_automatically: false, create_database_automatically: false,
}, },
redis: { redis: {
host: "127.0.0.1", host: "127.0.0.1",
port: 6379, port: 6379,
prefix: 'swaf', prefix: 'swaf',
}, },
session: { session: {
secret: 'default', secret: 'default',
cookie: { cookie: {
secure: false, secure: false,
maxAge: 31557600000, // 1 year // 1 year
}, maxAge: 31557600000,
}, },
mail: { },
host: "127.0.0.1", mail: {
port: "1025", host: "127.0.0.1",
secure: false, port: "1025",
username: "", secure: false,
password: "", username: "",
allow_invalid_tls: true, password: "",
from: 'contact@example.net', allow_invalid_tls: true,
from_name: 'Example App', from: 'contact@example.net',
}, from_name: 'Example App',
view: { },
cache: false, view: {
}, cache: false,
magic_link: { enable_asset_cache: false,
validity_period: 20, },
}, magic_link: {
auth: { validity_period: 20,
approval_mode: false, // Registered accounts need to be approved by an administrator },
name_change_wait_period: 2592000000, // 30 days auth: {
}, // Registered accounts need to be approved by an administrator
approval_mode: false,
// 30 days
name_change_wait_period: 2592000000,
},
} }

42
config/production.json5
View File

@ -1,21 +1,25 @@
{ {
log: { log: {
level: "DEV", level: "DEV",
verbose: false, verbose: false,
db_level: "ERROR", db_level: "ERROR",
}, },
public_url: "https://swaf.example", public_url: "https://swaf.example",
public_websocket_url: "wss://swaf.example", public_websocket_url: "wss://swaf.example",
session: { session: {
cookie: { cookie: {
secure: true, secure: true,
}, },
}, },
mail: { mail: {
secure: true, secure: true,
allow_invalid_tls: false, allow_invalid_tls: false,
}, },
magic_link: { magic_link: {
validity_period: 900, validity_period: 900,
}, },
view: {
cache: true,
enable_asset_cache: true,
},
} }

25
config/test.json5
View File

@ -1,14 +1,15 @@
{ {
mysql: { mysql: {
host: "localhost", host: "localhost",
user: "root", user: "root",
password: "", password: "",
database: "swaf_test", database: "swaf_test",
create_database_automatically: true, create_database_automatically: true,
}, },
session: { session: {
cookie: { cookie: {
maxAge: 1000, // 1s // 1s
}, maxAge: 1000,
}, },
},
} }

16
package.json
View File

@ -19,10 +19,13 @@
"compile": "yarn clean && tsc", "compile": "yarn clean && tsc",
"build": "yarn prepareSources && yarn compile && cp -r yarn.lock README.md config/ views/ dist/ && mkdir dist/types && cp src/types/* dist/types/", "build": "yarn prepareSources && yarn compile && cp -r yarn.lock README.md config/ views/ dist/ && mkdir dist/types && cp src/types/* dist/types/",
"dev": "yarn prepareSources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"maildev\"", "dev": "yarn prepareSources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"maildev\"",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx", "lint": "eslint .",
"release": "yarn build && yarn lint && yarn test && cd dist && yarn publish" "release": "yarn build && yarn lint && yarn test && cd dist && yarn publish"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/eslint-config": "sveltejs/eslint-config",
"@tsconfig/svelte": "^1.0.10",
"@types/chokidar": "^2.1.3",
"@types/compression": "^1.7.0", "@types/compression": "^1.7.0",
"@types/config": "^0.0.38", "@types/config": "^0.0.38",
"@types/connect-flash": "^0.0.36", "@types/connect-flash": "^0.0.36",
@ -41,18 +44,29 @@
"@types/nunjucks": "^3.1.3", "@types/nunjucks": "^3.1.3",
"@types/on-finished": "^2.3.1", "@types/on-finished": "^2.3.1",
"@types/redis": "^2.8.18", "@types/redis": "^2.8.18",
"@types/require-from-string": "^1.2.0",
"@types/supertest": "^2.0.10", "@types/supertest": "^2.0.10",
"@types/uuid": "^8.0.0", "@types/uuid": "^8.0.0",
"@types/ws": "^7.2.4", "@types/ws": "^7.2.4",
"@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0", "@typescript-eslint/parser": "^4.2.0",
"chokidar": "^3.5.1",
"concurrently": "^5.3.0", "concurrently": "^5.3.0",
"eslint": "^7.9.0", "eslint": "^7.9.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-svelte3": "^3.1.2",
"jest": "^26.1.0", "jest": "^26.1.0",
"maildev": "^1.1.0", "maildev": "^1.1.0",
"node-fetch": "^2.6.0", "node-fetch": "^2.6.0",
"node-sass": "^5.0.0",
"nodemon": "^2.0.6", "nodemon": "^2.0.6",
"require-from-string": "^2.0.2",
"sass": "^1.32.8",
"supertest": "^6.0.0", "supertest": "^6.0.0",
"svelte": "^3.35.0",
"svelte-check": "^1.2.3",
"svelte-preprocess": "^4.6.9",
"ts-jest": "^26.1.1", "ts-jest": "^26.1.1",
"typescript": "^4.0.2" "typescript": "^4.0.2"
}, },

2
src/TestApp.ts
View File

@ -32,6 +32,7 @@ import AddUsedToMagicLinksMigration from "./auth/magic_link/AddUsedToMagicLinksM
import packageJson = require('./package.json'); import packageJson = require('./package.json');
import PreviousUrlComponent from "./components/PreviousUrlComponent"; import PreviousUrlComponent from "./components/PreviousUrlComponent";
import AddNameChangedAtToUsersMigration from "./auth/migrations/AddNameChangedAtToUsersMigration"; import AddNameChangedAtToUsersMigration from "./auth/migrations/AddNameChangedAtToUsersMigration";
import FrontendToolsComponent from "./components/FrontendToolsComponent";
export const MIGRATIONS = [ export const MIGRATIONS = [
CreateMigrationsTable, CreateMigrationsTable,
@ -74,6 +75,7 @@ export default class TestApp extends Application {
// Dynamic views and routes // Dynamic views and routes
this.use(new NunjucksComponent(['test/views', 'views'])); this.use(new NunjucksComponent(['test/views', 'views']));
this.use(new FrontendToolsComponent('public', 'views', 'build'));
this.use(new PreviousUrlComponent()); this.use(new PreviousUrlComponent());
// Services // Services

276
src/components/FrontendToolsComponent.ts Normal file
View File

@ -0,0 +1,276 @@
import {Router} from "express";
import * as fs from "fs";
import path from "path";
import config from "config";
import ApplicationComponent from "../ApplicationComponent";
import {logger} from "../Logger";
import {ServerError} from "../HttpError";
import * as crypto from "crypto";
import {compile, preprocess} from "svelte/compiler";
import requireFromString from "require-from-string";
import {sveltePreprocess} from "svelte-preprocess/dist/autoProcess";
import chokidar from "chokidar";
import {CssResult} from "svelte/types/compiler/interfaces";
const BACKEND_CODE_PREFIX = 'swaf.';
const COMPILED_SVELTE_EXTENSION = '.swafview';
export default class FrontendToolsComponent extends ApplicationComponent {
public static getSveltePreCompileSeparator(file: string): string {
return '\n---' + crypto.createHash('sha1').update(path.basename(path.resolve(file))).digest('base64') + '---\n';
}
private content: Map<string, string> = new Map();
public constructor(
private readonly publicAssetsPath: string,
private readonly svelteViewsPath: string,
private readonly svelteOutputPath: string,
) {
super();
if (!fs.existsSync(svelteOutputPath)) {
fs.mkdirSync(svelteOutputPath);
}
}
public async start(): Promise<void> {
await this.cachePublicAssets();
await this.preCompileSvelteViews();
const watcher = chokidar.watch(this.svelteViewsPath, {persistent: true});
watcher.on('ready', () => {
logger.debug('Watching svelte assets for changes');
watcher.on('add', (path) => {
this.preCompileSvelte(path)
.catch(logger.error);
});
watcher.on('change', (path) => {
this.preCompileSvelte(path)
.catch(logger.error);
});
});
}
private async cachePublicAssets(): Promise<void> {
if (config.get<boolean>('view.enable_asset_cache')) {
logger.info('Caching assets from', this.publicAssetsPath, '...');
await this.forEachFileInDirRecursively(this.publicAssetsPath, file => this.cacheFile(file));
} else {
logger.info('Asset cache disabled.');
}
}
private async preCompileSvelteViews(): Promise<void> {
logger.info('Pre-compiling svelte views...');
await this.forEachFileInDirRecursively(this.svelteViewsPath, async file => {
if (file.endsWith('.svelte')) {
await this.preCompileSvelte(file);
}
});
}
public async handle(router: Router): Promise<void> {
router.use((req, res, next) => {
res.locals.inlineAsset = (urlPath: string) => {
if (!config.get<boolean>('view.enable_asset_cache')) {
return fs.readFileSync(path.resolve(this.publicAssetsPath + urlPath));
}
const content = this.content.get(urlPath);
if (!content) {
throw new ServerError('Asset ' + path + ' was not loaded.');
}
return content;
};
next();
});
}
private async forEachFileInDirRecursively(dir: string, consumer: (file: string) => Promise<void>): Promise<void> {
await new Promise<void[]>((resolve, reject) => {
fs.readdir(dir, (err, files) => {
if (err) return reject(err);
resolve(Promise.all<void>(files.map(file => new Promise<void>((resolve, reject) => {
file = path.join(dir, file);
fs.stat(file, (err, stat) => {
if (err) return reject(err);
if (stat.isDirectory()) {
resolve(this.forEachFileInDirRecursively(file, consumer));
} else {
resolve(consumer(file));
}
});
}))));
});
});
}
private async cacheFile(file: string): Promise<void> {
await new Promise<void>((resolve, reject) => {
fs.readFile(file, (err, data) => {
if (err) return reject(data);
const urlPath = file.replace(this.publicAssetsPath, '');
this.content.set(urlPath, data.toString());
logger.debug('Loaded', file, 'as', urlPath);
resolve();
});
});
}
private async preCompileSvelte(file: string): Promise<void> {
logger.debug('Pre-compiling', file);
const source = await new Promise<string>((resolve, reject) => {
fs.readFile(file, (err, data) => {
if (err) return reject(err);
resolve(data.toString());
});
});
const {backendReplacedCode, backendLines} = this.replaceBackendCode(source);
const preprocessed = await this.preprocessSvelte(backendReplacedCode, file);
// Server Side Render (initial HTML, no-js)
const ssr = this.compileSvelteSsr(preprocessed.code, file, preprocessed.sourcemap);
// Actual svelte
const svelte = this.compileSvelteJS(preprocessed.code, preprocessed.sourcemap);
const separator = FrontendToolsComponent.getSveltePreCompileSeparator(file);
const finalCode = [
[...backendLines.values()].join('\n'),
ssr.head,
ssr.html,
ssr.css.code,
ssr.css.map,
svelte.code,
svelte.map,
].join(separator);
const newFile = path.join(this.svelteOutputPath, path.basename(file) + COMPILED_SVELTE_EXTENSION);
await new Promise<void>((resolve, reject) => fs.writeFile(newFile, finalCode, err => {
if (err) return reject(err);
resolve();
}));
}
private replaceBackendCode(code: string): {
backendReplacedCode: string,
backendLines: string[],
} {
if (code.indexOf(`export let swaf = {};`) < 0) {
return {
backendReplacedCode: code,
backendLines: [],
};
}
const backendLines = new Set<string>();
let index = 0;
while ((index = code.indexOf(BACKEND_CODE_PREFIX, index + 1)) >= 0) {
// Escaping
if (index > 0 && code[index - 1] === '\\') {
const isEscapingEscaped = index > 1 && code[index - 2] === '\\';
code = code.substring(0, index - 1 - (isEscapingEscaped ? 1 : 0)) +
code.substring(index, code.length);
continue;
}
const startIndex = index + BACKEND_CODE_PREFIX.length;
let endIndex = startIndex;
let struct = 0;
while (endIndex < code.length) {
if (['(', '[', '{'].indexOf(code[endIndex]) >= 0) struct++;
if ([')', ']', '}'].indexOf(code[endIndex]) >= 0) {
struct--;
if (struct <= 0) {
if (struct === 0) endIndex++;
break;
}
}
if ([' ', '\n', '<'].indexOf(code[endIndex]) >= 0 && struct === 0) break;
endIndex++;
}
const backendLine = code.substring(startIndex, endIndex);
backendLines.add(backendLine);
code = code.substring(0, index) +
'swaf(`' + backendLine.replace(/([^\\])`/, '$1\\`') + '`)' +
code.substring(endIndex, code.length);
}
logger.silly('Replaced backend code');
return {
backendReplacedCode: code,
backendLines: [...backendLines],
};
}
private async preprocessSvelte(code: string, filename: string): Promise<{
code: string,
sourcemap?: SourceMap,
}> {
const preprocessed = await preprocess(
code,
sveltePreprocess({
typescript: {
tsconfigFile: 'tsconfig.views.json',
},
}),
{
filename: filename,
},
);
return {
code: preprocessed.code,
sourcemap: preprocessed.map as (SourceMap | undefined),
};
}
private compileSvelteSsr(code: string, filename: string, sourcemap?: SourceMap): {
head: string,
css: CssResult,
html: string,
} {
const svelteSsr = compile(code, {
dev: false,
generate: 'ssr',
format: 'cjs',
sourcemap: sourcemap,
cssOutputFilename: filename + '.css',
});
return requireFromString(svelteSsr.js.code, filename).default.render({
swaf: () => 'undefined',
});
}
private compileSvelteJS(code: string, sourcemap?: SourceMap): {
code: string,
map: SourceMap,
} {
const compiled = compile(code, {
dev: false,
hydratable: true,
sourcemap: sourcemap,
});
return {
code: compiled.js.code,
map: compiled.js.map,
};
}
}
export type SourceMap = string | Record<string, unknown> | undefined;

5
tsconfig.json
View File

@ -24,9 +24,10 @@
"lib": [ "lib": [
"es2020" "es2020"
], ],
"resolveJsonModule": true "resolveJsonModule": true,
"skipLibCheck": true
}, },
"include": [ "include": [
"src/**/*" "src/**/*"
] ]
} }

19
tsconfig.views.json Normal file
View File

@ -0,0 +1,19 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"outDir": "public/js",
"rootDir": "./views",
"target": "ES6",
"strict": true,
"lib": [
"es2020",
"DOM"
],
"typeRoots": [
"./node_modules/@types"
]
},
"include": [
"assets/ts/**/*"
]
}

41
views/home.svelte Normal file
View File

@ -0,0 +1,41 @@
<script lang="ts">
export let swaf = {};
let count: number;
function handleClick(): void {
count++;
}
</script>
<style lang="scss">
p:last-of-type {
color: blueviolet;
}
.style-test {
p {
color: blue;
}
}
</style>
<h1>Hello {count}!</h1>
<button on:click={handleClick}>More hellos!!</button>
{#if swaf.route('auth') === '/'}
We're home!
{:else}
We're somewhere else... {swaf.route('auth')}
{/if}
<p>The route to auth is {swaf.route('auth')}</p>
<p>\$$.notcode</p>
<p>{`{\\$$.escaped}`}</p>
<div class="style-test">
<p>Blue!</p>
</div>

890
yarn.lock
View File

File diff suppressed because it is too large Load Diff