@modular-component/core 0.2.1 → 0.2.3
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 +4 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +15 -17
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +18 -22
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @modular-component/core
|
|
2
2
|
|
|
3
3
|
Core system for creating a `ModularComponent` factory. Exports the `modularFactory`
|
|
4
4
|
builder, and necessary types for creating extensions.
|
|
@@ -13,9 +13,9 @@ yarn add @modular-component/core
|
|
|
13
13
|
// Usage in apps
|
|
14
14
|
import { ModularComponent, render } from '@modular-component/core'
|
|
15
15
|
|
|
16
|
-
const MyComponent = ModularComponent().with(
|
|
17
|
-
<div>Hello Modular!</div>
|
|
18
|
-
)
|
|
16
|
+
const MyComponent = ModularComponent().with(
|
|
17
|
+
render(() => <div>Hello Modular!</div>),
|
|
18
|
+
)
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
```tsx
|
package/dist/index.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ export type ModularComponent<Props extends {}, Ref, Args extends {
|
|
|
24
24
|
use<Field extends keyof Args>(key: Field): {} extends Props ? () => Args[Field] : (props: PropsWithChildren<Props>) => Args[Field];
|
|
25
25
|
use(): {} extends Props ? () => Args : (props: PropsWithChildren<Props>) => Args;
|
|
26
26
|
stage<Field extends keyof Args>(key: Field): (args: Partial<Args>) => Args[Field];
|
|
27
|
-
|
|
27
|
+
withDisplayName(displayName: string): ModularComponent<Props, Ref, Args>;
|
|
28
28
|
};
|
|
29
29
|
export declare function ModularComponent<Props extends {} = {}, Ref = never>(displayName?: string): ModularComponent<Props, Ref, {
|
|
30
30
|
props: Props;
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE7F,MAAM,WAAW,YAAY,CAC3B,KAAK,SAAS,MAAM,EACpB,KAAK,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,KAAK,GAAG;IAE3C,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAA;CAChB;AAED,MAAM,MAAM,oCAAoC,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS;IAC3E,KAAK;CACN,GACG,iBAAiB,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,GAC3C,wBAAwB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;AAExC,MAAM,MAAM,gBAAgB,CAC1B,KAAK,SAAS,EAAE,EAChB,GAAG,EACH,IAAI,SAAS;IAAE,MAAM,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;CAAE,IACpD,oCAAoC,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG;IACrD,IAAI,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE;QACtC,KAAK,EAAE,KAAK,CAAA;QACZ,QAAQ,EAAE,CACR,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KACzB,KAAK,SAAS,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAA;KACnD,GAAG,gBAAgB,CAClB,KAAK,EACL,GAAG,EACH;SACG,GAAG,IAAI,MAAM,IAAI,GAAG,KAAK,GAAG,GAAG,SAAS,QAAQ,GAC7C,UAAU,CAAC,iBAAiB,CAAC,GAC7B,GAAG,SAAS,KAAK,GACjB,IAAI,GACJ,GAAG,SAAS,MAAM,IAAI,GACtB,IAAI,CAAC,GAAG,CAAC,GACT,KAAK;KACV,CACF,CAAA;IACD,KAAK,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE;QACvC,KAAK,EAAE,KAAK,CAAA;QACZ,QAAQ,EAAE,CACR,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KACzB,KAAK,SAAS,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA;KACpD,GAAG,gBAAgB,CAClB,KAAK,EACL,GAAG,EACH;SACG,GAAG,IAAI,MAAM,IAAI,GAAG,KAAK,GAAG,GAAG,SAAS,QAAQ,GAC7C,UAAU,CAAC,iBAAiB,CAAC,GAC7B,GAAG,SAAS,KAAK,GACjB,IAAI,GACJ,GAAG,SAAS,MAAM,IAAI,GACtB,IAAI,CAAC,GAAG,CAAC,GACT,KAAK;KACV,CACF,CAAA;IACD,GAAG,CAAC,KAAK,SAAS,MAAM,IAAI,EAC1B,GAAG,EAAE,KAAK,GACT,EAAE,SAAS,KAAK,GACf,MAAM,IAAI,CAAC,KAAK,CAAC,GACjB,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;IACpD,GAAG,IAAI,EAAE,SAAS,KAAK,GACnB,MAAM,IAAI,GACV,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAA;IAC7C,KAAK,CAAC,KAAK,SAAS,MAAM,IAAI,EAC5B,GAAG,EAAE,KAAK,GACT,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;IACvC,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;CACzE,CAAA;AA4ED,wBAAgB,gBAAgB,CAAC,KAAK,SAAS,EAAE,GAAG,EAAE,EAAE,GAAG,GAAG,KAAK,EACjE,WAAW,CAAC,EAAE,MAAM,GACnB,gBAAgB,CACjB,KAAK,EACL,GAAG,EACH;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;CAAE,CACxD,CAMA;AAED,wBAAgB,MAAM,CAAC,IAAI,SAAS,EAAE,EAAE,GAAG,EACzC,MAAM,EAAE,CACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,GACvC,YAAY,CACb,QAAQ,EACR,CACE,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CACzC,CAKA"}
|
package/dist/index.js
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
function InternalFactory(stages) {
|
|
2
|
-
const
|
|
1
|
+
function InternalFactory(stages, displayName) {
|
|
2
|
+
const UseComponent = function (props, ref) {
|
|
3
3
|
if (!stages.some((stage) => stage.field === 'render')) {
|
|
4
4
|
stages = [...stages, render(() => null)];
|
|
5
5
|
}
|
|
6
|
-
return
|
|
6
|
+
return UseComponent.use('render')(props, ref);
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
UseComponent.displayName = displayName;
|
|
9
|
+
UseComponent.with = (stage) => {
|
|
9
10
|
const index = stages.findIndex((s) => s.field === stage.field);
|
|
10
11
|
if (index !== -1) {
|
|
11
12
|
const next = [...stages];
|
|
12
13
|
next[index] = stage;
|
|
13
|
-
return InternalFactory(next);
|
|
14
|
+
return InternalFactory(next, displayName);
|
|
14
15
|
}
|
|
15
|
-
return InternalFactory([...stages, stage]);
|
|
16
|
+
return InternalFactory([...stages, stage], displayName);
|
|
16
17
|
};
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
UseComponent.force = UseComponent.with;
|
|
19
|
+
UseComponent.use = (field) => {
|
|
19
20
|
if (!field) {
|
|
20
21
|
return (props = {}, ref = null) => {
|
|
21
22
|
const args = { props };
|
|
@@ -32,23 +33,20 @@ function InternalFactory(stages) {
|
|
|
32
33
|
for (let stage of argStages) {
|
|
33
34
|
args[stage.field] = stage.useStage(args, ref);
|
|
34
35
|
}
|
|
35
|
-
return args;
|
|
36
|
+
return args[field];
|
|
36
37
|
};
|
|
37
38
|
};
|
|
38
|
-
|
|
39
|
+
UseComponent.stage = (field) => {
|
|
39
40
|
const stage = stages.find((stage) => stage.field === field);
|
|
40
41
|
return stage?.useStage ?? (() => null);
|
|
41
42
|
};
|
|
42
|
-
|
|
43
|
-
;
|
|
44
|
-
useComponent.displayName = displayName;
|
|
43
|
+
UseComponent.withDisplayName = (displayName) => {
|
|
44
|
+
return InternalFactory([...stages], displayName);
|
|
45
45
|
};
|
|
46
|
-
return
|
|
46
|
+
return UseComponent;
|
|
47
47
|
}
|
|
48
48
|
export function ModularComponent(displayName) {
|
|
49
|
-
|
|
50
|
-
useComponent.displayName = displayName;
|
|
51
|
-
return useComponent;
|
|
49
|
+
return InternalFactory([], displayName);
|
|
52
50
|
}
|
|
53
51
|
export function render(render) {
|
|
54
52
|
return {
|
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
package/src/index.ts
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
ForwardRefRenderFunction,
|
|
3
|
-
FunctionComponent,
|
|
4
|
-
PropsWithChildren,
|
|
5
|
-
} from 'react'
|
|
1
|
+
import React, { ForwardRefRenderFunction, FunctionComponent, PropsWithChildren } from 'react'
|
|
6
2
|
|
|
7
3
|
export interface ModularStage<
|
|
8
4
|
Field extends string,
|
|
@@ -72,7 +68,7 @@ export type ModularComponent<
|
|
|
72
68
|
stage<Field extends keyof Args>(
|
|
73
69
|
key: Field,
|
|
74
70
|
): (args: Partial<Args>) => Args[Field]
|
|
75
|
-
|
|
71
|
+
withDisplayName(displayName: string): ModularComponent<Props, Ref, Args>
|
|
76
72
|
}
|
|
77
73
|
|
|
78
74
|
function InternalFactory<
|
|
@@ -84,28 +80,30 @@ function InternalFactory<
|
|
|
84
80
|
string,
|
|
85
81
|
(args: Args, ref: React.ForwardedRef<Ref>) => any
|
|
86
82
|
>[],
|
|
83
|
+
displayName: string | undefined
|
|
87
84
|
): ModularComponent<Props, Ref, Args> {
|
|
88
|
-
const
|
|
85
|
+
const UseComponent = function (props: Props, ref: React.ForwardedRef<Ref>) {
|
|
89
86
|
if (!stages.some((stage) => stage.field === 'render')) {
|
|
90
87
|
stages = [...stages, render(() => null)]
|
|
91
88
|
}
|
|
92
|
-
return
|
|
89
|
+
return UseComponent.use('render')(props, ref)
|
|
93
90
|
}
|
|
91
|
+
UseComponent.displayName = displayName
|
|
94
92
|
|
|
95
|
-
|
|
93
|
+
UseComponent.with = (stage: ModularStage<string, (args: Args) => any>) => {
|
|
96
94
|
const index = stages.findIndex((s) => s.field === stage.field)
|
|
97
95
|
|
|
98
96
|
if (index !== -1) {
|
|
99
97
|
const next = [...stages]
|
|
100
98
|
next[index] = stage
|
|
101
|
-
return InternalFactory<Props, Ref, Args>(next)
|
|
99
|
+
return InternalFactory<Props, Ref, Args>(next, displayName)
|
|
102
100
|
}
|
|
103
101
|
|
|
104
|
-
return InternalFactory<Props, Ref, Args>([...stages, stage])
|
|
102
|
+
return InternalFactory<Props, Ref, Args>([...stages, stage], displayName)
|
|
105
103
|
}
|
|
106
|
-
|
|
104
|
+
UseComponent.force = UseComponent.with
|
|
107
105
|
|
|
108
|
-
|
|
106
|
+
UseComponent.use = (field: keyof Args) => {
|
|
109
107
|
if (!field) {
|
|
110
108
|
return (
|
|
111
109
|
props: Props = {} as Props,
|
|
@@ -131,20 +129,20 @@ function InternalFactory<
|
|
|
131
129
|
for (let stage of argStages) {
|
|
132
130
|
args[stage.field] = stage.useStage(args as Args, ref)
|
|
133
131
|
}
|
|
134
|
-
return args
|
|
132
|
+
return args[field as string]
|
|
135
133
|
}
|
|
136
134
|
}
|
|
137
135
|
|
|
138
|
-
|
|
136
|
+
UseComponent.stage = (field: keyof Args) => {
|
|
139
137
|
const stage = stages.find((stage) => stage.field === field)
|
|
140
138
|
return stage?.useStage ?? (() => null)
|
|
141
139
|
}
|
|
142
140
|
|
|
143
|
-
|
|
144
|
-
|
|
141
|
+
UseComponent.withDisplayName = (displayName: string) => {
|
|
142
|
+
return InternalFactory<Props, Ref, Args>([...stages], displayName)
|
|
145
143
|
}
|
|
146
144
|
|
|
147
|
-
return
|
|
145
|
+
return UseComponent as unknown as ModularComponent<Props, Ref, Args>
|
|
148
146
|
}
|
|
149
147
|
|
|
150
148
|
export function ModularComponent<Props extends {} = {}, Ref = never>(
|
|
@@ -154,13 +152,11 @@ export function ModularComponent<Props extends {} = {}, Ref = never>(
|
|
|
154
152
|
Ref,
|
|
155
153
|
{ props: Props; render: ReturnType<FunctionComponent> }
|
|
156
154
|
> {
|
|
157
|
-
|
|
155
|
+
return InternalFactory<
|
|
158
156
|
Props,
|
|
159
157
|
Ref,
|
|
160
158
|
{ props: Props; render: ReturnType<FunctionComponent> }
|
|
161
|
-
>([])
|
|
162
|
-
useComponent.displayName = displayName
|
|
163
|
-
return useComponent
|
|
159
|
+
>([], displayName)
|
|
164
160
|
}
|
|
165
161
|
|
|
166
162
|
export function render<Args extends {}, Ref>(
|