chayns-api 2.0.0 → 2.0.1
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/README.md
CHANGED
|
@@ -39,6 +39,19 @@ const FirstName = () => {
|
|
|
39
39
|
}
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
+
## Migrate v1 to v2
|
|
43
|
+
|
|
44
|
+
When updating to chayns-api@2 you should also update chayns-toolkit to 3.0.1 or higher (check migration guide [here](https://github.com/TobitSoftware/chayns-toolkit/tree/main?tab=readme-ov-file#-migration-v2-to-v3)).
|
|
45
|
+
|
|
46
|
+
Check urls referencing **remoteEntry.js**. The filename has been changed to **v2.remoteEntry.js**.
|
|
47
|
+
|
|
48
|
+
When your application uses ChaynsHost with module-type you might have to add a call of **initModuleFederationSharing** as early as possible in your application (e.g. index/bootstrap). Unless your application is already embedded as module somewhere else (e.g. in a dialog).
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
initModuleFederationSharing({ name: 'project_name' });
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
|
|
42
55
|
## Getting started
|
|
43
56
|
|
|
44
57
|
More information to setup chayns-api can be found in the [documentation](https://tobitsoftware.github.io/chayns-api/docs).
|
|
@@ -8,16 +8,19 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _constants = require("../constants");
|
|
9
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
10
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
-
|
|
11
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
|
+
function withHydrationBoundary(Component, initializer, useHydrationId, useProps) {
|
|
12
13
|
return ({
|
|
13
14
|
id: idProp,
|
|
14
|
-
children
|
|
15
|
+
children,
|
|
16
|
+
...rest
|
|
15
17
|
}) => {
|
|
16
18
|
let value;
|
|
17
19
|
if (!globalThis.window) {
|
|
18
20
|
value = (0, _react.useContext)(_constants.HydrationContext);
|
|
19
21
|
}
|
|
20
22
|
const id = useHydrationId ? useHydrationId() : idProp;
|
|
23
|
+
const props = useProps ? useProps(rest) : undefined;
|
|
21
24
|
if (!id) {
|
|
22
25
|
throw new Error('hydration boundary was not given a id which is required');
|
|
23
26
|
}
|
|
@@ -33,7 +36,7 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
|
|
|
33
36
|
initialValue = JSON.parse($elem.innerHTML);
|
|
34
37
|
}
|
|
35
38
|
}
|
|
36
|
-
const s = initializer(initialValue, id);
|
|
39
|
+
const s = initializer(initialValue, id, props);
|
|
37
40
|
if (!globalThis.window) {
|
|
38
41
|
value[id] = s;
|
|
39
42
|
}
|
|
@@ -46,9 +49,9 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
|
|
|
46
49
|
$elem.remove();
|
|
47
50
|
}
|
|
48
51
|
}, []);
|
|
49
|
-
return /*#__PURE__*/_react.default.createElement(Component, {
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(Component, _extends({}, rest, {
|
|
50
53
|
value: store
|
|
51
|
-
}, children);
|
|
54
|
+
}), children);
|
|
52
55
|
};
|
|
53
|
-
}
|
|
56
|
+
}
|
|
54
57
|
var _default = exports.default = withHydrationBoundary;
|
|
@@ -1,16 +1,19 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
1
2
|
import React, { useContext, useEffect, useState } from 'react';
|
|
2
3
|
import { HydrationContext } from '../constants';
|
|
3
|
-
|
|
4
|
+
function withHydrationBoundary(Component, initializer, useHydrationId, useProps) {
|
|
4
5
|
return _ref => {
|
|
5
6
|
let {
|
|
6
7
|
id: idProp,
|
|
7
|
-
children
|
|
8
|
+
children,
|
|
9
|
+
...rest
|
|
8
10
|
} = _ref;
|
|
9
11
|
let value;
|
|
10
12
|
if (!globalThis.window) {
|
|
11
13
|
value = useContext(HydrationContext);
|
|
12
14
|
}
|
|
13
15
|
const id = useHydrationId ? useHydrationId() : idProp;
|
|
16
|
+
const props = useProps ? useProps(rest) : undefined;
|
|
14
17
|
if (!id) {
|
|
15
18
|
throw new Error('hydration boundary was not given a id which is required');
|
|
16
19
|
}
|
|
@@ -26,7 +29,7 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
|
|
|
26
29
|
initialValue = JSON.parse($elem.innerHTML);
|
|
27
30
|
}
|
|
28
31
|
}
|
|
29
|
-
const s = initializer(initialValue, id);
|
|
32
|
+
const s = initializer(initialValue, id, props);
|
|
30
33
|
if (!globalThis.window) {
|
|
31
34
|
value[id] = s;
|
|
32
35
|
}
|
|
@@ -39,9 +42,9 @@ const withHydrationBoundary = (Component, initializer, useHydrationId) => {
|
|
|
39
42
|
$elem.remove();
|
|
40
43
|
}
|
|
41
44
|
}, []);
|
|
42
|
-
return /*#__PURE__*/React.createElement(Component, {
|
|
45
|
+
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
43
46
|
value: store
|
|
44
|
-
}, children);
|
|
47
|
+
}), children);
|
|
45
48
|
};
|
|
46
|
-
}
|
|
49
|
+
}
|
|
47
50
|
export default withHydrationBoundary;
|
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
getState: () =>
|
|
2
|
+
export interface StoreLikeValue<T> {
|
|
3
|
+
getState: () => T;
|
|
4
4
|
abort?: () => Promise<void>;
|
|
5
5
|
type?: 'raw' | 'json';
|
|
6
|
-
}
|
|
7
|
-
type HydrationComponent = React.FC<{
|
|
8
|
-
value: StoreLikeValue
|
|
6
|
+
}
|
|
7
|
+
type HydrationComponent<T, S, U> = React.FC<T & {
|
|
8
|
+
value: U & StoreLikeValue<S>;
|
|
9
9
|
children?: React.ReactNode;
|
|
10
10
|
}>;
|
|
11
|
-
type Initializer = (initialValue:
|
|
12
|
-
type HydrationBoundary = React.FC<{
|
|
11
|
+
type Initializer<T, S, U> = (initialValue: S | undefined, id: string, props: T) => U & StoreLikeValue<S>;
|
|
12
|
+
type HydrationBoundary<T> = React.FC<T & {
|
|
13
13
|
id?: string;
|
|
14
14
|
children?: React.ReactNode;
|
|
15
15
|
}>;
|
|
16
|
-
declare
|
|
16
|
+
declare function withHydrationBoundary<P extends object, T, S>(Component: HydrationComponent<P, T, S>, initializer: Initializer<undefined, T, S>): HydrationBoundary<P & {
|
|
17
|
+
id: string;
|
|
18
|
+
}>;
|
|
19
|
+
declare function withHydrationBoundary<P extends object, T, S>(Component: HydrationComponent<P, T, S>, initializer: Initializer<undefined, T, S>, useHydrationId: () => string): HydrationBoundary<P>;
|
|
20
|
+
declare function withHydrationBoundary<P extends object, T, S, U>(Component: HydrationComponent<P, T, S>, initializer: Initializer<U, T, S>, useHydrationId: undefined, useProps: (props: P) => U): HydrationBoundary<P & {
|
|
21
|
+
id: any;
|
|
22
|
+
}>;
|
|
23
|
+
declare function withHydrationBoundary<P extends object, T, S, U>(Component: HydrationComponent<P, T, S>, initializer: Initializer<U, T, S>, useHydrationId: (() => string), useProps: (props: P) => U): HydrationBoundary<P>;
|
|
17
24
|
export default withHydrationBoundary;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
abort?: () => Promise<void>;
|
|
6
|
-
type?: 'raw' | 'json';
|
|
7
|
-
};
|
|
2
|
+
import { type StoreLikeValue } from '../components/withHydrationBoundary';
|
|
3
|
+
export type HydrationContextValueType<T> = {
|
|
4
|
+
[key: string]: StoreLikeValue<T>;
|
|
8
5
|
};
|
|
9
|
-
export declare let HydrationContext: React.Context<HydrationContextValueType
|
|
6
|
+
export declare let HydrationContext: React.Context<HydrationContextValueType<object>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chayns-api",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "new chayns api",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@babel/preset-react": "^7.24.1",
|
|
64
64
|
"@babel/preset-typescript": "^7.24.1",
|
|
65
65
|
"@chayns-toolkit/eslint-config": "^2.0.0",
|
|
66
|
-
"@testing-library/react": "^
|
|
66
|
+
"@testing-library/react": "^16.0.1",
|
|
67
67
|
"@types/htmlescape": "^1.1.3",
|
|
68
68
|
"@types/lodash.throttle": "^4.1.9",
|
|
69
69
|
"@types/prop-types": "^15.7.12",
|