Working webpack config
parent
6dea12aea3
commit
299c5b72cc
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,29 @@
|
|||||||
|
html {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
max-width: 1024px;
|
||||||
|
margin: 1rem auto;
|
||||||
|
background: white;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task input[type="checkbox"] {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-button {
|
||||||
|
height: 1rem;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 0;
|
||||||
|
padding: 0.5rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default function frame(id: string, body: string) {
|
||||||
|
return /* HTML */ `<turbo-frame id="${id}"> ${body} </turbo-frame>`;
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
export default function html(body: string): string {
|
||||||
|
return /* HTML */ `<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||||
|
${body}
|
||||||
|
<script type="module">
|
||||||
|
import hotwiredTurbo from "https://cdn.skypack.dev/@hotwired/turbo";
|
||||||
|
</script>
|
||||||
|
<script src="/bundle.js"></script>
|
||||||
|
</html>`;
|
||||||
|
}
|
||||||
@ -0,0 +1,147 @@
|
|||||||
|
import _locreq from "locreq";
|
||||||
|
import { resolve } from "path";
|
||||||
|
import Sealious, {
|
||||||
|
App,
|
||||||
|
Collection,
|
||||||
|
Context,
|
||||||
|
FieldTypes,
|
||||||
|
Policies,
|
||||||
|
Middlewares,
|
||||||
|
CollectionItem,
|
||||||
|
} from "sealious";
|
||||||
|
import frame from "./frame";
|
||||||
|
import html from "./html";
|
||||||
|
const locreq = _locreq(__dirname);
|
||||||
|
|
||||||
|
declare module "koa" {
|
||||||
|
interface BaseContext {
|
||||||
|
$context: Sealious.Context;
|
||||||
|
$app: Sealious.App;
|
||||||
|
$body: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const app = new (class extends App {
|
||||||
|
config = {
|
||||||
|
upload_path: locreq.resolve("uploaded_files"),
|
||||||
|
datastore_mongo: {
|
||||||
|
host: "localhost",
|
||||||
|
port: 20723,
|
||||||
|
db_name: "sealious-playground",
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
from_address: "sealious-playground@example.com",
|
||||||
|
from_name: "Sealious playground app",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
manifest = {
|
||||||
|
name: "Sealious Playground",
|
||||||
|
logo: resolve(__dirname, "../assets/logo.png"),
|
||||||
|
version: "0.0.1",
|
||||||
|
default_language: "en",
|
||||||
|
base_url: "localhost:8080",
|
||||||
|
admin_email: "admin@example.com",
|
||||||
|
colors: {
|
||||||
|
primary: "#5294a1",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
collections = {
|
||||||
|
...App.BaseCollections,
|
||||||
|
tasks: new (class extends Collection {
|
||||||
|
fields = {
|
||||||
|
title: new FieldTypes.Text(),
|
||||||
|
done: new FieldTypes.Boolean(),
|
||||||
|
};
|
||||||
|
defaultPolicy = new Policies.Public();
|
||||||
|
})(),
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
app.start();
|
||||||
|
|
||||||
|
const router = app.HTTPServer.router;
|
||||||
|
|
||||||
|
function Task(task: CollectionItem<any>) {
|
||||||
|
return frame(
|
||||||
|
`task-${task.id}`,
|
||||||
|
/* HTML */ `<li class="task">
|
||||||
|
<input type="checkbox" /> ${task.get("title")}
|
||||||
|
<form
|
||||||
|
method="DELETE"
|
||||||
|
action="/task/${task.id}"
|
||||||
|
data-turbo-frame="task-list"
|
||||||
|
>
|
||||||
|
<input class="delete-button" type="submit" value="🗑" />
|
||||||
|
</form>
|
||||||
|
</li>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NewTask() {
|
||||||
|
return frame(
|
||||||
|
"new-task",
|
||||||
|
/* HTML */ `<form
|
||||||
|
method="POST"
|
||||||
|
action="/new-task"
|
||||||
|
data-turbo-frame="task-list"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="new-task-title"
|
||||||
|
type="text"
|
||||||
|
placeholder="write an app"
|
||||||
|
name="title"
|
||||||
|
/>
|
||||||
|
<input type="submit" value="Add" />
|
||||||
|
</form>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function TaskList(context: Context) {
|
||||||
|
const { items: tasks } = await app.collections.tasks.list(context).fetch();
|
||||||
|
return frame(
|
||||||
|
"task-list",
|
||||||
|
/* HTML */ `
|
||||||
|
<ul>
|
||||||
|
${tasks.map(Task).join("\n")}
|
||||||
|
</ul>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function MainView(context: Context) {
|
||||||
|
return html(/* HTML */ `<title>My ToDo App</title>
|
||||||
|
<body>
|
||||||
|
<h1>My ToDo App</h1>
|
||||||
|
${await TaskList(context)} ${NewTask()}
|
||||||
|
</body>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
router.get("/", Middlewares.extractContext(), async (ctx) => {
|
||||||
|
ctx.body = await MainView(ctx.$context);
|
||||||
|
});
|
||||||
|
|
||||||
|
router.post(
|
||||||
|
"/new-task",
|
||||||
|
Middlewares.extractContext(),
|
||||||
|
Middlewares.parseBody(),
|
||||||
|
async (ctx) => {
|
||||||
|
await app.collections.tasks
|
||||||
|
.make({
|
||||||
|
title: ctx.$body.title as string,
|
||||||
|
done: false,
|
||||||
|
})
|
||||||
|
.save(ctx.$context);
|
||||||
|
ctx.body = await MainView(ctx.$context);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
router.delete("/task/:task_id", Middlewares.extractContext(), async (ctx) => {
|
||||||
|
const task = await app.collections.tasks.getByID(
|
||||||
|
ctx.$context,
|
||||||
|
ctx.params.task_id
|
||||||
|
);
|
||||||
|
await task.remove(ctx.$context);
|
||||||
|
ctx.body = await MainView(ctx.$context);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.HTTPServer.addStaticRoute("/", locreq.resolve("public"));
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { Controller } from "stimulus";
|
||||||
|
|
||||||
|
export class TaskItem extends Controller {}
|
||||||
@ -1,50 +0,0 @@
|
|||||||
import _locreq from "locreq";
|
|
||||||
import { resolve } from "path";
|
|
||||||
import Sealious, { App, Collection, FieldTypes, Policies } from "sealious";
|
|
||||||
const locreq = _locreq(__dirname);
|
|
||||||
|
|
||||||
declare module "koa" {
|
|
||||||
interface BaseContext {
|
|
||||||
$context: Sealious.Context;
|
|
||||||
$app: Sealious.App;
|
|
||||||
$body: Record<string, unknown>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const app = new (class extends App {
|
|
||||||
config = {
|
|
||||||
upload_path: locreq.resolve("uploaded_files"),
|
|
||||||
datastore_mongo: {
|
|
||||||
host: "localhost",
|
|
||||||
port: 20723,
|
|
||||||
db_name: "sealious-playground",
|
|
||||||
},
|
|
||||||
email: {
|
|
||||||
from_address: "sealious-playground@example.com",
|
|
||||||
from_name: "Sealious playground app",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
manifest = {
|
|
||||||
name: "Sealious Playground",
|
|
||||||
logo: resolve(__dirname, "../assets/logo.png"),
|
|
||||||
version: "0.0.1",
|
|
||||||
default_language: "en",
|
|
||||||
base_url: "localhost:8080",
|
|
||||||
admin_email: "admin@example.com",
|
|
||||||
colors: {
|
|
||||||
primary: "#5294a1",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
collections = {
|
|
||||||
...App.BaseCollections,
|
|
||||||
tasks: new (class extends Collection {
|
|
||||||
fields = {
|
|
||||||
title: new FieldTypes.Text(),
|
|
||||||
done: new FieldTypes.Boolean(),
|
|
||||||
};
|
|
||||||
defaultPolicy = new Policies.Public();
|
|
||||||
})(),
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
app.start();
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = [
|
||||||
|
{
|
||||||
|
name: "front-end-components",
|
||||||
|
entry: {
|
||||||
|
bundle: "./src/front/index.ts",
|
||||||
|
},
|
||||||
|
|
||||||
|
output: {
|
||||||
|
filename: "[name].js",
|
||||||
|
path: path.resolve(__dirname, "public/dist"),
|
||||||
|
},
|
||||||
|
|
||||||
|
mode: "production",
|
||||||
|
devtool: "source-map",
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
exclude: [/node_modules/],
|
||||||
|
use: [{ loader: "babel-loader" }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
Loading…
Reference in New Issue