From c07bdfd4dd1d339fb85fdec460fdc6fa888d3e32 Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Sat, 19 Apr 2025 14:07:51 +0530 Subject: [PATCH 01/14] docs: update details about If section --- README.md | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 231ea4d..b2477c3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # 🚀 classic-react-components -- A Simple React Library of `Utility Components`. -- Write jsx in `maintainable` and `readable` way, and fun too. +## Intro + +Rethinking the way you write JSX. +
@@ -20,10 +22,11 @@ ## Features -- Comes with treeshaking -- Typescript support +- Built in Typescript +- Supports Treeshaking - Small bundle size - Minimal and Easy to use +- Open Source ## Installation @@ -38,6 +41,11 @@ For pnpm users ```bash $ pnpm install classic-react-components ``` +For buns users + +```bash +$ bun install classic-react-components +``` For yarn users @@ -57,15 +65,15 @@ $ yarn add classic-react-components | Prop | Type | Required | Default Value | Description | | --------- | :-------: | :------: | :-----------: | -------------------------------------------------------------------------------------------- | -| condition | any | ❌ | false | Based on evaluation of the condition flag the component will return null or children | -| children | ReactNode | ❌ | null | To render the children | -| suspense | boolean | ❌ | false | Needed to show fallback until its children have finished loading | -| fallback | ReactNode | ❌ | null | Fallback needed to show until the component is loaded fully. Needed for suspensed components | +| condition | any | ❌ | false | Based on evaluation of the condition flag the component will return either null or children | +| children | ReactNode | ❌ | null | To render the children. | +| suspense | boolean | ❌ | false | Used for rendering lazily loaded components | +| fallback | ReactNode | ❌ | null | Used for showing the fallback until the suspensed children have been loaded. | ### Working -- Based on the condition the children are rendered. -- If the condition is true then the childeren will render otherwise it will return null. +- Based on evaulation of the condition flag the children are rendered. +- If the condition is true then it will render the children otherwise null. - For one children @@ -73,7 +81,7 @@ $ yarn add classic-react-components - If condition is false then null gets returned. - For multiple children - - If conndition is true then the first children will rendered. + - If condition is true then the first children will rendered. - Otherwise the all of the children will be rendered excluding the first children. ### Example From 458241ea478c9b3e4cb0aa1b7c69ed5524690953 Mon Sep 17 00:00:00 2001 From: Ashish Prajapati <62009244+Ashish-simpleCoder@users.noreply.github.com> Date: Sat, 19 Apr 2025 18:32:00 +0530 Subject: [PATCH 02/14] docs: add if-else component before and after comparison imgs - Add if-else component before and after comparison imgs in readme --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b2477c3..3846bfd 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,6 @@ Rethinking the way you write JSX. -

@@ -81,8 +80,15 @@ $ yarn add classic-react-components - If condition is false then null gets returned. - For multiple children - - If condition is true then the first children will rendered. + - If condition is true then the first child will be rendered. - Otherwise the all of the children will be rendered excluding the first children. +------ +### Before (Conditional JSX with Ternary operator) +![with-ternary](https://github.com/user-attachments/assets/93ed579a-a1e1-41bc-8351-78a635e3e1f3) + +### After (Conditional JSX with If-Else component) +![with-if-else](https://github.com/user-attachments/assets/ac2518f2-caa6-4b5d-98dd-fcf1e58a1c8b) +------- ### Example From e445fe230b27595cd9c994133aac48cdf7d73f7a Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Sun, 20 Apr 2025 09:14:40 +0530 Subject: [PATCH 03/14] [chore]: enable caching for prettier format script in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c3dd653..1383476 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "type-check": "tsc", "size": "size-limit", "cs": "pnpm changeset", - "format-code": "prettier --write ./src", + "format-code": "prettier --write ./src --cache", "test": "vitest --coverage" }, "peerDependencies": { From 37f4cb5dac58261cc2366accf3b7b39ce0f2067b Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Sun, 20 Apr 2025 09:27:46 +0530 Subject: [PATCH 04/14] [docs]: update readme doc --- README.md | 54 ++++++++++++++++++++++++++---------------------------- 1 file changed, 26 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 3846bfd..db0ad2c 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ For pnpm users ```bash $ pnpm install classic-react-components ``` -For buns users +For bun users ```bash $ bun install classic-react-components @@ -60,28 +60,26 @@ $ yarn add classic-react-components - [For](#for) - [Switch](#switch) -### If +## If | Prop | Type | Required | Default Value | Description | | --------- | :-------: | :------: | :-----------: | -------------------------------------------------------------------------------------------- | -| condition | any | ❌ | false | Based on evaluation of the condition flag the component will return either null or children | -| children | ReactNode | ❌ | null | To render the children. | -| suspense | boolean | ❌ | false | Used for rendering lazily loaded components | +| condition | any | ❌ | false | Based on the evaluation of `condition` prop, either children or null will be rendered | +| children | ReactNode | ❌ | null | Renders the passed children | +| suspense | boolean | ❌ | false | Used for rendering lazily loaded components | | fallback | ReactNode | ❌ | null | Used for showing the fallback until the suspensed children have been loaded. | ### Working - Based on evaulation of the condition flag the children are rendered. - If the condition is true then it will render the children otherwise null. - -- For one children - - - If condition is true then children will be rendered. - - If condition is false then null gets returned. - -- For multiple children +- Working with one child + - If condition is true then child will be rendered. + - If condition is false then null gets rendered. +- Working with children(more than one child) - If condition is true then the first child will be rendered. - - Otherwise the all of the children will be rendered excluding the first children. + - Otherwise the all of the children will be rendered excluding the first child. + ------ ### Before (Conditional JSX with Ternary operator) ![with-ternary](https://github.com/user-attachments/assets/93ed579a-a1e1-41bc-8351-78a635e3e1f3) @@ -90,7 +88,7 @@ $ yarn add classic-react-components ![with-if-else](https://github.com/user-attachments/assets/ac2518f2-caa6-4b5d-98dd-fcf1e58a1c8b) ------- -### Example +### Examples ```tsx import { If } from 'classic-react-components' @@ -120,7 +118,7 @@ export default function YourComponent() { } ``` -### Usage with Suspense +#### Usage with Suspense ```tsx import { If, Then, Else } from 'classic-react-components' @@ -147,7 +145,7 @@ export default function YourComponent() { } ``` -### Then +## Then | Prop | Type | Required | Default Value | Description | | -------- | :-------: | :------: | :-----------: | --------------------------- | @@ -158,7 +156,7 @@ export default function YourComponent() { - It should be used in-conjunction with `If` commponent. - It renders the passed children. -### Example +### Examples ```tsx import { If, Then } from 'classic-react-components' @@ -176,7 +174,7 @@ export default function YourComponent() { } ``` -### Else +## Else | Prop | Type | Required | Default Value | Description | | -------- | :-------: | :------: | :-----------: | --------------------------- | @@ -187,7 +185,7 @@ export default function YourComponent() { - It should be used in-conjunction with `If` commponent. - It renders the passed children. -### Example +### Examples ```tsx import { If, Then, Else } from 'classic-react-components' @@ -208,19 +206,19 @@ export default function YourComponent() { } ``` -### For +## For | Prop | Type | Required | Default Value | Description | | -------- | :-------: | :------: | :-----------: | ---------------------------------------------- | -| data | Array | ❌ | undefined | Needed for mapping | +| data | Array | ❌ | undefined | Used for looping over the data and rendering the children | | children | ReactNode | ❌ | null | Renders the `JSX` returned from child function | ### Working -- Replacement for Array.map(). +- Replacement of `Array.map` method. - Used to iterate over an array of items and renders the `JSX` based on the provided child function. -### Example +### Examples ```tsx import { For } from 'classic-react-components' @@ -243,21 +241,21 @@ export default function YourComponent() { } ``` -### Switch +## Switch | Prop | Type | Required | Default Value | Description | | -------- | :-------: | :------: | :-----------: | ---------------------------------------------------------------- | -| item | any | ❌ | undefined | The value of Switch | -| children | ReactNode | ✅ | - | Renders the children of matched case if found, else default case | +| item | any | ❌ | undefined | The value used for comparing with all of the cases | +| children | ReactNode | ✅ | - | Used for rendering the children of matched case if found, else Default Case's children will be rendered | ### Working - Renders the children of particular matched case for given prop `item(switch value)`. -- If no case matches for given prop `item`, the `Default` case will be rendered. +- If none of cases are matched for given prop `item`, the `Default` case will be rendered. > **Note:** The order of Default Case does not matter. -### Example +### Examples ```tsx import { Switch } from 'classic-react-components' From 6c18d18f638a853c10042876454f0699b11b5dae Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Wed, 23 Apr 2025 20:09:31 +0530 Subject: [PATCH 05/14] [refactor]: add prop type validation in For component - Throw errors for invalid children and data props --- src/lib/components/For/For.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/components/For/For.tsx b/src/lib/components/For/For.tsx index 0824f7c..ca24b2e 100644 --- a/src/lib/components/For/For.tsx +++ b/src/lib/components/For/For.tsx @@ -34,9 +34,13 @@ export default function For({ data?: T }) { if (!data || children === null) return <> + + if(!Array.isArray(data)) { + throw new Error(`Type of data prop must be an array, but got ${typeof data} type.`) + } if (typeof children != 'function') { - throw new Error('Children type must be a function.') + throw new Error(`Type of children prop must be a function but got ${typeof children} type.`) } let arr: JSX.Element[] = [] From cc52bde6c53f169d777195ae8f4cf4602ad1b44f Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Wed, 23 Apr 2025 23:07:19 +0530 Subject: [PATCH 06/14] [test]: add re-render and error handling test case for For component --- src/lib/components/For/For.test.tsx | 45 ++++++++++++++++++++++++++--- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/src/lib/components/For/For.test.tsx b/src/lib/components/For/For.test.tsx index 1c6b860..51749fc 100644 --- a/src/lib/components/For/For.test.tsx +++ b/src/lib/components/For/For.test.tsx @@ -16,20 +16,56 @@ describe('For.tsx', () => { render() }) - it('should throw error if children is not function', () => { + it('should throw error if data is not type of an array', () => { + let data = {} + + // prettier-ignore + // @ts-expect-error + expect(() =>render(

)).toThrowError('Type of data prop must be an array, but got object type.') + + data = 'sdfsdfs' + // prettier-ignore + // @ts-expect-error + expect(() =>render(
)).toThrowError('Type of data prop must be an array, but got string type.') + + data = () => {} + // prettier-ignore + // @ts-expect-error + expect(() =>render(
)).toThrowError('Type of data prop must be an array, but got function type.') + + expect(screen.queryByTestId('child')).not.toBeInTheDocument() + }) + + it('should throw error if children is not type of function', () => { const data = [{ name: 'react' }, { name: 'nextjs' }, { name: 'typescript' }] // prettier-ignore // @ts-expect-error - expect(() =>render(
)).toThrowError('Children type must be a function.') + expect(() =>render(
)).toThrowError('Type of children prop must be a function but got object type.') expect(screen.queryByTestId('child')).not.toBeInTheDocument() }) it('should render all of the children', () => { - const data = [{ name: 'react' }, { name: 'nextjs' }, { name: 'typescript' }] + let data = [{ name: 'react' }, { name: 'nextjs' }, { name: 'typescript' }] + + const { rerender } = render( + + {(item, i) => ( +
+ {item.name} +
+ )} + + ) + expect(screen.queryByTestId('react')).toBeInTheDocument() + expect(screen.queryByTestId('nextjs')).toBeInTheDocument() + expect(screen.queryByTestId('typescript')).toBeInTheDocument() + + // re-render with new data + data = [{ name: 'react' }, { name: 'nextjs' }, { name: 'vuejs' }, { name: 'typescript' }] - render( + rerender( {(item, i) => (
@@ -40,6 +76,7 @@ describe('For.tsx', () => { ) expect(screen.queryByTestId('react')).toBeInTheDocument() expect(screen.queryByTestId('nextjs')).toBeInTheDocument() + expect(screen.queryByTestId('vuejs')).toBeInTheDocument() expect(screen.queryByTestId('typescript')).toBeInTheDocument() }) }) From 05a0fa089a03f965b941c9f7e6983edd88dbc763 Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Wed, 23 Apr 2025 23:09:47 +0530 Subject: [PATCH 07/14] [perf]: create fixed size array and remove useless type conversion for array.length in For component - create fixed size array and remove useless type conversion for array.length in For component for rendering the children --- src/lib/components/For/For.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/lib/components/For/For.tsx b/src/lib/components/For/For.tsx index ca24b2e..74cee6a 100644 --- a/src/lib/components/For/For.tsx +++ b/src/lib/components/For/For.tsx @@ -34,8 +34,8 @@ export default function For({ data?: T }) { if (!data || children === null) return <> - - if(!Array.isArray(data)) { + + if (!Array.isArray(data)) { throw new Error(`Type of data prop must be an array, but got ${typeof data} type.`) } @@ -43,10 +43,9 @@ export default function For({ throw new Error(`Type of children prop must be a function but got ${typeof children} type.`) } - let arr: JSX.Element[] = [] - for (let i = 0; i < Number(data.length); i++) { - const element = children(data[i], i) - arr.push(element) + const arr: JSX.Element[] = new Array(data.length) + for (let i = 0; i < data.length; i++) { + arr.push(children(data[i], i)) } return <>{arr} From 111520074eedbbaed51c3099dbc8e47b65ea5c08 Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Wed, 23 Apr 2025 23:19:41 +0530 Subject: [PATCH 08/14] [refactor]: update the type definition for data prop in For component --- src/lib/components/For/For.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/For/For.tsx b/src/lib/components/For/For.tsx index 74cee6a..1febc31 100644 --- a/src/lib/components/For/For.tsx +++ b/src/lib/components/For/For.tsx @@ -26,7 +26,7 @@ import React from 'react' ) } */ -export default function For({ +export default function For({ data, children = null, }: { From 5033bcf10670bebced13abbffc099aa521c6d049 Mon Sep 17 00:00:00 2001 From: Ashish Prajapati <62009244+Ashish-simpleCoder@users.noreply.github.com> Date: Thu, 24 Apr 2025 21:08:14 +0530 Subject: [PATCH 09/14] Add comparison example images - Add comparison example images for `For`, and `Switch` components. --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index db0ad2c..0fe08ca 100644 --- a/README.md +++ b/README.md @@ -218,6 +218,14 @@ export default function YourComponent() { - Replacement of `Array.map` method. - Used to iterate over an array of items and renders the `JSX` based on the provided child function. +------ +### Before (Looping over data with Array.map method) +![for-without](https://github.com/user-attachments/assets/2b8a944b-df94-42af-832b-2a6358b9cc9d) + +### After (Looping over data with For component) +![for-with](https://github.com/user-attachments/assets/c93bf0ea-becf-489e-a1e1-86abc2ea8cd4) +------- + ### Examples ```tsx @@ -255,6 +263,14 @@ export default function YourComponent() { > **Note:** The order of Default Case does not matter. +------ +### Before (Switching component with different cases with Object switch logic) +![switch-without](https://github.com/user-attachments/assets/ba190cc5-f8d7-466e-96a1-d60e658e2401) + +### After (Switching component with different cases with Switch component) +![switch-with](https://github.com/user-attachments/assets/68a72560-5c92-4a71-9e30-f1b3a294d9c3) +------- + ### Examples ```tsx From bc546b715640aa37ddc6ad6a3ff40d2fec41094d Mon Sep 17 00:00:00 2001 From: Ashish Prajapati <62009244+Ashish-simpleCoder@users.noreply.github.com> Date: Sun, 27 Apr 2025 10:48:55 +0530 Subject: [PATCH 10/14] Update images for For component example - Update images for For component example --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0fe08ca..90120cc 100644 --- a/README.md +++ b/README.md @@ -220,10 +220,10 @@ export default function YourComponent() { ------ ### Before (Looping over data with Array.map method) -![for-without](https://github.com/user-attachments/assets/2b8a944b-df94-42af-832b-2a6358b9cc9d) +![for-without](https://github.com/user-attachments/assets/5144092c-f65a-4e78-8c40-ecc51d6b4ff0) ### After (Looping over data with For component) -![for-with](https://github.com/user-attachments/assets/c93bf0ea-becf-489e-a1e1-86abc2ea8cd4) +![for-with](https://github.com/user-attachments/assets/21e1fcf6-5493-4c5e-a2d4-97282ca5470c) ------- ### Examples From 1a80fc049c6c058e0fe5bfb3f12ed9ff95e40719 Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Wed, 30 Apr 2025 22:31:13 +0530 Subject: [PATCH 11/14] [docs]: add replacement explames for all component api in readme --- README.md | 116 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 92 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 90120cc..067dd03 100644 --- a/README.md +++ b/README.md @@ -80,14 +80,6 @@ $ yarn add classic-react-components - If condition is true then the first child will be rendered. - Otherwise the all of the children will be rendered excluding the first child. ------- -### Before (Conditional JSX with Ternary operator) -![with-ternary](https://github.com/user-attachments/assets/93ed579a-a1e1-41bc-8351-78a635e3e1f3) - -### After (Conditional JSX with If-Else component) -![with-if-else](https://github.com/user-attachments/assets/ac2518f2-caa6-4b5d-98dd-fcf1e58a1c8b) -------- - ### Examples ```tsx @@ -145,6 +137,34 @@ export default function YourComponent() { } ``` + +### Replacing ternary and short-circuit + +```tsx + const show = true // some state, which will be toggled to true|false + + // ❌ ternary operator + { show ?

main content

:

fallback

} + // ❌ short circuit + { show &&

main content

} + + + // ✅ replace ternary + + +

main content

+ + +

fallback

+ + + + // ✅ replace short circuit + +

main content

+ +``` + ## Then | Prop | Type | Required | Default Value | Description | @@ -215,16 +235,9 @@ export default function YourComponent() { ### Working -- Replacement of `Array.map` method. +- Replacement of `Array.map` method used for rendering the list in jsx. - Used to iterate over an array of items and renders the `JSX` based on the provided child function. ------- -### Before (Looping over data with Array.map method) -![for-without](https://github.com/user-attachments/assets/5144092c-f65a-4e78-8c40-ecc51d6b4ff0) - -### After (Looping over data with For component) -![for-with](https://github.com/user-attachments/assets/21e1fcf6-5493-4c5e-a2d4-97282ca5470c) -------- ### Examples @@ -249,6 +262,26 @@ export default function YourComponent() { } ``` +### Replacing Array.map used in jsx for rendering the list + +```tsx + const data = [1,2,3] // some async data + + // ❌ using Array.map to render jsx + {data.length > 0 && data.map((item, index) => { + return {item.course} + })} + + + // ✅ using For component to render jsx without needing to check if data is defined or not + + {(item, index) => { + return {item.course} + }} + +``` + + ## Switch | Prop | Type | Required | Default Value | Description | @@ -263,14 +296,6 @@ export default function YourComponent() { > **Note:** The order of Default Case does not matter. ------- -### Before (Switching component with different cases with Object switch logic) -![switch-without](https://github.com/user-attachments/assets/ba190cc5-f8d7-466e-96a1-d60e658e2401) - -### After (Switching component with different cases with Switch component) -![switch-with](https://github.com/user-attachments/assets/68a72560-5c92-4a71-9e30-f1b3a294d9c3) -------- - ### Examples ```tsx @@ -300,4 +325,47 @@ export default function YourComponent({ item }: { item: 'coding' | 'sleep' }) {
) } + +``` +### Replacing object switching for rendering the jsx +```tsx + const item: "sleep"|"coding" = "sleep" + + // ❌ using old object switching + // first define seperate object and match the case manually and can not define fallback case here at all + const itemSwitches = { + "coding":
coing-case
, + "sleep":
sleep-case
, + } + const MatchedCase = itemSwitches(item) ??
fallback
// manually giving fallback + + // render in the jsx + {MatchedCase} + + + + // ✅ using Switch component + + // much better, we do not have to lookup for the switch logic and jumping between states and jsx unlike with Object switching + + // it support default case if no case is matched. we can not do it in one plase with object switching + + // it is typesafe + + {({ Case, Default }) => { + return ( + <> + +
coing-case
+ + +
sleep-case
+ + +
this is default case
+ + + ) + }} + ``` From 5de88664fb6f01e0ee2f62a5bde7fa9600b1f7c0 Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Thu, 1 May 2025 21:34:08 +0530 Subject: [PATCH 12/14] [refactor]: update logic for rendering the child of switch component and update tests --- src/lib/components/Switch/Switch.test.tsx | 11 +-------- src/lib/components/Switch/Switch.tsx | 29 +++++++++++------------ 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/src/lib/components/Switch/Switch.test.tsx b/src/lib/components/Switch/Switch.test.tsx index 1bf3c54..4d0d593 100644 --- a/src/lib/components/Switch/Switch.test.tsx +++ b/src/lib/components/Switch/Switch.test.tsx @@ -148,12 +148,9 @@ describe('Switch', () => { expect(screen.queryByTestId('default')).toBeInTheDocument() }) - it('should console warning for multiple Default case', () => { + it('should only render first number of Default case, if there are multiple Default cases are passed', () => { let item = 'awesome' as 'coding' | 'sleep' | 'awesome' - const consoleFn = vi.fn(() => {}) - const consoleLogMock = vi.spyOn(console, 'warn').mockImplementation(consoleFn) - render( {({ Case, Default }) => { @@ -180,12 +177,6 @@ describe('Switch', () => { expect(screen.queryByTestId('sleep')).not.toBeInTheDocument() expect(screen.queryByTestId('default')).toBeInTheDocument() expect(screen.queryByTestId('default-2')).not.toBeInTheDocument() - - expect(consoleFn).toBeCalledTimes(1) - expect(consoleFn).toBeCalledWith('You can not use multiple Default-Case inside Switch') - - expect(consoleLogMock).toBeCalledTimes(1) - expect(consoleLogMock).toBeCalledWith('You can not use multiple Default-Case inside Switch') }) it('should console warning if used HtmlElement or any Component inside Switch', () => { diff --git a/src/lib/components/Switch/Switch.tsx b/src/lib/components/Switch/Switch.tsx index 16d4ffb..dcef0c8 100644 --- a/src/lib/components/Switch/Switch.tsx +++ b/src/lib/components/Switch/Switch.tsx @@ -1,5 +1,7 @@ +'use client' + import type { ReactNode } from 'react' -import React, { Children, useRef } from 'react' +import React, { useRef } from 'react' type SwitchProps = { children: ({ @@ -65,10 +67,7 @@ export default function Switch({ children, item }: SwitchProps) { const { props } = children({ Case: functionsRefObj.current.Case, Default: functionsRefObj.current.Default }) let new_child: JSX.Element | null = null - const defaultCase = { - present: false, - index: 0, - } + let defaultCase: JSX.Element | null = null // handling case for when only one children is passed if ( @@ -89,31 +88,31 @@ export default function Switch({ children, item }: SwitchProps) { } if ('children' in props && Array.isArray(props.children) && props.children.length > 0) { - Children.forEach(props.children, (child: JSX.Element, i) => { + for (let i = 0; i < props.children.length; i++) { + const child: JSX.Element = props.children[i] + if (!child || (child?.type?.name != 'Default' && child?.type?.name != 'Case')) { console.warn('You must use Default or Case component inside Switch') + continue } // check if it is case if (child?.type?.name == 'Case') { // if passed prop is equal to the component's prop, then assign it to state if (child?.props?.value === item) { new_child = child - return + break } } // check if case is present or not if (child?.type?.name == 'Default') { - if (defaultCase.present) { - console.warn('You can not use multiple Default-Case inside Switch') - return + if (!defaultCase) { + defaultCase = child } - defaultCase.present = true - defaultCase.index = i } - }) + } // if no-other cases match and case is present, then assign the to the state - if (!new_child && defaultCase.present) { - new_child = props?.children[defaultCase.index] + if (!new_child && defaultCase) { + new_child = defaultCase } } From 8917332bc766ef04915ac84cab3fccbbedce18f0 Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Thu, 1 May 2025 21:34:58 +0530 Subject: [PATCH 13/14] [chore]: update vitest config for file exntesion to include in test --- vitest.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vitest.config.ts b/vitest.config.ts index 2f50039..8dc8978 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -13,7 +13,7 @@ export default defineConfig({ clean: true, all: false, }, - include: ['./src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + include: ['./src/**/*.{test,spec}.{ts,tsx}'], exclude: [ '**/node_modules/**', '**/dist/**', From 434022c5b87d9d6548e898b33fbd786b47b7955d Mon Sep 17 00:00:00 2001 From: Ashish-simpleCoder Date: Thu, 1 May 2025 22:31:24 +0530 Subject: [PATCH 14/14] [release]: bump up minor version with new docs changes --- .changeset/old-crabs-applaud.md | 6 ++++++ README.md | 6 +++++- 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/old-crabs-applaud.md diff --git a/.changeset/old-crabs-applaud.md b/.changeset/old-crabs-applaud.md new file mode 100644 index 0000000..94e3840 --- /dev/null +++ b/.changeset/old-crabs-applaud.md @@ -0,0 +1,6 @@ +--- +'classic-react-components': minor +--- + +- [docs]: update examples and add more descrition of the components +- [refactor]: use normal for loop to iterate over array in Switch component instead of Children.map function diff --git a/README.md b/README.md index 067dd03..aace6d9 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,11 @@ ## Intro -Rethinking the way you write JSX. +- Simplifying the way you write conditional and loops in JSX. + +- Adding `If-Else` like syntax for conditional jsx. +- Adding `For` component to map over the data within jsx. +- Adding `Switch-Case` to your jsx.