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

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

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,
},
} }

173
package.json
View File

@ -1,82 +1,95 @@
{ {
"name": "swaf", "name": "swaf",
"version": "0.23.10", "version": "0.23.10",
"description": "Structure Web Application Framework.", "description": "Structure Web Application Framework.",
"repository": "https://eternae.ink/ashpie/swaf", "repository": "https://eternae.ink/ashpie/swaf",
"author": "Alice Gaudon <alice@gaudon.pro>", "author": "Alice Gaudon <alice@gaudon.pro>",
"license": "MIT", "license": "MIT",
"readme": "README.md", "readme": "README.md",
"publishConfig": { "publishConfig": {
"registry": "https://registry.npmjs.com", "registry": "https://registry.npmjs.com",
"access": "public" "access": "public"
}, },
"main": "dist/main.js", "main": "dist/main.js",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",
"scripts": { "scripts": {
"test": "jest --verbose --runInBand", "test": "jest --verbose --runInBand",
"clean": "node scripts/clean.js", "clean": "node scripts/clean.js",
"prepare-sources": "node scripts/prepare-sources.js", "prepare-sources": "node scripts/prepare-sources.js",
"compile": "yarn clean && tsc", "compile": "yarn clean && tsc",
"build": "yarn prepare-sources && yarn compile && node scripts/dist.js", "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\"", "dev": "yarn prepare-sources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"maildev\"",
"lint": "eslint .", "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": {
"@types/compression": "^1.7.0", "@sveltejs/eslint-config": "sveltejs/eslint-config",
"@types/config": "^0.0.38", "@tsconfig/svelte": "^1.0.10",
"@types/connect-flash": "^0.0.36", "@types/compression": "^1.7.0",
"@types/cookie": "^0.4.0", "@types/config": "^0.0.38",
"@types/cookie-parser": "^1.4.2", "@types/connect-flash": "^0.0.36",
"@types/express": "^4.17.6", "@types/cookie": "^0.4.0",
"@types/express-session": "^1.17.0", "@types/cookie-parser": "^1.4.2",
"@types/formidable": "^1.0.31", "@types/express": "^4.17.6",
"@types/geoip-lite": "^1.1.31", "@types/express-session": "^1.17.0",
"@types/jest": "^26.0.4", "@types/formidable": "^1.0.31",
"@types/mjml": "^4.0.4", "@types/geoip-lite": "^1.1.31",
"@types/mysql": "^2.15.10", "@types/jest": "^26.0.4",
"@types/nanoid": "^2.1.0", "@types/mjml": "^4.0.4",
"@types/node-fetch": "^2.5.7", "@types/mysql": "^2.15.10",
"@types/nodemailer": "^6.4.0", "@types/nanoid": "^2.1.0",
"@types/nunjucks": "^3.1.3", "@types/node-fetch": "^2.5.7",
"@types/on-finished": "^2.3.1", "@types/nodemailer": "^6.4.0",
"@types/redis": "^2.8.18", "@types/nunjucks": "^3.1.3",
"@types/supertest": "^2.0.10", "@types/on-finished": "^2.3.1",
"@types/uuid": "^8.0.0", "@types/redis": "^2.8.18",
"@types/ws": "^7.2.4", "@types/require-from-string": "^1.2.0",
"@typescript-eslint/eslint-plugin": "^4.2.0", "@types/supertest": "^2.0.10",
"@typescript-eslint/parser": "^4.2.0", "@types/uuid": "^8.0.0",
"concurrently": "^6.0.0", "@types/ws": "^7.2.4",
"eslint": "^7.9.0", "@typescript-eslint/eslint-plugin": "^4.2.0",
"jest": "^26.1.0", "@typescript-eslint/parser": "^4.2.0",
"maildev": "^1.1.0", "chokidar": "^3.5.1",
"node-fetch": "^2.6.0", "concurrently": "^6.0.0",
"nodemon": "^2.0.6", "eslint": "^7.9.0",
"supertest": "^6.0.0", "eslint-plugin-import": "^2.22.1",
"ts-jest": "^26.1.1", "eslint-plugin-node": "^11.1.0",
"typescript": "^4.0.2" "eslint-plugin-svelte3": "^3.1.2",
}, "jest": "^26.1.0",
"dependencies": { "maildev": "^1.1.0",
"argon2": "^0.27.0", "node-fetch": "^2.6.0",
"compression": "^1.7.4", "node-sass": "^5.0.0",
"config": "^3.3.1", "nodemon": "^2.0.6",
"connect-flash": "^0.1.1", "require-from-string": "^2.0.2",
"cookie": "^0.4.1", "sass": "^1.32.8",
"cookie-parser": "^1.4.5", "supertest": "^6.0.0",
"express": "^4.17.1", "svelte": "^3.35.0",
"express-session": "^1.17.1", "svelte-check": "^1.2.3",
"formidable": "^1.2.2", "svelte-preprocess": "^4.6.9",
"geoip-lite": "^1.4.2", "ts-jest": "^26.1.1",
"mjml": "^4.6.2", "typescript": "^4.0.2"
"mysql": "^2.18.1", },
"nanoid": "^3.1.20", "dependencies": {
"nodemailer": "^6.4.6", "argon2": "^0.27.0",
"nunjucks": "^3.2.1", "compression": "^1.7.4",
"on-finished": "^2.3.0", "config": "^3.3.1",
"redis": "^3.0.2", "connect-flash": "^0.1.1",
"ts-node": "^9.0.0", "cookie": "^0.4.1",
"tslog": "^3.0.1", "cookie-parser": "^1.4.5",
"uuid": "^8.0.0", "express": "^4.17.1",
"ws": "^7.2.3" "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"
}
} }

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;

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>

1293
yarn.lock
View File

File diff suppressed because it is too large Load Diff