@primate/vue 0.16.0 → 0.17.0

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 import "./app.d.ts";
-export { default } from "./public/default";
+export { default } from "#default";
+export { default as client } from "#client/index";

package/lib/private/client/app.js

@@ -2,9 +2,12 @@ import root from "#client/root";
 import client from "@primate/core/client";
 export default class VueApp {
     static mount(_view, data) {
+        const interactive = !data.ssr || data.csr;
+        if (!interactive)
+            return;
         let app = root[data.ssr ? "ssr" : "csr"](root.toProps(data));
         app.mount("#app");
-        if (data.spa) {
+        if (data.csr) {
             const start = () => client.boot((next, update) => {
                 app.unmount();
                 app = root.csr(root.toProps(next, update));

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

@@ -1,21 +1,22 @@
-import type { FormInit } from "@primate/core/client";
+import type { ClientMethod, FormInit } from "@primate/core/client";
 import type { Dict } from "@rcompat/type";
 type FormView<Values extends Dict> = {
     id: string;
     submitting: boolean;
     submitted: boolean;
     submit: (event?: Event) => Promise<void>;
-    errors: readonly string[];
+    errors: string[];
     field: <K extends keyof Values & string>(name: K) => {
         name: string;
         value: Values[K];
         error: string | null;
-        errors: readonly string[];
+        errors: string[];
     };
 };
 type Initial<Values extends Dict> = FormInit & {
     initial?: Values;
 };
+declare function form<Values extends Dict>(action: ClientMethod<Values>, init?: Initial<Values>): FormView<Values>;
 declare function form<Values extends Dict>(init: Initial<Values>): FormView<Values>;
 declare function form(init?: FormInit): FormView<Dict>;
 export default form;

package/lib/private/client/form.js

@@ -1,14 +1,25 @@
 import core from "@primate/core/client";
 import { onUnmounted, shallowRef } from "vue";
-function form(init) {
-    const { initial, ...form_init } = (init ?? {});
-    const controller = core.createForm(form_init);
-    const values = (initial ?? {});
+function form(action_or_init, maybe_init) {
+    const is_action = typeof action_or_init === "function";
+    const { initial, ...form_init } = (is_action ? (maybe_init ?? {}) : (action_or_init ?? {}));
+    const action = is_action ? action_or_init : undefined;
+    const contentType = is_action
+        ? action_or_init.contentType
+        : undefined;
+    const controller = core.createForm({
+        ...form_init,
+        ...action !== undefined && {
+            action: action,
+            contentType,
+        },
+    });
+    const values = initial ?? {};
     const snapshot = shallowRef(controller.read());
-    const unsub = controller.subscribe((next) => {
+    const unsubscribe = controller.subscribe(next => {
         snapshot.value = next;
     });
-    onUnmounted(unsub);
+    onUnmounted(unsubscribe);
     return {
         get id() {
             return snapshot.value.id;

package/lib/private/compile.d.ts

@@ -1,4 +1,8 @@
 declare const _default: {
+    client(text: string): {
+        js: string;
+        css: string;
+    };
     server(text: string): string;
 };
 export default _default;

package/lib/private/compile.js

@@ -1,51 +1,61 @@
 import presets from "@primate/core/build/presets";
 import transform from "@primate/core/build/transform";
-import { compileScript, compileTemplate, parse, } from "vue/compiler-sfc";
+import { compileScript, compileStyle, compileTemplate, parse, } from "vue/compiler-sfc";
 const genDefaultAs = "__SCRIPT__";
 const id_size = 8;
 const analyze = ({ script, scriptSetup }) => {
     return {
         has_script: script !== null || scriptSetup !== null,
         inline: scriptSetup !== null,
-        is_typescript: script?.lang === "ts" || scriptSetup?.lang === "ts",
+        is_ts: script?.lang === "ts" || scriptSetup?.lang === "ts",
     };
 };
+const compile_sfc = (text) => {
+    const id = crypto.randomUUID().slice(0, id_size);
+    const { descriptor } = parse(text);
+    const { has_script, inline, is_ts } = analyze(descriptor);
+    let module;
+    if (inline) {
+        const script = compileScript(descriptor, {
+            genDefaultAs,
+            id,
+            inlineTemplate: true,
+        });
+        module = `
+      ${script.content}
+      export default { ...__SCRIPT__ };
+    `;
+    }
+    else {
+        const template = compileTemplate({
+            filename: "",
+            id,
+            source: descriptor.template?.content ?? "",
+        });
+        const script = has_script
+            ? compileScript(descriptor, { genDefaultAs, id, inlineTemplate: false })
+            : { content: `const ${genDefaultAs} = {}` };
+        module = `
+      ${template.code}
+      ${script.content}
+      export default { ...__SCRIPT__, render };
+    `;
+    }
+    const js = is_ts ? transform(module, presets.typescript).code : module;
+    const css = descriptor.styles.map(style => compileStyle({
+        filename: "",
+        id,
+        source: style.content,
+        scoped: style.scoped ?? false,
+    }).code).join("\n");
+    return { js, css };
+};
 export default {
+    client(text) {
+        return compile_sfc(text);
+    },
     server(text) {
-        const id = crypto.randomUUID().slice(0, id_size);
-        const { descriptor } = parse(text);
-        const { has_script, inline, is_typescript } = analyze(descriptor);
-        let module;
-        if (inline) {
-            // for <script setup>, compile with inlineTemplate to get both script and
-            // render
-            const script = compileScript(descriptor, {
-                genDefaultAs,
-                id,
-                inlineTemplate: true,
-            });
-            module = `
-        ${script.content}
-        export default { ...__SCRIPT__ };
-      `;
-        }
-        else {
-            // For regular components, compile template and script separately
-            const template = compileTemplate({
-                filename: "",
-                id,
-                source: descriptor.template?.content ?? "",
-            });
-            const script = has_script
-                ? compileScript(descriptor, { genDefaultAs, id, inlineTemplate: false })
-                : { content: `const ${genDefaultAs} = {}` };
-            module = `
-        ${template.code}
-        ${script.content}
-        export default { ...__SCRIPT__, render };
-      `;
-        }
-        return is_typescript ? transform(module, presets.typescript).code : module;
+        return compile_sfc(text).js;
     },
 };
 //# sourceMappingURL=compile.js.map

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

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

package/lib/private/create-root.js

@@ -1,28 +1,26 @@
-export default (depth, i18n_active) => {
-    const n = depth;
+export default function createRoot(depth, i18n_active) {
     const build_view = (index) => {
-        // anchor case: render the deepest view
-        if (index === n)
+        if (index > depth)
+            return `h("div")`;
+        if (index === depth)
             return `h(p.views[${index}], p.props[${index}] || {})`;
-        else {
-            // recursive case: render view with child
-            const child = build_view(index + 1);
-            return `h(p.views[${index}], p.props[${index}] || {}, () => [${child}])`;
-        }
+        const child = build_view(index + 1);
+        return `h(p.views[${index}], p.props[${index}] || {}, () => [${child}])`;
     };
-    const body = depth > 0 ? build_view(0) : "h(\"div\")";
-    const vueImports = `
+    const body = `h(Suspense, null, { default: () => ${build_view(0)} })`;
+    const vue_imports = `
     import {
-      defineComponent, h${i18n_active ? ", ref, onMounted, onUnmounted" : ""}
+      defineComponent, h, Suspense
+      ${i18n_active ? ", ref, onMounted, onUnmounted" : ""}
     } from "vue";
     import { setRequest } from "@primate/vue/app";
     `;
-    const i18nImports = i18n_active
+    const i18n_imports = i18n_active
         ? `
 import t from "#i18n";
 import sInternal from "primate/s/internal";`
         : "";
-    const i18nSetup = i18n_active
+    const i18n_setup = i18n_active
         ? `
 const initialLocale = props.p?.request?.context?.i18n?.locale;
 if (initialLocale) t[sInternal].init(initialLocale);
@@ -39,13 +37,13 @@ if (typeof window !== "undefined") {
 }`
         : "";
     return `
-${vueImports}
-${i18nImports}
+${vue_imports}
+${i18n_imports}
 export default defineComponent({
   name: "root",
   props: { p: { type: Object, required: true } },
   setup(props) {
-    ${i18nSetup}
+    ${i18n_setup}
     return () => {
       const p = props.p;
       setRequest(props.p.request);
@@ -54,5 +52,6 @@ export default defineComponent({
   },
 });
 `;
-};
+}
+;
 //# sourceMappingURL=create-root.js.map

package/lib/private/default.d.ts

@@ -1,6 +1,6 @@
 declare const _default: (input?: {
     extensions?: string[] | undefined;
-    spa?: boolean | undefined;
+    csr?: boolean | undefined;
     ssr?: boolean | undefined;
 } | undefined) => import("@primate/core/frontend").Module;
 export default _default;

package/lib/private/default.js

@@ -7,8 +7,11 @@ export default frontend({
     root: {
         create: create_root,
     },
+    css: {
+        filter: /\.vuecss$/,
+    },
     compile: {
-        client: (text, _, root) => ({ js: root ? text : compile.server(text) }),
+        client: (text, _, root) => root ? { js: text, css: "" } : compile.client(text),
         server: (text, file) => file.path.startsWith("root:") ? text : compile.server(text),
     },
 });

package/lib/private/runtime.d.ts

@@ -1,6 +1,6 @@
 declare const _default: (input?: {
     extensions?: string[] | undefined;
-    spa?: boolean | undefined;
+    csr?: boolean | undefined;
     ssr?: boolean | undefined;
 } | undefined) => import("@primate/core/frontend").Module;
 export default _default;

package/lib/public/browser.d.ts

@@ -1,2 +1,3 @@
 export { default } from "#client/app";
+export { default as client } from "#client/index";
 //# sourceMappingURL=browser.d.ts.map

package/lib/public/browser.js

@@ -1,2 +1,3 @@
 export { default } from "#client/app";
+export { default as client } from "#client/index";
 //# sourceMappingURL=browser.js.map

package/lib/public/runtime.d.ts

@@ -1,2 +1,3 @@
+export { default as client } from "#client/index";
 export { default } from "#runtime";
 //# sourceMappingURL=runtime.d.ts.map

package/lib/public/runtime.js

@@ -1,2 +1,3 @@
+export { default as client } from "#client/index";
 export { default } from "#runtime";
 //# sourceMappingURL=runtime.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/vue",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Vue for Primate",
   "homepage": "https://primate.run/docs/frontend/vue",
   "bugs": "https://github.com/primate-run/primate/issues",
@@ -18,15 +18,15 @@
   ],
   "types": "lib/index.d.ts",
   "dependencies": {
-    "@primate/core": "^0.6.0"
+    "@rcompat/fs": "^0.33.2",
+    "@primate/core": "^0.7.0"
   },
   "devDependencies": {
-    "@rcompat/type": "^0.11.1",
-    "@primate/test": "^0.0.0"
+    "@rcompat/type": "^0.17.0"
   },
   "peerDependencies": {
     "vue": "3",
-    "primate": "^0.37.0"
+    "primate": "^0.38.0"
   },
   "imports": {
     "#*": {
@@ -37,6 +37,7 @@
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
+      "@primate/runtime": "./src/public/runtime.ts",
       "@primate/source": "./src/public/default.ts",
       "browser": "./lib/public/browser.js",
       "runtime": "./lib/public/runtime.js",
@@ -50,7 +51,6 @@
   "scripts": {
     "build": "npm run clean && tsc && cp src/types/{app,index}.d.ts lib",
     "clean": "rm -rf ./lib",
-    "lint": "eslint .",
-    "test": "npx proby"
+    "lint": "eslint ."
   }
 }

package/lib/public/client.d.ts

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

package/lib/public/client.js

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