@alepha/react 0.10.5 → 0.10.7
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/index.browser.js +32 -48
- package/dist/index.browser.js.map +1 -1
- package/dist/index.d.ts +39 -39
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +40 -63
- package/dist/index.js.map +1 -1
- package/package.json +12 -12
- package/src/components/ClientOnly.tsx +12 -12
- package/src/components/ErrorBoundary.tsx +43 -43
- package/src/components/ErrorViewer.tsx +140 -140
- package/src/components/Link.tsx +7 -7
- package/src/components/NestedView.tsx +177 -177
- package/src/components/NotFound.tsx +19 -19
- package/src/contexts/RouterLayerContext.ts +3 -3
- package/src/descriptors/$page.ts +292 -290
- package/src/errors/Redirection.ts +5 -5
- package/src/hooks/useActive.ts +41 -41
- package/src/hooks/useAlepha.ts +7 -7
- package/src/hooks/useClient.ts +5 -5
- package/src/hooks/useInject.ts +2 -2
- package/src/hooks/useQueryParams.ts +37 -37
- package/src/hooks/useRouter.ts +1 -1
- package/src/hooks/useRouterEvents.ts +46 -46
- package/src/hooks/useRouterState.ts +5 -5
- package/src/hooks/useSchema.ts +55 -55
- package/src/hooks/useStore.ts +25 -25
- package/src/index.browser.ts +18 -18
- package/src/index.ts +49 -49
- package/src/providers/ReactBrowserProvider.ts +268 -261
- package/src/providers/ReactBrowserRendererProvider.ts +15 -15
- package/src/providers/ReactBrowserRouterProvider.ts +124 -124
- package/src/providers/ReactPageProvider.ts +616 -618
- package/src/providers/ReactServerProvider.ts +505 -505
- package/src/services/ReactRouter.ts +191 -191
package/dist/index.browser.js
CHANGED
|
@@ -102,10 +102,10 @@ const $page = (options) => {
|
|
|
102
102
|
};
|
|
103
103
|
var PageDescriptor = class extends Descriptor {
|
|
104
104
|
onInit() {
|
|
105
|
-
if (this.options.static) this.options.cache ??= {
|
|
105
|
+
if (this.options.static) this.options.cache ??= { store: {
|
|
106
106
|
provider: "memory",
|
|
107
107
|
ttl: [1, "week"]
|
|
108
|
-
};
|
|
108
|
+
} };
|
|
109
109
|
}
|
|
110
110
|
get name() {
|
|
111
111
|
return this.options.name ?? this.config.propertyKey;
|
|
@@ -172,13 +172,13 @@ const ClientOnly = (props) => {
|
|
|
172
172
|
if (props.disabled) return props.children;
|
|
173
173
|
return mounted ? props.children : props.fallback;
|
|
174
174
|
};
|
|
175
|
+
var ClientOnly_default = ClientOnly;
|
|
175
176
|
|
|
176
177
|
//#endregion
|
|
177
178
|
//#region src/components/ErrorViewer.tsx
|
|
178
179
|
const ErrorViewer = ({ error, alepha }) => {
|
|
179
180
|
const [expanded, setExpanded] = useState(false);
|
|
180
|
-
|
|
181
|
-
if (isProduction) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
|
|
181
|
+
if (alepha.isProduction()) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
|
|
182
182
|
const stackLines = error.stack?.split("\n") ?? [];
|
|
183
183
|
const previewLines = stackLines.slice(0, 5);
|
|
184
184
|
const hiddenLineCount = stackLines.length - previewLines.length;
|
|
@@ -279,6 +279,7 @@ const ErrorViewer = ({ error, alepha }) => {
|
|
|
279
279
|
})] })]
|
|
280
280
|
});
|
|
281
281
|
};
|
|
282
|
+
var ErrorViewer_default = ErrorViewer;
|
|
282
283
|
const ErrorViewerProduction = () => {
|
|
283
284
|
const styles = {
|
|
284
285
|
container: {
|
|
@@ -450,6 +451,7 @@ var ErrorBoundary = class extends React.Component {
|
|
|
450
451
|
return this.props.children;
|
|
451
452
|
}
|
|
452
453
|
};
|
|
454
|
+
var ErrorBoundary_default = ErrorBoundary;
|
|
453
455
|
|
|
454
456
|
//#endregion
|
|
455
457
|
//#region src/components/NestedView.tsx
|
|
@@ -533,11 +535,11 @@ const NestedView = (props) => {
|
|
|
533
535
|
})
|
|
534
536
|
});
|
|
535
537
|
if (props.errorBoundary === false) return /* @__PURE__ */ jsx(Fragment, { children: element });
|
|
536
|
-
if (props.errorBoundary) return /* @__PURE__ */ jsx(
|
|
538
|
+
if (props.errorBoundary) return /* @__PURE__ */ jsx(ErrorBoundary_default, {
|
|
537
539
|
fallback: props.errorBoundary,
|
|
538
540
|
children: element
|
|
539
541
|
});
|
|
540
|
-
return /* @__PURE__ */ jsx(
|
|
542
|
+
return /* @__PURE__ */ jsx(ErrorBoundary_default, {
|
|
541
543
|
fallback: (error) => {
|
|
542
544
|
const result = state.onError(error, state);
|
|
543
545
|
if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
|
|
@@ -548,7 +550,7 @@ const NestedView = (props) => {
|
|
|
548
550
|
};
|
|
549
551
|
var NestedView_default = memo(NestedView);
|
|
550
552
|
function parseAnimation(animationLike, state, type = "enter") {
|
|
551
|
-
if (!animationLike) return
|
|
553
|
+
if (!animationLike) return;
|
|
552
554
|
const DEFAULT_DURATION = 300;
|
|
553
555
|
const animation = typeof animationLike === "function" ? animationLike(state) : animationLike;
|
|
554
556
|
if (typeof animation === "string") {
|
|
@@ -562,20 +564,15 @@ function parseAnimation(animationLike, state, type = "enter") {
|
|
|
562
564
|
const anim = animation[type];
|
|
563
565
|
const duration = typeof anim === "object" ? anim.duration ?? DEFAULT_DURATION : DEFAULT_DURATION;
|
|
564
566
|
const name = typeof anim === "object" ? anim.name : anim;
|
|
565
|
-
if (type === "exit") {
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
animation: `${duration}ms ${timing$1} ${name}`
|
|
570
|
-
};
|
|
571
|
-
}
|
|
572
|
-
const timing = typeof anim === "object" ? anim.timing ?? "" : "";
|
|
567
|
+
if (type === "exit") return {
|
|
568
|
+
duration,
|
|
569
|
+
animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
|
|
570
|
+
};
|
|
573
571
|
return {
|
|
574
572
|
duration,
|
|
575
|
-
animation: `${duration}ms ${timing} ${name}`
|
|
573
|
+
animation: `${duration}ms ${typeof anim === "object" ? anim.timing ?? "" : ""} ${name}`
|
|
576
574
|
};
|
|
577
575
|
}
|
|
578
|
-
return void 0;
|
|
579
576
|
}
|
|
580
577
|
|
|
581
578
|
//#endregion
|
|
@@ -659,15 +656,13 @@ var ReactPageProvider = class {
|
|
|
659
656
|
it.config = { ...config };
|
|
660
657
|
if (previous?.[i] && !forceRefresh && previous[i].name === route$1.name) {
|
|
661
658
|
const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
|
|
662
|
-
|
|
659
|
+
if (JSON.stringify({
|
|
663
660
|
part: url(previous[i].part),
|
|
664
661
|
params: previous[i].config?.params ?? {}
|
|
665
|
-
})
|
|
666
|
-
const curr = JSON.stringify({
|
|
662
|
+
}) === JSON.stringify({
|
|
667
663
|
part: url(route$1.path),
|
|
668
664
|
params: config.params ?? {}
|
|
669
|
-
})
|
|
670
|
-
if (prev === curr) {
|
|
665
|
+
})) {
|
|
671
666
|
it.props = previous[i].props;
|
|
672
667
|
it.error = previous[i].error;
|
|
673
668
|
it.cache = true;
|
|
@@ -681,11 +676,9 @@ var ReactPageProvider = class {
|
|
|
681
676
|
}
|
|
682
677
|
if (!route$1.resolve) continue;
|
|
683
678
|
try {
|
|
684
|
-
const
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
...context
|
|
688
|
-
}) ?? {};
|
|
679
|
+
const args = Object.create(state);
|
|
680
|
+
Object.assign(args, config, context);
|
|
681
|
+
const props = await route$1.resolve?.(args) ?? {};
|
|
689
682
|
it.props = { ...props };
|
|
690
683
|
context = {
|
|
691
684
|
...context,
|
|
@@ -772,15 +765,11 @@ var ReactPageProvider = class {
|
|
|
772
765
|
}
|
|
773
766
|
async createElement(page, props) {
|
|
774
767
|
if (page.lazy && page.component) this.log.warn(`Page ${page.name} has both lazy and component options, lazy will be used`);
|
|
775
|
-
if (page.lazy)
|
|
776
|
-
const component = await page.lazy();
|
|
777
|
-
return createElement(component.default, props);
|
|
778
|
-
}
|
|
768
|
+
if (page.lazy) return createElement((await page.lazy()).default, props);
|
|
779
769
|
if (page.component) return createElement(page.component, props);
|
|
780
|
-
return void 0;
|
|
781
770
|
}
|
|
782
771
|
renderError(error) {
|
|
783
|
-
return createElement(
|
|
772
|
+
return createElement(ErrorViewer_default, {
|
|
784
773
|
error,
|
|
785
774
|
alepha: this.alepha
|
|
786
775
|
});
|
|
@@ -806,7 +795,7 @@ var ReactPageProvider = class {
|
|
|
806
795
|
}
|
|
807
796
|
renderView(index, path, view, page) {
|
|
808
797
|
view ??= this.renderEmptyView();
|
|
809
|
-
const element = page.client ? createElement(
|
|
798
|
+
const element = page.client ? createElement(ClientOnly_default, typeof page.client === "object" ? page.client : {}, view) : view;
|
|
810
799
|
return createElement(RouterLayerContext.Provider, { value: {
|
|
811
800
|
index,
|
|
812
801
|
path
|
|
@@ -819,10 +808,7 @@ var ReactPageProvider = class {
|
|
|
819
808
|
const pages = this.alepha.descriptors($page);
|
|
820
809
|
const hasParent = (it) => {
|
|
821
810
|
if (it.options.parent) return true;
|
|
822
|
-
for (const page of pages)
|
|
823
|
-
const children = page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : [];
|
|
824
|
-
if (children.includes(it)) return true;
|
|
825
|
-
}
|
|
811
|
+
for (const page of pages) if ((page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : []).includes(it)) return true;
|
|
826
812
|
};
|
|
827
813
|
for (const page of pages) {
|
|
828
814
|
if (page.options.path === "/*") hasNotFoundHandler = true;
|
|
@@ -856,7 +842,7 @@ var ReactPageProvider = class {
|
|
|
856
842
|
};
|
|
857
843
|
}
|
|
858
844
|
add(entry) {
|
|
859
|
-
if (this.alepha.isReady()) throw new
|
|
845
|
+
if (this.alepha.isReady()) throw new AlephaError("Router is already initialized");
|
|
860
846
|
entry.name ??= this.nextId();
|
|
861
847
|
const page = entry;
|
|
862
848
|
page.match = this.createMatch(page);
|
|
@@ -907,7 +893,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
|
|
|
907
893
|
});
|
|
908
894
|
async transition(url, previous = [], meta = {}) {
|
|
909
895
|
const { pathname, search } = url;
|
|
910
|
-
const
|
|
896
|
+
const state = {
|
|
911
897
|
url,
|
|
912
898
|
query: {},
|
|
913
899
|
params: {},
|
|
@@ -915,7 +901,6 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
|
|
|
915
901
|
onError: () => null,
|
|
916
902
|
meta
|
|
917
903
|
};
|
|
918
|
-
const state = entry;
|
|
919
904
|
await this.alepha.events.emit("react:transition:begin", {
|
|
920
905
|
previous: this.alepha.state.get("react.router.state"),
|
|
921
906
|
state
|
|
@@ -1068,7 +1053,8 @@ var ReactBrowserProvider = class {
|
|
|
1068
1053
|
const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous, options.meta);
|
|
1069
1054
|
if (redirect) {
|
|
1070
1055
|
this.log.info("Redirecting to", { redirect });
|
|
1071
|
-
|
|
1056
|
+
if (redirect.startsWith("http")) window.location.href = redirect;
|
|
1057
|
+
else return await this.render({ url: redirect });
|
|
1072
1058
|
}
|
|
1073
1059
|
const ms = this.dateTimeProvider.now().diff(start);
|
|
1074
1060
|
this.log.info(`Transition OK [${ms}ms]`, this.transitioning);
|
|
@@ -1151,7 +1137,6 @@ var ReactRouter = class {
|
|
|
1151
1137
|
}
|
|
1152
1138
|
get browser() {
|
|
1153
1139
|
if (this.alepha.isBrowser()) return this.alepha.inject(ReactBrowserProvider);
|
|
1154
|
-
return void 0;
|
|
1155
1140
|
}
|
|
1156
1141
|
path(name, config = {}) {
|
|
1157
1142
|
return this.pageApi.pathname(name, {
|
|
@@ -1284,14 +1269,14 @@ const Link = (props) => {
|
|
|
1284
1269
|
children: props.children
|
|
1285
1270
|
});
|
|
1286
1271
|
};
|
|
1272
|
+
var Link_default = Link;
|
|
1287
1273
|
|
|
1288
1274
|
//#endregion
|
|
1289
1275
|
//#region src/hooks/useActive.ts
|
|
1290
1276
|
const useActive = (args) => {
|
|
1291
1277
|
const router = useRouter();
|
|
1292
1278
|
const [isPending, setPending] = useState(false);
|
|
1293
|
-
const
|
|
1294
|
-
const current = state.url.pathname;
|
|
1279
|
+
const current = useRouterState().url.pathname;
|
|
1295
1280
|
const options = typeof args === "string" ? { href: args } : {
|
|
1296
1281
|
...args,
|
|
1297
1282
|
href: args.href
|
|
@@ -1375,8 +1360,7 @@ const useSchema = (action) => {
|
|
|
1375
1360
|
const [schema, setSchema] = useState(ssrSchemaLoading(alepha, name));
|
|
1376
1361
|
useEffect(() => {
|
|
1377
1362
|
if (!schema.loading) return;
|
|
1378
|
-
|
|
1379
|
-
httpClient.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, {}, opts).then((it) => setSchema(it.data));
|
|
1363
|
+
httpClient.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, {}, { cache: true }).then((it) => setSchema(it.data));
|
|
1380
1364
|
}, [name]);
|
|
1381
1365
|
return schema;
|
|
1382
1366
|
};
|
|
@@ -1417,5 +1401,5 @@ const AlephaReact = $module({
|
|
|
1417
1401
|
});
|
|
1418
1402
|
|
|
1419
1403
|
//#endregion
|
|
1420
|
-
export { $page, AlephaContext, AlephaReact, ClientOnly, ErrorBoundary, ErrorViewer, Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, ReactBrowserProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactRouter, Redirection, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
|
|
1404
|
+
export { $page, AlephaContext, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, ReactBrowserProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactRouter, Redirection, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
|
|
1421
1405
|
//# sourceMappingURL=index.browser.js.map
|