@fluid-topics/ft-wc-utils 1.3.7 → 1.3.9
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/build/globals.min.js +15 -15
- package/build/redux/FtLitElementRedux.d.ts +14 -29
- package/build/redux/FtLitElementRedux.js +98 -94
- package/package.json +2 -2
|
@@ -1,36 +1,21 @@
|
|
|
1
1
|
import { FtLitElement } from "../FtLitElement";
|
|
2
2
|
import { Store } from "@reduxjs/toolkit";
|
|
3
|
-
import {
|
|
4
|
-
import { Optional } from "../generic-types";
|
|
3
|
+
import { Constructor, Optional } from "../generic-types";
|
|
5
4
|
import { ReduxEventListenerInit, ReduxProperty } from "./models";
|
|
6
5
|
import { FtReduxStore } from "./FtReduxStore";
|
|
7
|
-
|
|
8
|
-
declare const internalStoresUnsubscribers: unique symbol;
|
|
9
|
-
declare const internalStores: unique symbol;
|
|
10
|
-
export declare class FtLitElementRedux extends FtLitElement {
|
|
11
|
-
static reduxProperties: Map<string, ReduxProperty<any, any>>;
|
|
12
|
-
static reduxReactiveProperties: Set<string>;
|
|
13
|
-
static reduxEventListeners: Map<string, ReduxEventListenerInit>;
|
|
14
|
-
private readonly [internalStoresUnsubscribers];
|
|
15
|
-
private readonly [internalStores];
|
|
16
|
-
private readonly [internalReduxEventsUnsubscribers];
|
|
17
|
-
private get reduxConstructor();
|
|
18
|
-
protected willUpdate(props: PropertyValues): void;
|
|
19
|
-
private getUnnamedStore;
|
|
6
|
+
export type FtLitElementWithReduxInterface = {
|
|
20
7
|
getStore<ReturnType = Optional<Store>>(name?: string): ReturnType;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
connectedCallback(): void;
|
|
34
|
-
disconnectedCallback(): void;
|
|
8
|
+
addStore(store: FtReduxStore, name?: string): void;
|
|
9
|
+
removeStore(storeOrName: FtReduxStore | string): void;
|
|
10
|
+
onStoreAvailable(name?: string): void;
|
|
11
|
+
};
|
|
12
|
+
type FtLitElementWithReduxType<T extends Constructor<FtLitElement>> = T & Constructor<FtLitElementWithReduxInterface> & {
|
|
13
|
+
reduxProperties: Map<string, ReduxProperty<any, any>>;
|
|
14
|
+
reduxReactiveProperties: Set<string>;
|
|
15
|
+
reduxEventListeners: Map<string, ReduxEventListenerInit>;
|
|
16
|
+
};
|
|
17
|
+
export declare function withRedux<T extends Constructor<FtLitElement>>(Class: T): FtLitElementWithReduxType<T>;
|
|
18
|
+
declare const FtLitElementRedux_base: FtLitElementWithReduxType<typeof FtLitElement>;
|
|
19
|
+
export declare class FtLitElementRedux extends FtLitElementRedux_base {
|
|
35
20
|
}
|
|
36
21
|
export {};
|
|
@@ -1,108 +1,112 @@
|
|
|
1
|
-
var _a, _b, _c;
|
|
2
1
|
import { FtLitElement } from "../FtLitElement";
|
|
3
2
|
import { isFtReduxStore } from "./models";
|
|
4
3
|
const internalReduxEventsUnsubscribers = Symbol("internalReduxEventsUnsubscribers");
|
|
5
4
|
const internalStoresUnsubscribers = Symbol("internalStoresUnsubscribers");
|
|
6
5
|
const internalStores = Symbol("internalStores");
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return this.constructor;
|
|
16
|
-
}
|
|
17
|
-
willUpdate(props) {
|
|
18
|
-
super.willUpdate(props);
|
|
19
|
-
if ([...this.reduxConstructor.reduxReactiveProperties].some(prop => props.has(prop))) {
|
|
20
|
-
this.updateFromStores();
|
|
6
|
+
export function withRedux(Class) {
|
|
7
|
+
var _a, _b, _c;
|
|
8
|
+
class FtLitElementWithReduxClass extends Class {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
this[_a] = new Map();
|
|
12
|
+
this[_b] = new Map();
|
|
13
|
+
this[_c] = new Map();
|
|
21
14
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (this[internalStores].size > 1) {
|
|
25
|
-
throw new Error("Cannot resolve unnamed store when multiple stores are configured.");
|
|
15
|
+
get reduxConstructor() {
|
|
16
|
+
return this.constructor;
|
|
26
17
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
? this.getUnnamedStore()
|
|
32
|
-
: this[internalStores].get(name));
|
|
33
|
-
}
|
|
34
|
-
addStore(store, name) {
|
|
35
|
-
var _d;
|
|
36
|
-
name = (_d = name !== null && name !== void 0 ? name : (isFtReduxStore(store) ? store.name : undefined)) !== null && _d !== void 0 ? _d : "default-store";
|
|
37
|
-
this.unsubscribeFromStore(name);
|
|
38
|
-
this[internalStores].set(name, store);
|
|
39
|
-
this.subscribeToStore(name, store);
|
|
40
|
-
this.updateFromStores();
|
|
41
|
-
}
|
|
42
|
-
removeStore(storeOrName) {
|
|
43
|
-
const name = typeof storeOrName === "string" ? storeOrName : storeOrName.name;
|
|
44
|
-
this.unsubscribeFromStore(name);
|
|
45
|
-
this[internalStores].delete(name);
|
|
46
|
-
}
|
|
47
|
-
setupStores() {
|
|
48
|
-
this.unsubscribeFromStores();
|
|
49
|
-
this[internalStores].forEach((store, name) => this.subscribeToStore(name, store));
|
|
50
|
-
this.updateFromStores();
|
|
51
|
-
}
|
|
52
|
-
updateFromStores() {
|
|
53
|
-
this.reduxConstructor.reduxProperties.forEach((prop, attributeName) => {
|
|
54
|
-
const options = this.constructor.getPropertyOptions(attributeName);
|
|
55
|
-
if (!(options === null || options === void 0 ? void 0 : options.attribute) || !this.hasAttribute(typeof (options === null || options === void 0 ? void 0 : options.attribute) === "string" ? options.attribute : attributeName)) {
|
|
56
|
-
const store = this.getStore(prop.store);
|
|
57
|
-
if (store && (prop.store ? this[internalStoresUnsubscribers].has(prop.store) : this[internalStoresUnsubscribers].size > 0)) {
|
|
58
|
-
this[attributeName] = prop.selector(store.getState(), this);
|
|
59
|
-
}
|
|
18
|
+
willUpdate(props) {
|
|
19
|
+
super.willUpdate(props);
|
|
20
|
+
if ([...this.reduxConstructor.reduxReactiveProperties].some(prop => props.has(prop))) {
|
|
21
|
+
this.updateFromStores();
|
|
60
22
|
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
23
|
+
}
|
|
24
|
+
getUnnamedStore() {
|
|
25
|
+
if (this[internalStores].size > 1) {
|
|
26
|
+
throw new Error("Cannot resolve unnamed store when multiple stores are configured.");
|
|
27
|
+
}
|
|
28
|
+
return [...this[internalStores].values()][0];
|
|
29
|
+
}
|
|
30
|
+
getStore(name) {
|
|
31
|
+
return (name == null
|
|
32
|
+
? this.getUnnamedStore()
|
|
33
|
+
: this[internalStores].get(name));
|
|
34
|
+
}
|
|
35
|
+
addStore(store, name) {
|
|
36
|
+
var _d;
|
|
37
|
+
name = (_d = name !== null && name !== void 0 ? name : store.name) !== null && _d !== void 0 ? _d : "default-store";
|
|
38
|
+
this.unsubscribeFromStore(name);
|
|
39
|
+
this[internalStores].set(name, store);
|
|
40
|
+
this.subscribeToStore(name, store);
|
|
41
|
+
this.updateFromStores();
|
|
42
|
+
}
|
|
43
|
+
removeStore(storeOrName) {
|
|
44
|
+
const name = typeof storeOrName === "string" ? storeOrName : storeOrName.name;
|
|
45
|
+
this.unsubscribeFromStore(name);
|
|
46
|
+
this[internalStores].delete(name);
|
|
47
|
+
}
|
|
48
|
+
setupStores() {
|
|
49
|
+
this.unsubscribeFromStores();
|
|
50
|
+
this[internalStores].forEach((store, name) => this.subscribeToStore(name, store));
|
|
51
|
+
this.updateFromStores();
|
|
52
|
+
}
|
|
53
|
+
updateFromStores() {
|
|
54
|
+
this.reduxConstructor.reduxProperties.forEach((prop, attributeName) => {
|
|
55
|
+
const options = this.constructor.getPropertyOptions(attributeName);
|
|
56
|
+
if (!(options === null || options === void 0 ? void 0 : options.attribute) || !this.hasAttribute(typeof (options === null || options === void 0 ? void 0 : options.attribute) === "string" ? options.attribute : attributeName)) {
|
|
57
|
+
const store = this.getStore(prop.store);
|
|
58
|
+
if (store && (prop.store ? this[internalStoresUnsubscribers].has(prop.store) : this[internalStoresUnsubscribers].size > 0)) {
|
|
59
|
+
this[attributeName] = prop.selector(store.getState(), this);
|
|
60
|
+
}
|
|
76
61
|
}
|
|
77
62
|
});
|
|
78
63
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Only call after unsubscribeFromStores or unsubscribeFromStore with same name
|
|
66
|
+
*/
|
|
67
|
+
subscribeToStore(name, store) {
|
|
68
|
+
var _d;
|
|
69
|
+
this[internalStoresUnsubscribers].set(name, store.subscribe(() => this.updateFromStores()));
|
|
70
|
+
this[internalReduxEventsUnsubscribers].set(name, []);
|
|
71
|
+
if (isFtReduxStore(store) && store.eventBus) {
|
|
72
|
+
(_d = this.reduxConstructor.reduxEventListeners) === null || _d === void 0 ? void 0 : _d.forEach((init, methodName) => {
|
|
73
|
+
if (typeof this[methodName] === "function" && (!init.store || store.name === init.store)) {
|
|
74
|
+
const callback = (e) => this[methodName](e);
|
|
75
|
+
store.addEventListener(init.eventName, callback);
|
|
76
|
+
this[internalReduxEventsUnsubscribers].get(name).push(() => store.removeEventListener(init.eventName, callback));
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
this.onStoreAvailable(name);
|
|
81
|
+
}
|
|
82
|
+
unsubscribeFromStores() {
|
|
83
|
+
this[internalStoresUnsubscribers].forEach((_, key) => this.unsubscribeFromStore(key));
|
|
84
|
+
}
|
|
85
|
+
unsubscribeFromStore(name) {
|
|
86
|
+
var _d;
|
|
87
|
+
if (this[internalStoresUnsubscribers].has(name)) {
|
|
88
|
+
this[internalStoresUnsubscribers].get(name)();
|
|
89
|
+
}
|
|
90
|
+
this[internalStoresUnsubscribers].delete(name);
|
|
91
|
+
(_d = this[internalReduxEventsUnsubscribers].get(name)) === null || _d === void 0 ? void 0 : _d.forEach(unsub => unsub());
|
|
92
|
+
this[internalReduxEventsUnsubscribers].delete(name);
|
|
93
|
+
}
|
|
94
|
+
onStoreAvailable(name) {
|
|
95
|
+
}
|
|
96
|
+
connectedCallback() {
|
|
97
|
+
super.connectedCallback();
|
|
98
|
+
this.setupStores();
|
|
99
|
+
}
|
|
100
|
+
disconnectedCallback() {
|
|
101
|
+
super.disconnectedCallback();
|
|
102
|
+
this.unsubscribeFromStores();
|
|
88
103
|
}
|
|
89
|
-
this[internalStoresUnsubscribers].delete(name);
|
|
90
|
-
(_d = this[internalReduxEventsUnsubscribers].get(name)) === null || _d === void 0 ? void 0 : _d.forEach(unsub => unsub());
|
|
91
|
-
this[internalReduxEventsUnsubscribers].delete(name);
|
|
92
|
-
}
|
|
93
|
-
onStoreAvailable(name) {
|
|
94
|
-
}
|
|
95
|
-
connectedCallback() {
|
|
96
|
-
super.connectedCallback();
|
|
97
|
-
this.setupStores();
|
|
98
|
-
}
|
|
99
|
-
disconnectedCallback() {
|
|
100
|
-
super.disconnectedCallback();
|
|
101
|
-
this.unsubscribeFromStores();
|
|
102
104
|
}
|
|
105
|
+
_a = internalStoresUnsubscribers, _b = internalStores, _c = internalReduxEventsUnsubscribers;
|
|
106
|
+
FtLitElementWithReduxClass.reduxProperties = new Map();
|
|
107
|
+
FtLitElementWithReduxClass.reduxReactiveProperties = new Set();
|
|
108
|
+
FtLitElementWithReduxClass.reduxEventListeners = new Map();
|
|
109
|
+
return FtLitElementWithReduxClass;
|
|
110
|
+
}
|
|
111
|
+
export class FtLitElementRedux extends withRedux(FtLitElement) {
|
|
103
112
|
}
|
|
104
|
-
_a = internalStoresUnsubscribers, _b = internalStores, _c = internalReduxEventsUnsubscribers;
|
|
105
|
-
FtLitElementRedux.reduxProperties = new Map();
|
|
106
|
-
FtLitElementRedux.reduxReactiveProperties = new Set();
|
|
107
|
-
FtLitElementRedux.reduxEventListeners = new Map();
|
|
108
|
-
export { FtLitElementRedux };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-wc-utils",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.9",
|
|
4
4
|
"description": "Internal web components tools",
|
|
5
5
|
"author": "Fluid Topics <devtopics@antidot.net>",
|
|
6
6
|
"license": "ISC",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"mark.js": "8.11.1",
|
|
25
25
|
"moment": "2.29.4"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "dc6e10bbbaa21aaa6bf6ba41693dccd334fa9854"
|
|
28
28
|
}
|