Move to esbuild

master
Kuba Orlik 3 years ago
parent b24d6d1a0b
commit c64a950746

@ -0,0 +1,40 @@
const { build } = require("esbuild");
const { sassPlugin } = require("esbuild-sass-plugin");
const glob = require("tiny-glob");
const watch = process.argv.at(-1) === "--watch";
(async () => {
let entryPoints = Object.fromEntries(
(await glob("./src/back/**/*.ts")).map((e) => [
e.replace(/\.ts$/, ""),
e,
])
);
build({
entryPoints,
sourcemap: true,
outdir: "./dist",
logLevel: "info",
platform: "node",
watch,
target: "node16",
format: "cjs",
});
build({
entryPoints: ["./src/front/main.scss"],
sourcemap: true,
outfile: "./public/dist/style.css",
logLevel: "info",
watch,
plugins: [sassPlugin()],
});
build({
entryPoints: ["./src/front/index.ts"],
sourcemap: true,
outfile: "./public/dist/bundle.js",
logLevel: "info",
bundle: true,
watch,
});
})();

5716
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -2,17 +2,15 @@
"name": "sealious-playground", "name": "sealious-playground",
"version": "1.0.1", "version": "1.0.1",
"description": "", "description": "",
"main": "./dist/index.js", "main": "./dist/src/back/index.js",
"scripts": { "scripts": {
"start": "docker-compose up -d db && node .", "start": "docker-compose up -d db && node .",
"test-cmd": "node test.js", "test-cmd": "node test.js",
"test": "./npm.sh run test-cmd -- ", "test": "./npm.sh run test-cmd -- ",
"build:back": "tsc -p src/back", "typecheck:back": "tsc --noEmit -p src/back",
"build:front": "webpack", "typecheck:front": "tsc --noEmit -p src/front",
"build": "npm run build:back && npm run build:front", "build": "node ./esbuild.js",
"watch:back": "tsc --watch -p src/back", "watch": "multiple-scripts-tmux \"npm run typecheck:back --watch\" \"SEALIOUS_PORT=$SEALIOUS_PORT SEALIOUS_BASE_URL=$SEALIOUS_BASE_URL nodemon --enable-source-maps .\" \"npm run build -- --watch\" \"npm run typecheck:front --watch\" ",
"watch:front": "webpack --watch",
"watch": "multiple-scripts-tmux \"npm run watch:back\" \"SEALIOUS_PORT=$SEALIOUS_PORT SEALIOUS_BASE_URL=$SEALIOUS_BASE_URL nodemon --enable-source-maps .\" \"npm run watch:front\"",
"test-reports": "npm run build && rm -fr .xunit coverage && docker-compose up -d db mailcatcher && npm run test -- --cover --test-report", "test-reports": "npm run build && rm -fr .xunit coverage && docker-compose up -d db mailcatcher && npm run test -- --cover --test-report",
"cover-html": "npm run test-reports -- --cover-html && xdg-open coverage/lcov-report/index.html" "cover-html": "npm run test-reports -- --cover-html && xdg-open coverage/lcov-report/index.html"
}, },
@ -20,8 +18,9 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@hotwired/turbo": "^7.0.0-beta.3", "@hotwired/turbo": "^7.1.0",
"@koa/router": "^10.0.0", "@koa/router": "^10.0.0",
"esbuild-node-tsc": "^1.8.2",
"multiple-scripts-tmux": "^1.0.4", "multiple-scripts-tmux": "^1.0.4",
"nodemon": "^2.0.7", "nodemon": "^2.0.7",
"sealious": "^0.13.52", "sealious": "^0.13.52",
@ -31,8 +30,8 @@
"devDependencies": { "devDependencies": {
"@sealcode/ansi-html-stream": "^1.0.1", "@sealcode/ansi-html-stream": "^1.0.1",
"@types/koa__router": "^8.0.4", "@types/koa__router": "^8.0.4",
"babel-loader": "^8.2.2", "esbuild": "^0.14.10",
"concurrently": "^5.3.0", "esbuild-sass-plugin": "^2.0.0",
"eslint": "^7.19.0", "eslint": "^7.19.0",
"eslint-config-prettier": "^7.2.0", "eslint-config-prettier": "^7.2.0",
"eslint-plugin-prettier": "^3.3.1", "eslint-plugin-prettier": "^3.3.1",
@ -42,9 +41,8 @@
"mri": "^1.1.6", "mri": "^1.1.6",
"nyc": "^15.1.0", "nyc": "^15.1.0",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"tiny-glob": "^0.2.9",
"ts-loader": "^8.0.14", "ts-loader": "^8.0.14",
"typescript": "^4.1.3", "typescript": "^4.1.3"
"webpack": "^5.12.2",
"webpack-cli": "^4.3.1"
} }
} }

@ -8,9 +8,9 @@ export default function html(ctx: BaseContext, body: Templatable): Readable {
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<script src="/dist/bundle.js"></script> <script async src="/dist/bundle.js"></script>
<link href="/dist/style.css" rel="stylesheet" type="text/css" />
</head> </head>
<link href="/style.css" rel="stylesheet" type="text/css" />
${body} ${body}
</html>`; </html>`;
} }

@ -1,6 +1,7 @@
import _locreq from "locreq"; import _locreq from "locreq";
import Sealious from "sealious"; import Sealious from "sealious";
import TheApp from "./app"; import TheApp from "./app";
import { mainRouter } from "./routes";
const locreq = _locreq(__dirname); const locreq = _locreq(__dirname);
declare module "koa" { declare module "koa" {
@ -11,15 +12,16 @@ declare module "koa" {
} }
} }
export const app = new TheApp(); const app = new TheApp();
void app
.start() app.start()
.then(() => { .then(async () => {
//populate scripts go here //populate scripts go here
if (process.env.SEALIOUS_SANITY === "true") { if (process.env.SEALIOUS_SANITY === "true") {
console.log("Exiting with error code 0"); console.log("Exiting with error code 0");
process.exit(0); process.exit(0);
} }
mainRouter(app.HTTPServer.router);
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
@ -29,7 +31,4 @@ void app
} }
}); });
export const router = app.HTTPServer.router;
require("./routes/index");
app.HTTPServer.addStaticRoute("/", locreq.resolve("public")); app.HTTPServer.addStaticRoute("/", locreq.resolve("public"));

@ -1,25 +1,14 @@
import Router from "@koa/router";
import { Middlewares } from "sealious"; import { Middlewares } from "sealious";
import html from "../html"; import { loginRouter } from "./login/index.js";
import { NewTask, TaskList } from "../views/tasks"; import { MainView } from "./main-view.js";
import { BaseContext } from "koa"; import { tasksRouter } from "./tasks/index.js";
import { Readable } from "stream";
import { tempstream } from "tempstream";
import { router } from "..";
export function MainView(ctx: BaseContext): Readable { export const mainRouter = (router: Router): void => {
return html( router.get("/", Middlewares.extractContext(), async (ctx) => {
ctx, ctx.body = MainView(ctx);
/* HTML */ tempstream` <title>My ToDo App</title> });
<body>
<h1>My ToDo App</h1>
${TaskList(ctx.$context)} ${NewTask()}
</body>`
);
}
router.get("/", Middlewares.extractContext(), async (ctx) => { loginRouter(router);
ctx.body = MainView(ctx); tasksRouter(router);
}); };
require("./login/index");
require("./tasks/index");

@ -1,36 +1,41 @@
import Router from "@koa/router";
import { Middlewares } from "sealious"; import { Middlewares } from "sealious";
import { router } from "../..";
import html from "../../html"; import html from "../../html";
router.get("/login", Middlewares.extractContext(), async (ctx) => { export const loginRouter = (router: Router): void => {
ctx.body = html(ctx, LoginForm()); router.get("/login", Middlewares.extractContext(), async (ctx) => {
}); ctx.body = html(ctx, LoginForm());
});
router.post( router.post(
"/login", "/login",
Middlewares.extractContext(), Middlewares.extractContext(),
Middlewares.parseBody(), Middlewares.parseBody(),
async (ctx) => { async (ctx) => {
try { try {
const session_id = await ctx.$app.collections.sessions.login( const session_id = await ctx.$app.collections.sessions.login(
ctx.$body.username as string, ctx.$body.username as string,
ctx.$body.password as string ctx.$body.password as string
); );
ctx.cookies.set("sealious-session", session_id, { ctx.cookies.set("sealious-session", session_id, {
maxAge: 1000 * 60 * 60 * 24 * 7, maxAge: 1000 * 60 * 60 * 24 * 7,
secure: ctx.request.protocol === "https", secure: ctx.request.protocol === "https",
overwrite: true, overwrite: true,
}); });
ctx.redirect("/user"); ctx.redirect("/user");
} catch (e) { } catch (e) {
ctx.status = 422; ctx.status = 422;
ctx.body = html( ctx.body = html(
ctx, ctx,
LoginForm(ctx.$body.username as string, (e as Error).message) LoginForm(
); ctx.$body.username as string,
(e as Error).message
)
);
}
} }
} );
); };
function LoginForm(username = "", error_message?: string): string { function LoginForm(username = "", error_message?: string): string {
if (error_message) { if (error_message) {

@ -0,0 +1,17 @@
import html from "../html";
import { BaseContext } from "koa";
import { Readable } from "stream";
import { tempstream } from "tempstream";
import { NewTask, TaskList } from "../views/tasks";
export function MainView(ctx: BaseContext): Readable {
return html(
ctx,
tempstream/* HTML */ ` <title>My Own ToDo App</title>
<body>
<h1>My ToDo App (with esbuild!)</h1>
${TaskList(ctx.$context)} ${NewTask()}
</body>`
);
}

@ -1,27 +1,33 @@
import Router from "@koa/router";
import { Middlewares } from "sealious"; import { Middlewares } from "sealious";
import { MainView } from ".."; import { MainView } from "../main-view";
import { router } from "../..";
router.post( export const tasksRouter = (router: Router): void => {
"/tasks", router.post(
Middlewares.extractContext(), "/tasks",
Middlewares.parseBody(), Middlewares.extractContext(),
async (ctx) => { Middlewares.parseBody(),
await ctx.$app.collections.tasks async (ctx) => {
.make({ await ctx.$app.collections.tasks
title: ctx.$body.title as string, .make({
done: false, title: ctx.$body.title as string,
}) done: false,
.save(ctx.$context); })
ctx.body = MainView(ctx); .save(ctx.$context);
} ctx.body = MainView(ctx);
); }
);
router.delete("/tasks/:task_id", Middlewares.extractContext(), async (ctx) => { router.delete(
const task = await ctx.$app.collections.tasks.getByID( "/tasks/:task_id",
ctx.$context, Middlewares.extractContext(),
ctx.params.task_id async (ctx) => {
const task = await ctx.$app.collections.tasks.getByID(
ctx.$context,
ctx.params.task_id
);
await task.remove(ctx.$context);
ctx.body = MainView(ctx);
}
); );
await task.remove(ctx.$context); };
ctx.body = MainView(ctx);
});

@ -25,5 +25,4 @@ body {
padding: 0; padding: 0;
line-height: 0; line-height: 0;
padding: 0.5rem; padding: 0.5rem;
margin-left: 0.5rem;
} }
Loading…
Cancel
Save