@alepha/react 0.10.6 → 0.11.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/dist/index.browser.js +32 -47
- package/dist/index.browser.js.map +1 -1
- package/dist/index.d.ts +30 -10
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +61 -65
- package/dist/index.js.map +1 -1
- package/package.json +11 -11
- 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 +40 -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 -268
- package/src/providers/ReactBrowserRendererProvider.ts +15 -15
- package/src/providers/ReactBrowserRouterProvider.ts +124 -124
- package/src/providers/ReactPageProvider.ts +616 -615
- package/src/providers/ReactServerProvider.ts +539 -507
- 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
|
|
@@ -620,7 +617,7 @@ var ReactPageProvider = class {
|
|
|
620
617
|
convertStringObjectToObject = (schema, value) => {
|
|
621
618
|
if (t.schema.isObject(schema) && typeof value === "object") {
|
|
622
619
|
for (const key in schema.properties) if (t.schema.isObject(schema.properties[key]) && typeof value[key] === "string") try {
|
|
623
|
-
value[key] = this.alepha.
|
|
620
|
+
value[key] = this.alepha.codec.decode(schema.properties[key], decodeURIComponent(value[key]));
|
|
624
621
|
} catch (e) {}
|
|
625
622
|
}
|
|
626
623
|
return value;
|
|
@@ -645,13 +642,13 @@ var ReactPageProvider = class {
|
|
|
645
642
|
const config = {};
|
|
646
643
|
try {
|
|
647
644
|
this.convertStringObjectToObject(route$1.schema?.query, state.query);
|
|
648
|
-
config.query = route$1.schema?.query ? this.alepha.
|
|
645
|
+
config.query = route$1.schema?.query ? this.alepha.codec.decode(route$1.schema.query, state.query) : {};
|
|
649
646
|
} catch (e) {
|
|
650
647
|
it.error = e;
|
|
651
648
|
break;
|
|
652
649
|
}
|
|
653
650
|
try {
|
|
654
|
-
config.params = route$1.schema?.params ? this.alepha.
|
|
651
|
+
config.params = route$1.schema?.params ? this.alepha.codec.decode(route$1.schema.params, state.params) : {};
|
|
655
652
|
} catch (e) {
|
|
656
653
|
it.error = e;
|
|
657
654
|
break;
|
|
@@ -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;
|
|
@@ -770,15 +765,11 @@ var ReactPageProvider = class {
|
|
|
770
765
|
}
|
|
771
766
|
async createElement(page, props) {
|
|
772
767
|
if (page.lazy && page.component) this.log.warn(`Page ${page.name} has both lazy and component options, lazy will be used`);
|
|
773
|
-
if (page.lazy)
|
|
774
|
-
const component = await page.lazy();
|
|
775
|
-
return createElement(component.default, props);
|
|
776
|
-
}
|
|
768
|
+
if (page.lazy) return createElement((await page.lazy()).default, props);
|
|
777
769
|
if (page.component) return createElement(page.component, props);
|
|
778
|
-
return void 0;
|
|
779
770
|
}
|
|
780
771
|
renderError(error) {
|
|
781
|
-
return createElement(
|
|
772
|
+
return createElement(ErrorViewer_default, {
|
|
782
773
|
error,
|
|
783
774
|
alepha: this.alepha
|
|
784
775
|
});
|
|
@@ -804,7 +795,7 @@ var ReactPageProvider = class {
|
|
|
804
795
|
}
|
|
805
796
|
renderView(index, path, view, page) {
|
|
806
797
|
view ??= this.renderEmptyView();
|
|
807
|
-
const element = page.client ? createElement(
|
|
798
|
+
const element = page.client ? createElement(ClientOnly_default, typeof page.client === "object" ? page.client : {}, view) : view;
|
|
808
799
|
return createElement(RouterLayerContext.Provider, { value: {
|
|
809
800
|
index,
|
|
810
801
|
path
|
|
@@ -817,10 +808,7 @@ var ReactPageProvider = class {
|
|
|
817
808
|
const pages = this.alepha.descriptors($page);
|
|
818
809
|
const hasParent = (it) => {
|
|
819
810
|
if (it.options.parent) return true;
|
|
820
|
-
for (const page of pages)
|
|
821
|
-
const children = page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : [];
|
|
822
|
-
if (children.includes(it)) return true;
|
|
823
|
-
}
|
|
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;
|
|
824
812
|
};
|
|
825
813
|
for (const page of pages) {
|
|
826
814
|
if (page.options.path === "/*") hasNotFoundHandler = true;
|
|
@@ -854,7 +842,7 @@ var ReactPageProvider = class {
|
|
|
854
842
|
};
|
|
855
843
|
}
|
|
856
844
|
add(entry) {
|
|
857
|
-
if (this.alepha.isReady()) throw new
|
|
845
|
+
if (this.alepha.isReady()) throw new AlephaError("Router is already initialized");
|
|
858
846
|
entry.name ??= this.nextId();
|
|
859
847
|
const page = entry;
|
|
860
848
|
page.match = this.createMatch(page);
|
|
@@ -905,7 +893,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
|
|
|
905
893
|
});
|
|
906
894
|
async transition(url, previous = [], meta = {}) {
|
|
907
895
|
const { pathname, search } = url;
|
|
908
|
-
const
|
|
896
|
+
const state = {
|
|
909
897
|
url,
|
|
910
898
|
query: {},
|
|
911
899
|
params: {},
|
|
@@ -913,7 +901,6 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
|
|
|
913
901
|
onError: () => null,
|
|
914
902
|
meta
|
|
915
903
|
};
|
|
916
|
-
const state = entry;
|
|
917
904
|
await this.alepha.events.emit("react:transition:begin", {
|
|
918
905
|
previous: this.alepha.state.get("react.router.state"),
|
|
919
906
|
state
|
|
@@ -1150,7 +1137,6 @@ var ReactRouter = class {
|
|
|
1150
1137
|
}
|
|
1151
1138
|
get browser() {
|
|
1152
1139
|
if (this.alepha.isBrowser()) return this.alepha.inject(ReactBrowserProvider);
|
|
1153
|
-
return void 0;
|
|
1154
1140
|
}
|
|
1155
1141
|
path(name, config = {}) {
|
|
1156
1142
|
return this.pageApi.pathname(name, {
|
|
@@ -1283,14 +1269,14 @@ const Link = (props) => {
|
|
|
1283
1269
|
children: props.children
|
|
1284
1270
|
});
|
|
1285
1271
|
};
|
|
1272
|
+
var Link_default = Link;
|
|
1286
1273
|
|
|
1287
1274
|
//#endregion
|
|
1288
1275
|
//#region src/hooks/useActive.ts
|
|
1289
1276
|
const useActive = (args) => {
|
|
1290
1277
|
const router = useRouter();
|
|
1291
1278
|
const [isPending, setPending] = useState(false);
|
|
1292
|
-
const
|
|
1293
|
-
const current = state.url.pathname;
|
|
1279
|
+
const current = useRouterState().url.pathname;
|
|
1294
1280
|
const options = typeof args === "string" ? { href: args } : {
|
|
1295
1281
|
...args,
|
|
1296
1282
|
href: args.href
|
|
@@ -1355,11 +1341,11 @@ const useQueryParams = (schema, options = {}) => {
|
|
|
1355
1341
|
}];
|
|
1356
1342
|
};
|
|
1357
1343
|
const encode = (alepha, schema, data) => {
|
|
1358
|
-
return btoa(JSON.stringify(alepha.
|
|
1344
|
+
return btoa(JSON.stringify(alepha.codec.decode(schema, data)));
|
|
1359
1345
|
};
|
|
1360
1346
|
const decode = (alepha, schema, data) => {
|
|
1361
1347
|
try {
|
|
1362
|
-
return alepha.
|
|
1348
|
+
return alepha.codec.decode(schema, JSON.parse(atob(decodeURIComponent(data))));
|
|
1363
1349
|
} catch {
|
|
1364
1350
|
return;
|
|
1365
1351
|
}
|
|
@@ -1374,8 +1360,7 @@ const useSchema = (action) => {
|
|
|
1374
1360
|
const [schema, setSchema] = useState(ssrSchemaLoading(alepha, name));
|
|
1375
1361
|
useEffect(() => {
|
|
1376
1362
|
if (!schema.loading) return;
|
|
1377
|
-
|
|
1378
|
-
httpClient.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, {}, opts).then((it) => setSchema(it.data));
|
|
1363
|
+
httpClient.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, { localCache: true }).then((it) => setSchema(it.data));
|
|
1379
1364
|
}, [name]);
|
|
1380
1365
|
return schema;
|
|
1381
1366
|
};
|
|
@@ -1416,5 +1401,5 @@ const AlephaReact = $module({
|
|
|
1416
1401
|
});
|
|
1417
1402
|
|
|
1418
1403
|
//#endregion
|
|
1419
|
-
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 };
|
|
1420
1405
|
//# sourceMappingURL=index.browser.js.map
|