@modular-component/core 0.1.7 → 0.2.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/CHANGELOG.md +12 -0
- package/README.md +7 -9
- package/dist/index.d.ts +31 -354
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +53 -156
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +164 -238
- package/dist/types/arguments.d.ts +0 -33
- package/dist/types/arguments.d.ts.map +0 -1
- package/dist/types/arguments.js +0 -6
- package/dist/types/arguments.js.map +0 -1
- package/dist/types/methods/add.d.ts +0 -23
- package/dist/types/methods/add.d.ts.map +0 -1
- package/dist/types/methods/add.js +0 -8
- package/dist/types/methods/add.js.map +0 -1
- package/dist/types/methods/at.d.ts +0 -22
- package/dist/types/methods/at.d.ts.map +0 -1
- package/dist/types/methods/at.js +0 -7
- package/dist/types/methods/at.js.map +0 -1
- package/dist/types/methods/before.d.ts +0 -22
- package/dist/types/methods/before.d.ts.map +0 -1
- package/dist/types/methods/before.js +0 -7
- package/dist/types/methods/before.js.map +0 -1
- package/dist/types/methods/hook.d.ts +0 -14
- package/dist/types/methods/hook.d.ts.map +0 -1
- package/dist/types/methods/hook.js +0 -7
- package/dist/types/methods/hook.js.map +0 -1
- package/dist/types/methods/mock.d.ts +0 -26
- package/dist/types/methods/mock.d.ts.map +0 -1
- package/dist/types/methods/mock.js +0 -6
- package/dist/types/methods/mock.js.map +0 -1
- package/dist/types/methods/with.d.ts +0 -52
- package/dist/types/methods/with.d.ts.map +0 -1
- package/dist/types/methods/with.js +0 -8
- package/dist/types/methods/with.js.map +0 -1
- package/dist/types/methods.d.ts +0 -10
- package/dist/types/methods.d.ts.map +0 -1
- package/dist/types/methods.js +0 -5
- package/dist/types/methods.js.map +0 -1
- package/dist/types/modular-component.d.ts +0 -16
- package/dist/types/modular-component.d.ts.map +0 -1
- package/dist/types/modular-component.js +0 -5
- package/dist/types/modular-component.js.map +0 -1
- package/dist/types/stage.d.ts +0 -41
- package/dist/types/stage.d.ts.map +0 -1
- package/dist/types/stage.js +0 -5
- package/dist/types/stage.js.map +0 -1
- package/dist/types/utils.d.ts +0 -24
- package/dist/types/utils.d.ts.map +0 -1
- package/dist/types/utils.js +0 -5
- package/dist/types/utils.js.map +0 -1
- package/dist/types/validation.d.ts +0 -4
- package/dist/types/validation.d.ts.map +0 -1
- package/dist/types/validation.js +0 -2
- package/dist/types/validation.js.map +0 -1
- package/src/types/arguments.ts +0 -57
- package/src/types/methods/add.ts +0 -52
- package/src/types/methods/at.ts +0 -64
- package/src/types/methods/before.ts +0 -64
- package/src/types/methods/hook.ts +0 -27
- package/src/types/methods/mock.ts +0 -90
- package/src/types/methods/with.ts +0 -173
- package/src/types/methods.ts +0 -11
- package/src/types/modular-component.ts +0 -27
- package/src/types/stage.ts +0 -91
- package/src/types/utils.ts +0 -63
- package/src/types/validation.ts +0 -13
package/dist/index.js
CHANGED
|
@@ -1,162 +1,59 @@
|
|
|
1
|
-
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
[method?.field]: useTransform(args, stage.value),
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
// Finally, return the args
|
|
30
|
-
return field ? args[field] : args;
|
|
31
|
-
};
|
|
32
|
-
// Create the actual Component. This is a simple React Functional Component
|
|
33
|
-
// that will call the hooks for each registered stages in order.
|
|
34
|
-
const Component = forwardRef((props, ref) => {
|
|
35
|
-
// Prepare the shared arguments object, prefilling it with the props
|
|
36
|
-
// and an empty render result
|
|
37
|
-
const useComponent = generateAsHook(ref)();
|
|
38
|
-
const args = useComponent(props);
|
|
39
|
-
return args.render ?? null;
|
|
40
|
-
});
|
|
41
|
-
// Set the debug display name if provided
|
|
42
|
-
Component.displayName = displayName;
|
|
43
|
-
// Add an asHook system to get the components args as a reusable hook
|
|
44
|
-
Component.asHook = generateAsHook();
|
|
45
|
-
// Add each configured stage methods to the component
|
|
46
|
-
Object.keys(methods).forEach((method) => {
|
|
47
|
-
// Check if a stage of the same key already exists
|
|
48
|
-
const stageIndices = stages
|
|
49
|
-
// Map all stages to an [index, stage] tuple
|
|
50
|
-
.map((record, index) => [index, record])
|
|
51
|
-
// Remove all tuples not matching our stage
|
|
52
|
-
.filter(([, record]) => record.stage === methods[method].symbol)
|
|
53
|
-
// Get the index
|
|
54
|
-
.map(([index]) => index);
|
|
55
|
-
const lastIndex = [...stageIndices].pop();
|
|
56
|
-
// @ts-ignore
|
|
57
|
-
Component[`with${method}`] = (value, forceIndex) => {
|
|
58
|
-
// Prepare the new stage
|
|
59
|
-
const stage = { stage: methods[method].symbol, value };
|
|
60
|
-
// Check if a stage of the same key already exists
|
|
61
|
-
const stageIndex = (forceIndex !== undefined
|
|
62
|
-
? stageIndices[forceIndex]
|
|
63
|
-
: lastIndex) ?? -1;
|
|
64
|
-
// If so, copy the stages and replace the previous record
|
|
65
|
-
if (stageIndex > -1) {
|
|
66
|
-
const nextStages = [...stages];
|
|
67
|
-
nextStages[stageIndex] = stage;
|
|
68
|
-
return ModularFactory(methods).build(nextStages)(displayName);
|
|
69
|
-
}
|
|
70
|
-
// Otherwise, append the stage
|
|
71
|
-
return ModularFactory(methods).build([...stages, stage])(displayName);
|
|
72
|
-
};
|
|
73
|
-
// @ts-ignore
|
|
74
|
-
Component[`add${method}`] =
|
|
75
|
-
stageIndices.length < 1
|
|
76
|
-
? undefined
|
|
77
|
-
: (value) => {
|
|
78
|
-
// Prepare the new stage
|
|
79
|
-
const stage = {
|
|
80
|
-
stage: methods[method].symbol,
|
|
81
|
-
value,
|
|
82
|
-
};
|
|
83
|
-
// Append the stage as in multiple mode
|
|
84
|
-
return ModularFactory(methods).build([
|
|
85
|
-
...stages,
|
|
86
|
-
stage,
|
|
87
|
-
])(displayName);
|
|
88
|
-
};
|
|
89
|
-
// @ts-ignore
|
|
90
|
-
Component[`at${method}`] =
|
|
91
|
-
stageIndices.length < 1
|
|
92
|
-
? undefined
|
|
93
|
-
: (forceIndex) => {
|
|
94
|
-
// Find the needed stage
|
|
95
|
-
const stageIndex = (forceIndex !== undefined
|
|
96
|
-
? stageIndices[forceIndex]
|
|
97
|
-
: lastIndex) ?? lastIndex;
|
|
98
|
-
// Otherwise, keep all stages up to and including the found stage
|
|
99
|
-
return ModularFactory(methods).build(stages.slice(0, stageIndex + 1))(displayName);
|
|
100
|
-
};
|
|
101
|
-
// @ts-ignore
|
|
102
|
-
Component[`before${method}`] =
|
|
103
|
-
stageIndices.length < 1
|
|
104
|
-
? undefined
|
|
105
|
-
: (forceIndex) => {
|
|
106
|
-
// Find the needed stage
|
|
107
|
-
const stageIndex = (forceIndex !== undefined
|
|
108
|
-
? stageIndices[forceIndex]
|
|
109
|
-
: lastIndex) ?? lastIndex;
|
|
110
|
-
// Otherwise, keep all stages up to but excluding the found stage
|
|
111
|
-
return ModularFactory(methods).build(stages.slice(0, stageIndex))(displayName);
|
|
112
|
-
};
|
|
113
|
-
// @ts-ignore
|
|
114
|
-
Component[`mock${method}`] =
|
|
115
|
-
stageIndices.length < 1
|
|
116
|
-
? () => Component
|
|
117
|
-
: (value, forceIndex) => {
|
|
118
|
-
// Prepare the mocked stage
|
|
119
|
-
const stage = {
|
|
120
|
-
stage: methods[method].symbol,
|
|
121
|
-
value,
|
|
122
|
-
mocked: true,
|
|
123
|
-
};
|
|
124
|
-
// Find the needed stage
|
|
125
|
-
const stageIndex = (forceIndex !== undefined
|
|
126
|
-
? stageIndices[forceIndex]
|
|
127
|
-
: lastIndex) ?? lastIndex;
|
|
128
|
-
// Replace the stage with its mock
|
|
129
|
-
const nextStages = [...stages];
|
|
130
|
-
nextStages[stageIndex] = stage;
|
|
131
|
-
return ModularFactory(methods).build(nextStages)(displayName);
|
|
132
|
-
};
|
|
133
|
-
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
|
|
134
|
-
// @ts-ignore
|
|
135
|
-
Component[`asUse${capitalize(methods[method].field)}`] =
|
|
136
|
-
generateAsHook(undefined, methods[method].field);
|
|
137
|
-
});
|
|
138
|
-
return (options?.memo ? memo(Component) : Component);
|
|
1
|
+
function InternalFactory(stages) {
|
|
2
|
+
const useComponent = function (props, ref) {
|
|
3
|
+
if (!stages.some((stage) => stage.field === 'render')) {
|
|
4
|
+
stages = [...stages, render(() => null)];
|
|
5
|
+
}
|
|
6
|
+
return useComponent.use('render')(props, ref);
|
|
7
|
+
};
|
|
8
|
+
useComponent.with = (stage) => {
|
|
9
|
+
const index = stages.findIndex((s) => s.field === stage.field);
|
|
10
|
+
if (index !== -1) {
|
|
11
|
+
const next = [...stages];
|
|
12
|
+
next[index] = stage;
|
|
13
|
+
return InternalFactory(next);
|
|
14
|
+
}
|
|
15
|
+
return InternalFactory([...stages, stage]);
|
|
16
|
+
};
|
|
17
|
+
useComponent.force = useComponent.with;
|
|
18
|
+
useComponent.use = (field) => {
|
|
19
|
+
if (!field) {
|
|
20
|
+
return (props = {}, ref = null) => {
|
|
21
|
+
const args = { props };
|
|
22
|
+
for (let stage of stages) {
|
|
23
|
+
args[stage.field] = stage.useStage(args, ref);
|
|
24
|
+
}
|
|
25
|
+
return args;
|
|
139
26
|
};
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
27
|
+
}
|
|
28
|
+
const index = stages.findIndex((stage) => stage.field === field);
|
|
29
|
+
const argStages = index === -1 ? stages.slice(0) : stages.slice(0, index + 1);
|
|
30
|
+
return (props = {}, ref = null) => {
|
|
31
|
+
const args = { props };
|
|
32
|
+
for (let stage of argStages) {
|
|
33
|
+
args[stage.field] = stage.useStage(args, ref);
|
|
34
|
+
}
|
|
35
|
+
return args;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
useComponent.stage = (field) => {
|
|
39
|
+
const stage = stages.find((stage) => stage.field === field);
|
|
40
|
+
return stage?.useStage ?? (() => null);
|
|
149
41
|
};
|
|
42
|
+
useComponent.setDisplayName = (displayName) => {
|
|
43
|
+
;
|
|
44
|
+
useComponent.displayName = displayName;
|
|
45
|
+
};
|
|
46
|
+
return useComponent;
|
|
47
|
+
}
|
|
48
|
+
export function ModularComponent(displayName) {
|
|
49
|
+
const useComponent = InternalFactory([]);
|
|
50
|
+
useComponent.displayName = displayName;
|
|
51
|
+
return useComponent;
|
|
150
52
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
Render: {
|
|
154
|
-
symbol: withRender,
|
|
53
|
+
export function render(render) {
|
|
54
|
+
return {
|
|
155
55
|
field: 'render',
|
|
156
|
-
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
export function createMethodRecord(record) {
|
|
160
|
-
return record;
|
|
56
|
+
useStage: render,
|
|
57
|
+
};
|
|
161
58
|
}
|
|
162
59
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"Factory",
|
|
8
8
|
"Test"
|
|
9
9
|
],
|
|
10
|
-
"version": "0.1
|
|
10
|
+
"version": "0.2.1",
|
|
11
11
|
"type": "module",
|
|
12
12
|
"license": "MIT",
|
|
13
13
|
"publishConfig": {
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "^18.0.17",
|
|
31
|
-
"typescript": "^
|
|
31
|
+
"typescript": "^5.2.2"
|
|
32
32
|
},
|
|
33
33
|
"main": "dist/index.js",
|
|
34
34
|
"types": "dist/index.d.ts"
|