piral-containers 1.0.0-pre.2296 → 1.0.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/LICENSE +1 -1
- package/README.md +8 -2
- package/esm/actions.js +6 -7
- package/esm/actions.js.map +1 -1
- package/esm/create.js +13 -21
- package/esm/create.js.map +1 -1
- package/esm/types.d.ts +4 -4
- package/esm/withPiletState.js +4 -5
- package/esm/withPiletState.js.map +1 -1
- package/lib/actions.js +7 -8
- package/lib/actions.js.map +1 -1
- package/lib/create.js +16 -24
- package/lib/create.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/types.d.ts +4 -4
- package/lib/withPiletState.js +6 -7
- package/lib/withPiletState.js.map +1 -1
- package/package.json +29 -6
- package/piral-containers.min.js +1 -0
- package/src/actions.test.ts +8 -8
- package/src/create.test.tsx +11 -14
- package/src/types.ts +2 -2
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
[](https://piral.io)
|
|
2
2
|
|
|
3
|
-
# [Piral Containers](https://piral.io) · [](https://github.com/smapiot/piral/blob/
|
|
3
|
+
# [Piral Containers](https://piral.io) · [](https://github.com/smapiot/piral/blob/main/LICENSE) [](https://www.npmjs.com/package/piral-containers) [](https://jestjs.io) [](https://gitter.im/piral-io/community)
|
|
4
4
|
|
|
5
5
|
This is a plugin that only has a peer dependency to `piral-core`. What `piral-containers` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
|
|
6
6
|
|
|
@@ -12,6 +12,12 @@ State management is important. While plugins such as `piral-redux` bring in an a
|
|
|
12
12
|
|
|
13
13
|
Alternatives: Leave every pilet to decide and bundle their own state management. A lightweight, framework-agnostic alternative would be [unistore](https://github.com/developit/unistore).
|
|
14
14
|
|
|
15
|
+
## Video
|
|
16
|
+
|
|
17
|
+
We also have a video for this plugin:
|
|
18
|
+
|
|
19
|
+
@[youtube](https://youtu.be/SOY_8temoEE)
|
|
20
|
+
|
|
15
21
|
## Documentation
|
|
16
22
|
|
|
17
23
|
The following functions are brought to the Pilet API.
|
package/esm/actions.js
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import { withKey, withoutKey } from 'piral-core';
|
|
3
2
|
export function createState(ctx, id, data) {
|
|
4
|
-
ctx.dispatch(
|
|
3
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { containers: withKey(state.containers, id, data) })));
|
|
5
4
|
}
|
|
6
5
|
export function destroyState(ctx, id) {
|
|
7
|
-
ctx.dispatch(
|
|
6
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { containers: withoutKey(state.containers, id) })));
|
|
8
7
|
}
|
|
9
8
|
export function replaceState(ctx, id, dispatch) {
|
|
10
|
-
ctx.dispatch(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return
|
|
9
|
+
ctx.dispatch((state) => {
|
|
10
|
+
const oldState = state.containers[id];
|
|
11
|
+
const newState = dispatch(oldState);
|
|
12
|
+
return Object.assign(Object.assign({}, state), { containers: withKey(state.containers, id, Object.assign(Object.assign({}, oldState), newState)) });
|
|
14
13
|
});
|
|
15
14
|
}
|
|
16
15
|
//# sourceMappingURL=actions.js.map
|
package/esm/actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,OAAO,EAAE,UAAU,EAAsB,MAAM,YAAY,CAAC;AAEtF,MAAM,UAAU,WAAW,CAAS,GAAuB,EAAE,EAAU,EAAE,IAAY;IACnF,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,IAC/C,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,GAAuB,EAAE,EAAU;IAC9D,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC,IAC5C,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,YAAY,CAAS,GAAuB,EAAE,EAAU,EAAE,QAAiC;IACzG,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACpC,uCACK,KAAK,KACR,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,kCACnC,QAAQ,GACR,QAAQ,EACX,IACF;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}
|
package/esm/create.js
CHANGED
|
@@ -1,37 +1,29 @@
|
|
|
1
|
-
import { __assign, __spreadArrays } from "tslib";
|
|
2
1
|
import * as actions from './actions';
|
|
3
2
|
import { buildName } from 'piral-core';
|
|
4
3
|
import { withPiletState } from './withPiletState';
|
|
5
4
|
/**
|
|
6
5
|
* Creates new Pilet API extensions for supporting pilet global state containers.
|
|
7
6
|
*/
|
|
8
|
-
export function createContainersApi(config) {
|
|
9
|
-
|
|
10
|
-
return function (context) {
|
|
7
|
+
export function createContainersApi(config = {}) {
|
|
8
|
+
return (context) => {
|
|
11
9
|
context.defineActions(actions);
|
|
12
|
-
context.dispatch(
|
|
13
|
-
return
|
|
14
|
-
|
|
10
|
+
context.dispatch((state) => (Object.assign(Object.assign({}, state), { containers: {} })));
|
|
11
|
+
return (api, target) => {
|
|
12
|
+
let containers = 0;
|
|
15
13
|
return {
|
|
16
|
-
createState
|
|
14
|
+
createState(options) {
|
|
17
15
|
if (!options || typeof options.actions !== 'object' || typeof options.state !== 'object') {
|
|
18
16
|
throw new Error('Missing options. "state" and "actions" are required.');
|
|
19
17
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
const actions = {};
|
|
19
|
+
const id = buildName(target.name, containers++);
|
|
20
|
+
const cb = (dispatch) => context.replaceState(id, dispatch);
|
|
23
21
|
context.createState(id, options.state);
|
|
24
|
-
Object.keys(options.actions).forEach(
|
|
25
|
-
|
|
26
|
-
actions[key] =
|
|
27
|
-
var args = [];
|
|
28
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
29
|
-
args[_i] = arguments[_i];
|
|
30
|
-
}
|
|
31
|
-
return action.call.apply(action, __spreadArrays([api, cb], args));
|
|
32
|
-
};
|
|
22
|
+
Object.keys(options.actions).forEach((key) => {
|
|
23
|
+
const action = options.actions[key];
|
|
24
|
+
actions[key] = (...args) => action.call(api, cb, ...args);
|
|
33
25
|
});
|
|
34
|
-
return
|
|
26
|
+
return (component) => withPiletState(component, id, actions);
|
|
35
27
|
},
|
|
36
28
|
};
|
|
37
29
|
};
|
package/esm/create.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,SAAS,EAAgC,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQlD;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,SAA2B,EAAE;IAC/D,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACvB,KAAK,KACR,UAAU,EAAE,EAAE,IACd,CAAC,CAAC;QAEJ,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YACrB,IAAI,UAAU,GAAG,CAAC,CAAC;YAEnB,OAAO;gBACL,WAAW,CAAC,OAAO;oBACjB,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;wBACxF,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;qBACzE;oBAED,MAAM,OAAO,GAAG,EAAE,CAAC;oBACnB,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;oBAChD,MAAM,EAAE,GAAG,CAAC,QAA8B,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;oBAClF,OAAO,CAAC,WAAW,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;oBAEvC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;wBAC3C,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;wBACpC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;oBAC5D,CAAC,CAAC,CAAC;oBAEH,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,EAAE,OAAO,CAAQ,CAAC;gBACtE,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
|
package/esm/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComponentType, FC } from 'react';
|
|
2
|
-
import { RemainingArgs, StateDispatcher } from 'piral-core';
|
|
1
|
+
import type { ComponentType, FC } from 'react';
|
|
2
|
+
import type { RemainingArgs, StateDispatcher } from 'piral-core';
|
|
3
3
|
declare module 'piral-core/lib/types/custom' {
|
|
4
4
|
interface PiletCustomApi extends PiletContainersApi {
|
|
5
5
|
}
|
|
@@ -39,7 +39,7 @@ export interface PiletContainersApi {
|
|
|
39
39
|
export interface StateContainerReducer<TState> {
|
|
40
40
|
(dispatch: StateDispatcher<TState>): void;
|
|
41
41
|
}
|
|
42
|
-
export
|
|
42
|
+
export type StateContainerReducers<TState> = {
|
|
43
43
|
[name: string]: (dispatch: StateContainerReducer<TState>, ...args: any) => void;
|
|
44
44
|
};
|
|
45
45
|
export interface StateContainerOptions<TState, TActions extends StateContainerReducers<TState>> {
|
|
@@ -62,7 +62,7 @@ export interface StateConnectorProps<TState, TAction> {
|
|
|
62
62
|
*/
|
|
63
63
|
actions: TAction;
|
|
64
64
|
}
|
|
65
|
-
export
|
|
65
|
+
export type StateContainerActions<TActions> = {
|
|
66
66
|
[P in keyof TActions]: (...args: RemainingArgs<TActions[P]>) => void;
|
|
67
67
|
};
|
|
68
68
|
export interface StateContainer<TState, TActions> {
|
package/esm/withPiletState.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { useGlobalState } from 'piral-core';
|
|
4
3
|
export function withPiletState(Component, id, actions) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
return React.createElement(Component,
|
|
4
|
+
const StateView = (props) => {
|
|
5
|
+
const state = useGlobalState((s) => s.containers[id]);
|
|
6
|
+
return React.createElement(Component, Object.assign({ state: state, actions: actions }, props));
|
|
8
7
|
};
|
|
9
|
-
StateView.displayName =
|
|
8
|
+
StateView.displayName = `StateView_${id}`;
|
|
10
9
|
return StateView;
|
|
11
10
|
}
|
|
12
11
|
//# sourceMappingURL=withPiletState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withPiletState.js","sourceRoot":"","sources":["../src/withPiletState.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"withPiletState.js","sourceRoot":"","sources":["../src/withPiletState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG5C,MAAM,UAAU,cAAc,CAC5B,SAA6E,EAC7E,EAAU,EACV,OAAgB;IAEhB,MAAM,SAAS,GAAqB,CAAC,KAAK,EAAE,EAAE;QAC5C,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QACtD,OAAO,oBAAC,SAAS,kBAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAAC;IAClE,CAAC,CAAC;IACF,SAAS,CAAC,WAAW,GAAG,aAAa,EAAE,EAAE,CAAC;IAE1C,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
package/lib/actions.js
CHANGED
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.replaceState = exports.destroyState = exports.createState = void 0;
|
|
4
|
-
|
|
5
|
-
var piral_core_1 = require("piral-core");
|
|
4
|
+
const piral_core_1 = require("piral-core");
|
|
6
5
|
function createState(ctx, id, data) {
|
|
7
|
-
ctx.dispatch(
|
|
6
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { containers: (0, piral_core_1.withKey)(state.containers, id, data) })));
|
|
8
7
|
}
|
|
9
8
|
exports.createState = createState;
|
|
10
9
|
function destroyState(ctx, id) {
|
|
11
|
-
ctx.dispatch(
|
|
10
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { containers: (0, piral_core_1.withoutKey)(state.containers, id) })));
|
|
12
11
|
}
|
|
13
12
|
exports.destroyState = destroyState;
|
|
14
13
|
function replaceState(ctx, id, dispatch) {
|
|
15
|
-
ctx.dispatch(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
return
|
|
14
|
+
ctx.dispatch((state) => {
|
|
15
|
+
const oldState = state.containers[id];
|
|
16
|
+
const newState = dispatch(oldState);
|
|
17
|
+
return Object.assign(Object.assign({}, state), { containers: (0, piral_core_1.withKey)(state.containers, id, Object.assign(Object.assign({}, oldState), newState)) });
|
|
19
18
|
});
|
|
20
19
|
}
|
|
21
20
|
exports.replaceState = replaceState;
|
package/lib/actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":";;;AAAA,2CAAsF;AAEtF,SAAgB,WAAW,CAAS,GAAuB,EAAE,EAAU,EAAE,IAAY;IACnF,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,UAAU,EAAE,IAAA,oBAAO,EAAC,KAAK,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,IAC/C,CAAC,CAAC;AACN,CAAC;AALD,kCAKC;AAED,SAAgB,YAAY,CAAC,GAAuB,EAAE,EAAU;IAC9D,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,UAAU,EAAE,IAAA,uBAAU,EAAC,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC,IAC5C,CAAC,CAAC;AACN,CAAC;AALD,oCAKC;AAED,SAAgB,YAAY,CAAS,GAAuB,EAAE,EAAU,EAAE,QAAiC;IACzG,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACpC,uCACK,KAAK,KACR,UAAU,EAAE,IAAA,oBAAO,EAAC,KAAK,CAAC,UAAU,EAAE,EAAE,kCACnC,QAAQ,GACR,QAAQ,EACX,IACF;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAZD,oCAYC"}
|
package/lib/create.js
CHANGED
|
@@ -1,40 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.createContainersApi = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var withPiletState_1 = require("./withPiletState");
|
|
4
|
+
const actions = require("./actions");
|
|
5
|
+
const piral_core_1 = require("piral-core");
|
|
6
|
+
const withPiletState_1 = require("./withPiletState");
|
|
8
7
|
/**
|
|
9
8
|
* Creates new Pilet API extensions for supporting pilet global state containers.
|
|
10
9
|
*/
|
|
11
|
-
function createContainersApi(config) {
|
|
12
|
-
|
|
13
|
-
return function (context) {
|
|
10
|
+
function createContainersApi(config = {}) {
|
|
11
|
+
return (context) => {
|
|
14
12
|
context.defineActions(actions);
|
|
15
|
-
context.dispatch(
|
|
16
|
-
return
|
|
17
|
-
|
|
13
|
+
context.dispatch((state) => (Object.assign(Object.assign({}, state), { containers: {} })));
|
|
14
|
+
return (api, target) => {
|
|
15
|
+
let containers = 0;
|
|
18
16
|
return {
|
|
19
|
-
createState
|
|
17
|
+
createState(options) {
|
|
20
18
|
if (!options || typeof options.actions !== 'object' || typeof options.state !== 'object') {
|
|
21
19
|
throw new Error('Missing options. "state" and "actions" are required.');
|
|
22
20
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
const actions = {};
|
|
22
|
+
const id = (0, piral_core_1.buildName)(target.name, containers++);
|
|
23
|
+
const cb = (dispatch) => context.replaceState(id, dispatch);
|
|
26
24
|
context.createState(id, options.state);
|
|
27
|
-
Object.keys(options.actions).forEach(
|
|
28
|
-
|
|
29
|
-
actions[key] =
|
|
30
|
-
var args = [];
|
|
31
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
32
|
-
args[_i] = arguments[_i];
|
|
33
|
-
}
|
|
34
|
-
return action.call.apply(action, tslib_1.__spreadArrays([api, cb], args));
|
|
35
|
-
};
|
|
25
|
+
Object.keys(options.actions).forEach((key) => {
|
|
26
|
+
const action = options.actions[key];
|
|
27
|
+
actions[key] = (...args) => action.call(api, cb, ...args);
|
|
36
28
|
});
|
|
37
|
-
return
|
|
29
|
+
return (component) => (0, withPiletState_1.withPiletState)(component, id, actions);
|
|
38
30
|
},
|
|
39
31
|
};
|
|
40
32
|
};
|
package/lib/create.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AAAA,qCAAqC;AACrC,2CAAqE;AACrE,qDAAkD;AAQlD;;GAEG;AACH,SAAgB,mBAAmB,CAAC,SAA2B,EAAE;IAC/D,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACvB,KAAK,KACR,UAAU,EAAE,EAAE,IACd,CAAC,CAAC;QAEJ,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YACrB,IAAI,UAAU,GAAG,CAAC,CAAC;YAEnB,OAAO;gBACL,WAAW,CAAC,OAAO;oBACjB,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;wBACxF,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;qBACzE;oBAED,MAAM,OAAO,GAAG,EAAE,CAAC;oBACnB,MAAM,EAAE,GAAG,IAAA,sBAAS,EAAC,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;oBAChD,MAAM,EAAE,GAAG,CAAC,QAA8B,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;oBAClF,OAAO,CAAC,WAAW,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;oBAEvC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;wBAC3C,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;wBACpC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;oBAC5D,CAAC,CAAC,CAAC;oBAEH,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,IAAA,+BAAc,EAAC,SAAS,EAAE,EAAE,EAAE,OAAO,CAAQ,CAAC;gBACtE,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAjCD,kDAiCC"}
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
4
|
tslib_1.__exportStar(require("./create"), exports);
|
|
5
5
|
tslib_1.__exportStar(require("./types"), exports);
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
package/lib/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComponentType, FC } from 'react';
|
|
2
|
-
import { RemainingArgs, StateDispatcher } from 'piral-core';
|
|
1
|
+
import type { ComponentType, FC } from 'react';
|
|
2
|
+
import type { RemainingArgs, StateDispatcher } from 'piral-core';
|
|
3
3
|
declare module 'piral-core/lib/types/custom' {
|
|
4
4
|
interface PiletCustomApi extends PiletContainersApi {
|
|
5
5
|
}
|
|
@@ -39,7 +39,7 @@ export interface PiletContainersApi {
|
|
|
39
39
|
export interface StateContainerReducer<TState> {
|
|
40
40
|
(dispatch: StateDispatcher<TState>): void;
|
|
41
41
|
}
|
|
42
|
-
export
|
|
42
|
+
export type StateContainerReducers<TState> = {
|
|
43
43
|
[name: string]: (dispatch: StateContainerReducer<TState>, ...args: any) => void;
|
|
44
44
|
};
|
|
45
45
|
export interface StateContainerOptions<TState, TActions extends StateContainerReducers<TState>> {
|
|
@@ -62,7 +62,7 @@ export interface StateConnectorProps<TState, TAction> {
|
|
|
62
62
|
*/
|
|
63
63
|
actions: TAction;
|
|
64
64
|
}
|
|
65
|
-
export
|
|
65
|
+
export type StateContainerActions<TActions> = {
|
|
66
66
|
[P in keyof TActions]: (...args: RemainingArgs<TActions[P]>) => void;
|
|
67
67
|
};
|
|
68
68
|
export interface StateContainer<TState, TActions> {
|
package/lib/withPiletState.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.withPiletState = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var piral_core_1 = require("piral-core");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const piral_core_1 = require("piral-core");
|
|
7
6
|
function withPiletState(Component, id, actions) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return React.createElement(Component,
|
|
7
|
+
const StateView = (props) => {
|
|
8
|
+
const state = (0, piral_core_1.useGlobalState)((s) => s.containers[id]);
|
|
9
|
+
return React.createElement(Component, Object.assign({ state: state, actions: actions }, props));
|
|
11
10
|
};
|
|
12
|
-
StateView.displayName =
|
|
11
|
+
StateView.displayName = `StateView_${id}`;
|
|
13
12
|
return StateView;
|
|
14
13
|
}
|
|
15
14
|
exports.withPiletState = withPiletState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withPiletState.js","sourceRoot":"","sources":["../src/withPiletState.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"withPiletState.js","sourceRoot":"","sources":["../src/withPiletState.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,2CAA4C;AAG5C,SAAgB,cAAc,CAC5B,SAA6E,EAC7E,EAAU,EACV,OAAgB;IAEhB,MAAM,SAAS,GAAqB,CAAC,KAAK,EAAE,EAAE;QAC5C,MAAM,KAAK,GAAG,IAAA,2BAAc,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QACtD,OAAO,oBAAC,SAAS,kBAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAAC;IAClE,CAAC,CAAC;IACF,SAAS,CAAC,WAAW,GAAG,aAAa,EAAE,EAAE,CAAC;IAE1C,OAAO,SAAS,CAAC;AACnB,CAAC;AAZD,wCAYC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "piral-containers",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Plugin for creating a pilet state container in Piral.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"piral",
|
|
@@ -20,11 +20,29 @@
|
|
|
20
20
|
"module": "esm/index.js",
|
|
21
21
|
"main": "lib/index.js",
|
|
22
22
|
"typings": "lib/index.d.ts",
|
|
23
|
+
"exports": {
|
|
24
|
+
".": {
|
|
25
|
+
"import": "./esm/index.js",
|
|
26
|
+
"require": "./lib/index.js"
|
|
27
|
+
},
|
|
28
|
+
"./esm/*": {
|
|
29
|
+
"import": "./esm/*"
|
|
30
|
+
},
|
|
31
|
+
"./lib/*": {
|
|
32
|
+
"require": "./lib/*"
|
|
33
|
+
},
|
|
34
|
+
"./_/*": {
|
|
35
|
+
"import": "./esm/*.js",
|
|
36
|
+
"require": "./lib/*.js"
|
|
37
|
+
},
|
|
38
|
+
"./package.json": "./package.json"
|
|
39
|
+
},
|
|
23
40
|
"sideEffects": false,
|
|
24
41
|
"files": [
|
|
25
42
|
"esm",
|
|
26
43
|
"lib",
|
|
27
|
-
"src"
|
|
44
|
+
"src",
|
|
45
|
+
"piral-containers.min.js"
|
|
28
46
|
],
|
|
29
47
|
"repository": {
|
|
30
48
|
"type": "git",
|
|
@@ -34,17 +52,22 @@
|
|
|
34
52
|
"url": "https://github.com/smapiot/piral/issues"
|
|
35
53
|
},
|
|
36
54
|
"scripts": {
|
|
37
|
-
"
|
|
55
|
+
"cleanup": "rimraf esm lib piral-containers.min.js",
|
|
56
|
+
"build": "yarn build:bundle && yarn build:commonjs && yarn build:esnext",
|
|
57
|
+
"build:bundle": "esbuild src/index.ts --outfile=piral-containers.min.js --bundle --external:piral-core --external:react --minify --global-name=piralContainers",
|
|
38
58
|
"build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
|
|
39
59
|
"build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
|
|
40
60
|
"typedoc": "typedoc --json ../../../docs/types/piral-containers.json src --exclude \"src/**/*.test.*\"",
|
|
41
61
|
"test": "echo \"Error: run tests from root\" && exit 1"
|
|
42
62
|
},
|
|
43
63
|
"devDependencies": {
|
|
44
|
-
"
|
|
64
|
+
"@types/react": "^18.0.0",
|
|
65
|
+
"piral-core": "^1.0.0",
|
|
66
|
+
"react": "^18.0.0"
|
|
45
67
|
},
|
|
46
68
|
"peerDependencies": {
|
|
47
|
-
"piral-core": "0.
|
|
69
|
+
"piral-core": "0.14.x || 0.15.x",
|
|
70
|
+
"react": ">=16.8.0"
|
|
48
71
|
},
|
|
49
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
|
|
50
73
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var piralContainers=(()=>{var j=Object.create;var p=Object.defineProperty,R=Object.defineProperties,E=Object.getOwnPropertyDescriptor,K=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertyNames,C=Object.getOwnPropertySymbols,V=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var T=(t,e,a)=>e in t?p(t,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[e]=a,n=(t,e)=>{for(var a in e||(e={}))P.call(e,a)&&T(t,a,e[a]);if(C)for(var a of C(e))q.call(e,a)&&T(t,a,e[a]);return t},s=(t,e)=>R(t,K(e)),y=t=>p(t,"__esModule",{value:!0});var f=(t=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(t,{get:(e,a)=>(typeof require!="undefined"?require:e)[a]}):t)(function(t){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+t+'" is not supported')});var b=(t,e)=>{y(t);for(var a in e)p(t,a,{get:e[a],enumerable:!0})},F=(t,e,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!P.call(t,r)&&r!=="default"&&p(t,r,{get:()=>e[r],enumerable:!(a=E(e,r))||a.enumerable});return t},m=t=>F(y(p(t!=null?j(V(t)):{},"default",t&&t.__esModule&&"default"in t?{get:()=>t.default,enumerable:!0}:{value:t,enumerable:!0})),t);var k={};b(k,{createContainersApi:()=>$});var h={};b(h,{createState:()=>M,destroyState:()=>O,replaceState:()=>_});var l=m(f("piral-core"));function M(t,e,a){t.dispatch(r=>s(n({},r),{containers:(0,l.withKey)(r.containers,e,a)}))}function O(t,e){t.dispatch(a=>s(n({},a),{containers:(0,l.withoutKey)(a.containers,e)}))}function _(t,e,a){t.dispatch(r=>{let i=r.containers[e],o=a(i);return s(n({},r),{containers:(0,l.withKey)(r.containers,e,n(n({},i),o))})})}var x=m(f("piral-core"));var d=m(f("react")),g=m(f("piral-core"));function w(t,e,a){let r=i=>{let o=(0,g.useGlobalState)(S=>S.containers[e]);return d.createElement(t,n({state:o,actions:a},i))};return r.displayName=`StateView_${e}`,r}function $(t={}){return e=>(e.defineActions(h),e.dispatch(a=>s(n({},a),{containers:{}})),(a,r)=>{let i=0;return{createState(o){if(!o||typeof o.actions!="object"||typeof o.state!="object")throw new Error('Missing options. "state" and "actions" are required.');let S={},u=(0,x.buildName)(r.name,i++),A=c=>e.replaceState(u,c);return e.createState(u,o.state),Object.keys(o.actions).forEach(c=>{let G=o.actions[c];S[c]=(...D)=>G.call(a,A,...D)}),c=>w(c,u,S)}}})}return k;})();
|
package/src/actions.test.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import create from 'zustand';
|
|
2
2
|
import { createState, destroyState, replaceState } from './actions';
|
|
3
3
|
|
|
4
4
|
function createMockContainer() {
|
|
5
|
-
const state =
|
|
5
|
+
const state = create(() => ({}));
|
|
6
6
|
return {
|
|
7
7
|
context: {
|
|
8
8
|
converters: {},
|
|
@@ -15,7 +15,7 @@ function createMockContainer() {
|
|
|
15
15
|
return read(state);
|
|
16
16
|
},
|
|
17
17
|
dispatch(update) {
|
|
18
|
-
|
|
18
|
+
state.setState(update(state.getState()));
|
|
19
19
|
},
|
|
20
20
|
} as any,
|
|
21
21
|
api: {} as any,
|
|
@@ -29,7 +29,7 @@ describe('Piral-Containers actions module', () => {
|
|
|
29
29
|
bar: 'qxz',
|
|
30
30
|
};
|
|
31
31
|
createState(context, 'foo', initialData);
|
|
32
|
-
const state: any =
|
|
32
|
+
const state: any = (context.state.getState());
|
|
33
33
|
expect(state.containers.foo).toBe(initialData);
|
|
34
34
|
});
|
|
35
35
|
|
|
@@ -40,7 +40,7 @@ describe('Piral-Containers actions module', () => {
|
|
|
40
40
|
};
|
|
41
41
|
createState(context, 'foo', initialData);
|
|
42
42
|
destroyState(context, 'foo');
|
|
43
|
-
const state: any =
|
|
43
|
+
const state: any = (context.state.getState());
|
|
44
44
|
expect(state.containers.foo).toBeUndefined();
|
|
45
45
|
});
|
|
46
46
|
|
|
@@ -54,7 +54,7 @@ describe('Piral-Containers actions module', () => {
|
|
|
54
54
|
};
|
|
55
55
|
createState(context, 'foo', initialData);
|
|
56
56
|
replaceState(context, 'foo', (state) => updatedData);
|
|
57
|
-
const state: any =
|
|
57
|
+
const state: any = (context.state.getState());
|
|
58
58
|
expect(state.containers.foo).toEqual({
|
|
59
59
|
...initialData,
|
|
60
60
|
...updatedData,
|
|
@@ -71,7 +71,7 @@ describe('Piral-Containers actions module', () => {
|
|
|
71
71
|
};
|
|
72
72
|
createState(context, 'foo', initialData);
|
|
73
73
|
replaceState(context, 'foo', (state) => updatedData);
|
|
74
|
-
const state: any =
|
|
74
|
+
const state: any = (context.state.getState());
|
|
75
75
|
expect(state.containers.foo).toEqual({
|
|
76
76
|
...initialData,
|
|
77
77
|
...updatedData,
|
|
@@ -85,7 +85,7 @@ describe('Piral-Containers actions module', () => {
|
|
|
85
85
|
};
|
|
86
86
|
createState(context, 'foo', initialData);
|
|
87
87
|
replaceState(context, 'foo', (state) => state);
|
|
88
|
-
const state: any =
|
|
88
|
+
const state: any = (context.state.getState());
|
|
89
89
|
expect(state.containers.foo).toEqual(initialData);
|
|
90
90
|
});
|
|
91
91
|
});
|
package/src/create.test.tsx
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import
|
|
2
|
+
import create from 'zustand';
|
|
3
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
3
4
|
import { StateContext } from 'piral-core';
|
|
4
|
-
import { Atom, swap, deref } from '@dbeining/react-atom';
|
|
5
5
|
import { createContainersApi } from './create';
|
|
6
6
|
|
|
7
7
|
function createMockContainer() {
|
|
8
|
-
const state =
|
|
8
|
+
const state = create(() => ({}));
|
|
9
9
|
return {
|
|
10
10
|
context: {
|
|
11
11
|
on: jest.fn(),
|
|
@@ -18,10 +18,10 @@ function createMockContainer() {
|
|
|
18
18
|
},
|
|
19
19
|
state,
|
|
20
20
|
readState(read) {
|
|
21
|
-
return read(
|
|
21
|
+
return read(state.getState());
|
|
22
22
|
},
|
|
23
23
|
dispatch(update) {
|
|
24
|
-
|
|
24
|
+
state.setState(update(state.getState()));
|
|
25
25
|
},
|
|
26
26
|
} as any,
|
|
27
27
|
api: {} as any,
|
|
@@ -48,20 +48,17 @@ describe('Piral-Containers create module', () => {
|
|
|
48
48
|
},
|
|
49
49
|
});
|
|
50
50
|
|
|
51
|
-
const MyComponent = () =>
|
|
51
|
+
const MyComponent = ({ state, actions }) => <button role="button" onClick={actions.increment}>{state.count}</button>;
|
|
52
52
|
MyComponent.displayName = 'MyComponent';
|
|
53
53
|
const ConnectedComponent = connect(MyComponent);
|
|
54
|
-
const node =
|
|
54
|
+
const node = render(
|
|
55
55
|
<StateContext.Provider value={context}>
|
|
56
56
|
<ConnectedComponent />
|
|
57
57
|
</StateContext.Provider>,
|
|
58
58
|
);
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
expect(
|
|
63
|
-
count: 0,
|
|
64
|
-
});
|
|
65
|
-
expect(Object.keys(instance.prop('actions'))).toEqual(['increment']);
|
|
59
|
+
const button = node.getByRole("button");
|
|
60
|
+
expect(button.textContent).toEqual('0');
|
|
61
|
+
fireEvent.click(button);
|
|
62
|
+
expect(button.textContent).toEqual('1');
|
|
66
63
|
});
|
|
67
64
|
});
|
package/src/types.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComponentType, FC } from 'react';
|
|
2
|
-
import { RemainingArgs, StateDispatcher } from 'piral-core';
|
|
1
|
+
import type { ComponentType, FC } from 'react';
|
|
2
|
+
import type { RemainingArgs, StateDispatcher } from 'piral-core';
|
|
3
3
|
|
|
4
4
|
declare module 'piral-core/lib/types/custom' {
|
|
5
5
|
interface PiletCustomApi extends PiletContainersApi {}
|