@tanstack/solid-router 2.0.0-alpha.2 → 2.0.0-alpha.4
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/dist/cjs/Asset.cjs +124 -167
- package/dist/cjs/Asset.cjs.map +1 -1
- package/dist/cjs/CatchBoundary.cjs +52 -68
- package/dist/cjs/CatchBoundary.cjs.map +1 -1
- package/dist/cjs/ClientOnly.cjs +61 -39
- package/dist/cjs/ClientOnly.cjs.map +1 -1
- package/dist/cjs/HeadContent.cjs +35 -27
- package/dist/cjs/HeadContent.cjs.map +1 -1
- package/dist/cjs/HeadContent.dev.cjs +48 -41
- package/dist/cjs/HeadContent.dev.cjs.map +1 -1
- package/dist/cjs/Match.cjs +367 -442
- package/dist/cjs/Match.cjs.map +1 -1
- package/dist/cjs/Matches.cjs +114 -158
- package/dist/cjs/Matches.cjs.map +1 -1
- package/dist/cjs/RouterProvider.cjs +29 -41
- package/dist/cjs/RouterProvider.cjs.map +1 -1
- package/dist/cjs/SafeFragment.cjs +7 -5
- package/dist/cjs/SafeFragment.cjs.map +1 -1
- package/dist/cjs/ScriptOnce.cjs +20 -22
- package/dist/cjs/ScriptOnce.cjs.map +1 -1
- package/dist/cjs/Scripts.cjs +43 -58
- package/dist/cjs/Scripts.cjs.map +1 -1
- package/dist/cjs/ScrollRestoration.cjs +26 -28
- package/dist/cjs/ScrollRestoration.cjs.map +1 -1
- package/dist/cjs/Transitioner.cjs +91 -124
- package/dist/cjs/Transitioner.cjs.map +1 -1
- package/dist/cjs/_virtual/_rolldown/runtime.cjs +23 -0
- package/dist/cjs/awaited.cjs +31 -53
- package/dist/cjs/awaited.cjs.map +1 -1
- package/dist/cjs/fileRoute.cjs +96 -91
- package/dist/cjs/fileRoute.cjs.map +1 -1
- package/dist/cjs/fileRoute.d.cts +2 -2
- package/dist/cjs/headContentUtils.cjs +132 -170
- package/dist/cjs/headContentUtils.cjs.map +1 -1
- package/dist/cjs/index.cjs +245 -176
- package/dist/cjs/index.dev.cjs +245 -176
- package/dist/cjs/lazyRouteComponent.cjs +48 -54
- package/dist/cjs/lazyRouteComponent.cjs.map +1 -1
- package/dist/cjs/link.cjs +310 -345
- package/dist/cjs/link.cjs.map +1 -1
- package/dist/cjs/matchContext.cjs +9 -23
- package/dist/cjs/matchContext.cjs.map +1 -1
- package/dist/cjs/not-found.cjs +26 -34
- package/dist/cjs/not-found.cjs.map +1 -1
- package/dist/cjs/renderRouteNotFound.cjs +23 -16
- package/dist/cjs/renderRouteNotFound.cjs.map +1 -1
- package/dist/cjs/route.cjs +200 -215
- package/dist/cjs/route.cjs.map +1 -1
- package/dist/cjs/router.cjs +18 -16
- package/dist/cjs/router.cjs.map +1 -1
- package/dist/cjs/routerContext.cjs +8 -22
- package/dist/cjs/routerContext.cjs.map +1 -1
- package/dist/cjs/scroll-restoration.cjs +25 -35
- package/dist/cjs/scroll-restoration.cjs.map +1 -1
- package/dist/cjs/ssr/RouterClient.cjs +18 -23
- package/dist/cjs/ssr/RouterClient.cjs.map +1 -1
- package/dist/cjs/ssr/RouterServer.cjs +10 -10
- package/dist/cjs/ssr/RouterServer.cjs.map +1 -1
- package/dist/cjs/ssr/client.cjs +2 -4
- package/dist/cjs/ssr/defaultRenderHandler.cjs +12 -16
- package/dist/cjs/ssr/defaultRenderHandler.cjs.map +1 -1
- package/dist/cjs/ssr/defaultStreamHandler.cjs +13 -18
- package/dist/cjs/ssr/defaultStreamHandler.cjs.map +1 -1
- package/dist/cjs/ssr/renderRouterToStream.cjs +26 -54
- package/dist/cjs/ssr/renderRouterToStream.cjs.map +1 -1
- package/dist/cjs/ssr/renderRouterToString.cjs +33 -57
- package/dist/cjs/ssr/renderRouterToString.cjs.map +1 -1
- package/dist/cjs/ssr/server.cjs +18 -18
- package/dist/cjs/useBlocker.cjs +140 -177
- package/dist/cjs/useBlocker.cjs.map +1 -1
- package/dist/cjs/useBlocker.d.cts +8 -5
- package/dist/cjs/useCanGoBack.cjs +6 -5
- package/dist/cjs/useCanGoBack.cjs.map +1 -1
- package/dist/cjs/useLoaderData.cjs +12 -11
- package/dist/cjs/useLoaderData.cjs.map +1 -1
- package/dist/cjs/useLoaderDeps.cjs +12 -14
- package/dist/cjs/useLoaderDeps.cjs.map +1 -1
- package/dist/cjs/useLocation.cjs +6 -7
- package/dist/cjs/useLocation.cjs.map +1 -1
- package/dist/cjs/useMatch.cjs +25 -46
- package/dist/cjs/useMatch.cjs.map +1 -1
- package/dist/cjs/useNavigate.cjs +20 -38
- package/dist/cjs/useNavigate.cjs.map +1 -1
- package/dist/cjs/useParams.cjs +14 -13
- package/dist/cjs/useParams.cjs.map +1 -1
- package/dist/cjs/useRouteContext.cjs +9 -8
- package/dist/cjs/useRouteContext.cjs.map +1 -1
- package/dist/cjs/useRouter.cjs +13 -26
- package/dist/cjs/useRouter.cjs.map +1 -1
- package/dist/cjs/useRouterState.cjs +38 -45
- package/dist/cjs/useRouterState.cjs.map +1 -1
- package/dist/cjs/useSearch.cjs +13 -12
- package/dist/cjs/useSearch.cjs.map +1 -1
- package/dist/cjs/utils.cjs +57 -49
- package/dist/cjs/utils.cjs.map +1 -1
- package/dist/esm/Asset.js +122 -166
- package/dist/esm/Asset.js.map +1 -1
- package/dist/esm/CatchBoundary.js +48 -50
- package/dist/esm/CatchBoundary.js.map +1 -1
- package/dist/esm/ClientOnly.js +58 -22
- package/dist/esm/ClientOnly.js.map +1 -1
- package/dist/esm/HeadContent.dev.js +46 -40
- package/dist/esm/HeadContent.dev.js.map +1 -1
- package/dist/esm/HeadContent.js +33 -26
- package/dist/esm/HeadContent.js.map +1 -1
- package/dist/esm/Match.js +359 -422
- package/dist/esm/Match.js.map +1 -1
- package/dist/esm/Matches.js +107 -142
- package/dist/esm/Matches.js.map +1 -1
- package/dist/esm/RouterProvider.js +26 -40
- package/dist/esm/RouterProvider.js.map +1 -1
- package/dist/esm/SafeFragment.js +6 -5
- package/dist/esm/SafeFragment.js.map +1 -1
- package/dist/esm/ScriptOnce.js +18 -21
- package/dist/esm/ScriptOnce.js.map +1 -1
- package/dist/esm/Scripts.js +42 -58
- package/dist/esm/Scripts.js.map +1 -1
- package/dist/esm/ScrollRestoration.js +25 -29
- package/dist/esm/ScrollRestoration.js.map +1 -1
- package/dist/esm/Transitioner.js +87 -105
- package/dist/esm/Transitioner.js.map +1 -1
- package/dist/esm/awaited.js +28 -36
- package/dist/esm/awaited.js.map +1 -1
- package/dist/esm/fileRoute.d.ts +2 -2
- package/dist/esm/fileRoute.js +90 -92
- package/dist/esm/fileRoute.js.map +1 -1
- package/dist/esm/headContentUtils.js +129 -152
- package/dist/esm/headContentUtils.js.map +1 -1
- package/dist/esm/index.dev.js +15 -115
- package/dist/esm/index.js +17 -116
- package/dist/esm/lazyRouteComponent.js +46 -53
- package/dist/esm/lazyRouteComponent.js.map +1 -1
- package/dist/esm/link.js +306 -329
- package/dist/esm/link.js.map +1 -1
- package/dist/esm/matchContext.js +7 -7
- package/dist/esm/matchContext.js.map +1 -1
- package/dist/esm/not-found.js +23 -33
- package/dist/esm/not-found.js.map +1 -1
- package/dist/esm/renderRouteNotFound.js +20 -15
- package/dist/esm/renderRouteNotFound.js.map +1 -1
- package/dist/esm/route.js +193 -218
- package/dist/esm/route.js.map +1 -1
- package/dist/esm/router.js +17 -17
- package/dist/esm/router.js.map +1 -1
- package/dist/esm/routerContext.js +6 -5
- package/dist/esm/routerContext.js.map +1 -1
- package/dist/esm/scroll-restoration.js +23 -34
- package/dist/esm/scroll-restoration.js.map +1 -1
- package/dist/esm/ssr/RouterClient.js +16 -22
- package/dist/esm/ssr/RouterClient.js.map +1 -1
- package/dist/esm/ssr/RouterServer.js +9 -10
- package/dist/esm/ssr/RouterServer.js.map +1 -1
- package/dist/esm/ssr/client.js +1 -4
- package/dist/esm/ssr/defaultRenderHandler.js +11 -15
- package/dist/esm/ssr/defaultRenderHandler.js.map +1 -1
- package/dist/esm/ssr/defaultStreamHandler.js +12 -17
- package/dist/esm/ssr/defaultStreamHandler.js.map +1 -1
- package/dist/esm/ssr/renderRouterToStream.js +23 -36
- package/dist/esm/ssr/renderRouterToStream.js.map +1 -1
- package/dist/esm/ssr/renderRouterToString.js +31 -40
- package/dist/esm/ssr/renderRouterToString.js.map +1 -1
- package/dist/esm/ssr/server.js +3 -10
- package/dist/esm/useBlocker.d.ts +8 -5
- package/dist/esm/useBlocker.js +136 -159
- package/dist/esm/useBlocker.js.map +1 -1
- package/dist/esm/useCanGoBack.js +6 -5
- package/dist/esm/useCanGoBack.js.map +1 -1
- package/dist/esm/useLoaderData.js +12 -11
- package/dist/esm/useLoaderData.js.map +1 -1
- package/dist/esm/useLoaderDeps.js +12 -14
- package/dist/esm/useLoaderDeps.js.map +1 -1
- package/dist/esm/useLocation.js +6 -7
- package/dist/esm/useLocation.js.map +1 -1
- package/dist/esm/useMatch.js +21 -28
- package/dist/esm/useMatch.js.map +1 -1
- package/dist/esm/useNavigate.js +18 -22
- package/dist/esm/useNavigate.js.map +1 -1
- package/dist/esm/useParams.js +14 -13
- package/dist/esm/useParams.js.map +1 -1
- package/dist/esm/useRouteContext.js +9 -8
- package/dist/esm/useRouteContext.js.map +1 -1
- package/dist/esm/useRouter.js +9 -8
- package/dist/esm/useRouter.js.map +1 -1
- package/dist/esm/useRouterState.js +36 -44
- package/dist/esm/useRouterState.js.map +1 -1
- package/dist/esm/useSearch.js +13 -12
- package/dist/esm/useSearch.js.map +1 -1
- package/dist/esm/utils.js +55 -33
- package/dist/esm/utils.js.map +1 -1
- package/dist/source/fileRoute.d.ts +2 -2
- package/dist/source/useBlocker.d.ts +8 -5
- package/dist/source/useBlocker.jsx +2 -2
- package/dist/source/useBlocker.jsx.map +1 -1
- package/package.json +8 -8
- package/src/fileRoute.ts +2 -2
- package/src/useBlocker.tsx +15 -10
- package/dist/cjs/index.cjs.map +0 -1
- package/dist/cjs/index.dev.cjs.map +0 -1
- package/dist/cjs/ssr/client.cjs.map +0 -1
- package/dist/cjs/ssr/server.cjs.map +0 -1
- package/dist/esm/index.dev.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/ssr/client.js.map +0 -1
- package/dist/esm/ssr/server.js.map +0 -1
package/dist/esm/Asset.js
CHANGED
|
@@ -1,173 +1,129 @@
|
|
|
1
|
-
import { createComponent, template, spread, mergeProps, insert } from "@solidjs/web";
|
|
2
|
-
import { isServer } from "@tanstack/router-core/isServer";
|
|
3
|
-
import { createEffect, onCleanup } from "solid-js";
|
|
4
1
|
import { useRouter } from "./useRouter.js";
|
|
2
|
+
import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
|
|
3
|
+
import { createEffect, onCleanup } from "solid-js";
|
|
4
|
+
import { isServer } from "@tanstack/router-core/isServer";
|
|
5
|
+
//#region src/Asset.tsx
|
|
5
6
|
var _tmpl$ = /* @__PURE__ */ template(`<meta>`), _tmpl$2 = /* @__PURE__ */ template(`<link>`), _tmpl$3 = /* @__PURE__ */ template(`<style>`), _tmpl$4 = /* @__PURE__ */ template(`<title>`), _tmpl$5 = /* @__PURE__ */ template(`<script>`);
|
|
6
|
-
function Asset({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
return (() => {
|
|
40
|
-
var _el$4 = _tmpl$3();
|
|
41
|
-
spread(_el$4, attrs, false, false);
|
|
42
|
-
return _el$4;
|
|
43
|
-
})();
|
|
44
|
-
case "script":
|
|
45
|
-
return createComponent(Script, {
|
|
46
|
-
attrs,
|
|
47
|
-
children
|
|
48
|
-
});
|
|
49
|
-
default:
|
|
50
|
-
return null;
|
|
51
|
-
}
|
|
7
|
+
function Asset({ tag, attrs, children }) {
|
|
8
|
+
switch (tag) {
|
|
9
|
+
case "title": return createComponent(Title, {
|
|
10
|
+
attrs,
|
|
11
|
+
children
|
|
12
|
+
});
|
|
13
|
+
case "meta": return (() => {
|
|
14
|
+
var _el$ = _tmpl$();
|
|
15
|
+
spread(_el$, attrs, false, false);
|
|
16
|
+
return _el$;
|
|
17
|
+
})();
|
|
18
|
+
case "link": return (() => {
|
|
19
|
+
var _el$2 = _tmpl$2();
|
|
20
|
+
spread(_el$2, attrs, false, false);
|
|
21
|
+
return _el$2;
|
|
22
|
+
})();
|
|
23
|
+
case "style":
|
|
24
|
+
if (typeof children === "string") return (() => {
|
|
25
|
+
var _el$3 = _tmpl$3();
|
|
26
|
+
spread(_el$3, mergeProps(attrs, { "innerHTML": children }), false, false);
|
|
27
|
+
return _el$3;
|
|
28
|
+
})();
|
|
29
|
+
return (() => {
|
|
30
|
+
var _el$4 = _tmpl$3();
|
|
31
|
+
spread(_el$4, attrs, false, false);
|
|
32
|
+
return _el$4;
|
|
33
|
+
})();
|
|
34
|
+
case "script": return createComponent(Script, {
|
|
35
|
+
attrs,
|
|
36
|
+
children
|
|
37
|
+
});
|
|
38
|
+
default: return null;
|
|
39
|
+
}
|
|
52
40
|
}
|
|
53
41
|
function Title(props) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return _el$6;
|
|
73
|
-
})();
|
|
42
|
+
const router = useRouter();
|
|
43
|
+
const attrs = props.attrs;
|
|
44
|
+
const children = props.children;
|
|
45
|
+
if (isServer ?? router.isServer) return (() => {
|
|
46
|
+
var _el$5 = _tmpl$4();
|
|
47
|
+
spread(_el$5, attrs, false, true);
|
|
48
|
+
insert(_el$5, children);
|
|
49
|
+
return _el$5;
|
|
50
|
+
})();
|
|
51
|
+
createEffect(() => children, (titleText) => {
|
|
52
|
+
document.title = typeof titleText === "string" ? titleText : "";
|
|
53
|
+
});
|
|
54
|
+
return (() => {
|
|
55
|
+
var _el$6 = _tmpl$4();
|
|
56
|
+
spread(_el$6, attrs, false, true);
|
|
57
|
+
insert(_el$6, children);
|
|
58
|
+
return _el$6;
|
|
59
|
+
})();
|
|
74
60
|
}
|
|
75
61
|
function Script(props) {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
} else if (typeof children2 === "string") {
|
|
140
|
-
const typeAttr = typeof attrs2?.type === "string" ? attrs2.type : "text/javascript";
|
|
141
|
-
const nonceAttr = typeof attrs2?.nonce === "string" ? attrs2.nonce : void 0;
|
|
142
|
-
const existingScript = Array.from(document.querySelectorAll("script:not([src])")).find((el) => {
|
|
143
|
-
if (!(el instanceof HTMLScriptElement)) return false;
|
|
144
|
-
const sType = el.getAttribute("type") ?? "text/javascript";
|
|
145
|
-
const sNonce = el.getAttribute("nonce") ?? void 0;
|
|
146
|
-
return el.textContent === children2 && sType === typeAttr && sNonce === nonceAttr;
|
|
147
|
-
});
|
|
148
|
-
if (existingScript) {
|
|
149
|
-
return;
|
|
150
|
-
}
|
|
151
|
-
script = document.createElement("script");
|
|
152
|
-
script.textContent = children2;
|
|
153
|
-
if (attrs2) {
|
|
154
|
-
for (const [key, value] of Object.entries(attrs2)) {
|
|
155
|
-
if (value !== void 0 && value !== false) {
|
|
156
|
-
script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
document.head.appendChild(script);
|
|
161
|
-
}
|
|
162
|
-
onCleanup(() => {
|
|
163
|
-
if (script?.parentNode) {
|
|
164
|
-
script.parentNode.removeChild(script);
|
|
165
|
-
}
|
|
166
|
-
});
|
|
167
|
-
});
|
|
168
|
-
return null;
|
|
62
|
+
const router = useRouter();
|
|
63
|
+
const attrs = props.attrs;
|
|
64
|
+
const children = props.children;
|
|
65
|
+
const dataScript = typeof attrs?.type === "string" && attrs.type !== "" && attrs.type !== "text/javascript" && attrs.type !== "module";
|
|
66
|
+
if (isServer ?? router.isServer) {
|
|
67
|
+
if (attrs?.src) return (() => {
|
|
68
|
+
var _el$7 = _tmpl$5();
|
|
69
|
+
spread(_el$7, attrs, false, false);
|
|
70
|
+
return _el$7;
|
|
71
|
+
})();
|
|
72
|
+
if (typeof children === "string") return (() => {
|
|
73
|
+
var _el$8 = _tmpl$5();
|
|
74
|
+
spread(_el$8, mergeProps(attrs, { "innerHTML": children }), false, false);
|
|
75
|
+
return _el$8;
|
|
76
|
+
})();
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
79
|
+
if (dataScript && typeof children === "string") return (() => {
|
|
80
|
+
var _el$9 = _tmpl$5();
|
|
81
|
+
spread(_el$9, mergeProps(attrs, { "innerHTML": children }), false, false);
|
|
82
|
+
return _el$9;
|
|
83
|
+
})();
|
|
84
|
+
createEffect(() => ({
|
|
85
|
+
attrs,
|
|
86
|
+
children,
|
|
87
|
+
dataScript
|
|
88
|
+
}), ({ attrs, children, dataScript }) => {
|
|
89
|
+
if (dataScript) return;
|
|
90
|
+
let script;
|
|
91
|
+
if (attrs?.src) {
|
|
92
|
+
const normSrc = (() => {
|
|
93
|
+
try {
|
|
94
|
+
const base = document.baseURI || window.location.href;
|
|
95
|
+
return new URL(attrs.src, base).href;
|
|
96
|
+
} catch {
|
|
97
|
+
return attrs.src;
|
|
98
|
+
}
|
|
99
|
+
})();
|
|
100
|
+
if (Array.from(document.querySelectorAll("script[src]")).find((el) => el.src === normSrc)) return;
|
|
101
|
+
script = document.createElement("script");
|
|
102
|
+
for (const [key, value] of Object.entries(attrs)) if (value !== void 0 && value !== false) script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
|
|
103
|
+
document.head.appendChild(script);
|
|
104
|
+
} else if (typeof children === "string") {
|
|
105
|
+
const typeAttr = typeof attrs?.type === "string" ? attrs.type : "text/javascript";
|
|
106
|
+
const nonceAttr = typeof attrs?.nonce === "string" ? attrs.nonce : void 0;
|
|
107
|
+
if (Array.from(document.querySelectorAll("script:not([src])")).find((el) => {
|
|
108
|
+
if (!(el instanceof HTMLScriptElement)) return false;
|
|
109
|
+
const sType = el.getAttribute("type") ?? "text/javascript";
|
|
110
|
+
const sNonce = el.getAttribute("nonce") ?? void 0;
|
|
111
|
+
return el.textContent === children && sType === typeAttr && sNonce === nonceAttr;
|
|
112
|
+
})) return;
|
|
113
|
+
script = document.createElement("script");
|
|
114
|
+
script.textContent = children;
|
|
115
|
+
if (attrs) {
|
|
116
|
+
for (const [key, value] of Object.entries(attrs)) if (value !== void 0 && value !== false) script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
|
|
117
|
+
}
|
|
118
|
+
document.head.appendChild(script);
|
|
119
|
+
}
|
|
120
|
+
onCleanup(() => {
|
|
121
|
+
if (script?.parentNode) script.parentNode.removeChild(script);
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
return null;
|
|
169
125
|
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
//# sourceMappingURL=Asset.js.map
|
|
126
|
+
//#endregion
|
|
127
|
+
export { Asset };
|
|
128
|
+
|
|
129
|
+
//# sourceMappingURL=Asset.js.map
|
package/dist/esm/Asset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import { isServer } from '@tanstack/router-core/isServer'\nimport { createEffect, onCleanup } from 'solid-js'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\nimport type { JSX } from 'solid-js'\n\nexport function Asset({\n tag,\n attrs,\n children,\n}: RouterManagedTag): JSX.Element | null {\n switch (tag) {\n case 'title':\n return <Title attrs={attrs} children={children} />\n case 'meta':\n return <meta {...attrs} />\n case 'link':\n return <link {...attrs} />\n case 'style':\n if (typeof children === 'string') {\n return <style {...attrs} innerHTML={children} />\n }\n return <style {...attrs} />\n case 'script':\n return <Script attrs={attrs} children={children} />\n default:\n return null\n }\n}\n\nfunction Title(props: {\n attrs?: Record<string, any>\n children?: unknown\n}): JSX.Element | null {\n const router = useRouter()\n const attrs = props.attrs\n const children = props.children\n\n // Server: render <title> normally\n if (isServer ?? router.isServer) {\n return <title {...attrs}>{children as string}</title>\n }\n\n // Client: imperatively set document.title so it updates during\n // client-side navigation (JSX <title> in <head> doesn't reliably\n // update the browser's document.title).\n createEffect(\n () => children,\n (titleText) => {\n document.title = typeof titleText === 'string' ? titleText : ''\n },\n )\n\n // Still render the <title> element in the DOM for consistency,\n // but the imperative assignment above is what actually drives the update.\n return <title {...attrs}>{children as string}</title>\n}\n\nfunction Script(props: {\n attrs?: Record<string, any>\n children?: unknown\n}): JSX.Element | null {\n const router = useRouter()\n const attrs = props.attrs\n const children = props.children\n\n const dataScript =\n typeof attrs?.type === 'string' &&\n attrs.type !== '' &&\n attrs.type !== 'text/javascript' &&\n attrs.type !== 'module'\n\n // --- Server rendering ---\n if (isServer ?? router.isServer) {\n if (attrs?.src) {\n return <script {...attrs} />\n }\n\n if (typeof children === 'string') {\n return <script {...attrs} innerHTML={children} />\n }\n\n return null\n }\n\n // --- Client rendering ---\n\n // Data scripts (e.g. application/ld+json) are rendered in the tree;\n // they don't need to execute.\n if (dataScript && typeof children === 'string') {\n return <script {...attrs} innerHTML={children} />\n }\n\n // For executable scripts, use imperative DOM injection so the browser\n // actually executes them during client-side navigation.\n createEffect(\n () => ({ attrs, children, dataScript }) as const,\n ({ attrs, children, dataScript }) => {\n if (dataScript) return\n\n let script: HTMLScriptElement | undefined\n\n if (attrs?.src) {\n const normSrc = (() => {\n try {\n const base = document.baseURI || window.location.href\n return new URL(attrs.src, base).href\n } catch {\n return attrs.src\n }\n })()\n const existingScript = Array.from(\n document.querySelectorAll('script[src]'),\n ).find((el) => (el as HTMLScriptElement).src === normSrc)\n\n if (existingScript) {\n return\n }\n\n script = document.createElement('script')\n\n for (const [key, value] of Object.entries(attrs)) {\n if (value !== undefined && value !== false) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n\n document.head.appendChild(script)\n } else if (typeof children === 'string') {\n const typeAttr =\n typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'\n const nonceAttr =\n typeof attrs?.nonce === 'string' ? attrs.nonce : undefined\n const existingScript = Array.from(\n document.querySelectorAll('script:not([src])'),\n ).find((el) => {\n if (!(el instanceof HTMLScriptElement)) return false\n const sType = el.getAttribute('type') ?? 'text/javascript'\n const sNonce = el.getAttribute('nonce') ?? undefined\n return (\n el.textContent === children &&\n sType === typeAttr &&\n sNonce === nonceAttr\n )\n })\n\n if (existingScript) {\n return\n }\n\n script = document.createElement('script')\n script.textContent = children\n\n if (attrs) {\n for (const [key, value] of Object.entries(attrs)) {\n if (value !== undefined && value !== false) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n }\n\n document.head.appendChild(script)\n }\n\n onCleanup(() => {\n if (script?.parentNode) {\n script.parentNode.removeChild(script)\n }\n })\n },\n )\n\n return null\n}\n"],"
|
|
1
|
+
{"version":3,"file":"Asset.js","names":["isServer","createEffect","onCleanup","useRouter","RouterManagedTag","JSX","Asset","tag","attrs","children","Element","_$createComponent","Title","_el$","_tmpl$","_$spread","_el$2","_tmpl$2","_el$3","_tmpl$3","_$mergeProps","_el$4","Script","props","Record","router","_el$5","_tmpl$4","_$insert","titleText","document","title","_el$6","dataScript","type","src","_el$7","_tmpl$5","_el$8","_el$9","const","script","HTMLScriptElement","normSrc","base","baseURI","window","location","href","URL","existingScript","Array","from","querySelectorAll","find","el","createElement","key","value","Object","entries","undefined","setAttribute","String","head","appendChild","typeAttr","nonceAttr","nonce","sType","getAttribute","sNonce","textContent","parentNode","removeChild"],"sources":["../../src/Asset.tsx"],"sourcesContent":["import { isServer } from '@tanstack/router-core/isServer'\nimport { createEffect, onCleanup } from 'solid-js'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\nimport type { JSX } from 'solid-js'\n\nexport function Asset({\n tag,\n attrs,\n children,\n}: RouterManagedTag): JSX.Element | null {\n switch (tag) {\n case 'title':\n return <Title attrs={attrs} children={children} />\n case 'meta':\n return <meta {...attrs} />\n case 'link':\n return <link {...attrs} />\n case 'style':\n if (typeof children === 'string') {\n return <style {...attrs} innerHTML={children} />\n }\n return <style {...attrs} />\n case 'script':\n return <Script attrs={attrs} children={children} />\n default:\n return null\n }\n}\n\nfunction Title(props: {\n attrs?: Record<string, any>\n children?: unknown\n}): JSX.Element | null {\n const router = useRouter()\n const attrs = props.attrs\n const children = props.children\n\n // Server: render <title> normally\n if (isServer ?? router.isServer) {\n return <title {...attrs}>{children as string}</title>\n }\n\n // Client: imperatively set document.title so it updates during\n // client-side navigation (JSX <title> in <head> doesn't reliably\n // update the browser's document.title).\n createEffect(\n () => children,\n (titleText) => {\n document.title = typeof titleText === 'string' ? titleText : ''\n },\n )\n\n // Still render the <title> element in the DOM for consistency,\n // but the imperative assignment above is what actually drives the update.\n return <title {...attrs}>{children as string}</title>\n}\n\nfunction Script(props: {\n attrs?: Record<string, any>\n children?: unknown\n}): JSX.Element | null {\n const router = useRouter()\n const attrs = props.attrs\n const children = props.children\n\n const dataScript =\n typeof attrs?.type === 'string' &&\n attrs.type !== '' &&\n attrs.type !== 'text/javascript' &&\n attrs.type !== 'module'\n\n // --- Server rendering ---\n if (isServer ?? router.isServer) {\n if (attrs?.src) {\n return <script {...attrs} />\n }\n\n if (typeof children === 'string') {\n return <script {...attrs} innerHTML={children} />\n }\n\n return null\n }\n\n // --- Client rendering ---\n\n // Data scripts (e.g. application/ld+json) are rendered in the tree;\n // they don't need to execute.\n if (dataScript && typeof children === 'string') {\n return <script {...attrs} innerHTML={children} />\n }\n\n // For executable scripts, use imperative DOM injection so the browser\n // actually executes them during client-side navigation.\n createEffect(\n () => ({ attrs, children, dataScript }) as const,\n ({ attrs, children, dataScript }) => {\n if (dataScript) return\n\n let script: HTMLScriptElement | undefined\n\n if (attrs?.src) {\n const normSrc = (() => {\n try {\n const base = document.baseURI || window.location.href\n return new URL(attrs.src, base).href\n } catch {\n return attrs.src\n }\n })()\n const existingScript = Array.from(\n document.querySelectorAll('script[src]'),\n ).find((el) => (el as HTMLScriptElement).src === normSrc)\n\n if (existingScript) {\n return\n }\n\n script = document.createElement('script')\n\n for (const [key, value] of Object.entries(attrs)) {\n if (value !== undefined && value !== false) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n\n document.head.appendChild(script)\n } else if (typeof children === 'string') {\n const typeAttr =\n typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'\n const nonceAttr =\n typeof attrs?.nonce === 'string' ? attrs.nonce : undefined\n const existingScript = Array.from(\n document.querySelectorAll('script:not([src])'),\n ).find((el) => {\n if (!(el instanceof HTMLScriptElement)) return false\n const sType = el.getAttribute('type') ?? 'text/javascript'\n const sNonce = el.getAttribute('nonce') ?? undefined\n return (\n el.textContent === children &&\n sType === typeAttr &&\n sNonce === nonceAttr\n )\n })\n\n if (existingScript) {\n return\n }\n\n script = document.createElement('script')\n script.textContent = children\n\n if (attrs) {\n for (const [key, value] of Object.entries(attrs)) {\n if (value !== undefined && value !== false) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n }\n\n document.head.appendChild(script)\n }\n\n onCleanup(() => {\n if (script?.parentNode) {\n script.parentNode.removeChild(script)\n }\n })\n },\n )\n\n return null\n}\n"],"mappings":"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"}
|
|
@@ -1,56 +1,54 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Dynamic, createComponent, delegateEvents, insert, memo, template } from "@solidjs/web";
|
|
2
2
|
import * as Solid from "solid-js";
|
|
3
|
+
//#region src/CatchBoundary.tsx
|
|
3
4
|
var _tmpl$ = /* @__PURE__ */ template(`<div style=padding:.5rem;max-width:100%><div style=display:flex;align-items:center;gap:.5rem>∂<strong style=font-size:1rem>Something went wrong!</strong><button style="appearance:none;font-size:.6em;border:1px solid currentColor;padding:.1rem .2rem;font-weight:bold;border-radius:.25rem"></button></div><div style=height:.25rem>`), _tmpl$2 = /* @__PURE__ */ template(`<div><pre style="font-size:.7em;border:1px solid red;border-radius:.25rem;padding:.3rem;color:red;overflow:auto">`), _tmpl$3 = /* @__PURE__ */ template(`<code>`);
|
|
4
5
|
function CatchBoundary(props) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
6
|
+
return createComponent(Solid.Errored, {
|
|
7
|
+
fallback: (error, reset) => {
|
|
8
|
+
props.onCatch?.(error);
|
|
9
|
+
Solid.createEffect(props.getResetKey, () => {
|
|
10
|
+
reset();
|
|
11
|
+
});
|
|
12
|
+
return createComponent(Dynamic, {
|
|
13
|
+
get component() {
|
|
14
|
+
return props.errorComponent ?? ErrorComponent;
|
|
15
|
+
},
|
|
16
|
+
error,
|
|
17
|
+
reset
|
|
18
|
+
});
|
|
19
|
+
},
|
|
20
|
+
get children() {
|
|
21
|
+
return props.children;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
23
24
|
}
|
|
24
|
-
function ErrorComponent({
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return _el$;
|
|
49
|
-
})();
|
|
25
|
+
function ErrorComponent({ error }) {
|
|
26
|
+
const [show, setShow] = Solid.createSignal(process.env.NODE_ENV !== "production");
|
|
27
|
+
return (() => {
|
|
28
|
+
var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$5 = _el$2.firstChild.nextSibling.nextSibling;
|
|
29
|
+
_el$2.nextSibling;
|
|
30
|
+
_el$5.$$click = () => setShow((d) => !d);
|
|
31
|
+
insert(_el$5, () => show() ? "Hide Error" : "Show Error");
|
|
32
|
+
insert(_el$, (() => {
|
|
33
|
+
var _c$ = memo(() => !!show());
|
|
34
|
+
return () => _c$() ? (() => {
|
|
35
|
+
var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild;
|
|
36
|
+
insert(_el$8, (() => {
|
|
37
|
+
var _c$2 = memo(() => !!error.message);
|
|
38
|
+
return () => _c$2() ? (() => {
|
|
39
|
+
var _el$9 = _tmpl$3();
|
|
40
|
+
insert(_el$9, () => error.message);
|
|
41
|
+
return _el$9;
|
|
42
|
+
})() : null;
|
|
43
|
+
})());
|
|
44
|
+
return _el$7;
|
|
45
|
+
})() : null;
|
|
46
|
+
})(), null);
|
|
47
|
+
return _el$;
|
|
48
|
+
})();
|
|
50
49
|
}
|
|
51
50
|
delegateEvents(["click"]);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
//# sourceMappingURL=CatchBoundary.js.map
|
|
51
|
+
//#endregion
|
|
52
|
+
export { CatchBoundary, ErrorComponent };
|
|
53
|
+
|
|
54
|
+
//# sourceMappingURL=CatchBoundary.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { Dynamic } from '@solidjs/web'\nimport type { ErrorRouteComponent } from './route'\n\nexport function CatchBoundary(\n props: {\n getResetKey: () => number | string\n children: Solid.JSX.Element\n errorComponent?: ErrorRouteComponent\n onCatch?: (error: Error) => void\n } & Solid.ParentProps,\n) {\n return (\n <Solid.Errored\n fallback={(error, reset) => {\n props.onCatch?.(error)\n\n Solid.createEffect(props.getResetKey, () => {\n // We trigger reset here. For a fully deferred effect we might need usePrevious,\n // but calling reset on key change is the main goal.\n reset()\n })\n\n return (\n <Dynamic\n component={props.errorComponent ?? ErrorComponent}\n error={error}\n reset={reset}\n />\n )\n }}\n >\n {props.children}\n </Solid.Errored>\n )\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n const [show, setShow] = Solid.createSignal(\n process.env.NODE_ENV !== 'production',\n )\n\n return (\n <div style={{ padding: '.5rem', 'max-width': '100%' }}>\n <div style={{ display: 'flex', 'align-items': 'center', gap: '.5rem' }}>\n ∂<strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>\n <button\n style={{\n appearance: 'none',\n 'font-size': '.6em',\n border: '1px solid currentColor',\n padding: '.1rem .2rem',\n 'font-weight': 'bold',\n 'border-radius': '.25rem',\n }}\n onClick={() => setShow((d) => !d)}\n >\n {show() ? 'Hide Error' : 'Show Error'}\n </button>\n </div>\n <div style={{ height: '.25rem' }} />\n {show() ? (\n <div>\n <pre\n style={{\n 'font-size': '.7em',\n border: '1px solid red',\n 'border-radius': '.25rem',\n padding: '.3rem',\n color: 'red',\n overflow: 'auto',\n }}\n >\n {error.message ? <code>{error.message}</code> : null}\n </pre>\n </div>\n ) : null}\n </div>\n )\n}\n"],"
|
|
1
|
+
{"version":3,"file":"CatchBoundary.js","names":["Solid","Dynamic","ErrorRouteComponent","CatchBoundary","props","getResetKey","children","JSX","Element","errorComponent","onCatch","error","Error","ParentProps","_$createComponent","Errored","fallback","reset","createEffect","component","ErrorComponent","show","setShow","createSignal","process","env","NODE_ENV","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","$$click","d","_$insert","_c$","_$memo","_el$7","_tmpl$2","_el$8","_c$2","message","_el$9","_tmpl$3","_$delegateEvents"],"sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { Dynamic } from '@solidjs/web'\nimport type { ErrorRouteComponent } from './route'\n\nexport function CatchBoundary(\n props: {\n getResetKey: () => number | string\n children: Solid.JSX.Element\n errorComponent?: ErrorRouteComponent\n onCatch?: (error: Error) => void\n } & Solid.ParentProps,\n) {\n return (\n <Solid.Errored\n fallback={(error, reset) => {\n props.onCatch?.(error)\n\n Solid.createEffect(props.getResetKey, () => {\n // We trigger reset here. For a fully deferred effect we might need usePrevious,\n // but calling reset on key change is the main goal.\n reset()\n })\n\n return (\n <Dynamic\n component={props.errorComponent ?? ErrorComponent}\n error={error}\n reset={reset}\n />\n )\n }}\n >\n {props.children}\n </Solid.Errored>\n )\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n const [show, setShow] = Solid.createSignal(\n process.env.NODE_ENV !== 'production',\n )\n\n return (\n <div style={{ padding: '.5rem', 'max-width': '100%' }}>\n <div style={{ display: 'flex', 'align-items': 'center', gap: '.5rem' }}>\n ∂<strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>\n <button\n style={{\n appearance: 'none',\n 'font-size': '.6em',\n border: '1px solid currentColor',\n padding: '.1rem .2rem',\n 'font-weight': 'bold',\n 'border-radius': '.25rem',\n }}\n onClick={() => setShow((d) => !d)}\n >\n {show() ? 'Hide Error' : 'Show Error'}\n </button>\n </div>\n <div style={{ height: '.25rem' }} />\n {show() ? (\n <div>\n <pre\n style={{\n 'font-size': '.7em',\n border: '1px solid red',\n 'border-radius': '.25rem',\n padding: '.3rem',\n color: 'red',\n overflow: 'auto',\n }}\n >\n {error.message ? <code>{error.message}</code> : null}\n </pre>\n </div>\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;AAIA,SAAgBG,cACdC,OAMA;AACA,QAAAU,gBACGd,MAAMe,SAAO;EACZC,WAAWL,OAAOM,UAAU;AAC1Bb,SAAMM,UAAUC,MAAM;AAEtBX,SAAMkB,aAAad,MAAMC,mBAAmB;AAG1CY,WAAO;KACP;AAEF,UAAAH,gBACGb,SAAO;IAAA,IACNkB,YAAS;AAAA,YAAEf,MAAMK,kBAAkBW;;IAC5BT;IACAM;IAAK,CAAA;;EAGjB,IAAAX,WAAA;AAAA,UAEAF,MAAME;;EAAQ,CAAA;;AAKrB,SAAgBc,eAAe,EAAET,SAAyB;CACxD,MAAM,CAACU,MAAMC,WAAWtB,MAAMuB,aAAAA,QAAAA,IAAAA,aACH,aAC1B;AAED,eAAA;EAAA,IAAAI,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAI,QAAAL,MAAAC,WAAAG,YAAAA;AAAAJ,QAAAI;AAAAC,QAAAE,gBAauBd,SAASe,MAAM,CAACA,EAAE;AAAAC,SAAAJ,aAEhCb,MAAM,GAAG,eAAe,aAAY;AAAAiB,SAAAX,aAAA;GAAA,IAAAY,MAAAC,WAAA,CAAA,CAIxCnB,MAAM,CAAA;AAAA,gBAANkB,KAAA,UAAA;IAAA,IAAAE,QAAAC,SAAA,EAAAC,QAAAF,MAAAX;AAAAQ,WAAAK,cAAA;KAAA,IAAAC,OAAAJ,WAAA,CAAA,CAYM7B,MAAMkC,QAAO;AAAA,kBAAbD,MAAA,UAAA;MAAA,IAAAE,QAAAC,SAAA;AAAAT,aAAAQ,aAAuBnC,MAAMkC,QAAO;AAAA,aAAAC;SAAA,GAAW;QAAI,CAAA;AAAA,WAAAL;OAAA,GAGtD;MAAI,EAAA,KAAA;AAAA,SAAAd;KAAA;;AAGbqB,eAAA,CAAA,QAAA,CAAA"}
|
package/dist/esm/ClientOnly.js
CHANGED
|
@@ -1,28 +1,64 @@
|
|
|
1
1
|
import { createComponent, memo } from "@solidjs/web";
|
|
2
2
|
import * as Solid from "solid-js";
|
|
3
|
+
//#region src/ClientOnly.tsx
|
|
4
|
+
/**
|
|
5
|
+
* Render the children only after the JS has loaded client-side. Use an optional
|
|
6
|
+
* fallback component if the JS is not yet loaded.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* Render a Chart component if JS loads, renders a simple FakeChart
|
|
10
|
+
* component server-side or if there is no JS. The FakeChart can have only the
|
|
11
|
+
* UI without the behavior or be a loading spinner or skeleton.
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* return (
|
|
15
|
+
* <ClientOnly fallback={<FakeChart />}>
|
|
16
|
+
* <Chart />
|
|
17
|
+
* </ClientOnly>
|
|
18
|
+
* )
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
3
21
|
function ClientOnly(props) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
22
|
+
const hydrated = useHydrated();
|
|
23
|
+
return createComponent(Solid.Show, {
|
|
24
|
+
get when() {
|
|
25
|
+
return hydrated();
|
|
26
|
+
},
|
|
27
|
+
get fallback() {
|
|
28
|
+
return props.fallback ?? null;
|
|
29
|
+
},
|
|
30
|
+
get children() {
|
|
31
|
+
return memo(() => props.children);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
16
34
|
}
|
|
35
|
+
/**
|
|
36
|
+
* Return a boolean indicating if the JS has been hydrated already.
|
|
37
|
+
* When doing Server-Side Rendering, the result will always be false.
|
|
38
|
+
* When doing Client-Side Rendering, the result will always be false on the
|
|
39
|
+
* first render and true from then on. Even if a new component renders it will
|
|
40
|
+
* always start with true.
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* // Disable a button that needs JS to work.
|
|
45
|
+
* const hydrated = useHydrated()
|
|
46
|
+
* return (
|
|
47
|
+
* <button type="button" disabled={!hydrated()} onClick={doSomethingCustom}>
|
|
48
|
+
* Click me
|
|
49
|
+
* </button>
|
|
50
|
+
* )
|
|
51
|
+
* ```
|
|
52
|
+
* @returns True if the JS has been hydrated already, false otherwise.
|
|
53
|
+
*/
|
|
17
54
|
function useHydrated() {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
55
|
+
const [hydrated, setHydrated] = Solid.createSignal(false);
|
|
56
|
+
Solid.createEffect(() => true, () => {
|
|
57
|
+
setHydrated(true);
|
|
58
|
+
});
|
|
59
|
+
return hydrated;
|
|
23
60
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
//# sourceMappingURL=ClientOnly.js.map
|
|
61
|
+
//#endregion
|
|
62
|
+
export { ClientOnly, useHydrated };
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=ClientOnly.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\n\nexport interface ClientOnlyProps {\n /**\n * The children to render when the JS is loaded.\n */\n children: Solid.JSX.Element\n /**\n * The fallback component to render if the JS is not yet loaded.\n */\n fallback?: Solid.JSX.Element\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n * <ClientOnly fallback={<FakeChart />}>\n * <Chart />\n * </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly(props: ClientOnlyProps) {\n const hydrated = useHydrated()\n return (\n <Solid.Show when={hydrated()} fallback={props.fallback ?? null}>\n <>{props.children}</>\n </Solid.Show>\n )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * const hydrated = useHydrated()\n * return (\n * <button type=\"button\" disabled={!hydrated()} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): Solid.Accessor<boolean> {\n const [hydrated, setHydrated] = Solid.createSignal(false)\n\n Solid.createEffect(\n () => true,\n () => {\n setHydrated(true)\n },\n )\n\n return hydrated\n}\n"],"
|
|
1
|
+
{"version":3,"file":"ClientOnly.js","names":["Solid","ClientOnlyProps","children","JSX","Element","fallback","ClientOnly","props","hydrated","useHydrated","_$createComponent","Show","when","_$memo","Accessor","setHydrated","createSignal","createEffect"],"sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\n\nexport interface ClientOnlyProps {\n /**\n * The children to render when the JS is loaded.\n */\n children: Solid.JSX.Element\n /**\n * The fallback component to render if the JS is not yet loaded.\n */\n fallback?: Solid.JSX.Element\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n * <ClientOnly fallback={<FakeChart />}>\n * <Chart />\n * </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly(props: ClientOnlyProps) {\n const hydrated = useHydrated()\n return (\n <Solid.Show when={hydrated()} fallback={props.fallback ?? null}>\n <>{props.children}</>\n </Solid.Show>\n )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * const hydrated = useHydrated()\n * return (\n * <button type=\"button\" disabled={!hydrated()} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): Solid.Accessor<boolean> {\n const [hydrated, setHydrated] = Solid.createSignal(false)\n\n Solid.createEffect(\n () => true,\n () => {\n setHydrated(true)\n },\n )\n\n return hydrated\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,SAAgBM,WAAWC,OAAwB;CACjD,MAAMC,WAAWC,aAAa;AAC9B,QAAAC,gBACGV,MAAMW,MAAI;EAAA,IAACC,OAAI;AAAA,UAAEJ,UAAU;;EAAA,IAAEH,WAAQ;AAAA,UAAEE,MAAMF,YAAY;;EAAI,IAAAH,WAAA;AAAA,UAAAW,WACzDN,MAAML,SAAQ;;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AAwBvB,SAAgBO,cAAuC;CACrD,MAAM,CAACD,UAAUO,eAAef,MAAMgB,aAAa,MAAM;AAEzDhB,OAAMiB,mBACE,YACA;AACJF,cAAY,KAAK;GAEpB;AAED,QAAOP"}
|