Add svelte pre-compilation
This commit is contained in:
parent
a34b97ad5a
commit
5f0e11efed
125
.eslintrc.js
Normal file
125
.eslintrc.js
Normal 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
111
.eslintrc.json
@ -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
2
.gitignore
vendored
@ -1,6 +1,8 @@
|
||||
.idea
|
||||
node_modules
|
||||
build
|
||||
dist
|
||||
public
|
||||
yarn-error.log
|
||||
|
||||
src/package.json
|
||||
|
||||
@ -1,57 +1,61 @@
|
||||
{
|
||||
app: {
|
||||
name: 'Example App',
|
||||
contact_email: 'contact@example.net',
|
||||
display_email_warning: true,
|
||||
},
|
||||
log: {
|
||||
level: "DEBUG",
|
||||
verbose: true,
|
||||
db_level: "ERROR",
|
||||
},
|
||||
public_url: "http://localhost:4899",
|
||||
public_websocket_url: "ws://localhost:4899",
|
||||
listen_addr: '127.0.0.1',
|
||||
port: 4899,
|
||||
gitlab_webhook_token: 'default',
|
||||
mysql: {
|
||||
connectionLimit: 10,
|
||||
host: "localhost",
|
||||
user: "root",
|
||||
password: "",
|
||||
database: "swaf",
|
||||
create_database_automatically: false,
|
||||
},
|
||||
redis: {
|
||||
host: "127.0.0.1",
|
||||
port: 6379,
|
||||
prefix: 'swaf',
|
||||
},
|
||||
session: {
|
||||
secret: 'default',
|
||||
cookie: {
|
||||
secure: false,
|
||||
maxAge: 31557600000, // 1 year
|
||||
},
|
||||
},
|
||||
mail: {
|
||||
host: "127.0.0.1",
|
||||
port: "1025",
|
||||
secure: false,
|
||||
username: "",
|
||||
password: "",
|
||||
allow_invalid_tls: true,
|
||||
from: 'contact@example.net',
|
||||
from_name: 'Example App',
|
||||
},
|
||||
view: {
|
||||
cache: false,
|
||||
},
|
||||
magic_link: {
|
||||
validity_period: 20,
|
||||
},
|
||||
auth: {
|
||||
approval_mode: false, // Registered accounts need to be approved by an administrator
|
||||
name_change_wait_period: 2592000000, // 30 days
|
||||
},
|
||||
app: {
|
||||
name: 'Example App',
|
||||
contact_email: 'contact@example.net',
|
||||
display_email_warning: true,
|
||||
},
|
||||
log: {
|
||||
level: "DEBUG",
|
||||
verbose: true,
|
||||
db_level: "ERROR",
|
||||
},
|
||||
public_url: "http://localhost:4899",
|
||||
public_websocket_url: "ws://localhost:4899",
|
||||
listen_addr: '127.0.0.1',
|
||||
port: 4899,
|
||||
gitlab_webhook_token: 'default',
|
||||
mysql: {
|
||||
connectionLimit: 10,
|
||||
host: "localhost",
|
||||
user: "root",
|
||||
password: "",
|
||||
database: "swaf",
|
||||
create_database_automatically: false,
|
||||
},
|
||||
redis: {
|
||||
host: "127.0.0.1",
|
||||
port: 6379,
|
||||
prefix: 'swaf',
|
||||
},
|
||||
session: {
|
||||
secret: 'default',
|
||||
cookie: {
|
||||
secure: false,
|
||||
// 1 year
|
||||
maxAge: 31557600000,
|
||||
},
|
||||
},
|
||||
mail: {
|
||||
host: "127.0.0.1",
|
||||
port: "1025",
|
||||
secure: false,
|
||||
username: "",
|
||||
password: "",
|
||||
allow_invalid_tls: true,
|
||||
from: 'contact@example.net',
|
||||
from_name: 'Example App',
|
||||
},
|
||||
view: {
|
||||
cache: false,
|
||||
enable_asset_cache: false,
|
||||
},
|
||||
magic_link: {
|
||||
validity_period: 20,
|
||||
},
|
||||
auth: {
|
||||
// Registered accounts need to be approved by an administrator
|
||||
approval_mode: false,
|
||||
// 30 days
|
||||
name_change_wait_period: 2592000000,
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,21 +1,25 @@
|
||||
{
|
||||
log: {
|
||||
level: "DEV",
|
||||
verbose: false,
|
||||
db_level: "ERROR",
|
||||
},
|
||||
public_url: "https://swaf.example",
|
||||
public_websocket_url: "wss://swaf.example",
|
||||
session: {
|
||||
cookie: {
|
||||
secure: true,
|
||||
},
|
||||
},
|
||||
mail: {
|
||||
secure: true,
|
||||
allow_invalid_tls: false,
|
||||
},
|
||||
magic_link: {
|
||||
validity_period: 900,
|
||||
},
|
||||
log: {
|
||||
level: "DEV",
|
||||
verbose: false,
|
||||
db_level: "ERROR",
|
||||
},
|
||||
public_url: "https://swaf.example",
|
||||
public_websocket_url: "wss://swaf.example",
|
||||
session: {
|
||||
cookie: {
|
||||
secure: true,
|
||||
},
|
||||
},
|
||||
mail: {
|
||||
secure: true,
|
||||
allow_invalid_tls: false,
|
||||
},
|
||||
magic_link: {
|
||||
validity_period: 900,
|
||||
},
|
||||
view: {
|
||||
cache: true,
|
||||
enable_asset_cache: true,
|
||||
},
|
||||
}
|
||||
|
||||
173
package.json
173
package.json
@ -1,82 +1,95 @@
|
||||
{
|
||||
"name": "swaf",
|
||||
"version": "0.23.10",
|
||||
"description": "Structure Web Application Framework.",
|
||||
"repository": "https://eternae.ink/ashpie/swaf",
|
||||
"author": "Alice Gaudon <alice@gaudon.pro>",
|
||||
"license": "MIT",
|
||||
"readme": "README.md",
|
||||
"publishConfig": {
|
||||
"registry": "https://registry.npmjs.com",
|
||||
"access": "public"
|
||||
},
|
||||
"main": "dist/main.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"test": "jest --verbose --runInBand",
|
||||
"clean": "node scripts/clean.js",
|
||||
"prepare-sources": "node scripts/prepare-sources.js",
|
||||
"compile": "yarn clean && tsc",
|
||||
"build": "yarn prepare-sources && yarn compile && node scripts/dist.js",
|
||||
"dev": "yarn prepare-sources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"maildev\"",
|
||||
"lint": "eslint .",
|
||||
"release": "yarn build && yarn lint && yarn test && cd dist && yarn publish"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/compression": "^1.7.0",
|
||||
"@types/config": "^0.0.38",
|
||||
"@types/connect-flash": "^0.0.36",
|
||||
"@types/cookie": "^0.4.0",
|
||||
"@types/cookie-parser": "^1.4.2",
|
||||
"@types/express": "^4.17.6",
|
||||
"@types/express-session": "^1.17.0",
|
||||
"@types/formidable": "^1.0.31",
|
||||
"@types/geoip-lite": "^1.1.31",
|
||||
"@types/jest": "^26.0.4",
|
||||
"@types/mjml": "^4.0.4",
|
||||
"@types/mysql": "^2.15.10",
|
||||
"@types/nanoid": "^2.1.0",
|
||||
"@types/node-fetch": "^2.5.7",
|
||||
"@types/nodemailer": "^6.4.0",
|
||||
"@types/nunjucks": "^3.1.3",
|
||||
"@types/on-finished": "^2.3.1",
|
||||
"@types/redis": "^2.8.18",
|
||||
"@types/supertest": "^2.0.10",
|
||||
"@types/uuid": "^8.0.0",
|
||||
"@types/ws": "^7.2.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.2.0",
|
||||
"@typescript-eslint/parser": "^4.2.0",
|
||||
"concurrently": "^6.0.0",
|
||||
"eslint": "^7.9.0",
|
||||
"jest": "^26.1.0",
|
||||
"maildev": "^1.1.0",
|
||||
"node-fetch": "^2.6.0",
|
||||
"nodemon": "^2.0.6",
|
||||
"supertest": "^6.0.0",
|
||||
"ts-jest": "^26.1.1",
|
||||
"typescript": "^4.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"argon2": "^0.27.0",
|
||||
"compression": "^1.7.4",
|
||||
"config": "^3.3.1",
|
||||
"connect-flash": "^0.1.1",
|
||||
"cookie": "^0.4.1",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"express": "^4.17.1",
|
||||
"express-session": "^1.17.1",
|
||||
"formidable": "^1.2.2",
|
||||
"geoip-lite": "^1.4.2",
|
||||
"mjml": "^4.6.2",
|
||||
"mysql": "^2.18.1",
|
||||
"nanoid": "^3.1.20",
|
||||
"nodemailer": "^6.4.6",
|
||||
"nunjucks": "^3.2.1",
|
||||
"on-finished": "^2.3.0",
|
||||
"redis": "^3.0.2",
|
||||
"ts-node": "^9.0.0",
|
||||
"tslog": "^3.0.1",
|
||||
"uuid": "^8.0.0",
|
||||
"ws": "^7.2.3"
|
||||
}
|
||||
"name": "swaf",
|
||||
"version": "0.23.10",
|
||||
"description": "Structure Web Application Framework.",
|
||||
"repository": "https://eternae.ink/ashpie/swaf",
|
||||
"author": "Alice Gaudon <alice@gaudon.pro>",
|
||||
"license": "MIT",
|
||||
"readme": "README.md",
|
||||
"publishConfig": {
|
||||
"registry": "https://registry.npmjs.com",
|
||||
"access": "public"
|
||||
},
|
||||
"main": "dist/main.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"test": "jest --verbose --runInBand",
|
||||
"clean": "node scripts/clean.js",
|
||||
"prepare-sources": "node scripts/prepare-sources.js",
|
||||
"compile": "yarn clean && tsc",
|
||||
"build": "yarn prepare-sources && yarn compile && node scripts/dist.js",
|
||||
"dev": "yarn prepare-sources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"maildev\"",
|
||||
"lint": "eslint .",
|
||||
"release": "yarn build && yarn lint && yarn test && cd dist && yarn publish"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/eslint-config": "sveltejs/eslint-config",
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"@types/compression": "^1.7.0",
|
||||
"@types/config": "^0.0.38",
|
||||
"@types/connect-flash": "^0.0.36",
|
||||
"@types/cookie": "^0.4.0",
|
||||
"@types/cookie-parser": "^1.4.2",
|
||||
"@types/express": "^4.17.6",
|
||||
"@types/express-session": "^1.17.0",
|
||||
"@types/formidable": "^1.0.31",
|
||||
"@types/geoip-lite": "^1.1.31",
|
||||
"@types/jest": "^26.0.4",
|
||||
"@types/mjml": "^4.0.4",
|
||||
"@types/mysql": "^2.15.10",
|
||||
"@types/nanoid": "^2.1.0",
|
||||
"@types/node-fetch": "^2.5.7",
|
||||
"@types/nodemailer": "^6.4.0",
|
||||
"@types/nunjucks": "^3.1.3",
|
||||
"@types/on-finished": "^2.3.1",
|
||||
"@types/redis": "^2.8.18",
|
||||
"@types/require-from-string": "^1.2.0",
|
||||
"@types/supertest": "^2.0.10",
|
||||
"@types/uuid": "^8.0.0",
|
||||
"@types/ws": "^7.2.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.2.0",
|
||||
"@typescript-eslint/parser": "^4.2.0",
|
||||
"chokidar": "^3.5.1",
|
||||
"concurrently": "^6.0.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",
|
||||
"maildev": "^1.1.0",
|
||||
"node-fetch": "^2.6.0",
|
||||
"node-sass": "^5.0.0",
|
||||
"nodemon": "^2.0.6",
|
||||
"require-from-string": "^2.0.2",
|
||||
"sass": "^1.32.8",
|
||||
"supertest": "^6.0.0",
|
||||
"svelte": "^3.35.0",
|
||||
"svelte-check": "^1.2.3",
|
||||
"svelte-preprocess": "^4.6.9",
|
||||
"ts-jest": "^26.1.1",
|
||||
"typescript": "^4.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"argon2": "^0.27.0",
|
||||
"compression": "^1.7.4",
|
||||
"config": "^3.3.1",
|
||||
"connect-flash": "^0.1.1",
|
||||
"cookie": "^0.4.1",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"express": "^4.17.1",
|
||||
"express-session": "^1.17.1",
|
||||
"formidable": "^1.2.2",
|
||||
"geoip-lite": "^1.4.2",
|
||||
"mjml": "^4.6.2",
|
||||
"mysql": "^2.18.1",
|
||||
"nanoid": "^3.1.20",
|
||||
"nodemailer": "^6.4.6",
|
||||
"nunjucks": "^3.2.1",
|
||||
"on-finished": "^2.3.0",
|
||||
"redis": "^3.0.2",
|
||||
"ts-node": "^9.0.0",
|
||||
"tslog": "^3.0.1",
|
||||
"uuid": "^8.0.0",
|
||||
"ws": "^7.2.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,6 +32,7 @@ import AddUsedToMagicLinksMigration from "./auth/magic_link/AddUsedToMagicLinksM
|
||||
import PreviousUrlComponent from "./components/PreviousUrlComponent";
|
||||
import AddNameChangedAtToUsersMigration from "./auth/migrations/AddNameChangedAtToUsersMigration";
|
||||
import BackendController from "./helpers/BackendController";
|
||||
import FrontendToolsComponent from "./components/FrontendToolsComponent";
|
||||
import packageJson = require('./package.json');
|
||||
|
||||
export const MIGRATIONS = [
|
||||
@ -75,6 +76,7 @@ export default class TestApp extends Application {
|
||||
|
||||
// Dynamic views and routes
|
||||
this.use(new NunjucksComponent(['test/views', 'views']));
|
||||
this.use(new FrontendToolsComponent('public', 'views', 'build'));
|
||||
this.use(new PreviousUrlComponent());
|
||||
|
||||
// Services
|
||||
|
||||
276
src/components/FrontendToolsComponent.ts
Normal file
276
src/components/FrontendToolsComponent.ts
Normal 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;
|
||||
@ -24,7 +24,8 @@
|
||||
"lib": [
|
||||
"es2020"
|
||||
],
|
||||
"resolveJsonModule": true
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
|
||||
19
tsconfig.views.json
Normal file
19
tsconfig.views.json
Normal 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
41
views/home.svelte
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user