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 +1699 -504
12 changed files with 1699 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5f0e11efed - Show all commits

125
.eslintrc.js Normal file
View File

@ -0,0 +1,125 @@
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/**/*',
"scripts/**/*",
],
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');
}
},
}

111
.eslintrc.json
View File

@ -1,111 +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",
"scripts/**/*",
"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

10
config/default.json5
View File

@ -31,7 +31,8 @@
secret: 'default', secret: 'default',
cookie: { cookie: {
secure: false, secure: false,
maxAge: 31557600000, // 1 year // 1 year
maxAge: 31557600000,
}, },
}, },
mail: { mail: {
@ -46,12 +47,15 @@
}, },
view: { view: {
cache: false, cache: false,
enable_asset_cache: false,
}, },
magic_link: { magic_link: {
validity_period: 20, validity_period: 20,
}, },
auth: { auth: {
approval_mode: false, // Registered accounts need to be approved by an administrator // Registered accounts need to be approved by an administrator
name_change_wait_period: 2592000000, // 30 days approval_mode: false,
// 30 days
name_change_wait_period: 2592000000,
}, },
} }

4
config/production.json5
View File

@ -18,4 +18,8 @@
magic_link: { magic_link: {
validity_period: 900, validity_period: 900,
}, },
view: {
cache: true,
enable_asset_cache: true,
},
} }

13
package.json
View File

@ -23,6 +23,8 @@
"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/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 +43,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": "^6.0.0", "concurrently": "^6.0.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 PreviousUrlComponent from "./components/PreviousUrlComponent"; import PreviousUrlComponent from "./components/PreviousUrlComponent";
import AddNameChangedAtToUsersMigration from "./auth/migrations/AddNameChangedAtToUsersMigration"; import AddNameChangedAtToUsersMigration from "./auth/migrations/AddNameChangedAtToUsersMigration";
import BackendController from "./helpers/BackendController"; import BackendController from "./helpers/BackendController";
import FrontendToolsComponent from "./components/FrontendToolsComponent";
import packageJson = require('./package.json'); import packageJson = require('./package.json');
export const MIGRATIONS = [ export const MIGRATIONS = [
@ -75,6 +76,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;

3
tsconfig.json
View File

@ -24,7 +24,8 @@
"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>

1293
yarn.lock
View File

File diff suppressed because it is too large Load Diff