h1v3 0.1.0

package/src/client/web/system.js

@@ -0,0 +1,67 @@
+// vendor: firebase
+import { initializeApp } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-app.js";
+import {
+    connectAuthEmulator,
+    getAuth,
+    onAuthStateChanged,
+    signInWithPopup,
+    signInWithEmailAndPassword,
+    signOut,
+    GoogleAuthProvider
+} from "https://www.gstatic.com/firebasejs/12.3.0/firebase-auth.js";
+import {
+    child,
+    connectDatabaseEmulator,
+    get,
+    getDatabase,
+    off,
+    onValue,
+    ref,
+    set,
+    update,
+} from "https://www.gstatic.com/firebasejs/12.3.0/firebase-database.js";
+
+// init firebase
+import firebaseConfig from "/firebase.config.js";
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getDatabase(app);
+
+// firebase emulator support
+const useEmulator = location?.hostname === "localhost" || location?.hostname === "127.0.0.1";
+if (useEmulator) {
+
+    const resp = await fetch("http://127.0.0.1:4400/emulators");
+    const emulators = await resp.json();
+    connectAuthEmulator(auth, `http://${emulators.auth.host}:${emulators.auth.port}`);
+    connectDatabaseEmulator(db, emulators.database.host, emulators.database.port);
+
+}
+
+// controlled export of firebase
+export const firebase = {
+    authentication: {
+        auth,
+        onAuthStateChanged,
+        signInWithEmailAndPassword,
+        signInWithPopup,
+        signOut,
+        GoogleAuthProvider
+    },
+    database: {
+        child,
+        db,
+        ref,
+        get,
+        set,
+        update,
+        onValue,
+        off
+    }
+}
+
+export const bus = document;
+
+// h1v3
+import { registerLoginHandlers } from "./login.js";
+registerLoginHandlers(bus, firebase);

package/src/client/web-ui/components/login.html.js

@@ -0,0 +1,44 @@
+import { html } from "../system.js";
+import { dialog } from "./partials/wa-utils.js";
+
+export const loginButton = () => html`<wa-button class="open-login">Login</wa-button>`;
+
+export const loginDialog = () => dialog("Login", html`
+<div class="wa-stack">
+
+    <wa-input label="Email" type="email"></wa-input>
+    <wa-input label="Password" type="password"></wa-input>
+    <a href="#">Having trouble signing in?</a>
+    <wa-button class="login-with-email">Sign in</wa-button>
+    <wa-divider></wa-divider>
+    <p>Or sign in with:</p>
+    <div class="wa-grid" style="--min-column-size: 12ch;">
+
+        <wa-button appearance="outlined" class="login-with-google">
+
+            <wa-icon slot="start" name="google" family="brands"></wa-icon>
+            Google
+
+        </wa-button>
+        <wa-button appearance="outlined" disabled>
+
+            <wa-icon slot="start" name="apple" family="brands"></wa-icon>
+            Apple ID
+
+        </wa-button>
+        <wa-button appearance="outlined" disabled>
+
+            <wa-icon slot="start" name="facebook" family="brands"></wa-icon>
+            Facebook
+
+        </wa-button>
+
+    </div>
+    <p>Don't have an account? <a href="#">Create one</a></p>
+
+</div>
+`);
+
+export const signOutButton = () => html`<wa-button class="sign-out">Sign out</wa-button>`;
+
+export const hello = ({ displayName, email }) => html`<strong>${displayName}</strong> (${email}) `;

package/src/client/web-ui/components/login.js

@@ -0,0 +1,74 @@
+import { LitElement, html, bus } from "../system.js";
+import { styled } from "./partials/wa-utils.js";
+import { hello, loginButton, loginDialog, signOutButton } from './login.html.js';
+import { EVENT_EMAIL_AUTH_REQUESTED, EVENT_GOOGLE_AUTH_REQUESTED, EVENT_SIGN_OUT_REQUESTED } from "../../web/events.js";
+
+class Login extends LitElement {
+
+    static get properties() {
+
+        return {
+
+            currentUser: { type: Object }
+
+        };
+
+    }
+
+    createRenderRoot() {
+
+        const root = super.createRenderRoot();
+        root.addEventListener("click", e => this.handleClick(e));
+        return root;
+
+    }
+
+    handleClick(e) {
+
+        switch(e.target.className) {
+
+            case "open-login":
+                this.shadowRoot.querySelector("wa-dialog").open = true;
+                break;
+            case "login-with-google":
+                bus.dispatchEvent(new CustomEvent(EVENT_GOOGLE_AUTH_REQUESTED));
+                break;
+            case "login-with-email":
+                const inputLogin = this.shadowRoot.querySelector("wa-input[type=email]");
+                const inputPassword = this.shadowRoot.querySelector("wa-input[type=password]");
+                bus.dispatchEvent(new CustomEvent(EVENT_EMAIL_AUTH_REQUESTED, { detail: { email: inputLogin.value, password: inputPassword.value }}));
+                break;
+            case "sign-out":
+                bus.dispatchEvent(new CustomEvent(EVENT_SIGN_OUT_REQUESTED));
+                break;
+        }
+
+    }
+
+    render() {
+
+        if (this.currentUser === undefined) {
+
+            return html`Initialising...`;
+
+        } else if(this.currentUser === null) {
+
+            return styled(
+                loginDialog(),
+                loginButton()
+            );
+
+        } else {
+
+            return styled(
+                hello(this.currentUser),
+                signOutButton()
+            );
+
+        }
+
+    }
+
+}
+customElements.define('h1v3-login', Login);
+

package/src/client/web-ui/components/notification.html.js

@@ -0,0 +1,12 @@
+import { html } from "../system.js";
+
+export const errorNotification = ({ message }) => html`
+
+    <wa-callout variant="danger" style="opacity: 1; margin: 0.5rem; zoom: 0.8;" role="alert">
+
+        <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
+        <strong>${message}</strong>
+
+    </wa-callout>
+
+`;

package/src/client/web-ui/components/notification.js

@@ -0,0 +1,25 @@
+import { LitElement } from "../system.js";
+import { errorNotification } from "./notification.html.js";
+import { styled } from "./partials/wa-utils.js";
+
+class Notification extends LitElement {
+
+    static get properties() {
+
+        return {
+
+            err: { type: Object }
+
+        };
+
+    }
+
+    render() {
+
+        if (this.err)
+            return styled(errorNotification(this.err));
+
+    }
+
+}
+customElements.define("h1v3-notification", Notification);

package/src/client/web-ui/components/partials/wa-utils.js

@@ -0,0 +1,17 @@
+import { html, waDist } from "../../system.js";
+
+export const styled = (...children) => html`
+    <link rel="stylesheet" href="${waDist}/styles/webawesome.css" />
+    <link rel="stylesheet" href="${waDist}/styles/themes/premium.css" />
+    <div class="wa-cloak">
+        ${children}
+    </div>
+`;
+
+export const dialog = (title, ...children) => html`
+<wa-dialog label="${title}" light-dismiss class="dialog-light-dismiss">
+
+    ${children}
+
+</wa-dialog>
+`;

package/src/client/web-ui/errors.js

@@ -0,0 +1,23 @@
+import { EVENT_ERROR_OCCURRED } from "../web/events.js";
+
+const container = document.createElement("ASIDE");
+container.style.position = "fixed";
+container.style.top = "0px";
+container.style.right = "0px";
+container.style.maxWidth = "40rem";
+container.style.zIndex = 9999;
+
+document.body.appendChild(container);
+
+document.addEventListener(EVENT_ERROR_OCCURRED, ({ detail: { err } }) => {
+
+    if (err) {
+
+        const notification = document.createElement("h1v3-notification");
+        container.appendChild(notification);
+        notification.err = err;
+        setTimeout(() => notification.remove(), 5000);
+
+    }
+
+});

package/src/client/web-ui/system.js

@@ -0,0 +1,20 @@
+export * from "../web/system.js";
+
+export const waDist = "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist";
+
+// vendor: webawesome
+import "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist/components/button/button.js";
+import "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist/components/input/input.js";
+import "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist/components/card/card.js";
+import "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist/components/divider/divider.js";
+import "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist/components/icon/icon.js";
+import "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist/components/dialog/dialog.js";
+import "/vendor/@shoelace-style/webawesome-pro@3.0.0-beta.6/dist/components/callout/callout.js";
+
+// vendor: lit
+export { html, LitElement } from "/vendor/lit@3.3.1/dist/lit-core.min.js";
+
+// h1v3
+import "./errors.js";
+import "./components/notification.js";
+import "./components/login.js";

package/src/commands/generate-rules.js

@@ -0,0 +1,80 @@
+function eventWriteConditions(config) {
+
+    let expr = "!data.exists()"
+    if (config?.write)
+        expr += " && (" + config.write + ")"
+    return expr;
+
+}
+
+function projectionReadConditions(config) {
+
+    return config.read || true;
+
+}
+
+const eventStoreRules = config => ({
+    ".read": false,
+    ".write": false,
+    events: {
+        "$eid": {
+            ".write": eventWriteConditions(config),
+            ".validate": "newData.child('type').isString()"
+        }
+    },
+    projections: {
+        "$pid": {
+            ".read": projectionReadConditions(config)
+        }
+    }
+});
+
+const splitPathIntoSegments = path =>
+    path
+        .split("/")
+        .filter(x => x);
+
+const addRulesForPath = (existingRules, [
+    [
+        nextSegment,
+        ...theRestOfThePath
+    ],
+    config
+]) =>
+    nextSegment
+        // still walking to the right place - build up nested objects as needed
+        ? {
+            ...existingRules,
+            [nextSegment]: addRulesForPath(
+                // create the object if necessary
+                existingRules[nextSegment] || {},
+                // pass the rest of the path and the config recursively
+                [theRestOfThePath, config]
+            )
+        }
+        // stick the rules here
+        : eventStoreRules(config);
+
+const parseConfig = ([_name, config]) => [
+    // 0: the path
+    splitPathIntoSegments(config.ref),
+    // 1: the config
+    config
+];
+
+export function generateRules(argv, stores) {
+
+    const json = JSON.stringify(
+        stores
+            // parse the path
+            .map(parseConfig)
+            // build the map
+            .reduce(addRulesForPath, {}),
+        null, 4);
+    if(argv.snippet)
+        console.log(json.slice(1,-1));
+    else
+        console.log(json);
+
+}
+

package/src/commands/list-event-stores.js

@@ -0,0 +1,24 @@
+
+export async function listEventStores(_argv, stores) {
+
+    console.log("List event stores");
+    if (!stores.length) {
+
+        console.log("No event stores configured");
+
+    } else {
+
+        for(const [name, { ref, triggerPath, projections }] of stores) {
+
+            console.log();
+            console.log(name);
+            console.log("   Database location:", ref);
+            console.log("   Trigger path:", triggerPath);
+            console.log("   Projections:", projections.join(", "));
+
+        }
+    }
+
+}
+
+

package/src/commands/vendor.js

@@ -0,0 +1,54 @@
+import fs from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+async function readPackageJSON() {
+
+    return JSON.parse(await fs.readFile(`${__dirname}/../../package.json`));
+
+}
+
+async function vendor(subpath) {
+
+    const { version, name } = await readPackageJSON();
+    const src = join(__dirname, "..", "..", "dist", "browser", subpath);;
+
+
+    // Destination: include semver
+    const versionedName = `${name}@${version}`;
+    const dest =join(".", "public", "vendor", versionedName, subpath);
+
+    // Recursive copy
+    await fs.cp(src, dest, { recursive: true });
+    console.log(`Vendored ${versionedName}/${subpath} -> ${dest}`);
+
+}
+
+export async function eventStore(_argv) {
+
+    await vendor("event-store");
+
+}
+
+export async function webPlatform(_argv) {
+
+    await vendor("web");
+
+}
+
+export async function webPlatformUI(_argv) {
+
+    await webPlatform(_argv);
+    await vendor("web-ui");
+    const resp = await fetch("https://cdn.jsdelivr.net/gh/lit/dist@3.3.1/core/lit-core.min.js")
+    const lit = await resp.text();
+    const dest = join(".", "public", "vendor", "lit@3.3.1", "dist");
+    await fs.mkdir(dest, { recursive: true });
+    await fs.writeFile(
+        join(".", "public", "vendor", "lit@3.3.1", "dist", "lit-core.min.js"),
+        lit
+    );
+
+}

package/src/event-store/initialise.js

@@ -0,0 +1,28 @@
+import { updateProjections } from "./projections.js";
+
+export const EVENT_STORE_META = Symbol("Event store configuration metadata");
+
+export function configure({ ref, projections, ...rest }, onValueWritten, logger) {
+
+    // considered the "home" of the event store, under which events and projections will be stored
+    const eventStorePath = ref.replaceAll(/\/\$([^/]*)/g, "/{$1}");
+
+    // the path which will trigger event store projections
+    const writeRefPath = `${eventStorePath}/events/{eid}`;
+
+    // handle an incoming write event
+    const handler = e => updateProjections(e.data.after, projections, logger);
+
+    const metadata = {
+        ...rest,
+        ref,
+        triggerPath: writeRefPath,
+        projections: Object.keys(projections)
+    };
+    // tag the trigger with metadata
+    return Object.assign(
+        onValueWritten(writeRefPath, handler),
+        { [EVENT_STORE_META]: metadata }
+    );
+
+}

package/src/event-store/projections.js

@@ -0,0 +1,38 @@
+export async function updateProjections(incomingEventSnap, projectionTransformationPerEvent, logger) {
+
+    // order the events
+    const eventsSnap = await incomingEventSnap.ref.parent.get();
+    const events = eventsSnap.val() || {};
+    const sortedEvents = Object.entries(events).sort((a, b) => a[0] > b[0] ? 1 : a[0] === b[0] ? 0 : -1);
+
+    const projections = Object.entries(projectionTransformationPerEvent);
+    for(const [key, transformations] of projections) {
+
+        const fallbackTransformation = transformations["?"];
+        const view = sortedEvents.reduce(
+            (agg, e) => {
+
+                const transform = transformations[e[1]?.type] || fallbackTransformation || missingTransform;
+                return transform(agg, e[1], e[0]);
+
+            }, {});
+        await writeProjection(incomingEventSnap, key, view);
+
+    }
+
+    function missingTransform(agg, e) {
+
+        logger.warn("Missing transformation for event", { event: e });
+        return agg;
+
+    }
+
+    async function writeProjection(incomingEventSnap, key, view) {
+
+        const projectionRef = incomingEventSnap.ref.parent.parent.child("projections").child(key);
+        logger.info("Writing projection after event", { path: projectionRef, incomingEvent: incomingEventSnap.val() });
+        await projectionRef.set(view);
+
+    }
+
+}

package/src/exec-eventstore.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+
+import { listEventStores } from "./commands/list-event-stores.js";
+import { generateRules } from "./commands/generate-rules.js";
+import { main } from "./system/main.js";
+import { eventStore, webPlatform, webPlatformUI } from "./commands/vendor.js";
+
+const configParameter = {
+
+    description: "path to the configuration script",
+    defaultValue: "h1v3.config.js",
+    examples: ["./myconfig.js"]
+
+};
+
+const sharedParameters = {
+
+    config: configParameter
+
+};
+
+main({
+
+    "list": {
+
+        description: "List the configured event stores",
+        parameters: sharedParameters,
+        strategy: listEventStores
+
+    },
+    "rules": {
+
+        description: "Generate expected database rules JSON",
+        parameters: sharedParameters,
+        strategy: generateRules
+
+    },
+    "vendor-eventstore": {
+
+        description: "Copy event store client into your browser assets folder",
+        loadConfig: false,
+        parameters: {},
+        strategy: eventStore
+
+    },
+    "vendor-web": {
+
+        description: "Copy web logic platform into your browser assets folder",
+        loadConfig: false,
+        parameters: {},
+        strategy: webPlatform
+
+    },
+    "vendor-webui": {
+
+        description: "Copy web UI platform into your browser assets folder (requires web)",
+        loadConfig: false,
+        parameters: {},
+        strategy: webPlatformUI
+
+    }
+
+});
+
+

package/src/index.js

@@ -0,0 +1,18 @@
+export * from "./event-store/initialise.js";
+
+export const passThroughView = {
+    "?": (view, e, key) => {
+
+        view.events = view.events || {};
+        view.events[key] = e;
+        return view;
+
+    }
+};
+
+export function ifUserIdExists(path) {
+
+    const expr = `root.child('${path}/' + auth.uid).exists()`;
+    return expr.replaceAll(/(\$[^/]*)/g, "' + $1 + '")
+
+}

package/src/load-configuration.js

@@ -0,0 +1,21 @@
+import { resolve } from "path";
+import { pathToFileURL } from "url";
+import { EVENT_STORE_META } from "./event-store/initialise.js";
+
+export async function loadConfiguration(argv) {
+
+    const configPath = argv.config || resolve(process.cwd(), "./h1v3.config.js");
+    if (!argv.snippet)
+        console.log("Loading configuration:", configPath);
+    const module = await import(pathToFileURL(configPath));
+    return readStoresMetadata(module);
+
+}
+
+export function readStoresMetadata(config) {
+
+    return Object.entries(config)
+        .map(([k, v]) => [k, v?.[EVENT_STORE_META]])
+        .filter(x => x[1]);
+
+}