-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
31810b4
commit f333762
Showing
5 changed files
with
153 additions
and
241 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,61 @@ | ||
| # Isomorpic SVG Charts | ||
| ### `isomorphic-svg-charts` | ||
|
|
||
| **Installation**: | ||
| ```bash | ||
| npm install isomorphic-svg-charts | ||
| ``` | ||
|
|
||
| `isomorphic-svg-charts` is a lightweight, environment-agnostic SVG charting library designed to work seamlessly across any JavaScript environment — from server-side rendering in Node.js to React Server Components and client-side apps. With **zero dependencies** and no reliance on the DOM, this library allows you to generate high-quality SVG charts in environments where typical charting libraries like D3 would be too heavyweight. | ||
|
|
||
| This makes it perfect for headless systems, APIs, and server-side applications where you need to render charts without any browser dependencies. | ||
|
|
||
| --- | ||
|
|
||
| ### Why Use This Library? | ||
|
|
||
| - **Zero dependencies**: Keeps your bundle size small and performance fast. | ||
| - **Doesn't require the DOM**: Works seamlessly in server environments. | ||
| - **Render SVG charts in React Server Components**: Perfect for modern frameworks like Next.js. | ||
| - **Amazing TypeScript Developer Experience**: Full TypeScript support for safe, typed development. | ||
|
|
||
| --- | ||
|
|
||
| ### Render Charts In... | ||
|
|
||
| - **React / React Native** | ||
| - **Express.js** or any Node.js server (including SSR) | ||
| - **Headless or server-side systems** (e.g., for generating charts for PDFs, emails, or reports) | ||
| - **Any other JavaScript environment**: Whether in the browser or not, this library works everywhere. | ||
|
|
||
|
|
||
| **Usage Example**: | ||
|
|
||
| ```javascript | ||
| import { SVGBarChart } from 'isomorphic-svg-charts'; | ||
|
|
||
| const data = [ | ||
| { name: "A", value: 30 }, | ||
| { name: "B", value: 80 }, | ||
| { name: "C", value: 45 } | ||
| ]; | ||
|
|
||
| const chart = new SVGBarChart({ | ||
| data, | ||
| apsectRatio: 2, | ||
| padding: 5 | ||
| }) | ||
| .xAxis({ | ||
| height: 5, | ||
| dataKey: "name", | ||
| }) | ||
| .yAxis({ | ||
| width: 10, | ||
| }) | ||
| .cartesianGrid() | ||
| .bar({ dataKey: "value", fill: "#16ef81" }) | ||
| .toString(); | ||
|
|
||
| console.log(chart); // Outputs the SVG chart string | ||
| ``` | ||
|
|
||
| **License**: MIT |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,206 +1,59 @@ | ||
| # Getting Started | ||
|
|
||
| So you're like me and you love Server Actions, but you **need more Zod and TypeScript**! | ||
|
|
||
| ### Why Use This Library? | ||
|
|
||
| * Server action validation with [`zod-form-data`](https://www.npmjs.com/package/zod-form-data) | ||
| * Server error handling | ||
| * Amazing TypeScript DX | ||
| * Doesn't break [`useActionState` progressive enhancement](https://react.dev/reference/rsc/server-actions#progressive-enhancement-with-useactionstate) | ||
| * No dependencies other then `zod`/`zod-form-data` | ||
|
|
||
| ### Why React 19+ is required | ||
|
|
||
| This library is designed to enhance `useActionState`, which requires React 19. Without that, you really won't get much benefit from this library. | ||
|
|
||
| I have only tested with Next.js for now, but the goal is to make this work with React in general. | ||
|
|
||
| ### Documentation | ||
|
|
||
| See [christianjuth.github.io/better-react-server-actions](https://christianjuth.github.io/better-react-server-actions/). | ||
|
|
||
| ### Example | ||
|
|
||
| #### Login Form Example | ||
|
|
||
| * [Try it](https://better-react-server-actions-demo.vercel.app/examples/login-form) | ||
| * [View in docs](https://christianjuth.github.io/better-react-server-actions/examples/login-form) | ||
|
|
||
| ```js | ||
| "use server"; | ||
|
|
||
| import { createActionWithState } from 'better-react-server-actions'; | ||
| import { zfd } from 'zod-form-data'; | ||
| import { z } from 'zod'; | ||
| import { redirect } from 'next/navigation'; | ||
|
|
||
| const EMAIL = '[email protected]'; | ||
| const PASSWORD = 'password'; | ||
|
|
||
| export const login = createActionWithState({ | ||
| formDataSchema: zfd.formData({ | ||
| email: z.string().email(), | ||
| password: zfd.text(), | ||
| }), | ||
| requestHandler: async (prevState, { email, password }) => { | ||
| if (email !== EMAIL || password !== PASSWORD) { | ||
| throw new Error('Invalid email or password'); | ||
| } | ||
|
|
||
| redirect('/examples/success') | ||
| } | ||
| }); | ||
|
|
||
| **Installation**: | ||
| ```bash | ||
| npm install isomorphic-svg-charts | ||
| ``` | ||
|
|
||
| ```jsx | ||
| "use client"; | ||
|
|
||
| import { useActionState } from 'react'; | ||
| import { login } from './action'; | ||
|
|
||
| export default function Page() { | ||
| const [state, action] = useActionState(login, {}); | ||
|
|
||
| const formErrors = state.errors?.formErrors; | ||
|
|
||
| return ( | ||
| <form action={action}> | ||
| <h1>Login</h1> | ||
|
|
||
| {state.errors?.actionErrors && ( | ||
| <span> | ||
| {state.errors.actionErrors.join(', ')} | ||
| </span> | ||
| )} | ||
|
|
||
| <label htmlFor="email">Email:</label> | ||
| <input | ||
| id="email" | ||
| name="email" | ||
| /> | ||
| {formErrors?.email && ( | ||
| <span> | ||
| {formErrors.email.join(', ')} | ||
| </span> | ||
| )} | ||
|
|
||
| <label htmlFor="password">Password:</label> | ||
| <input | ||
| id="password" | ||
| name="password" | ||
| type="password" | ||
| /> | ||
| {formErrors?.password && ( | ||
| <span> | ||
| {formErrors.password.join(', ')} | ||
| </span> | ||
| )} | ||
|
|
||
| <button> | ||
| Login | ||
| </button> | ||
| </form> | ||
| ) | ||
| } | ||
| ``` | ||
| #### Like Button Example | ||
| `isomorphic-svg-charts` is a lightweight, environment-agnostic SVG charting library designed to work seamlessly across any JavaScript environment — from server-side rendering in Node.js to React Server Components and client-side apps. With **zero dependencies** and no reliance on the DOM, this library allows you to generate high-quality SVG charts in environments where typical charting libraries like D3 would be too heavyweight. | ||
|
|
||
| * [Try it](https://better-react-server-actions-demo.vercel.app/examples/like-button) | ||
| * [View in docs](https://christianjuth.github.io/better-react-server-actions/examples/like-button) | ||
| This makes it perfect for headless systems, APIs, and server-side applications where you need to render charts without any browser dependencies. | ||
|
|
||
| ```js | ||
| "use server"; | ||
|
|
||
| import { createActionWithState } from 'better-react-server-actions'; | ||
| import { z } from 'zod'; | ||
|
|
||
| export const login = createActionWithState({ | ||
| stateSchema: z.object({ | ||
| likeId: z.string().optional(), | ||
| }), | ||
| requestHandler: async ({ likeId }) => { | ||
| // Check if user is logged in | ||
| // and redirect to login page if not | ||
|
|
||
| if (likeId) { | ||
| // Delete like via api | ||
| return { | ||
| likeId: undefined, | ||
| } | ||
| } else { | ||
| // Create like via api | ||
| const newLikeId = 'new-like-id'; | ||
| return { | ||
| likeId: newLikeId, | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| ``` | ||
| --- | ||
|
|
||
| ```jsx | ||
| "use client"; | ||
|
|
||
| import { useActionState } from 'react'; | ||
| import { toggleLike } from './action'; | ||
|
|
||
| export default function Page() { | ||
| const [state, action] = useActionState(toggleLike, {}); | ||
|
|
||
| return ( | ||
| <form action={action}> | ||
| <button> | ||
| {state.likeId ? 'Unlike' : 'Like'} | ||
| </button> | ||
| </form> | ||
| ) | ||
| } | ||
| ``` | ||
| #### Increment Counter Example | ||
| * [Try it](https://better-react-server-actions-demo.vercel.app/examples/increment-counter) | ||
| * [View in docs](https://christianjuth.github.io/better-react-server-actions/examples/increment-counter) | ||
| ### Why Use This Library? | ||
|
|
||
| ```js | ||
| "use server"; | ||
|
|
||
| import { createActionWithState } from 'better-react-server-actions'; | ||
| import { z } from 'zod'; | ||
|
|
||
| export const incrementCounter = createActionWithState({ | ||
| stateSchema: z.object({ | ||
| count: z.number().min(0), | ||
| }), | ||
| requestHandler: async ({ count }) => { | ||
| return { | ||
| count: count + 1, | ||
| } | ||
| } | ||
| }); | ||
| - **Zero dependencies**: Keeps your bundle size small and performance fast. | ||
| - **Doesn't require the DOM**: Works seamlessly in server environments. | ||
| - **Render SVG charts in React Server Components**: Perfect for modern frameworks like Next.js. | ||
| - **Amazing TypeScript Developer Experience**: Full TypeScript support for safe, typed development. | ||
|
|
||
| --- | ||
|
|
||
| ### Render Charts In... | ||
|
|
||
| - **React / React Native** | ||
| - **Express.js** or any Node.js server (including SSR) | ||
| - **Headless or server-side systems** (e.g., for generating charts for PDFs, emails, or reports) | ||
| - **Any other JavaScript environment**: Whether in the browser or not, this library works everywhere. | ||
|
|
||
|
|
||
| **Usage Example**: | ||
|
|
||
| ```javascript | ||
| import { SVGBarChart } from 'isomorphic-svg-charts'; | ||
|
|
||
| const data = [ | ||
| { name: "A", value: 30 }, | ||
| { name: "B", value: 80 }, | ||
| { name: "C", value: 45 } | ||
| ]; | ||
|
|
||
| const chart = new SVGBarChart({ | ||
| data, | ||
| apsectRatio: 2, | ||
| padding: 5 | ||
| }) | ||
| .xAxis({ | ||
| height: 5, | ||
| dataKey: "name", | ||
| }) | ||
| .yAxis({ | ||
| width: 10, | ||
| }) | ||
| .cartesianGrid() | ||
| .bar({ dataKey: "value", fill: "#16ef81" }) | ||
| .toString(); | ||
|
|
||
| console.log(chart); // Outputs the SVG chart string | ||
| ``` | ||
|
|
||
| ```jsx | ||
| "use client"; | ||
|
|
||
| import { useActionState } from 'react'; | ||
| import { incrementCounter } from './action'; | ||
|
|
||
| export default function Page() { | ||
| const [state, action] = useActionState(incrementCounter, { | ||
| count: 0, | ||
| }); | ||
|
|
||
| return ( | ||
| <form action={action}> | ||
| <span>Count: {state.count}</span> | ||
| <button> | ||
| Increment | ||
| </button> | ||
| </form> | ||
| ) | ||
| } | ||
| ``` | ||
| **License**: MIT |
Oops, something went wrong.