@arrai-innovations/reactive-helpers 2.6.1 → 2.7.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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/use/index.js +1 -0
  3. package/use/listCalculated.js +3 -0
  4. package/use/objectCalculated.js +11 -15
  5. package/use/objectRelated.js +121 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arrai-innovations/reactive-helpers",
3
- "version": "2.6.1",
3
+ "version": "2.7.0",
4
4
  "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
5
5
  "main": "index.js",
6
6
  "directories": {
package/use/index.js CHANGED
@@ -6,6 +6,7 @@ export * from "./listSort.js";
6
6
  export * from "./listSubscription.js";
7
7
  export * from "./objectCalculated.js";
8
8
  export * from "./objectInstance.js";
9
+ export * from "./objectRelated.js";
9
10
  export * from "./objectSubscription.js";
10
11
  export * from "./paginatedListInstance.js";
11
12
  export * from "./search.js";
package/use/listCalculated.js CHANGED
@@ -93,6 +93,9 @@ export function useListCalculated({
93
93
  });
94
94
  }
95
95
  });
96
+ if (calculatedObjectsEffectScopes[objectKey]) {
97
+ calculatedObjectsEffectScopes[objectKey].stop();
98
+ }
96
99
  calculatedObjectsEffectScopes[objectKey] = calculatedObjectsEffectScope;
97
100
  }
98
101
  parentStateObjectsWatch();
package/use/objectCalculated.js CHANGED
@@ -18,7 +18,7 @@ export function useObjectCalculated({
18
18
  }) {
19
19
  const state = reactive({
20
20
  calculatedObjectRules,
21
- calculatedObjectObject: {},
21
+ calculatedObjectObjects: {},
22
22
  object: {},
23
23
  });
24
24
  const calculatedObjectEffectScopes = {};
@@ -33,7 +33,7 @@ export function useObjectCalculated({
33
33
  state.object = new Proxy(parentState.object, {
34
34
  get(target, key, receiver) {
35
35
  if (key === copn) {
36
- return state.calculatedObjectObject;
36
+ return state.calculatedObjectObjects;
37
37
  }
38
38
  return Reflect.get(target, key, receiver);
39
39
  },
@@ -51,7 +51,7 @@ export function useObjectCalculated({
51
51
  return {
52
52
  configurable: true,
53
53
  enumerable: true,
54
- value: state.calculatedObjectObject,
54
+ value: state.calculatedObjectObjects,
55
55
  writable: true,
56
56
  };
57
57
  }
@@ -73,9 +73,15 @@ export function useObjectCalculated({
73
73
  Object.keys(state.calculatedObjectRules),
74
74
  Object.keys(calculatedObjectOriginalFunctions)
75
75
  );
76
+ for (const sameKey of sameKeys) {
77
+ if (calculatedObjectOriginalFunctions[sameKey] !== state.calculatedObjectRules[sameKey]) {
78
+ removedKeys.push(sameKey);
79
+ addedKeys.push(sameKey);
80
+ }
81
+ }
76
82
  for (const removedKey of removedKeys) {
77
83
  delete calculatedObjectOriginalFunctions[removedKey];
78
- delete state.calculatedObjectObject[removedKey];
84
+ delete state.calculatedObjectObjects[removedKey];
79
85
  if (calculatedObjectEffectScopes[removedKey]) {
80
86
  calculatedObjectEffectScopes[removedKey].stop();
81
87
  delete calculatedObjectEffectScopes[removedKey];
@@ -85,21 +91,11 @@ export function useObjectCalculated({
85
91
  calculatedObjectOriginalFunctions[addedKey] = state.calculatedObjectRules[addedKey];
86
92
  calculatedObjectEffectScopes[addedKey] = effectScope();
87
93
  calculatedObjectEffectScopes[addedKey].run(() => {
88
- state.calculatedObjectObject[addedKey] = computed(() =>
94
+ state.calculatedObjectObjects[addedKey] = computed(() =>
89
95
  calculatedObjectOriginalFunctions[addedKey](state.object)
90
96
  );
91
97
  });
92
98
  }
93
- for (const sameKey of sameKeys) {
94
- calculatedObjectOriginalFunctions[sameKey] = state.calculatedObjectRules[sameKey];
95
- calculatedObjectEffectScopes[sameKey].stop();
96
- calculatedObjectEffectScopes[sameKey] = effectScope();
97
- calculatedObjectEffectScopes[sameKey].run(() => {
98
- state.calculatedObjectObject[sameKey] = computed(() =>
99
- calculatedObjectOriginalFunctions[sameKey](state.object)
100
- );
101
- });
102
- }
103
99
  },
104
100
  {
105
101
  immediate: true,
package/use/objectRelated.js ADDED
@@ -0,0 +1,121 @@
1
+ import { get, isArray, isUndefined } from "lodash";
2
+ import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
3
+ import { keyDiff } from "../utils";
4
+
5
+ export function useObjectRelateds(instances, args) {
6
+ for (const [key, value] of Object.entries(args)) {
7
+ useObjectRelated({
8
+ parentState: instances[key].state,
9
+ ...value,
10
+ });
11
+ }
12
+ }
13
+
14
+ // the single object version of useListRelated
15
+ export function useObjectRelated({
16
+ parentState,
17
+ relatedObjectRules,
18
+ relatedObjectPropertyName = "relatedObject", // NOT REACTIVE
19
+ }) {
20
+ const state = reactive({
21
+ relatedObjectRules,
22
+ relatedObjectObjects: {},
23
+ object: {},
24
+ });
25
+ const relatedObjectEffectScopes = {};
26
+
27
+ // don't change relatedObjectPropertyName on us or it will break
28
+ const ropn = relatedObjectPropertyName + "";
29
+
30
+ const es = effectScope();
31
+
32
+ es.run(() => {
33
+ state.object = new Proxy(parentState.object, {
34
+ get(target, key, receiver) {
35
+ if (key === ropn) {
36
+ return state.relatedObjectObjects;
37
+ }
38
+ return Reflect.get(target, key, receiver);
39
+ },
40
+ ownKeys(target) {
41
+ return Reflect.ownKeys(target).concat(ropn);
42
+ },
43
+ has(target, key) {
44
+ if (key === ropn) {
45
+ return true;
46
+ }
47
+ return Reflect.has(target, key);
48
+ },
49
+ getOwnPropertyDescriptor(target, key) {
50
+ if (key === ropn) {
51
+ return {
52
+ configurable: true,
53
+ enumerable: true,
54
+ value: state.relatedObjectObjects,
55
+ writable: true,
56
+ };
57
+ }
58
+ return Reflect.getOwnPropertyDescriptor(target, key);
59
+ },
60
+ defineProperty() {
61
+ return false;
62
+ },
63
+ });
64
+ state.loading = toRef(parentState, "loading");
65
+ state.error = toRef(parentState, "error");
66
+ state.errored = toRef(parentState, "errored");
67
+ state.deleted = toRef(parentState, "deleted");
68
+
69
+ watch(
70
+ [() => Object.keys(state.relatedObjectRules)],
71
+ () => {
72
+ const { addedKeys: addedRuleKeys, removedKeys: removedRuleKeys } = keyDiff(
73
+ Object.keys(state.relatedObjectRules),
74
+ Object.keys(state.relatedObjectObjects)
75
+ );
76
+ for (const removedRuleKey of removedRuleKeys) {
77
+ delete state.relatedObjectObjects[removedRuleKey];
78
+ if (relatedObjectEffectScopes[removedRuleKey]) {
79
+ relatedObjectEffectScopes[removedRuleKey].stop();
80
+ delete relatedObjectEffectScopes[removedRuleKey];
81
+ }
82
+ }
83
+ for (const addedRuleKey of addedRuleKeys) {
84
+ relatedObjectEffectScopes[addedRuleKey] = effectScope();
85
+ relatedObjectEffectScopes[addedRuleKey].run(() => {
86
+ state.relatedObjectObjects[addedRuleKey] = computed(() => {
87
+ // deal with computed objects being passed.
88
+ const ruleObjects = unref(state.relatedObjectRules?.[addedRuleKey]?.objects);
89
+ const rulePkKey = state.relatedObjectRules?.[addedRuleKey]?.pkKey || addedRuleKey;
90
+ if (!ruleObjects || !rulePkKey) {
91
+ return undefined;
92
+ }
93
+ const value = get(parentState.object, rulePkKey);
94
+ if (isUndefined(value)) {
95
+ return undefined;
96
+ }
97
+ if (isArray(value)) {
98
+ return value.map((e) => ruleObjects[e]);
99
+ }
100
+ return ruleObjects[value];
101
+ });
102
+ });
103
+ }
104
+ },
105
+ {
106
+ immediate: true,
107
+ }
108
+ );
109
+
110
+ onScopeDispose(() => {
111
+ for (const key in relatedObjectEffectScopes) {
112
+ relatedObjectEffectScopes[key].stop();
113
+ }
114
+ });
115
+ });
116
+ return {
117
+ state,
118
+ parentState,
119
+ effectScope: es,
120
+ };
121
+ }