Skip to content

Commit bdf6260

Browse files
committed
[FIX] For component + [IMPL] ForMemoized - ShowMemoized - SwitchCaseMemoized + [FIX] building lib process
1 parent 62153f3 commit bdf6260

275 files changed

Lines changed: 1026 additions & 405 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

apps/react-tools-demo/scripts/generateMarkdown.js

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ function removeImportLine(file) {
186186
*/
187187
function getJsDoc(fileSplitted) {
188188
let start, end, lines=[];
189-
for(let index=0;index<fileSplitted.length;index++) {
189+
for (let index = 0; index < fileSplitted.length; index++) {
190190
fileSplitted[index].startsWith("/**") && (start=index+1);
191191
if(fileSplitted[index].startsWith(" */") || fileSplitted[index].startsWith("*/")) {
192192
end = index;
@@ -207,12 +207,14 @@ function jsDoc2Markdown(jsDoc) {
207207
const markdown =
208208
`# ${jsDoc.title}
209209
${jsDoc.description}
210-
${jsDoc.usage ? `\n## Usage\n\n${jsDoc.usage}\n`:""}
211-
## API
210+
${jsDoc.usage ? `\n## Usage\n\n${jsDoc.usage}\n` : ""}
211+
${jsDoc.type ?
212+
`## API
212213
213214
\`\`\`tsx
214215
${jsDoc.type}
215216
\`\`\`
217+
`: ""}
216218
217219
${jsDoc.params && jsDoc.params.length > 0 ?
218220
`> ### Params
@@ -222,13 +224,16 @@ ${jsDoc.params && jsDoc.params.length > 0
222224
: ">"
223225
}
224226
>
225-
`:""}
227+
`: ""}
226228
229+
${Object.values(jsDoc.returns).some(el => !!el) ?
230+
`
227231
> ### Returns
228232
>
229233
> ${jsDoc.returns.name ? `__${jsDoc.returns.name}__` : ""}${jsDoc.returns.description ? ': '+jsDoc.returns.description : ""}
230234
${Array.isArray(jsDoc.returns.type) ? jsDoc.returns.type.map(el => `> `+el).join("\n") : "> "+jsDoc.returns.type}
231-
>`;
235+
>`
236+
:""}`;
232237

233238
return markdown;
234239
}
@@ -251,7 +256,7 @@ function buildHooksUtilsMarkdownObject(file) {
251256
},
252257
type: ""
253258
}
254-
if(fileSplitted.length === 1) {
259+
if(fileSplitted.length === 1 || fileSplitted.find(el => el.includes("//#IGNORE"))) {
255260
return obj;
256261
}
257262
const lines = getJsDoc(fileSplitted);
@@ -334,38 +339,46 @@ function buildHooksUtilsMarkdownObject(file) {
334339
if(typeLine.startsWith("const")) {
335340
typeLine = typeLine.substring("const ".length);
336341
}
337-
338-
if(typeLine.startsWith(obj.title+"= ")) {
339-
typeLine = typeLine.substring((obj.title+"= ").length);
342+
if (typeLine.startsWith(obj.title + " = {")) {
343+
typeLine = "#" + typeLine;
344+
}
345+
if (typeLine.startsWith(obj.title + "= {")) {
346+
typeLine = "#" + typeLine;
340347
}
341-
if(typeLine.startsWith(obj.title+"=")) {
342-
typeLine = typeLine.substring((obj.title+"=").length);
348+
if (typeLine.startsWith(obj.title + "= ")) {
349+
typeLine = typeLine.substring((obj.title + "= ").length);
343350
}
344-
if(typeLine.startsWith(obj.title+" =")) {
345-
typeLine = typeLine.substring((obj.title+" =").length);
351+
if (typeLine.startsWith(obj.title + "=")) {
352+
typeLine = typeLine.substring((obj.title + "=").length);
346353
}
347-
if(typeLine.startsWith(obj.title+" = ")) {
348-
typeLine = typeLine.substring((obj.title+" = ").length);
354+
if (typeLine.startsWith(obj.title + " =")) {
355+
typeLine = typeLine.substring((obj.title + " =").length);
349356
}
350-
if(typeLine.startsWith(obj.title+"(")) {
357+
if (typeLine.startsWith(obj.title + " = ")) {
358+
typeLine = typeLine.substring((obj.title + " = ").length);
359+
}
360+
if (typeLine.startsWith(obj.title + "(")) {
351361
typeLine = typeLine.substring((obj.title).length);
352362
}
353-
if(typeLine.startsWith(obj.title+" (")) {
354-
typeLine = typeLine.substring((obj.title+" ").length);
363+
if (typeLine.startsWith(obj.title + " (")) {
364+
typeLine = typeLine.substring((obj.title + " ").length);
355365
}
356366
typeLine = typeLine.split("").reverse().join("");
357-
if(typeLine.startsWith(" { >=")) {
367+
if (typeLine.startsWith(" { >=")) {
358368
typeLine = typeLine.substring(" { >=".length);
359369
}
360-
if(typeLine.startsWith("{ >=")) {
370+
if (typeLine.startsWith("{ >=")) {
361371
typeLine = typeLine.substring("{ >=".length);
362372
}
363-
if(typeLine.startsWith("{")) {
373+
if (typeLine.startsWith("{")) {
364374
typeLine = typeLine.substring("{".length);
365375
}
366376
typeLine = typeLine.split("").reverse().join("").trim();
367377
typeLine.startsWith("memo") && (typeLine = " = " + typeLine);
368-
obj.type = (typeLine.trim().startsWith("class") ? "" : obj.title.trim()) + typeLine;
378+
379+
obj.type = typeLine.trim().startsWith("#")
380+
? typeLine.substring(1).trim()
381+
: (typeLine.trim().startsWith("class") ? "" : obj.title.trim()) + typeLine;
369382
return obj;
370383
}
371384

apps/react-tools-demo/src/layout/MainLayout.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1274,6 +1274,17 @@ export default function MainLayout() {
12741274
>
12751275
For
12761276
</Link>
1277+
<Link
1278+
className={pathname === "/components/ForMemoized" ? 'active' : ''}
1279+
ref={node => linksRef.current["ForMemoized"] = node}
1280+
to="/components/ForMemoized"
1281+
onClick={() => {
1282+
containerRef.current?.scrollTo(0, 0);
1283+
window.innerWidth < 1190 && closeNav();
1284+
}}
1285+
>
1286+
ForMemoized
1287+
</Link>
12771288
<Link
12781289
className={pathname === "/components/LazyComponent" ? 'active' : ''}
12791290
ref={node => linksRef.current["LazyComponent"] = node}
@@ -1296,6 +1307,17 @@ export default function MainLayout() {
12961307
>
12971308
Show
12981309
</Link>
1310+
<Link
1311+
className={pathname === "/components/ShowMemoized" ? 'active' : ''}
1312+
ref={node => linksRef.current["ShowMemoized"] = node}
1313+
to="/components/ShowMemoized"
1314+
onClick={() => {
1315+
containerRef.current?.scrollTo(0, 0);
1316+
window.innerWidth < 1190 && closeNav();
1317+
}}
1318+
>
1319+
ShowMemoized
1320+
</Link>
12991321
<Link
13001322
className={pathname === "/components/SwitchCase" ? 'active' : ''}
13011323
ref={node => linksRef.current["SwitchCase"] = node}
@@ -1307,6 +1329,17 @@ export default function MainLayout() {
13071329
>
13081330
SwitchCase
13091331
</Link>
1332+
<Link
1333+
className={pathname === "/components/SwitchCaseMemoized" ? 'active' : ''}
1334+
ref={node => linksRef.current["SwitchCaseMemoized"] = node}
1335+
to="/components/SwitchCaseMemoized"
1336+
onClick={() => {
1337+
containerRef.current?.scrollTo(0, 0);
1338+
window.innerWidth < 1190 && closeNav();
1339+
}}
1340+
>
1341+
SwitchCaseMemoized
1342+
</Link>
13101343
<p className="sub-type">Utils</p>
13111344
<Link
13121345
className={pathname === "/utils/alphanumericCompare" ? 'active' : ''}

apps/react-tools-demo/src/markdown/ErrorBoundary.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default function EB() {
2424
class ErrorBoundary extends Component<PropsWithChildren<{ onCatch?: (error: Error, info: ErrorInfo) => void, fallback?: ReactNode | ((error: Error, info: ErrorInfo, retry: () => void) => ReactNode) | ((props: { error: Error, info: ErrorInfo, retry: () => void })=>JSX.Element)}>, { hasError: boolean, error?:Error, info?: ErrorInfo }>
2525
```
2626
27+
2728
> ### Params
2829
>
2930
> - __props__: _Object_
@@ -36,6 +37,7 @@ element to render.
3637
>
3738
3839
40+
3941
> ### Returns
4042
>
4143
> __result__: element or fallback.

apps/react-tools-demo/src/markdown/For.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,32 +49,34 @@ export default function ForComponent() {
4949
## API
5050

5151
```tsx
52-
For = memo(<T extends unknown>({ of, children, filter, map, sort, elementKey, fallback }: ForProps<T>)
52+
For<T, S extends T>({ of, elementKey, fallback, filter, sort, map, children }: { of: Array<T>, elementKey?: (T|S) extends object ? keyof (T|S) | ((item: T|S) => Key) : Key | ((item: T|S) => Key), children: (item: T|S, index: number, key: Key) => ReactNode, fallback?: ReactNode, filter?: Parameters<Array<T>["filter"]>[0], sort?: true | Parameters<Array<T>["sort"]>[0], map?: (...args: Parameters<Parameters<Array<T>["map"]>[0]>) => S }): JSX.Element|Array<JSX.Element>
5353
```
5454
55+
5556
> ### Params
5657
>
57-
> - __props__: _ForProps<T>_
58+
> - __props__: _Object_
5859
component properties object.
59-
> - __props.of__: _T[]_
60+
> - __props.of__: _Array<T>_
6061
array of elements.
61-
> - __props.elementKey?__: _T extends object ? keyof T | ((item: T) => Key) : Key | ((item: T) => Key)_
62+
> - __props.elementKey?__: _(T|S) extends object ? keyof (T|S) | ((item: T|S) => Key) : Key | ((item: T|S) => Key)_
6263
if the elements are objects, this prop can be a key of the elements in __of__ prop, or a function with one parameter which type is the type of the elements in __of__ prop and returns a __React.Key__ type, otherwise this prop can be the function described before or a __React.Key__. If it isn't specified, element index in __of__ props will be used as key.
63-
> - __props.children__: _(item: T, index: number, key: Key) => ReactNode_
64-
it's a function that takes the current item as first argument and optionally a second argument that is the index of element in _of_ prop and a third element that is the key specified in the _elementKey_ prop.
64+
> - __props.children__: _(item: T|S, index: number, key: Key) => ReactNode_
65+
it's a function that takes the current item as first argument and optionally a second argument that is the index of current item and a third element that is the key specified in the _elementKey_ prop. Item is the current element of __of__ prop or, if __map__ prop is present, is the current element produces from __map__ prop.
6566
> - __props.fallback?__: _ReactNode_
6667
optional element to render when _of_ prop is an empty array.
67-
> - __props.filter?__: _<S extends T>(val: T, index: number, arr: T[]) => val is S_
68+
> - __props.filter?__: _Parameters<Array<T>["filter"]>[0]_
6869
callback executed to filter _of_ elements.
69-
> - __props.map?__: _<U extends T>(val: T, index: number, arr: T[]) => U_
70+
> - __props.map?__: _undefined|((...args: Parameters<Parameters<Array<T>["map"]>[0]>) => S)_
7071
callback executed to map _of_ elements.
71-
> - __props.sort?__: _true | ((a: T, b: T) => number)_
72+
> - __props.sort?__: _true|Parameters<Array<T>["sort"]>[0]_
7273
callback executed to sort _of_ elements or __`true`__ to use native sort.
7374
>
7475
7576
77+
7678
> ### Returns
7779
>
7880
> __result__: elements list, rendered from _of_ prop or _fallback_.
79-
> - _JSX.Element_
81+
> - _JSX.Element|Array<JSX.Element>_
8082
>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#
2+
3+
4+
## Usage
5+
6+
Memoized implementation of _For_ component.
7+
8+
Please visit [For component](#/components/For) example to see how it works.
9+
10+
11+
12+
13+

apps/react-tools-demo/src/markdown/LazyComponent.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default function LC() {
2626
LazyComponent<T extends { default: ComponentType<unknown> } | { [k: string]: ComponentType<unknown> }>({ factory, componentName, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T>, componentName?: string, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void })
2727
```
2828

29+
2930
> ### Params
3031
>
3132
> - __param__: _Object_
@@ -43,6 +44,7 @@ function that will be executed after loading component .
4344
>
4445

4546

47+
4648
> ### Returns
4749
>
4850
> __element__

apps/react-tools-demo/src/markdown/Show.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ export default function ShowComponent() {
2525
Show<T extends unknown>({ when, fallback, children }: PropsWithChildren<{ when: T|boolean|undefined|null, fallback?: ReactNode }>)
2626
```
2727

28+
2829
> ### Params
2930
>
30-
> - __object__: _PropsWithChildren<{when: boolean, fallback?: ReactNode}>_
31+
> - __object__: _PropsWithChildren<{when: T|boolean|undefined|null, fallback?: ReactNode}>_
3132
> - __object.when__: _T|boolean|undefined|null_
3233
boolean indicating if to show _children_ or _fallback_/_null_.
3334
> - __object.fallback?__: _ReactNode_
@@ -37,6 +38,7 @@ optional element to render when _when_ prop is true.
3738
>
3839

3940

41+
4042
> ### Returns
4143
>
4244
> __element__: the element rendered or null.
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#
2+
3+
4+
## Usage
5+
6+
Memoized implementation of _Show_ component.
7+
8+
Please visit [Show component](#/components/Show) example to see how it works.
9+
10+
11+
12+
13+

apps/react-tools-demo/src/markdown/SwitchCase.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,22 @@ export default function SM() {
3737
## API
3838

3939
```tsx
40-
SwitchCaseSwitch = ({ children, fallback }: PropsWithChildren<{ fallback?: ReactNode }>)
40+
SwitchCase = { Switch, Case };
4141
```
4242

43+
4344
> ### Params
4445
>
45-
> - __object.fallback?__: _ReactNode_
46-
optional element to render when _when_ prop is false.
47-
> - __object.children?__: _PropsWithChildren<any>["children"]_
48-
__Case__ components.
46+
> - __object__: _Object_
47+
Object with _Switch_ and _Case_ components.
4948
>
5049
5150

51+
5252
> ### Returns
5353
>
54-
> __element__: _JSX.Element|null_
55-
> __Case__ Component has these properties:
56-
> - _children_: element to render.
57-
> - _when_: condition that if true return _children_, otherwise null.
54+
>
55+
> - __Object__:
56+
> - __Switch__ : _(props:{children:ReactElement<CaseProps>|ReactElement<CaseProps>[], fallback?:ReactNode})=>JSX.Element|null_
57+
> - __Case__ : _(props:{children:ReactNode, when:booleaan|undefined|null})=>JSX.Element|nul_
5858
>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#
2+
3+
4+
## Usage
5+
6+
Memoized implementation of _SwitchCase_ component.
7+
8+
Please visit [SwitchCase component](#/components/SwitchCase) example to see how it works.
9+
10+
11+
12+
13+

0 commit comments

Comments
 (0)