@primate/marko 0.9.0 → 0.11.0

package/lib/private/I18NModule.d.ts

@@ -0,0 +1,5 @@
+type I18NModule = {
+    invalidate(fn: () => void): void;
+};
+export type { I18NModule as default };
+//# sourceMappingURL=I18NModule.d.ts.map

package/lib/private/I18NModule.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=I18NModule.js.map

package/lib/private/client/Data.d.ts

@@ -0,0 +1,5 @@
+import type Payload from "#client/Payload";
+import type { Data } from "@primate/core/client";
+type MarkoData = Data<Payload>;
+export type { MarkoData as default };
+//# sourceMappingURL=Data.d.ts.map

package/lib/private/client/Data.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Data.js.map

package/lib/private/client/Payload.d.ts

@@ -0,0 +1,7 @@
+import type { Dict } from "@rcompat/type";
+type Payload = {
+    views: string[];
+    props: Dict[];
+};
+export type { Payload as default };
+//# sourceMappingURL=Payload.d.ts.map

package/lib/private/client/Payload.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Payload.js.map

package/lib/private/client/app.d.ts

@@ -0,0 +1,5 @@
+import type Data from "#client/Data";
+export default class MarkoApp {
+    static mount(_: string, data: Data): void;
+}
+//# sourceMappingURL=app.d.ts.map

package/lib/private/client/app.js

@@ -0,0 +1,53 @@
+import root from "#client/root";
+import client from "@primate/core/client";
+import RootView from "marko:root";
+export default class MarkoApp {
+    static mount(_, data) {
+        const interactive = !data.ssr || data.csr;
+        if (!interactive)
+            return;
+        let instance;
+        let current = data;
+        let initial = data.ssr;
+        const key = (next) => `${next.views.join("\0")}\0${next.request.url}`;
+        const render = (next, remount = false) => {
+            current = next;
+            const props = root.toProps(next);
+            if (!remount && instance !== undefined) {
+                instance.update?.(props);
+                return;
+            }
+            instance?.destroy?.();
+            document.body.replaceChildren();
+            instance = RootView.mount(props, document.body);
+        };
+        const invalidate = () => render(current, true);
+        const mods = globalThis.__primate_i18n__ ?? [];
+        for (const mod of mods) {
+            mod.invalidate(invalidate);
+        }
+        if (!data.ssr) {
+            render(data, true);
+        }
+        if (data.csr) {
+            const start = () => client.boot((next, update) => {
+                if (initial && key(next) === key(current)) {
+                    initial = false;
+                    current = next;
+                    update?.();
+                    return;
+                }
+                initial = false;
+                render(next, instance === undefined);
+                update?.();
+            });
+            if (document.readyState === "loading") {
+                window.addEventListener("DOMContentLoaded", start, { once: true });
+            }
+            else {
+                start();
+            }
+        }
+    }
+}
+//# sourceMappingURL=app.js.map

package/lib/private/client/root.d.ts

@@ -0,0 +1,15 @@
+import type Data from "#client/Data";
+import type { Dict } from "@rcompat/type";
+export type RootProps = {
+    views: unknown[];
+    props: Dict[];
+    request: Data["request"] & {
+        url: URL;
+    };
+};
+declare function toProps(data: Data): RootProps;
+declare const root: {
+    toProps: typeof toProps;
+};
+export default root;
+//# sourceMappingURL=root.d.ts.map

package/lib/private/client/root.js

@@ -0,0 +1,16 @@
+import * as views from "marko:views";
+function toProps(data) {
+    return {
+        views: data.views.map(name => views[name]),
+        props: data.props,
+        request: {
+            ...data.request,
+            url: new URL(data.request.url),
+        },
+    };
+}
+const root = {
+    toProps,
+};
+export default root;
+//# sourceMappingURL=root.js.map

package/lib/private/create-root.d.ts

@@ -0,0 +1,3 @@
+export default _default;
+declare function _default(depth: number): string;
+//# sourceMappingURL=create-root.d.ts.map

package/lib/private/create-root.js

@@ -0,0 +1,20 @@
+export default (depth) => {
+    const view = (i) => `<\${input.views[${i}]} ...input.props[${i}] />`;
+    const layout = (i, child) => [
+        `<if=input.views[${i + 1}]>`,
+        `<\${input.views[${i}]} ...input.props[${i}]>`,
+        child,
+        "</>",
+        "</if>",
+        "<else>",
+        view(i),
+        "</else>",
+    ].join("\n");
+    const body = Array.from({ length: depth }, (_, i) => i)
+        .reduceRight((child, i) => layout(i, child), view(depth));
+    return `import { request } from "@primate/marko/app";
+<const/{ context, path, ...public_request }=input.request/>
+<const/_request=request.set(public_request)/>
+${body}`;
+};
+//# sourceMappingURL=create-root.js.map

package/lib/private/default.js

@@ -1,11 +1,93 @@
+import create_root from "#create-root";
 import init from "#init";
 import { compileSync } from "@marko/compiler";
 import frontend from "@primate/core/frontend";
+const styles = new Map();
+let style_id = 0;
+let root_dir = "";
+let root_file = "";
+let root_dom = "";
+function resolveVirtualDependency(_from, dependency) {
+    if (!dependency.virtualPath.endsWith(".css")) {
+        return dependency.virtualPath;
+    }
+    const path = `marko:style:${style_id++}`;
+    styles.set(path, {
+        code: dependency.code,
+        module: dependency.virtualPath.endsWith(".module.css"),
+    });
+    return path;
+}
+function compile(text, file, output, root = false) {
+    return compileSync(text, root || file.path.startsWith("root:")
+        ? root_file
+        : file.path, {
+        output,
+        resolveVirtualDependency,
+    });
+}
+const plugin = {
+    name: "marko-primate",
+    setup(build) {
+        build.onResolve({ filter: /^marko:style:/ }, args => ({
+            path: args.path,
+            namespace: "marko-style",
+        }));
+        build.onLoad({ filter: /.*/, namespace: "marko-style" }, args => {
+            const style = styles.get(args.path);
+            return style === undefined
+                ? null
+                : {
+                    contents: style.code,
+                    loader: style.module ? "local-css" : "css",
+                };
+        });
+        build.onResolve({ filter: /^\.\/root\.marko$/ }, args => {
+            if (args.namespace !== "marko" || args.importer !== "marko:root") {
+                return null;
+            }
+            return {
+                path: root_file,
+                namespace: "file",
+            };
+        });
+        build.onLoad({ filter: /.*/, namespace: "file" }, args => {
+            if (args.path !== root_file)
+                return null;
+            return {
+                contents: root_dom,
+                loader: "js",
+                resolveDir: root_dir,
+            };
+        });
+    },
+};
 export default frontend({
     ...init,
+    root: {
+        create: create_root,
+    },
     compile: {
-        server: (text, file) => compileSync(text, file.path).code,
-        client: (text) => ({ js: text }),
+        server: (text, file) => compile(text, file, "html").code,
+        client: (text, file, root, hydrate) => {
+            if (root && hydrate) {
+                root_dom = compile(text, file, "dom", true).code;
+                return {
+                    js: `${compile(text, file, "hydrate", true).code}
+           export { default } from "./root.marko";`,
+                };
+            }
+            return {
+                js: compile(text, file, "dom", root).code,
+            };
+        },
+    },
+    onBuild(app, options) {
+        root_dir = app.root.path;
+        root_file = app.root.join("root.marko").path;
+        app.plugin("server", plugin);
+        app.plugin("client", plugin);
+        return init.onBuild?.(app, options);
     },
 });
 //# sourceMappingURL=default.js.map

package/lib/private/i18n.d.ts

@@ -0,0 +1,3 @@
+import type { BridgedTranslator, HeadlessTranslator } from "@primate/core/i18n";
+export default function i18n<const T extends HeadlessTranslator>(source: T): BridgedTranslator<T>;
+//# sourceMappingURL=i18n.d.ts.map

package/lib/private/i18n.js

@@ -0,0 +1,38 @@
+import request from "#request/store";
+export default function i18n(source) {
+    let invalidate = () => undefined;
+    let forced;
+    const get = () => source.locale.get();
+    const set = (locale) => {
+        forced = locale;
+        source.locale.set(locale);
+        invalidate();
+    };
+    const restore = (next) => {
+        const before = source.locale.get();
+        source.restore(next);
+        if (forced !== undefined) {
+            source.locale.set(forced);
+            return;
+        }
+        if (source.locale.get() !== before)
+            invalidate();
+    };
+    const value = ((...args) => {
+        return source(...args);
+    });
+    value.defaultLocale = source.defaultLocale;
+    value.locales = source.locales;
+    value.catalogs = source.catalogs;
+    value.currency = source.currency;
+    value.locale = { get, set };
+    value.restore = restore;
+    value.invalidate = (fn) => { invalidate = fn; };
+    source.restore();
+    request.subscribe(next => {
+        restore(next);
+    });
+    (globalThis.__primate_i18n__ ??= []).push(value);
+    return value;
+}
+//# sourceMappingURL=i18n.js.map

package/lib/private/init.d.ts

@@ -1,5 +1,5 @@
 import type { Init } from "@primate/core/frontend";
-import type { Renderable } from "marko/src/runtime/html/Template.js";
-declare const module: Init<Renderable>;
+import type { Template } from "marko/src/runtime/html/index.js";
+declare const module: Init<Template>;
 export default module;
 //# sourceMappingURL=init.d.ts.map

package/lib/private/init.js

@@ -1,10 +1,11 @@
 const module = {
     name: "marko",
     extensions: [".marko"],
-    layouts: false,
-    client: false,
-    render(component, props) {
-        return { body: component.renderToString(props) };
+    conditions: ["marko"],
+    layouts: true,
+    client: true,
+    async render(component, props) {
+        return { body: (await component.render(props)).toString() };
     },
 };
 export default module;

package/lib/private/request/store.d.ts

@@ -0,0 +1,14 @@
+type Input = {
+    url: string | URL;
+    [key: string]: unknown;
+};
+type Subscriber = (value: MarkoRequest) => void;
+type MarkoRequest = {
+    url: URL;
+    set(value: Input): void;
+    subscribe(subscriber: Subscriber): () => void;
+    [key: string]: unknown;
+};
+declare const request: MarkoRequest;
+export default request;
+//# sourceMappingURL=store.d.ts.map

package/lib/private/request/store.js

@@ -0,0 +1,20 @@
+const subscribers = new Set();
+const request = {
+    set(value) {
+        Object.assign(request, {
+            ...value,
+            url: value.url instanceof URL ? value.url : new URL(value.url),
+        });
+        for (const subscriber of subscribers) {
+            subscriber(request);
+        }
+    },
+    subscribe(subscriber) {
+        subscribers.add(subscriber);
+        return () => {
+            subscribers.delete(subscriber);
+        };
+    },
+};
+export default request;
+//# sourceMappingURL=store.js.map

package/lib/public/Field.d.ts

@@ -0,0 +1,2 @@
+export { default } from "#tags/Field";
+//# sourceMappingURL=Field.d.ts.map

package/lib/public/Field.js

@@ -0,0 +1,2 @@
+export { default } from "#tags/Field";
+//# sourceMappingURL=Field.js.map

package/lib/public/Form.d.ts

@@ -0,0 +1,2 @@
+export { default } from "#tags/Form";
+//# sourceMappingURL=Form.d.ts.map

package/lib/public/Form.js

@@ -0,0 +1,2 @@
+export { default } from "#tags/Form";
+//# sourceMappingURL=Form.js.map

package/lib/public/app.d.ts

@@ -0,0 +1,2 @@
+export { default as request } from "#request/store";
+//# sourceMappingURL=app.d.ts.map

package/lib/public/app.js

@@ -0,0 +1,2 @@
+export { default as request } from "#request/store";
+//# sourceMappingURL=app.js.map

package/lib/public/browser.d.ts

@@ -0,0 +1,6 @@
+export default function marko(): {
+    name: string;
+    setup(): void;
+};
+export { default as app } from "#client/app";
+//# sourceMappingURL=browser.d.ts.map

package/lib/public/browser.js

@@ -0,0 +1,8 @@
+export default function marko() {
+    return {
+        name: "marko",
+        setup() { },
+    };
+}
+export { default as app } from "#client/app";
+//# sourceMappingURL=browser.js.map

package/lib/public/i18n.d.ts

@@ -0,0 +1,2 @@
+export { default } from "#i18n";
+//# sourceMappingURL=i18n.d.ts.map

package/lib/public/i18n.js

@@ -0,0 +1,2 @@
+export { default } from "#i18n";
+//# sourceMappingURL=i18n.js.map

package/lib/public/tags.d.ts

@@ -0,0 +1,3 @@
+export { default as Field } from "#tags/Field";
+export { default as Form } from "#tags/Form";
+//# sourceMappingURL=tags.d.ts.map

package/lib/public/tags.js

@@ -0,0 +1,3 @@
+export { default as Field } from "#tags/Field";
+export { default as Form } from "#tags/Form";
+//# sourceMappingURL=tags.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/marko",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Marko for Primate",
   "homepage": "https://primate.run/docs/frontend/marko",
   "bugs": "https://github.com/primate-run/primate/issues",
@@ -14,18 +14,24 @@
   "files": [
     "/lib/**/*.js",
     "/lib/**/*.d.ts",
+    "/src/**/*.marko",
     "!/**/*.spec.*"
   ],
   "dependencies": {
-    "@marko/compiler": "^5.39.63",
-    "@rcompat/fs": "^0.33.2",
-    "marko": "^5.38.37",
-    "@primate/core": "^0.7.0"
+    "@marko/compiler": "^5.40.2",
+    "@rcompat/fs": "^0.35.1",
+    "marko": "^6.3.3",
+    "@primate/core": "^0.9.0"
   },
   "devDependencies": {
-    "@types/marko": "^4.6.9"
+    "@rcompat/type": "^0.18.0",
+    "@types/marko": "^4.6.9",
+    "esbuild": "^0.28.1"
   },
   "imports": {
+    "#tags/*": {
+      "marko": "./src/private/tags/*.marko"
+    },
     "#*": {
       "@primate/source": "./src/private/*.ts",
       "default": "./lib/private/*.js"
@@ -34,8 +40,13 @@
   "exports": {
     ".": {
       "@primate/source": "./src/public/default.ts",
+      "browser": "./lib/public/browser.js",
       "runtime": "./lib/public/runtime.js",
       "default": "./lib/public/default.js"
+    },
+    "./*": {
+      "@primate/source": "./src/public/*.ts",
+      "default": "./lib/public/*.js"
     }
   },
   "scripts": {

package/src/private/tags/Field.marko

@@ -0,0 +1,44 @@
+import client from "@primate/core/client";
+
+export interface Input {
+  value: unknown;
+  method: "delete" | "patch" | "post" | "put";
+  url: string;
+  headers?: Record<string, string>;
+  map?: (value: unknown) => unknown;
+  path?: string;
+}
+
+<let/value=input.value/>
+<let/error=null/>
+<let/loading=false/>
+
+<const/update=async (updater) => {
+  const previous = value;
+  const next = updater(value);
+  error = null;
+  loading = true;
+  value = next;
+  try {
+    await client.validateField({
+      initial: input.value,
+      method: input.method.toUpperCase(),
+      url: input.url,
+      headers: input.headers,
+      map: input.map,
+      path: input.path,
+    }, next);
+    loading = false;
+  } catch (e) {
+    error = e;
+    loading = false;
+    value = previous;
+  }
+}/>
+
+<return={
+  value,
+  error,
+  loading,
+  update
+}/>

package/src/private/tags/Form.marko

@@ -0,0 +1,110 @@
+import client from "@primate/core/client";
+
+<const/error_view=errors => {
+  const view = [...errors.form];
+
+  Object.defineProperty(view, "fields", {
+    value: errors.fields,
+    enumerable: false,
+  });
+
+  return view;
+}/>
+
+<let/id=`form-${crypto.randomUUID()}`/>
+<let/submitting=false/>
+<let/submitted=false/>
+<let/result/>
+<let/errors=error_view({ form: [], fields: {} })/>
+<let/values=input.initial ?? {}/>
+<let/controller/>
+<let/action/>
+<let/contentType/>
+<let/method/>
+
+<const/action_meta=typeof document === "undefined" ? {
+  method: input.action === undefined ? undefined : "POST",
+  contentType: input.action?.contentType,
+} : {
+  action: input.action,
+  method: input.action === undefined ? undefined : "POST",
+  contentType: input.action?.contentType,
+}/>
+
+<const/set_action=meta => {
+  if ("action" in meta) {
+    action = meta.action;
+  }
+
+  method = meta.method;
+  contentType = meta.contentType;
+}/>
+
+<const/_action=set_action(action_meta)/>
+
+<const/create_controller=() => {
+  if (controller !== undefined) return controller;
+
+  const fallback_action = action === undefined && method !== undefined
+    ? ({ body }) => fetch(globalThis.location.pathname, {
+      method,
+      headers: contentType === undefined || contentType === "multipart/form-data"
+        ? {}
+        : { "Content-Type": contentType },
+      body: contentType === "application/json"
+        ? JSON.stringify(body)
+        : contentType === "application/x-www-form-urlencoded"
+          ? new URLSearchParams(body)
+          : body,
+    })
+    : undefined;
+
+  controller = client.createForm({
+    id,
+    action: action ?? fallback_action,
+    contentType,
+    method,
+    path: input.path,
+  });
+
+  return controller;
+}/>
+
+<const/submit=async (event, element) => {
+  event?.preventDefault?.();
+
+  const controller = create_controller();
+
+  submitting = true;
+
+  await controller.submit({
+    preventDefault() {
+      event?.preventDefault?.();
+    },
+    stopPropagation() {
+      event?.stopPropagation?.();
+    },
+    currentTarget: element ?? document.getElementById(id),
+  });
+
+  const snapshot = controller.read();
+
+  id = snapshot.id;
+  submitting = snapshot.submitting;
+  submitted = snapshot.submitted;
+  result = snapshot.result;
+  errors = error_view(snapshot.errors);
+}/>
+
+<const/field=name => {
+  const field_errors = errors.fields[name] ?? [];
+
+  return {
+    name,
+    value: values[name],
+    error: field_errors[0] ?? null,
+    errors: field_errors,
+  };
+}/>
+
+<return={ id, submitting, submitted, result, errors, values, field, submit }/>