@primate/svelte 0.23.0 → 0.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts +1 -2
- package/lib/private/client/app.js +4 -1
- package/lib/private/client/form.d.ts +8 -2
- package/lib/private/client/form.js +16 -4
- package/lib/private/client/root.d.ts +7 -8
- package/lib/private/context-name.d.ts +1 -1
- package/lib/private/create-root.d.ts +1 -1
- package/lib/private/create-root.js +9 -28
- package/lib/private/default.d.ts +1 -1
- package/lib/private/default.js +7 -4
- package/lib/private/i18n.d.ts +18 -0
- package/lib/private/i18n.js +46 -0
- package/lib/private/init.js +3 -3
- package/lib/private/runtime.d.ts +1 -1
- package/lib/public/browser.d.ts +5 -1
- package/lib/public/browser.js +7 -1
- package/lib/public/i18n.d.ts +2 -0
- package/lib/public/i18n.js +2 -0
- package/lib/public/runtime.d.ts +1 -0
- package/lib/public/runtime.js +1 -0
- package/package.json +16 -9
package/lib/index.d.ts
CHANGED
|
@@ -3,11 +3,14 @@ import client from "@primate/core/client";
|
|
|
3
3
|
import RootView from "svelte:root";
|
|
4
4
|
export default class SvelteApp {
|
|
5
5
|
static mount(_view, data) {
|
|
6
|
+
const interactive = !data.ssr || data.csr;
|
|
7
|
+
if (!interactive)
|
|
8
|
+
return;
|
|
6
9
|
const Root = root[data.ssr ? "ssr" : "csr"](RootView, {
|
|
7
10
|
props: { p: root.toProps(data) },
|
|
8
11
|
target: document.body,
|
|
9
12
|
});
|
|
10
|
-
if (data.
|
|
13
|
+
if (data.csr) {
|
|
11
14
|
const start = () => client.boot((_data, update) => {
|
|
12
15
|
Root.p = { ...root.toProps(_data), update };
|
|
13
16
|
});
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import type { FormInit } from "@primate/core/client";
|
|
1
|
+
import type { ClientMethod, FormInit } from "@primate/core/client";
|
|
2
2
|
import type { Dict } from "@rcompat/type";
|
|
3
3
|
import type { Readable } from "svelte/store";
|
|
4
|
-
type SvelteFormView<Values extends Dict> = {
|
|
4
|
+
type SvelteFormView<Values extends Dict, Result = unknown> = {
|
|
5
5
|
id: string;
|
|
6
6
|
submitting: boolean;
|
|
7
7
|
submitted: boolean;
|
|
8
|
+
result: Result | null;
|
|
8
9
|
submit: (event?: Event) => Promise<void>;
|
|
9
10
|
errors: readonly string[];
|
|
10
11
|
field: <K extends keyof Values & string>(name: K) => {
|
|
@@ -17,6 +18,11 @@ type SvelteFormView<Values extends Dict> = {
|
|
|
17
18
|
type Initial<Values extends Dict> = FormInit & {
|
|
18
19
|
initial?: Values;
|
|
19
20
|
};
|
|
21
|
+
declare function form<Values extends Dict, Path extends Dict, Result = unknown>(action: ClientMethod<Values, Path> & {
|
|
22
|
+
_result?: Result;
|
|
23
|
+
}, init?: Initial<Values> & {
|
|
24
|
+
path?: Path;
|
|
25
|
+
}): Readable<SvelteFormView<Values, Result>>;
|
|
20
26
|
declare function form<Values extends Dict>(init: Initial<Values>): Readable<SvelteFormView<Values>>;
|
|
21
27
|
declare function form(init?: FormInit): Readable<SvelteFormView<Dict>>;
|
|
22
28
|
export default form;
|
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
import client from "@primate/core/client";
|
|
2
2
|
import { writable } from "svelte/store";
|
|
3
|
-
function form(
|
|
4
|
-
const
|
|
5
|
-
const
|
|
3
|
+
function form(action_or_init, maybe_init) {
|
|
4
|
+
const is_action = typeof action_or_init === "function";
|
|
5
|
+
const { initial, ...form_init } = (is_action ? (maybe_init ?? {}) : (action_or_init ?? {}));
|
|
6
|
+
const action = is_action ? action_or_init : undefined;
|
|
7
|
+
const contentType = is_action
|
|
8
|
+
? action_or_init.contentType
|
|
9
|
+
: undefined;
|
|
10
|
+
const controller = client.createForm({
|
|
11
|
+
...form_init,
|
|
12
|
+
...(action !== undefined && {
|
|
13
|
+
action: action,
|
|
14
|
+
contentType,
|
|
15
|
+
}),
|
|
16
|
+
});
|
|
6
17
|
const values = initial ?? {};
|
|
7
18
|
const make_view = (snapshot) => {
|
|
8
19
|
const form_errors = snapshot.errors.form;
|
|
@@ -10,6 +21,7 @@ function form(init) {
|
|
|
10
21
|
id: snapshot.id,
|
|
11
22
|
submitting: snapshot.submitting,
|
|
12
23
|
submitted: snapshot.submitted,
|
|
24
|
+
result: snapshot.result,
|
|
13
25
|
submit: controller.submit,
|
|
14
26
|
errors: form_errors,
|
|
15
27
|
field(name) {
|
|
@@ -29,7 +41,7 @@ function form(init) {
|
|
|
29
41
|
submit: controller.submit,
|
|
30
42
|
});
|
|
31
43
|
const { subscribe, set } = writable(initial_view);
|
|
32
|
-
controller.subscribe(
|
|
44
|
+
controller.subscribe(snapshot => {
|
|
33
45
|
set(make_view({
|
|
34
46
|
...snapshot,
|
|
35
47
|
submit: controller.submit,
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import type Data from "#client/Data";
|
|
2
2
|
import type { Dict } from "@rcompat/type";
|
|
3
|
-
import { hydrate, mount } from "svelte";
|
|
4
3
|
import type { Component } from "svelte";
|
|
5
|
-
|
|
4
|
+
import { hydrate, mount } from "svelte";
|
|
6
5
|
export type RootProps = {
|
|
7
|
-
views:
|
|
6
|
+
views: Component<any>[];
|
|
8
7
|
props: Dict[];
|
|
9
8
|
request: Data["request"] & {
|
|
10
9
|
url: URL;
|
|
@@ -15,12 +14,12 @@ declare function toProps(data: Data): {
|
|
|
15
14
|
views: Component<{}, {}, string>[];
|
|
16
15
|
props: Dict[];
|
|
17
16
|
request: {
|
|
18
|
-
url: URL;
|
|
19
17
|
context: Dict;
|
|
20
|
-
cookies:
|
|
21
|
-
headers:
|
|
22
|
-
path:
|
|
23
|
-
query:
|
|
18
|
+
cookies: import("@rcompat/type").PartialDict<string>;
|
|
19
|
+
headers: import("@rcompat/type").PartialDict<string>;
|
|
20
|
+
path: import("@rcompat/type").PartialDict<string>;
|
|
21
|
+
query: import("@rcompat/type").PartialDict<string>;
|
|
22
|
+
url: URL;
|
|
24
23
|
};
|
|
25
24
|
update: () => undefined;
|
|
26
25
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export default (depth
|
|
1
|
+
export default (depth) => {
|
|
2
2
|
const n = depth;
|
|
3
3
|
const body = Array.from({ length: n }, (_, i) => i - 1)
|
|
4
4
|
.reduceRight((child, _, i) => `
|
|
5
|
-
{#if p.views[${i + 1}]}
|
|
5
|
+
{#if p.views[${i + 1}] !== undefined}
|
|
6
6
|
<svelte:component this={p.views[${i}]} {...p.props[${i}]}>
|
|
7
7
|
${child}
|
|
8
8
|
</svelte:component>
|
|
@@ -10,43 +10,24 @@ export default (depth, i18n_active) => {
|
|
|
10
10
|
<svelte:component this={p.views[${i}]} {...p.props[${i}]}/>
|
|
11
11
|
{/if}
|
|
12
12
|
`, `<svelte:component this={p.views[${n}]} {...p.props[${n}]}/>`);
|
|
13
|
-
const i18nImports = i18n_active
|
|
14
|
-
? `
|
|
15
|
-
import t from "#i18n";
|
|
16
|
-
import sInternal from "primate/s/internal";
|
|
17
|
-
import { onMount } from "svelte";`
|
|
18
|
-
: "";
|
|
19
|
-
const i18nInit = i18n_active
|
|
20
|
-
? `
|
|
21
|
-
const server = p.request.context.i18n.locale;
|
|
22
|
-
if (server !== undefined && server !== t.locale.get()) {
|
|
23
|
-
t[sInternal].init(server);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// after hydration: in storage modes, flip to saved locale once
|
|
27
|
-
onMount(() => { t[sInternal].restore(); });`
|
|
28
|
-
: "";
|
|
29
13
|
return `
|
|
30
14
|
<script>
|
|
31
15
|
import { afterUpdate, setContext } from "svelte";
|
|
32
16
|
import context_name from "@primate/svelte/context-name";
|
|
33
17
|
import { request } from "@primate/svelte/app";
|
|
34
|
-
${i18nImports}
|
|
35
18
|
|
|
36
19
|
export let p;
|
|
37
20
|
|
|
38
|
-
setContext(context_name, p.
|
|
21
|
+
setContext(context_name, p.context);
|
|
39
22
|
|
|
40
|
-
|
|
41
|
-
|
|
23
|
+
function sync(next) {
|
|
24
|
+
const { context, path, ...public_request } = next.request;
|
|
25
|
+
request.set(public_request);
|
|
26
|
+
}
|
|
42
27
|
|
|
43
|
-
|
|
28
|
+
sync(p);
|
|
44
29
|
|
|
45
|
-
afterUpdate(() => {
|
|
46
|
-
const { context, path, ...public_request } = p.request;
|
|
47
|
-
request.set(public_request);
|
|
48
|
-
p.update?.();
|
|
49
|
-
});
|
|
30
|
+
afterUpdate(() => { sync(p); });
|
|
50
31
|
</script>
|
|
51
32
|
|
|
52
33
|
${body}
|
package/lib/private/default.d.ts
CHANGED
package/lib/private/default.js
CHANGED
|
@@ -9,6 +9,9 @@ const strip = (code) => {
|
|
|
9
9
|
format: "esm",
|
|
10
10
|
}).code;
|
|
11
11
|
};
|
|
12
|
+
const options = {
|
|
13
|
+
experimental: { async: true },
|
|
14
|
+
};
|
|
12
15
|
export default frontend({
|
|
13
16
|
...init,
|
|
14
17
|
root: {
|
|
@@ -22,15 +25,15 @@ export default frontend({
|
|
|
22
25
|
const accessors = true;
|
|
23
26
|
const { css, js } = file.path.endsWith(".js") || file.path.endsWith(".ts")
|
|
24
27
|
// runes in .svelte.[j|t]s
|
|
25
|
-
? compileModule(strip(text), { generate: "client" })
|
|
26
|
-
: compile(text, { accessors, generate: "client" });
|
|
28
|
+
? compileModule(strip(text), { generate: "client", ...options })
|
|
29
|
+
: compile(text, { accessors, generate: "client", ...options });
|
|
27
30
|
return { css: css?.code ?? "", js: js.code };
|
|
28
31
|
},
|
|
29
32
|
server: (text, file) => {
|
|
30
33
|
const { js } = file?.path.endsWith(".js") || file?.path.endsWith(".ts")
|
|
31
34
|
// runes in .svelte.[j|t]s
|
|
32
|
-
? compileModule(strip(text), { generate: "server" })
|
|
33
|
-
: compile(text, { generate: "server" });
|
|
35
|
+
? compileModule(strip(text), { generate: "server", ...options })
|
|
36
|
+
: compile(text, { generate: "server", ...options });
|
|
34
37
|
return js.code;
|
|
35
38
|
},
|
|
36
39
|
},
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { BridgedTranslator, HeadlessTranslator, LocaleOf, RestoreRequest, SetLocaleOf } from "@primate/core/i18n";
|
|
2
|
+
type Unsubscribe = () => void;
|
|
3
|
+
type Subscriber<T> = (value: T) => void;
|
|
4
|
+
type I18NStore<T extends HeadlessTranslator> = {
|
|
5
|
+
subscribe(run: Subscriber<BridgedTranslator<T>>): Unsubscribe;
|
|
6
|
+
defaultLocale: T["defaultLocale"];
|
|
7
|
+
locales: T["locales"];
|
|
8
|
+
catalogs: T["catalogs"];
|
|
9
|
+
currency: T["currency"];
|
|
10
|
+
locale: {
|
|
11
|
+
get(): LocaleOf<T>;
|
|
12
|
+
set(locale: SetLocaleOf<T>): void;
|
|
13
|
+
};
|
|
14
|
+
restore(request?: RestoreRequest): void;
|
|
15
|
+
};
|
|
16
|
+
export default function i18n<const T extends HeadlessTranslator>(source: T): I18NStore<T>;
|
|
17
|
+
export {};
|
|
18
|
+
//# sourceMappingURL=i18n.d.ts.map
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import request from "#request/store";
|
|
2
|
+
export default function i18n(source) {
|
|
3
|
+
const subscribers = new Set();
|
|
4
|
+
const notify = () => {
|
|
5
|
+
for (const subscriber of subscribers)
|
|
6
|
+
subscriber(value);
|
|
7
|
+
};
|
|
8
|
+
const get = () => source.locale.get();
|
|
9
|
+
const set = (locale) => {
|
|
10
|
+
const before = source.locale.get();
|
|
11
|
+
source.locale.set(locale);
|
|
12
|
+
if (source.locale.get() !== before)
|
|
13
|
+
notify();
|
|
14
|
+
};
|
|
15
|
+
const restore = (next) => {
|
|
16
|
+
const before = source.locale.get();
|
|
17
|
+
source.restore(next);
|
|
18
|
+
if (source.locale.get() !== before)
|
|
19
|
+
notify();
|
|
20
|
+
};
|
|
21
|
+
const value = ((...args) => {
|
|
22
|
+
return source(...args);
|
|
23
|
+
});
|
|
24
|
+
value.defaultLocale = source.defaultLocale;
|
|
25
|
+
value.locales = source.locales;
|
|
26
|
+
value.catalogs = source.catalogs;
|
|
27
|
+
value.currency = source.currency;
|
|
28
|
+
value.locale = { get, set };
|
|
29
|
+
value.restore = restore;
|
|
30
|
+
restore();
|
|
31
|
+
request.subscribe(next => { restore(next); });
|
|
32
|
+
return {
|
|
33
|
+
subscribe(run) {
|
|
34
|
+
subscribers.add(run);
|
|
35
|
+
run(value);
|
|
36
|
+
return () => { subscribers.delete(run); };
|
|
37
|
+
},
|
|
38
|
+
defaultLocale: source.defaultLocale,
|
|
39
|
+
locales: source.locales,
|
|
40
|
+
catalogs: source.catalogs,
|
|
41
|
+
currency: source.currency,
|
|
42
|
+
locale: { get, set },
|
|
43
|
+
restore,
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=i18n.js.map
|
package/lib/private/init.js
CHANGED
|
@@ -4,9 +4,9 @@ const module = {
|
|
|
4
4
|
extensions: [".svelte.js", ".svelte.ts", ".svelte"],
|
|
5
5
|
layouts: true,
|
|
6
6
|
client: true,
|
|
7
|
-
render(view, props) {
|
|
8
|
-
const {
|
|
9
|
-
return { body
|
|
7
|
+
async render(view, props) {
|
|
8
|
+
const { body, head } = await render(view, { props: { p: { ...props } } });
|
|
9
|
+
return { body, head };
|
|
10
10
|
},
|
|
11
11
|
conditions: ["svelte"],
|
|
12
12
|
};
|
package/lib/private/runtime.d.ts
CHANGED
package/lib/public/browser.d.ts
CHANGED
package/lib/public/browser.js
CHANGED
package/lib/public/runtime.d.ts
CHANGED
package/lib/public/runtime.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primate/svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"description": "Svelte for Primate",
|
|
5
5
|
"homepage": "https://primate.run/docs/frontend/svelte",
|
|
6
6
|
"bugs": "https://github.com/primate-run/primate/issues",
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
],
|
|
19
19
|
"types": "lib/index.d.ts",
|
|
20
20
|
"dependencies": {
|
|
21
|
+
"@rcompat/fs": "^0.33.2",
|
|
21
22
|
"esbuild": "^0.28.0",
|
|
22
|
-
"@primate/core": "^0.
|
|
23
|
+
"@primate/core": "^0.8.0"
|
|
23
24
|
},
|
|
24
25
|
"devDependencies": {
|
|
25
|
-
"@rcompat/type": "^0.
|
|
26
|
-
"@primate/test": "^0.0.0"
|
|
26
|
+
"@rcompat/type": "^0.17.0"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"svelte": "5",
|
|
30
|
-
"primate": "^0.
|
|
30
|
+
"primate": "^0.39.0"
|
|
31
31
|
},
|
|
32
32
|
"imports": {
|
|
33
33
|
"#*": {
|
|
@@ -38,20 +38,27 @@
|
|
|
38
38
|
"exports": {
|
|
39
39
|
".": {
|
|
40
40
|
"types": "./lib/index.d.ts",
|
|
41
|
+
"browser": {
|
|
42
|
+
"@primate/source": "./src/public/browser.ts",
|
|
43
|
+
"default": "./lib/public/browser.js"
|
|
44
|
+
},
|
|
45
|
+
"@primate/runtime": "./src/public/runtime.ts",
|
|
41
46
|
"@primate/source": "./src/public/default.ts",
|
|
42
|
-
"browser": "./lib/public/browser.js",
|
|
43
47
|
"runtime": "./lib/public/runtime.js",
|
|
44
48
|
"default": "./lib/public/default.js"
|
|
45
49
|
},
|
|
50
|
+
"./i18n": {
|
|
51
|
+
"@primate/source": "./src/public/i18n.ts",
|
|
52
|
+
"default": "./lib/public/i18n.js"
|
|
53
|
+
},
|
|
46
54
|
"./*": {
|
|
47
55
|
"@primate/source": "./src/public/*.ts",
|
|
48
56
|
"default": "./lib/public/*.js"
|
|
49
57
|
}
|
|
50
58
|
},
|
|
51
59
|
"scripts": {
|
|
52
|
-
"build": "npm run clean &&
|
|
60
|
+
"build": "npm run clean && tsgo && cp src/types/app.d.ts lib && cp src/types/index.d.ts lib",
|
|
53
61
|
"clean": "rm -rf ./lib",
|
|
54
|
-
"lint": "eslint ."
|
|
55
|
-
"test": "npx proby"
|
|
62
|
+
"lint": "eslint ."
|
|
56
63
|
}
|
|
57
64
|
}
|