[ { "path": ".github/workflows/chromatic.yml", "content": "name: \"Chromatic\"\n\non: push\n\njobs:\n chromatic:\n name: Run Chromatic\n runs-on: ubuntu-latest\n steps:\n - name: Checkout code\n uses: actions/checkout@v4\n with:\n fetch-depth: 0\n - uses: actions/setup-node@v4\n with:\n node-version: 22.12.0\n - name: Install dependencies\n # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.\n run: npm ci\n - name: Run Chromatic\n uses: chromaui/action@latest\n env:\n # Expose the secret so Vite/Storybook can replace `import.meta.env.STORYBOOK_CODESANDBOX_TOKEN`\n STORYBOOK_CODESANDBOX_TOKEN: ${{ secrets.STORYBOOK_CODESANDBOX_TOKEN }}\n with:\n # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret\n projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}\n buildScriptName: build-storybook" }, { "path": ".gitignore", "content": "# Dependencies\nnode_modules/\n\n# Build output\ndist/\n\n# Logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# Misc\n.DS_Store\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Vitest cache and coverage\n.vitest_cache/\ncoverage/\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\njspm_packages/\n\n# Snowpack dependency directory (https://snowpack.dev/)\nweb_modules/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarnclean\n\n# parcel-bundler cache files\n.cache\n.parcel-cache\n\n# Next.js build output\n.next\nout\n\n# Nuxt.js build output\n.nuxt\n\n# Gatsby files\n.cache/\n# Comment in the public line in if your project uses Gatsby and not Next.js\n# https://nextjs.org/blog/next-9-1#unzipping-automatic-routing-in-pages-now-supports-dynamic-routing\n# public\n\n# vuepress build output\n.vuepress/dist\n\n# Docusaurus build output\n.docusaurus\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n\n# Stores VSCode versions used for testing VSCode extensions\n.vscode-test\n\n# Gatsby Supabase cache files\n.gatsby-supabase-cache \n*storybook.log\nstorybook-static/\n" }, { "path": ".npmignore", "content": "# Source files\nsrc/\n\n# Config files\n.eslintignore\n.eslintrc.js\n.prettierrc.js\n.prettierignore\n\n# Tests\n__tests__/\nsrc/**/*.test.ts\nsrc/**/*.test.tsx\nvitest.config.ts\nvitest.setup.ts\ncoverage/\n\n# Storybook\n.storybook/\nstories/\nstorybook-static/\n\n# Other\n.DS_Store\n*.log\n\n# Git\n.git/\n.gitignore\n.env\n\n# Other " }, { "path": ".storybook/Theme.js", "content": "import { create } from '@storybook/theming';\n \nexport default create({\n base: 'dark',\n brandTitle: 'RenderHooks',\n brandUrl: 'https://github.com/brandonmcconnell/render-hooks',\n brandImage: 'https://github.com/brandonmcconnell/render-hooks/blob/main/.github/render-hooks-logo_full.png?raw=true',\n // brandTarget: '_self',\n});" }, { "path": ".storybook/main.ts", "content": "import type { StorybookConfig } from '@storybook/react-vite';\n\nconst config: StorybookConfig = {\n \"stories\": [\n \"../src/**/*.mdx\",\n \"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)\"\n ],\n \"addons\": [\n \"@storybook/addon-essentials\",\n \"@chromatic-com/storybook\",\n \"@codesandbox/storybook-addon\"\n ],\n \"framework\": {\n \"name\": \"@storybook/react-vite\",\n \"options\": {}\n },\n \"typescript\": {\n \"reactDocgen\": \"react-docgen-typescript\",\n \"reactDocgenTypescriptOptions\": {\n // You might need to specify compilerOptions here if they differ from your main tsconfig\n // For example, to ensure JSX is handled correctly:\n // compilerOptions: {\n // jsx: \"react-jsx\", // or \"react\"\n // },\n // Filter props from node_modules (optional, but good practice)\n propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),\n // If your components are not directly in `src` or you have a specific tsconfig for app compilation:\n // tsconfigPath: \"./tsconfig.app.json\", // Or your relevant tsconfig\n }\n }\n};\nexport default config;" }, { "path": ".storybook/manager.ts", "content": "import { addons } from '@storybook/manager-api';\nimport theme from './Theme';\nimport './storybook.css';\n \naddons.setConfig({\n theme,\n});" }, { "path": ".storybook/preview.ts", "content": "import type { Preview } from '@storybook/react'\nimport theme from './Theme'\nimport './storybook.css';\n\nconst preview: Preview = {\n parameters: {\n docs: {\n theme,\n },\n codesandbox: {\n /**\n * @required\n * Workspace API key from codesandbox.io/t/permissions.\n * This sandbox is created inside the given workspace\n * and can be shared with team members.\n */\n // @ts-expect-error (2339) Property 'env' does not exist on type 'ImportMeta'.\n apiToken: import.meta.env.STORYBOOK_CODESANDBOX_TOKEN,\n \n /**\n * @required\n * Dependencies list to be installed in the sandbox.\n *\n * @note You cannot use local modules or packages since\n * this story runs in an isolated environment (sandbox)\n * inside CodeSandbox. As such, the sandbox doesn't have\n * access to your file system.\n *\n * Example:\n */\n dependencies: {\n \"render-hooks\": \"latest\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n },\n \n /**\n * @required\n * CodeSandbox will try to import all components by default from\n * the given package, in case `mapComponent` property is not provided.\n *\n * This property is useful when your components imports are predictable\n * and come from a single package and entry point.\n */\n fallbackImport: \"render-hooks\",\n },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n};\n\nexport default preview;" }, { "path": ".storybook/storybook.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');\n\nbody {\n font-family: \"Inter\", sans-serif;\n font-optical-sizing: auto;\n font-weight: 400;\n font-style: normal;\n}\n\n.sidebar-header a[title] img[class] {\n width: 220px !important;\n max-width: 220px !important;\n height: auto !important;\n}\n\n[data-story-block] > [data-name] {\n padding: 24px;\n}\n\n.docs-story {\n color: #eee;\n}" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2025 Brandon McConnell\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "
\"Anchors
\n\n
\nRenderHooks (render-hooks)
\nUse hooks inline in React/JSX\n

\n\nRenderHooks lets you place hooks right next to the markup that needs them—no wrapper components, no breaking the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks), and zero boilerplate, even when you supply your own custom hooks.\n\n---\n\n- [📖 How it works](#-how-it-works)\n- [✨ Features](#-features)\n- [🚀 Install](#-install)\n- [⚡ Quick start](#-quick-start)\n- [🧩 API](#-api)\n- [📚 Examples by hook](#-examples-by-hook)\n - [`useState` (React ≥ 16.8)](#usestatereact--168)\n - [`useReducer` (React ≥ 16.8)](#usereducerreact--168)\n - [`useCallback` (React ≥ 16.8)](#usecallbackreact--168)\n - [`useContext` (React ≥ 16.8)](#usecontextreact--168)\n - [`useMemo` (React ≥ 16.8)](#usememoreact--168)\n - [`useEffect` (React ≥ 16.8)](#useeffectreact--168)\n - [`useLayoutEffect` (React ≥ 16.8)](#uselayouteffectreact--168)\n - [`useImperativeHandle` (React ≥ 16.8)](#useimperativehandlereact--168)\n - [`useRef` (React ≥ 16.8)](#userefreact--168)\n - [`useInsertionEffect` (React ≥ 18)](#useinsertioneffectreact--18)\n - [`useId` (React ≥ 18)](#useidreact--18)\n - [`useSyncExternalStore` (React ≥ 18)](#usesyncexternalstorereact--18)\n - [`useDeferredValue` (React ≥ 18)](#usedeferredvaluereact--18)\n - [`useTransition` (React ≥ 18)](#usetransitionreact--18)\n - [`useActionState` (React ≥ 19, experimental in 18)](#useactionstatereact--19-experimental-in-18)\n - [`useFormStatus` (React-DOM ≥ 19)](#useformstatusreact-dom--19)\n - [`use` (awaitable hook, React ≥ 19)](#useawaitable-hook-react--19)\n- [🛠 Custom hooks](#-custom-hooks)\n- [🧱 Nesting hooks](#-nesting-hooks)\n- [🤝 Collaboration](#-collaboration)\n - [How to contribute](#how-to-contribute)\n\n---\n\n## 📖 How it works\n\n1. At runtime RenderHooks scans the installed `react` and `react-dom`\n modules and wraps every export whose name starts with **`use`**.\n2. A TypeScript mapped type reproduces *exactly* the same keys from the typings,\n so autocompletion never lies.\n3. The callback you give to `` (commonly aliased, e.g. `<$>`) is executed during that same render\n pass, keeping the Rules of Hooks intact.\n4. Custom hooks are merged in once—stable reference, fully typed.\n\n---\n\n## ✨ Features\n\n| ✔︎ | Description |\n|----|-------------|\n| **One element** | `<$>` merges every `use*` hook exposed by the consumer's version of **`react` + `react-dom`** into a single helpers object. |\n| **Version-adaptive** | Only the hooks that exist in *your* React build appear. Upgrade React → new hooks show up automatically. |\n| **Custom-hook friendly** | Pass an object of your own hooks once—full IntelliSense inside the render callback. |\n| **100 % type-safe** | No `any`, no `unknown`. Generic signatures flow through the helpers object. |\n| **Tiny runtime** | Just an object merge—`<$>` renders nothing to the DOM. |\n\n---\n\n## 🚀 Install\n\n```bash\nnpm install render-hooks # or yarn / pnpm / bun\n```\n\nRenderHooks lists **`react`** and **`react-dom`** as peer dependencies, so it\nalways tracks *your* versions.\n\n---\n\n## ⚡ Quick start\n\n```tsx\nimport $ from 'render-hooks';\n\nexport function Counter() {\n return (\n <$>\n {({ useState }) => {\n const [n, set] = useState(0);\n return ;\n }}\n \n );\n}\n```\n\nThe hook runs during the same render, so the Rules of Hooks are upheld.\n\n---\n\n## 🧩 API\n\n| Prop | Type | Description |\n|-------------|----------------------------------------------------|-------------|\n| `hooks` | `Record unknown>` | (optional) custom hooks to expose. |\n| `children` | `(helpers) ⇒ ReactNode` | Render callback receiving **all** built-in hooks available in your React version **plus** the custom hooks you supplied. |\n\n---\n\n## 📚 Examples by hook\n\nBelow is a **minimal, practical snippet for every built-in hook**. \nEach header lists the **minimum React (or React-DOM) version** required—if your\nproject uses an older version, that hook simply won't appear in the helpers\nobject.\n\n> All snippets assume \n> `import $ from 'render-hooks';`\n\n---\n\n### `useState` (React ≥ 16.8)\n\n```tsx\nexport function UseStateExample() {\n return (\n <$>\n {({ useState }) => {\n const [value, set] = useState('');\n return set(e.target.value)} />;\n }}\n \n );\n}\n```\n\n---\n\n### `useReducer` (React ≥ 16.8)\n\n```tsx\nexport function UseReducerExample() {\n return (\n <$>\n {({ useReducer }) => {\n const [count, dispatch] = useReducer(\n (s: number, a: 'inc' | 'dec') => (a === 'inc' ? s + 1 : s - 1),\n 0,\n );\n return (\n <>\n \n {count}\n \n \n );\n }}\n \n );\n}\n```\n\n---\n\n### `useCallback` (React ≥ 16.8)\n\n```tsx\nexport function UseCallbackExample() {\n return (\n <$>\n {({ useState, useCallback }) => {\n const [txt, setTxt] = useState('');\n const onChange = useCallback(\n (e: React.ChangeEvent) => setTxt(e.target.value),\n [],\n );\n return ;\n }}\n \n );\n}\n```\n\n---\n\n### `useContext` (React ≥ 16.8)\n\n```tsx\nconst ThemeCtx = React.createContext<'light' | 'dark'>('light');\n\nexport function UseContextExample() {\n return (\n \n <$>\n {({ useContext }) =>

Theme: {useContext(ThemeCtx)}

}\n \n \n );\n}\n```\n\n---\n\n### `useMemo` (React ≥ 16.8)\n\n```tsx\nexport function UseMemoExample() {\n return (\n <$>\n {({ useState, useMemo }) => {\n const [n, setN] = useState(25);\n const fib = useMemo(() => {\n const f = (x: number): number =>\n x <= 1 ? x : f(x - 1) + f(x - 2);\n return f(n);\n }, [n]);\n return (\n <>\n setN(+e.target.value)}\n />\n

Fib({n}) = {fib}

\n \n );\n }}\n \n );\n}\n```\n\n---\n\n### `useEffect` (React ≥ 16.8)\n\n```tsx\nexport function UseEffectExample() {\n return (\n <$>\n {({ useState, useEffect }) => {\n const [time, setTime] = useState('');\n useEffect(() => {\n const id = setInterval(\n () => setTime(new Date().toLocaleTimeString()),\n 1000,\n );\n return () => clearInterval(id);\n }, []);\n return

{time}

;\n }}\n \n );\n}\n```\n\n---\n\n### `useLayoutEffect` (React ≥ 16.8)\n\n```tsx\nexport function UseLayoutEffectExample() {\n return (\n <$>\n {({ useRef, useLayoutEffect }) => {\n const box = useRef(null);\n useLayoutEffect(() => {\n box.current!.style.background = '#ffd54f';\n }, []);\n return
highlighted after layout
;\n }}\n \n );\n}\n```\n\n---\n\n### `useImperativeHandle` (React ≥ 16.8)\n\n```tsx\nconst Fancy = React.forwardRef((_, ref) => (\n <$>\n {({ useRef, useImperativeHandle }) => {\n const local = useRef(null);\n useImperativeHandle(ref, () => ({ focus: () => local.current?.focus() }));\n return ;\n }}\n \n));\n\nexport function UseImperativeHandleExample() {\n const ref = React.useRef<{ focus: () => void }>(null);\n return (\n <>\n \n \n \n );\n}\n```\n\n---\n\n### `useRef` (React ≥ 16.8)\n\n```tsx\nexport function UseRefExample() {\n return (\n <$>\n {({ useRef }) => {\n const input = useRef(null);\n return (\n <>\n \n \n \n );\n }}\n \n );\n}\n```\n\n---\n\n### `useInsertionEffect` (React ≥ 18)\n\n```tsx\nexport function UseInsertionEffectExample() {\n return (\n <$>\n {({ useInsertionEffect }) => {\n useInsertionEffect(() => {\n const style = document.createElement('style');\n style.textContent = `.flash{animation:flash 1s steps(2) infinite;}\n @keyframes flash{to{opacity:.2}}`;\n document.head.append(style);\n return () => style.remove();\n }, []);\n return

flashing text

;\n }}\n \n );\n}\n```\n\n---\n\n### `useId` (React ≥ 18)\n\n```tsx\nexport function UseIdExample() {\n return (\n <$>\n {({ useId, useState }) => {\n const id = useId();\n const [v, set] = useState('');\n return (\n <>\n \n set(e.target.value)} />\n \n );\n }}\n \n );\n}\n```\n\n---\n\n### `useSyncExternalStore` (React ≥ 18)\n\n```tsx\nexport function UseSyncExternalStoreExample() {\n return (\n <$>\n {({ useSyncExternalStore }) => {\n const width = useSyncExternalStore(\n (cb) => {\n window.addEventListener('resize', cb);\n return () => window.removeEventListener('resize', cb);\n },\n () => window.innerWidth,\n );\n return

width: {width}px

;\n }}\n \n );\n}\n```\n\n---\n\n### `useDeferredValue` (React ≥ 18)\n\n```tsx\nexport function UseDeferredValueExample() {\n return (\n <$>\n {({ useState, useDeferredValue }) => {\n const [text, setText] = useState('');\n const deferred = useDeferredValue(text);\n return (\n <>\n setText(e.target.value)} />\n

deferred: {deferred}

\n \n );\n }}\n \n );\n}\n```\n\n---\n\n### `useTransition` (React ≥ 18)\n\n```tsx\nexport function UseTransitionExample() {\n return (\n <$>\n {({ useState, useTransition }) => {\n const [list, setList] = useState([]);\n const [pending, start] = useTransition();\n const filter = (e: React.ChangeEvent) => {\n const q = e.target.value;\n start(() =>\n setList(\n Array.from({ length: 5_000 }, (_, i) => `Item ${i}`).filter((x) =>\n x.includes(q),\n ),\n ),\n );\n };\n return (\n <>\n \n {pending &&

updating…

}\n

{list.length} items

\n \n );\n }}\n \n );\n}\n```\n\n---\n\n### `useActionState` (React ≥ 19, experimental in 18)\n\n```tsx\nexport function UseActionStateExample() {\n return (\n <$>\n {({ useActionState }) => {\n const [msg, submit, pending] = useActionState(\n async (_prev: string, data: FormData) => {\n await new Promise((r) => setTimeout(r, 400));\n return data.get('text') as string;\n },\n '',\n );\n return (\n
\n \n \n {msg &&

You said: {msg}

}\n
\n );\n }}\n \n );\n}\n```\n\n---\n\n### `useFormStatus` (React-DOM ≥ 19)\n\n```tsx\nexport function UseFormStatusExample() {\n return (\n <$>\n {({ useState, useFormStatus }) => {\n const [done, setDone] = useState(false);\n const { pending } = useFormStatus();\n\n const action = async () => {\n await new Promise((r) => setTimeout(r, 400));\n setDone(true);\n };\n\n return (\n
\n \n {done &&

saved!

}\n
\n );\n }}\n \n );\n}\n```\n\n---\n\n### `use` (awaitable hook, React ≥ 19)\n\n```tsx\nfunction fetchQuote() {\n return new Promise((r) =>\n setTimeout(() => r('\"Ship early, ship often.\"'), 800),\n );\n}\n\nexport function UseAwaitExample() {\n return (\n <$>\n {({ use }) =>
{use(fetchQuote())}
}\n \n );\n}\n```\n\n---\n\n## 🛠 Custom hooks\n\nInject any custom hooks once via the `hooks` prop:\n\n```tsx\nimport $ from 'render-hooks';\nimport { useToggle, useDebounce } from './myHooks';\n\nexport function Example() {\n return (\n <$ hooks={{ useToggle, useDebounce }}>\n {({ useToggle, useDebounce }) => {\n const [open, toggle] = useToggle(false);\n const dOpen = useDebounce(open, 250);\n return (\n <>\n \n

debounced: {dOpen.toString()}

\n \n );\n }}\n \n );\n}\n```\n\n---\n\n## 🧱 Nesting hooks\n\nYou can nest `RenderHooks` (`$`) as deeply as you need. Each instance provides its own fresh set of hooks, scoped to its render callback. This is particularly useful for managing item-specific state within loops, where you'd otherwise need to create separate components.\n\nHere's an example where RenderHooks is used to manage state for both levels of a nested list directly within the `.map()` callbacks, and a child can affect a parent RenderHook's state:\n\n```tsx\nimport React from 'react'; // Needed for useState, useTransition in this example\nimport $ from 'render-hooks';\n\ntype Category = {\n id: number;\n name: string;\n posts: { id: number; title: string }[];\n};\n\nconst data: Category[] = [\n {\n id: 1,\n name: 'Tech',\n posts: [{ id: 11, title: 'Next-gen CSS' }],\n },\n {\n id: 2,\n name: 'Life',\n posts: [\n { id: 21, title: 'Minimalism' },\n { id: 22, title: 'Travel hacks' },\n ],\n },\n];\n\nexport function NestedExample() {\n return (\n
    \n {data.map((cat) => (\n /* ───── 1️⃣ Outer RenderHooks for each category row ───── */\n <$ key={cat.id}>\n {({ useState, useTransition }) => {\n const [expanded, setExpanded] = useState(false);\n const [likes, setLikes] = useState(0); \n const [isPending, startTransition] = useTransition();\n\n return (\n
  • \n \n\n {expanded && (\n
      \n {cat.posts.map((post) => (\n /* ───── 2️⃣ Inner RenderHooks per post row ───── */\n <$ key={post.id}>\n {({ useState: useItemState }) => {\n const [liked, setItemLiked] = useItemState(false);\n\n const toggleLike = () => {\n setItemLiked((prev) => {\n // 🔄 Update outer «likes» using startTransition from the parent RenderHooks\n const next = !prev;\n startTransition(() => {\n setLikes((c) => c + (next ? 1 : -1));\n });\n return next;\n });\n };\n\n return (\n
    • \n {post.title}{' '}\n \n
      • \n );\n }}\n \n ))}\n
    \n )}\n
    • \n );\n }}\n \n ))}\n
\n );\n}\n```\n\nIn this example:\n- The main `NestedExample` component does not use RenderHooks directly.\n- The **first `.map()`** iterates through `data`. Inside this map, `<$>` is used to give each `category` its own states: `expanded` and `likes`. It also gets `useTransition` to acquire `startTransition`.\n- The **second, inner `.map()`** iterates through `cat.posts`. Inside *this* map, another, nested `<$>` is used to give each `post` its own independent `liked` state.\n- Crucially, when a post's `toggleLike` function is called, it updates its local `liked` state and then calls `startTransition` (obtained from the parent category's RenderHooks scope) to wrap the update to the parent's `likes` state. \n\nThis demonstrates not only nesting for independent state but also how functions and transition control from a parent RenderHooks instance can be utilized by children that also use RenderHooks, facilitating robust cross-scope communication.\n\n> [!IMPORTANT]\n> **Note on `startTransition`**: Using `startTransition` here is important. When an interaction (like clicking \"Like\") in a nested `RenderHooks` instance needs to update state managed by a parent `RenderHooks` instance, React might issue a warning about \"updating one component while rendering another\" if the update is synchronous. Wrapping the parent's state update in `startTransition` signals to React that this update can be deferred, preventing the warning and ensuring smoother UI updates. This is a general React pattern applicable when updates across component boundaries (or deeply nested state updates) might occur.\n\n---\n\n## 🤝 Collaboration\n\nRenderHooks is a community-driven project. Every idea, issue, and pull request helps it grow and improve.\n\nWhether you're fixing a typo or implementing a brand-new feature, **you're warmly welcome here!** ✨\n\n### How to contribute\n\n1. ⭐️ **Star the repo** – it helps others discover the project and shows your support.\n2. 🐛 **Report bugs / request features** – open an issue and describe the problem or idea. Reproduction steps or code snippets are golden.\n3. 📚 **Improve the docs** – spot a typo, unclear wording, or missing example? Submit a quick PR.\n4. 👩‍💻 **Send code changes** – bug fixes, performance tweaks, new examples, or custom hooks… big or small, they're all appreciated. If you're unsure, open a draft PR and we'll figure it out together.\n5. 💬 **Join the conversation** – comment on issues & PRs, share how you're using RenderHooks, or ask questions. First-time contributors are encouraged to jump in!\n6. 📣 **Share it** - if you love it, please share it! I want to grow this tool into something that makes all of our day-to-day lives a bit easier, so no gate-keeping. \n\nIf this would be your **first open-source contribution**, don't hesitate to ask for guidance—I'll happily walk you through the process.\n\nThank you for making RenderHooks better for everyone! 🙏\n" }, { "path": "package.json", "content": "{\n \"name\": \"render-hooks\",\n \"version\": \"0.2.0\",\n \"description\": \"Inline render-block-stable React hooks\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.mjs\",\n \"types\": \"dist/index.d.ts\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.mjs\",\n \"require\": \"./dist/index.js\",\n \"default\": \"./dist/index.mjs\"\n }\n },\n \"scripts\": {\n \"test\": \"vitest run\",\n \"test:watch\": \"vitest\",\n \"build\": \"tsdown src/index.tsx --out-dir dist --dts --format cjs,esm\",\n \"dev\": \"tsdown src/index.tsx --out-dir dist --dts --watch --format cjs,esm\",\n \"prepublishOnly\": \"npm run test && npm run build\",\n \"storybook\": \"storybook dev -p 6006\",\n \"build-storybook\": \"storybook build\",\n \"chromatic\": \"npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN\"\n },\n \"files\": [\n \"dist\",\n \"README.md\",\n \"LICENSE\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/brandonmcconnell/render-hooks.git\"\n },\n \"keywords\": [\n \"react\",\n \"render\",\n \"inline\",\n \"hooks\"\n ],\n \"author\": \"Brandon McConnell\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/brandonmcconnell/render-hooks/issues\"\n },\n \"homepage\": \"https://github.com/brandonmcconnell/render-hooks#readme\",\n \"peerDependencies\": {\n \"react\": \">=16.8.0\",\n \"react-dom\": \">=16.8.0\"\n },\n \"devDependencies\": {\n \"@chromatic-com/storybook\": \"^3.2.6\",\n \"@codesandbox/storybook-addon\": \"^0.2.2\",\n \"@storybook/addon-essentials\": \"^8.6.13\",\n \"@storybook/addon-onboarding\": \"^8.6.13\",\n \"@storybook/blocks\": \"^8.6.13\",\n \"@storybook/manager-api\": \"^8.6.13\",\n \"@storybook/react\": \"^8.6.13\",\n \"@storybook/react-vite\": \"^8.6.13\",\n \"@storybook/test\": \"^8.6.13\",\n \"@storybook/theming\": \"^8.6.13\",\n \"@testing-library/jest-dom\": \"^6.4.8\",\n \"@testing-library/react\": \"^16.0.0\",\n \"@types/node\": \"^22.15.18\",\n \"@types/react\": \"^19.1.4\",\n \"@types/react-dom\": \"^19.1.5\",\n \"@typescript-eslint/eslint-plugin\": \"^8.32.1\",\n \"@typescript-eslint/parser\": \"^8.32.1\",\n \"@vitejs/plugin-react\": \"^4.3.1\",\n \"eslint\": \"^9.26.0\",\n \"eslint-config-prettier\": \"^10.1.5\",\n \"eslint-plugin-prettier\": \"^5.4.0\",\n \"eslint-plugin-storybook\": \"^0.12.0\",\n \"happy-dom\": \"^14.12.3\",\n \"jsdom\": \"^26.1.0\",\n \"npm-run-all\": \"^4.1.5\",\n \"patch-package\": \"^8.0.0\",\n \"react\": \"^19.1.0\",\n \"react-dom\": \"^19.1.0\",\n \"storybook\": \"^8.6.13\",\n \"tsdown\": \"^0.11.9\",\n \"typescript\": \"^5.8.3\",\n \"vitest\": \"^2.0.4\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"plugin:storybook/recommended\"\n ]\n }\n}\n" }, { "path": "src/index.test.tsx", "content": "/** @vitest-environment jsdom */\nimport React from 'react';\nimport { render, screen, fireEvent, waitFor, act as rtlAct, within } from '@testing-library/react';\nimport '@testing-library/jest-dom';\nimport $ from './index'; // Assuming RenderHooks is the default export from src/index.tsx\nimport { useFormStatus as reactDom_useFormStatus } from 'react-dom'; // Import for useFormStatus test\nimport { vi, describe, it, expect } from 'vitest';\n\ndescribe('RenderHooks Component', () => {\n describe('Built-in Hooks Examples', () => {\n it('useState example works', () => {\n const UseStateExample = () => (\n <$>\n {({ useState }) => {\n const [value, set] = useState('');\n return set(e.target.value)} />;\n }}\n \n );\n render();\n const inputElement = screen.getByLabelText('value-input') as HTMLInputElement;\n expect(inputElement.value).toBe('');\n fireEvent.change(inputElement, { target: { value: 'test' } });\n expect(inputElement.value).toBe('test');\n });\n\n it('useReducer example works', () => {\n const UseReducerExample = () => (\n <$>\n {({ useReducer }) => {\n const [count, dispatch] = useReducer(\n (s: number, a: 'inc' | 'dec') => (a === 'inc' ? s + 1 : s - 1),\n 0,\n );\n return (\n <>\n \n {count}\n \n \n );\n }}\n \n );\n render();\n const countSpan = screen.getByTestId('count-span');\n const incButton = screen.getByText('+');\n const decButton = screen.getByText('-');\n\n expect(countSpan).toHaveTextContent('0');\n fireEvent.click(incButton);\n expect(countSpan).toHaveTextContent('1');\n fireEvent.click(decButton);\n fireEvent.click(decButton);\n expect(countSpan).toHaveTextContent('-1');\n });\n\n it('useCallback example works', () => {\n const mockFn = vi.fn();\n const UseCallbackExample = () => (\n <$>\n {({ useState, useCallback }) => {\n const [txt, setTxt] = useState('');\n const onChange = useCallback(\n (e: React.ChangeEvent) => {\n setTxt(e.target.value);\n mockFn(e.target.value);\n },\n [],\n );\n return ;\n }}\n \n );\n render();\n const inputElement = screen.getByLabelText('callback-input');\n fireEvent.change(inputElement, { target: { value: 'callback test' } });\n expect(mockFn).toHaveBeenCalledWith('callback test');\n });\n\n it('useContext example works', () => {\n const ThemeCtx = React.createContext<'light' | 'dark'>('light');\n const UseContextExample = () => (\n \n <$>\n {({ useContext }) =>

Theme: {useContext(ThemeCtx)}

}\n \n \n );\n render();\n expect(screen.getByText('Theme: dark')).toBeInTheDocument();\n });\n\n it('useMemo example works', () => {\n const UseMemoExample = () => (\n <$>\n {({ useState, useMemo }) => {\n const [n, setN] = useState(5);\n const fib = useMemo(() => {\n const f = (x: number): number => (x <= 1 ? x : f(x - 1) + f(x - 2));\n return f(n);\n }, [n]);\n return (\n <>\n setN(+e.target.value)}\n />\n

Fib({n}) = {fib}

\n \n );\n }}\n \n );\n render();\n expect(screen.getByText('Fib(5) = 5')).toBeInTheDocument();\n const inputElement = screen.getByLabelText('memo-input');\n fireEvent.change(inputElement, { target: { value: '6' } });\n expect(screen.getByText('Fib(6) = 8')).toBeInTheDocument();\n });\n\n it('useEffect example works', async () => {\n vi.useFakeTimers();\n const UseEffectExample = () => (\n <$>\n {({ useState, useEffect }) => {\n const [time, setTime] = useState('');\n useEffect(() => {\n const id = setInterval(\n () => {\n const newTime = new Date().toLocaleTimeString();\n setTime(newTime);\n },\n 1000,\n );\n return () => clearInterval(id);\n }, []);\n return

{time || 'loading...'}

;\n }}\n \n );\n render();\n expect(screen.getByText('loading...')).toBeInTheDocument();\n rtlAct(() => {\n vi.advanceTimersByTime(1000);\n });\n vi.advanceTimersByTime(0); // Ensure setInterval callback and React re-render are processed\n\n // Synchronous check for \"loading...\" to be gone\n expect(screen.queryByText('loading...')).not.toBeInTheDocument();\n\n // Second synchronous check for the time text\n vi.advanceTimersByTime(0); // Ensure microtasks from first assertion are flushed\n expect(screen.getByText(/:/)).toBeInTheDocument();\n\n vi.useRealTimers();\n }, 5000); // <-- Test-specific timeout of 5000ms\n\n it('useLayoutEffect example works', () => {\n const UseLayoutEffectExample = () => (\n <$>\n {({ useRef, useLayoutEffect }) => {\n const box = useRef(null);\n useLayoutEffect(() => {\n if (box.current) {\n box.current.style.background = 'rgb(255, 213, 79)'; // #ffd54f\n }\n }, []);\n return
highlighted after layout
;\n }}\n \n );\n render();\n const boxElement = screen.getByTestId('layout-box');\n expect(boxElement).toHaveStyle('background: rgb(255, 213, 79)');\n });\n\n it('useImperativeHandle example works', () => {\n const Fancy = React.forwardRef<{ focus: () => void }>((_, ref) => (\n <$>\n {({ useRef, useImperativeHandle }) => {\n const local = useRef(null);\n useImperativeHandle(ref, () => ({\n focus: () => local.current?.focus(),\n }));\n return ;\n }}\n \n ));\n Fancy.displayName = 'Fancy';\n\n const UseImperativeHandleExample = () => {\n const ref = React.useRef<{ focus: () => void }>(null);\n return (\n <>\n \n \n \n );\n };\n render();\n const button = screen.getByText('Focus Fancy');\n const inputInsideFancy = screen.getByPlaceholderText('Fancy input') as HTMLInputElement;\n expect(inputInsideFancy).not.toHaveFocus();\n fireEvent.click(button);\n expect(inputInsideFancy).toHaveFocus();\n });\n\n it('useRef example works', () => {\n const UseRefExample = () => (\n <$>\n {({ useRef }) => {\n const input = useRef(null);\n return (\n <>\n \n \n \n );\n }}\n \n );\n render();\n const inputElement = screen.getByLabelText('ref-input');\n const button = screen.getByText('focus');\n expect(inputElement).not.toHaveFocus();\n fireEvent.click(button);\n expect(inputElement).toHaveFocus();\n });\n\n it('useInsertionEffect example works', () => {\n const UseInsertionEffectExample = () => (\n <$>\n {({ useInsertionEffect }) => {\n useInsertionEffect(() => {\n const style = document.createElement('style');\n style.id = 'flash-style';\n style.textContent = '.flash{animation:flash 1s steps(2) infinite;}\\n@keyframes flash{to{opacity:.2}}';\n document.head.append(style);\n return () => {\n document.getElementById('flash-style')?.remove();\n };\n }, []);\n return

flashing text

;\n }}\n \n );\n const { unmount } = render();\n const styleElement = document.getElementById('flash-style');\n expect(styleElement).toBeInTheDocument();\n expect(styleElement?.textContent).toContain('.flash{animation:flash 1s steps(2) infinite;}');\n expect(screen.getByTestId('flash-text')).toHaveClass('flash');\n unmount();\n expect(document.getElementById('flash-style')).not.toBeInTheDocument();\n });\n\n it('useId example works', () => {\n const UseIdExample = () => (\n <$>\n {({ useId, useState }) => {\n const id = useId();\n const [v, set] = useState('');\n return (\n <>\n \n set(e.target.value)} />\n \n );\n }}\n \n );\n render();\n const label = screen.getByText('Name');\n const input = screen.getByLabelText('Name');\n expect(input.id).toBe(label.getAttribute('for'));\n expect(input.id).toMatch(/^(:r\\d+:|«r\\d+?»)$/);\n });\n\n it('useSyncExternalStore example works', () => {\n const listeners: Array<() => void> = [];\n const subscribe = (cb: () => void) => {\n window.addEventListener('resize', cb);\n listeners.push(cb);\n return () => {\n window.removeEventListener('resize', cb);\n const index = listeners.indexOf(cb);\n if (index > -1) listeners.splice(index, 1);\n };\n };\n const getSnapshot = () => window.innerWidth;\n\n const originalInnerWidth = window.innerWidth;\n\n const UseSyncExternalStoreExample = () => (\n <$>\n {({ useSyncExternalStore }) => {\n const width = useSyncExternalStore(\n subscribe,\n getSnapshot,\n );\n return

width: {width}px

;\n }}\n \n );\n\n render();\n expect(screen.getByText(`width: ${originalInnerWidth}px`)).toBeInTheDocument();\n\n rtlAct(() => {\n (window as any).innerWidth = 1024;\n window.dispatchEvent(new Event('resize'));\n });\n expect(screen.getByText('width: 1024px')).toBeInTheDocument();\n\n rtlAct(() => {\n (window as any).innerWidth = originalInnerWidth;\n window.dispatchEvent(new Event('resize'));\n });\n expect(screen.getByText(`width: ${originalInnerWidth}px`)).toBeInTheDocument();\n });\n\n it('useDeferredValue example works', async () => {\n vi.useFakeTimers();\n const UseDeferredValueExample = () => (\n <$>\n {({ useState, useDeferredValue }) => {\n const [text, setText] = useState('');\n const deferred = useDeferredValue(text);\n return (\n <>\n setText(e.target.value)} />\n

deferred: {deferred}

\n \n );\n }}\n \n );\n render();\n const input = screen.getByLabelText('deferred-input');\n const output = screen.getByTestId('deferred-output');\n\n expect(output).toHaveTextContent('deferred:');\n\n rtlAct(() => {\n fireEvent.change(input, { target: { value: 'hello' } });\n });\n\n // Allow deferred value to update\n rtlAct(() => {\n vi.runAllTimers();\n });\n vi.advanceTimersByTime(0); // Flush tasks\n\n expect(output).toHaveTextContent('deferred: hello');\n vi.useRealTimers();\n }, 5000); // Test-specific timeout\n\n it('useTransition example works', async () => {\n vi.useFakeTimers();\n const UseTransitionExample = () => (\n <$>\n {({ useState, useTransition }) => {\n const [list, setList] = useState([]);\n const [pending, start] = useTransition();\n const filter = (e: React.ChangeEvent) => {\n const q = e.target.value;\n start(() => {\n // Simulate async work for the transition with a timer\n setTimeout(() => {\n const fullList = Array.from({ length: 10 }, (_, i) => `Item ${i}`);\n setList(fullList.filter((x) => x.includes(q)));\n }, 10); \n });\n };\n return (\n <>\n \n {/* We will not assert the pending state directly due to timing complexities with fake timers */}\n {/* {pending &&

updating…

} */}\n

{list.length} items

\n
    {list.map(item =>
  • {item}
    • )}
\n \n );\n }}\n \n );\n render();\n const input = screen.getByLabelText('transition-input');\n const listLength = screen.getByTestId('transition-list-length');\n\n expect(listLength).toHaveTextContent('0 items');\n\n rtlAct(() => {\n fireEvent.change(input, { target: { value: 'Item 1' } });\n });\n\n // Removed: Check for pending state, as it's too transient with fake timers here.\n\n // Complete the transition work by running all timers\n rtlAct(() => {\n vi.runAllTimers(); // This executes the setTimeout(..., 10) inside startTransition\n });\n \n // Flush any pending macrotasks from React updates\n vi.advanceTimersByTime(0);\n\n // Assertions for the final state\n expect(screen.queryByText('updating…')).not.toBeInTheDocument(); // Should be gone now\n expect(listLength).toHaveTextContent('1 items');\n expect(screen.getByText('Item 1')).toBeInTheDocument();\n \n vi.useRealTimers();\n }, 10000); \n\n it('useActionState example works', async () => {\n vi.useFakeTimers();\n\n const mockAction = vi.fn(async (_prev: string | null, data: FormData) => {\n await new Promise((r) => setTimeout(r, 50));\n return `Said: ${data.get('text') as string}`;\n });\n\n const UseActionStateExample = () => (\n <$>\n {({ useActionState }) => {\n const [msg, submit, pending] = useActionState(mockAction, null);\n return (\n
void) | string}\n >\n \n \n {pending &&

Submitting...

}\n {msg &&

{msg}

}\n
\n );\n }}\n \n );\n\n render();\n const input = screen.getByLabelText('action-state-input');\n const button = screen.getByText('Send');\n\n rtlAct(() => {\n fireEvent.change(input, { target: { value: 'Hello Action' } });\n fireEvent.click(button);\n });\n\n // Assert pending state immediately after action is dispatched\n expect(screen.getByText('Submitting...')).toBeInTheDocument();\n expect(button).toBeDisabled();\n\n // Wait for the action to complete and UI to update\n // This act block covers the resolution of timers and the promise from mockAction,\n // and the subsequent state updates in useActionState.\n await rtlAct(async () => {\n vi.runAllTimers(); // Resolve the setTimeout within mockAction\n await Promise.resolve(); // Ensure promise from mockAction (if any) resolves and is processed\n });\n\n // Assert final state: React should have updated after the act block\n expect(screen.queryByText('Submitting...')).not.toBeInTheDocument();\n\n // Final check for mock calls after waitFor confirms UI is stable\n expect(mockAction).toHaveBeenCalledTimes(1);\n vi.useRealTimers();\n }, 5000);\n\n it('useFormStatus example works (within a form component)', async () => {\n vi.useFakeTimers(); // Good practice, though mockFormAction is manually resolved\n let formActionResolver: () => void = () => {}; // Initialize to satisfy TS\n const mockFormAction = vi.fn(async () => {\n await new Promise(resolve => { formActionResolver = resolve; });\n });\n\n const SubmitButton = () => {\n const { pending } = reactDom_useFormStatus();\n return ;\n };\n\n const StatusDisplay = () => {\n const { pending } = reactDom_useFormStatus();\n return pending ?

Form is pending...

:

Form is idle.

;\n };\n\n const UseFormStatusExampleForm = () => {\n const [done, setDone] = React.useState(false);\n const formActionAttr = async (payload: FormData) => {\n await mockFormAction();\n setDone(true);\n };\n return (\n <$>\n {() => (\n
void) | string}>\n \n \n {done &&

saved!

}\n \n )}\n \n );\n };\n\n render();\n const saveButton = screen.getByText('Save');\n expect(screen.getByText('Form is idle.')).toBeInTheDocument();\n\n rtlAct(() => {\n fireEvent.click(saveButton);\n });\n\n expect(mockFormAction).toHaveBeenCalledTimes(1);\n // Assert pending state for SubmitButton and StatusDisplay\n expect(screen.getByText('Saving…')).toBeInTheDocument();\n expect(screen.getByText('Form is pending...')).toBeInTheDocument();\n expect(saveButton).toBeDisabled();\n\n // Resolve the form action and wait for state updates\n await rtlAct(async () => {\n formActionResolver(); // Resolve the mockFormAction's promise\n await Promise.resolve(); // Ensure promise propagation and related state updates are processed\n });\n vi.advanceTimersByTime(0); // Flush any final React updates if necessary\n\n // Assert final state\n expect(screen.getByText('Save')).toBeInTheDocument();\n expect(screen.getByText('Form is idle.')).toBeInTheDocument();\n expect(screen.getByTestId('form-done-msg')).toHaveTextContent('saved!');\n expect(saveButton).not.toBeDisabled();\n vi.useRealTimers();\n }, 5000);\n\n it(\"'use' (awaitable hook) example works\", async () => {\n vi.useFakeTimers();\n const fetchQuote = () => new Promise((r) => setTimeout(() => r('\"Ship early, ship often.\"' ), 50));\n const fetchQuotePromise = fetchQuote(); // Get the promise instance beforehand\n\n // Ensure the promise is resolved before rendering the component that uses it.\n // Use act to be safe, though direct await might also work if no React updates are expected here.\n await rtlAct(async () => {\n vi.runAllTimers(); // Resolve the setTimeout in fetchQuote\n await fetchQuotePromise; // Explicitly wait for the promise to settle\n });\n\n const UseAwaitExample = () => (\n Loading quote...

}>\n <$>\n {({ use }) => {\n const quote = use(fetchQuotePromise);\n return
{quote}
;\n }}\n \n \n );\n\n // Wrap render in act to handle the synchronous resolution of the pre-resolved promise by the 'use' hook\n await rtlAct(async () => {\n render();\n // Since the promise is pre-resolved, React should synchronously render the result.\n // We might need a microtask tick for React to fully process if there are internal updates.\n await Promise.resolve(); \n });\n \n // With a pre-resolved promise and render in act, the content should be immediately available\n expect(screen.getByText('\"Ship early, ship often.\"' )).toBeInTheDocument();\n // And the fallback should not have been rendered (or be gone)\n expect(screen.queryByText('Loading quote...')).not.toBeInTheDocument();\n\n vi.useRealTimers();\n }, 5000);\n });\n\n describe('Custom Hooks Example', () => {\n it('custom hooks can be provided and used', async () => {\n vi.useFakeTimers(); // Added for debounce\n const useToggle = (initialValue = false): [boolean, () => void] => {\n const [value, setValue] = React.useState(initialValue);\n const toggle = React.useCallback(() => setValue((v) => !v), []);\n return [value, toggle];\n };\n const useDebounce = (value: T, delay: number): T => {\n const [debouncedValue, setDebouncedValue] = React.useState(value);\n React.useEffect(() => {\n const handler = setTimeout(() => setDebouncedValue(value), delay);\n return () => clearTimeout(handler);\n }, [value, delay]);\n return debouncedValue;\n };\n\n const customHooks = { useToggle, useDebounce };\n\n const CustomHooksExample = () => (\n <$ hooks={customHooks}>\n {({ useToggle, useDebounce }) => {\n const [open, toggle] = useToggle(false);\n const dOpen = useDebounce(open, 50);\n return (\n <>\n \n

open: {open.toString()}

\n

debounced: {dOpen.toString()}

\n \n );\n }}\n \n );\n render();\n const toggleButton = screen.getByText('toggle');\n const openState = screen.getByTestId('custom-open-state');\n const debouncedState = screen.getByTestId('custom-debounced-state');\n\n expect(openState).toHaveTextContent('open: false');\n expect(debouncedState).toHaveTextContent('debounced: false');\n\n fireEvent.click(toggleButton);\n expect(openState).toHaveTextContent('open: true');\n expect(debouncedState).toHaveTextContent('debounced: false');\n\n // Wait for debounce to complete\n rtlAct(() => {\n vi.runAllTimers(); // Process setTimeout in useDebounce\n });\n vi.advanceTimersByTime(0); // Ensure React re-renders and microtasks are flushed\n\n // Now assert the debounced state\n expect(debouncedState).toHaveTextContent('debounced: true');\n vi.useRealTimers(); // Added for debounce\n }, 5000); // Added test-specific timeout\n });\n}); \n\n// --- New Test Suite for NestedImpactfulExample ---\n\ntype Category = {\n id: number;\n name: string;\n posts: { id: number; title: string }[];\n};\n\nconst data: Category[] = [\n {\n id: 1,\n name: 'Tech',\n posts: [{ id: 11, title: 'Next-gen CSS' }],\n },\n {\n id: 2,\n name: 'Life',\n posts: [\n { id: 21, title: 'Minimalism' },\n { id: 22, title: 'Travel hacks' },\n ],\n },\n];\n\n// This is the component from README.md\nconst NestedImpactfulExample = () => {\n return (\n
    \n {data.map((cat) => (\n /* ───── 1️⃣ Outer RenderHooks for each category row ───── */\n <$ key={cat.id}>\n {({ useState, useTransition }) => {\n const [expanded, setExpanded] = useState(false);\n const [likes, setLikes] = useState(0); \n const [isPending, startTransition] = useTransition();\n\n return (\n
  • \n \n\n {expanded && (\n
      \n {cat.posts.map((post) => (\n /* ───── 2️⃣ Inner RenderHooks per post row ───── */\n <$ key={post.id}>\n {({ useState: useItemState }) => {\n const [liked, setItemLiked] = useItemState(false);\n\n const toggleLike = () => {\n setItemLiked((prev) => {\n const next = !prev;\n // 🔄 update outer «likes» when this post toggles, wrapped in outer transition\n startTransition(() => {\n setLikes((c) => c + (next ? 1 : -1));\n });\n return next;\n });\n };\n\n return (\n
    • \n {post.title}{' '}\n \n
      • \n );\n }}\n \n ))}\n
    \n )}\n
    • \n );\n }}\n \n ))}\n
\n );\n};\n\ndescribe('NestedImpactfulExample from README', () => {\n it('should render initial state correctly', () => {\n render();\n expect(screen.getByText(/▸ Tech \\(0 likes\\)/)).toBeInTheDocument();\n expect(screen.getByText(/▸ Life \\(0 likes\\)/)).toBeInTheDocument();\n expect(screen.queryByText('Next-gen CSS')).not.toBeInTheDocument();\n expect(screen.queryByText('Minimalism')).not.toBeInTheDocument();\n });\n\n it('should expand and collapse categories', () => {\n render();\n const techCategoryButton = screen.getByText(/▸ Tech \\(0 likes\\)/);\n fireEvent.click(techCategoryButton);\n expect(screen.getByText(/▾ Tech \\(0 likes\\)/)).toBeInTheDocument();\n expect(screen.getByText('Next-gen CSS')).toBeInTheDocument();\n fireEvent.click(techCategoryButton);\n expect(screen.getByText(/▸ Tech \\(0 likes\\)/)).toBeInTheDocument();\n expect(screen.queryByText('Next-gen CSS')).not.toBeInTheDocument();\n });\n\n it('should allow liking/unliking posts and update category likes', () => {\n render();\n const techCategoryButton = screen.getByText(/▸ Tech \\(0 likes\\)/);\n fireEvent.click(techCategoryButton); // Expand Tech category\n\n const techPostLikeButton = screen.getByRole('button', { name: '♡ Like' });\n expect(techPostLikeButton).toBeInTheDocument();\n\n // Like the post\n rtlAct(() => {\n fireEvent.click(techPostLikeButton);\n });\n expect(screen.getByText(/Tech \\(1 like\\)/)).toBeInTheDocument();\n expect(screen.getByRole('button', { name: '♥︎ Liked' })).toBeInTheDocument();\n\n // Unlike the post\n rtlAct(() => {\n fireEvent.click(techPostLikeButton); // techPostLikeButton reference should still be valid as text content changed but not the element itself\n });\n expect(screen.getByText(/Tech \\(0 likes\\)/)).toBeInTheDocument();\n expect(screen.getByRole('button', { name: '♡ Like' })).toBeInTheDocument();\n });\n\n it('should handle multiple posts and maintain independent likes within a category', async () => {\n render();\n const lifeCategoryButton = screen.getByText(/▸ Life \\(0 likes\\)/);\n fireEvent.click(lifeCategoryButton); // Expand Life category\n\n const minimalismListItem = screen.getByText('Minimalism').closest('li')!;\n const travelHacksListItem = screen.getByText('Travel hacks').closest('li')!;\n\n const minimalismLikeButton = within(minimalismListItem).getByRole('button', { name: /Like|Liked/i });\n const travelHacksLikeButton = within(travelHacksListItem).getByRole('button', { name: /Like|Liked/i });\n \n // Like Minimalism\n await rtlAct(async () => {\n fireEvent.click(minimalismLikeButton);\n });\n expect(screen.getByText(/Life \\(1 like\\)/)).toBeInTheDocument();\n expect(minimalismLikeButton).toHaveTextContent('♥︎ Liked');\n expect(travelHacksLikeButton).toHaveTextContent('♡ Like');\n\n // Like Travel hacks\n await rtlAct(async () => {\n fireEvent.click(travelHacksLikeButton);\n });\n expect(screen.getByText(/Life \\(2 likes\\)/)).toBeInTheDocument();\n expect(minimalismLikeButton).toHaveTextContent('♥︎ Liked');\n expect(travelHacksLikeButton).toHaveTextContent('♥︎ Liked');\n\n // Unlike Minimalism\n await rtlAct(async () => {\n fireEvent.click(minimalismLikeButton);\n });\n expect(screen.getByText(/Life \\(1 like\\)/)).toBeInTheDocument();\n expect(minimalismLikeButton).toHaveTextContent('♡ Like');\n expect(travelHacksLikeButton).toHaveTextContent('♥︎ Liked');\n });\n\n it('should maintain independent state between categories', async () => {\n render();\n const techCategoryButton = screen.getByText(/▸ Tech \\(0 likes\\)/);\n const lifeCategoryButton = screen.getByText(/▸ Life \\(0 likes\\)/);\n\n // Expand Tech and like its post\n fireEvent.click(techCategoryButton);\n const techPostListItem = screen.getByText('Next-gen CSS').closest('li')!;\n const techPostLikeButton = within(techPostListItem).getByRole('button', { name: /Like|Liked/i });\n await rtlAct(async () => {\n fireEvent.click(techPostLikeButton);\n });\n expect(screen.getByText(/Tech \\(1 like\\)/)).toBeInTheDocument();\n expect(screen.getByText(/Life \\(0 likes\\)/)).toBeInTheDocument(); // Life category unchanged\n\n // Expand Life and like one of its posts\n fireEvent.click(lifeCategoryButton);\n const minimalismListItemForLife = screen.getByText('Minimalism').closest('li')!;\n const minimalismLikeButtonInLife = within(minimalismListItemForLife).getByRole('button', { name: /Like|Liked/i });\n await rtlAct(async () => {\n fireEvent.click(minimalismLikeButtonInLife);\n });\n expect(screen.getByText(/Tech \\(1 like\\)/)).toBeInTheDocument(); // Tech category unchanged\n expect(screen.getByText(/Life \\(1 like\\)/)).toBeInTheDocument();\n \n // Check that Life category expansion did not affect Tech posts visibility\n expect(screen.getByText('Next-gen CSS')).toBeInTheDocument(); // Tech post still visible\n });\n}); " }, { "path": "src/index.tsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\n/* ----------------------------------------------------------- *\n * 1 ▸ helper types *\n * ----------------------------------------------------------- */\n\n// local utility for \"is a function\"\ntype Fn = (...args: any[]) => any;\n\n/** Map an object T ➜ only its `use*` keys that are functions. */\ntype ExtractHooks = {\n [K in keyof T as K extends `use${string}`\n ? T[K] extends Fn\n ? K\n : never\n : never]: T[K] extends Fn ? T[K] : never;\n};\n\n/* ----------------------------------------------------------- *\n * 2 ▸ runtime collector that preserves static types *\n * ----------------------------------------------------------- */\nfunction collectHooks(src: T): ExtractHooks {\n const out = {} as ExtractHooks;\n\n for (const key in src) {\n if (key.startsWith('use')) {\n const fn = (src as Record)[key];\n if (typeof fn === 'function') {\n (out as Record)[key] = fn as Fn;\n }\n }\n }\n return out;\n}\n\n/* ----------------------------------------------------------- *\n * 3 ▸ core helpers = hooks found in the *installed* libs *\n * ----------------------------------------------------------- */\nconst coreHelpers = {\n ...collectHooks(React),\n ...collectHooks(ReactDOM),\n};\n\ntype CoreHelpers = typeof coreHelpers;\n\n/* ----------------------------------------------------------- *\n * 4 ▸ default component *\n * ----------------------------------------------------------- */\nexport default function RenderHooks<\n TValue extends Record = {},\n>(props: {\n hooks?: TValue;\n children: (helpers: CoreHelpers & TValue) => React.ReactNode;\n}): React.ReactElement {\n const { hooks, children } = props;\n const helpers = React.useMemo(\n () => ({ ...coreHelpers, ...(hooks ?? {}) }),\n [hooks],\n ) as CoreHelpers & TValue;\n return <>{children(helpers)};\n}\n" }, { "path": "src/stories/00-QuickStart.stories.tsx", "content": "import type { Meta } from '@storybook/react';\nimport React from 'react'; // React is implicitly used by JSX and useState\nimport $ from '../index';\n\n// Copied from README.md Quick Start\nexport function Counter() {\n return (\n <$>\n {({ useState }) => {\n const [n, set] = useState(0);\n return ;\n }}\n \n );\n}\n\nconst meta: Meta = {\n title: 'Examples/Quick Start',\n component: Counter,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\n// type Story = StoryObj;\n\n// export const Default: Story = {}; " }, { "path": "src/stories/01-BuiltInHooks.stories.tsx", "content": "import type { Meta } from '@storybook/react';\nimport React from 'react'; // For createContext, useRef, etc.\nimport $ from '../index'; // Adjust path as necessary\nimport { useFormStatus as reactDom_useFormStatus } from 'react-dom'; // For useFormStatus example\n\n// --- useState --- \nexport function Example_useState() {\n return (\n <$>\n {({ useState }) => {\n const [value, set] = useState('');\n return (\n <>\n set(e.target.value)} placeholder=\"useState: type here...\" />\n

Value: \"{value}\"

\n \n );\n }}\n \n );\n}\nExample_useState.storyName = 'useState';\n\n// --- useReducer --- \nexport function Example_useReducer() {\n return (\n <$>\n {({ useReducer }) => {\n const [count, dispatch] = useReducer(\n (s: number, a: 'inc' | 'dec') => (a === 'inc' ? s + 1 : s - 1),\n 0,\n );\n return (\n
\n \n {count} (useReducer)\n \n
\n );\n }}\n \n );\n}\nExample_useReducer.storyName = 'useReducer';\n\n// --- useCallback --- \nexport function Example_useCallback() {\n return (\n <$>\n {({ useState, useCallback }) => {\n const [txt, setTxt] = useState('');\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const handleChange = useCallback((e: React.ChangeEvent) => setTxt(e.target.value), []);\n return (\n <>\n \n

Value: \"{txt}\"

\n \n );\n }}\n \n );\n}\nExample_useCallback.storyName = 'useCallback';\n\n// --- useContext --- \nconst ThemeCtx = React.createContext<'light' | 'dark'>('light');\nexport function Example_useContext() {\n return (\n \n <$>\n {({ useContext }) =>

Theme (useContext): {useContext(ThemeCtx)}

}\n \n \n );\n}\nExample_useContext.storyName = 'useContext';\n\n// --- useMemo --- \nexport function Example_useMemo() {\n return (\n <$>\n {({ useState, useMemo, useRef }) => {\n const [n, setN] = useState(5); // Smaller default for story\n\n // A ref-based cache that survives across renders and different n values\n const cache = useRef>(new Map());\n\n const fib = useMemo(() => {\n const memoFib = (k: number): number => {\n const m = cache.current;\n if (m.has(k)) return m.get(k)!;\n const val = k <= 1 ? k : memoFib(k - 1) + memoFib(k - 2);\n m.set(k, val);\n return val;\n };\n return memoFib(n);\n }, [n]);\n return (\n
\n setN(+e.target.value)}\n style={{width: '50px'}}\n />\n

Fib({n}) (cached with useMemo+ref) = {fib}

\n
\n );\n }}\n \n );\n}\nExample_useMemo.storyName = 'useMemo';\n\n// --- useEffect --- \nexport function Example_useEffect() {\n return (\n <$>\n {({ useState, useEffect }) => {\n const [time, setTime] = useState('loading...');\n useEffect(() => {\n const id = setInterval(() => setTime(new Date().toLocaleTimeString()), 1000);\n return () => clearInterval(id);\n }, []);\n return

Time (useEffect): {time}

;\n }}\n \n );\n}\nExample_useEffect.storyName = 'useEffect';\n\n// --- useLayoutEffect --- \nexport function Example_useLayoutEffect() {\n return (\n <$>\n {({ useRef, useLayoutEffect }) => {\n const box = useRef(null);\n useLayoutEffect(() => {\n if (box.current) {\n box.current.style.background = '#ffd54f';\n box.current.style.color = '#000';\n }\n }, []);\n return
Div (useLayoutEffect) highlighted after layout
;\n }}\n \n );\n}\nExample_useLayoutEffect.storyName = 'useLayoutEffect';\n\n// --- useImperativeHandle --- \n// (moved Collapsible implementation inside Example_useImperativeHandle below)\nexport function Example_useImperativeHandle() {\n // Define the imperative handle type and the Collapsible component locally so everything is self-contained.\n type CollapsibleHandle = {\n open: () => void;\n close: () => void;\n toggle: () => void;\n };\n\n const Collapsible = React.useMemo(() => {\n const C = React.forwardRef(\n ({ title, children }, ref) => (\n <$>\n {({ useState, useImperativeHandle }) => {\n const [open, setOpen] = useState(false);\n\n useImperativeHandle(ref, () => ({\n open: () => setOpen(true),\n close: () => setOpen(false),\n toggle: () => setOpen((o) => !o),\n }));\n\n return (\n
\n \n {open && (\n
{children}
\n )}\n
\n );\n }}\n \n ),\n );\n return C;\n }, []);\n\n const panelRef = React.useRef(null);\n\n return (\n
\n \n

This content can be toggled imperatively using the buttons below or via the panel header.

\n \n\n
\n \n \n \n
\n
\n );\n}\nExample_useImperativeHandle.storyName = 'useImperativeHandle';\n\n// --- useRef --- \nexport function Example_useRef() {\n return (\n <$>\n {({ useRef }) => {\n const inputEl = useRef(null);\n return (\n
\n \n \n
\n );\n }}\n \n );\n}\nExample_useRef.storyName = 'useRef';\n\n// --- useInsertionEffect --- \nexport function Example_useInsertionEffect() {\n const [show, setShow] = React.useState(true);\n const id = 'insertion-effect-style';\n return (\n
\n \n {show && <$>\n {({ useInsertionEffect }) => {\n useInsertionEffect(() => {\n const style = document.createElement('style');\n style.id = id;\n style.textContent = `.flash-insertion{animation:flash-insertion 1s steps(2) infinite;} @keyframes flash-insertion{to{opacity:.2}}`;\n document.head.append(style);\n return () => {\n document.getElementById(id)?.remove();\n };\n }, []);\n return

Flashing text (useInsertionEffect)

;\n }}\n }\n
\n );\n}\nExample_useInsertionEffect.storyName = 'useInsertionEffect';\n\n// --- useId --- \nexport function Example_useId() {\n return (\n <$>\n {({ useId, useState }) => {\n const id = useId();\n const [val, setVal] = useState('');\n return (\n
\n (id: {id})\n
\n setVal(e.target.value)} style={{marginLeft: '5px'}}/> (id: {id})\n
\n );\n }}\n \n );\n}\nExample_useId.storyName = 'useId';\n\n// --- useSyncExternalStore --- \nexport function Example_useSyncExternalStore() {\n return (\n <$>\n {({ useSyncExternalStore }) => {\n const width = useSyncExternalStore(\n (cb) => {\n window.addEventListener('resize', cb);\n return () => window.removeEventListener('resize', cb);\n },\n () => window.innerWidth,\n () => -1 // server snapshot\n );\n return

Window width (useSyncExternalStore): {width}px

;\n }}\n \n );\n}\nExample_useSyncExternalStore.storyName = 'useSyncExternalStore';\n\n// --- useDeferredValue --- \nexport function Example_useDeferredValue() {\n return (\n <$>\n {({ useState, useDeferredValue }) => {\n const [text, setText] = useState('');\n const deferred = useDeferredValue(text);\n return (\n
\n setText(e.target.value)} placeholder=\"useDeferredValue: type...\"/>\n

Deferred: {deferred}

\n
\n );\n }}\n \n );\n}\nExample_useDeferredValue.storyName = 'useDeferredValue';\n\n// --- useTransition --- \nexport function Example_useTransition() {\n return (\n <$>\n {({ useState, useTransition, useMemo }) => {\n // Create a fixed list of sample products once (more practical than generic numbers)\n const items = useMemo(\n () => [\n 'Alligator',\n 'Bear',\n 'Cat',\n 'Dog',\n 'Elephant',\n 'Fox',\n 'Giraffe',\n 'Horse',\n 'Iguana',\n 'Jaguar',\n 'Kangaroo',\n 'Lion',\n 'Monkey',\n 'Newt',\n 'Owl',\n 'Penguin',\n 'Quail',\n 'Rabbit',\n 'Shark',\n 'Tiger',\n ],\n [],\n );\n const [list, setList] = useState(items);\n const [pending, start] = useTransition();\n\n const filter = (e: React.ChangeEvent) => {\n const q = e.target.value.toLowerCase();\n start(() => setList(items.filter((x) => x.toLowerCase().includes(q))));\n };\n return (\n
\n {/* Show the full list so users know what can be searched */}\n

\n All items: \n {items.join(', ')}\n

\n \n {pending &&

Updating...

}\n

{list.length} item{list.length === 1 ? '' : 's'} found. {list.length === items.length ? '(no items filtered)' : ''}

\n {/* Show the filtered items */}\n {list.length > 0 &&

{list.join(', ')}

}\n
\n );\n }}\n \n );\n}\nExample_useTransition.storyName = 'useTransition';\n\n// --- useActionState --- \nexport function Example_useActionState() {\n if (!React.useActionState) {\n return

React.useActionState is not available in this version of React.

;\n }\n return (\n <$>\n {({ useActionState }) => {\n const [msg, submit, pending] = useActionState(\n async (_prev: string | null, data: FormData) => {\n await new Promise((r) => setTimeout(r, 400));\n return data.get('text') as string;\n },\n null,\n );\n return (\n
\n \n \n {msg &&

You said: {msg}

}\n
\n );\n }}\n \n );\n}\nExample_useActionState.storyName = 'useActionState';\n\n// --- useFormStatus --- \n// Note: react-dom useFormStatus is used here as react's might not be available/same\nconst FormStatusButton = () => {\n // useFormStatus must be used within a
\n // So, we extract it to a sub-component for RenderHooks to access.\n return (\n <$>\n {({ useFormStatus }) => {\n const { pending } = useFormStatus ? useFormStatus() : { pending: false }; // Check if useFormStatus exists\n return ;\n }}\n \n );\n};\nexport function Example_useFormStatus() {\n if (!reactDom_useFormStatus) { // Check if the imported one exists\n return

ReactDOM.useFormStatus is not available in this version of React DOM.

;\n }\n return (\n <$>\n {({ useState }) => {\n const [done, setDone] = useState(false);\n const action = async () => {\n await new Promise((r) => setTimeout(r, 400));\n setDone(true);\n setTimeout(() => setDone(false), 2000); // Reset for story\n };\n return (\n \n \n {done &&

Saved!

}\n \n );\n }}\n \n );\n}\nExample_useFormStatus.storyName = 'useFormStatus';\n\n// --- use (awaitable hook) --- \nexport function Example_use() {\n if (!React.use) {\n return

React.use is not available in this version of React.

;\n }\n // Helper function for the 'use' example\n let quotePromise: Promise;\n const fetchQuote = () => {\n quotePromise = new Promise((resolve) =>\n setTimeout(() => resolve('\"Ship early, ship often.\" (from use hook)'), 800),\n );\n return quotePromise;\n };\n /**\n * To make this storybook-friendly and re-runnable, we reset the promise on each render.\n * In a real app, you might fetch once or based on props.\n */\n fetchQuote(); \n\n return (\n Loading quote (use hook)...

}>\n <$>\n {({ use }) => {\n return
{use(quotePromise)}
;\n }}\n \n \n );\n}\nExample_use.storyName = 'use';\n\n// --- meta --- \nconst meta: Meta = {\n title: 'Examples/Built-in Hooks',\n tags: ['autodocs'],\n parameters: {\n layout: 'top',\n },\n decorators: [\n (Story) => (\n
\n \n
\n ),\n ],\n};\nexport default meta;\n" }, { "path": "src/stories/02-CustomHooks.stories.tsx", "content": "import type { Meta } from '@storybook/react';\nimport React from 'react'; // For useState\nimport $ from '../index';\n\n// Dummy custom hooks (as defined in README, assuming they would be in ./myHooks)\n// For Storybook, we'll define them directly in this file.\nconst useToggle = (initialValue = false): [boolean, () => void] => {\n const [state, setState] = React.useState(initialValue);\n const toggle = React.useCallback(() => setState((s) => !s), []);\n return [state, toggle];\n};\n\nconst useDebounce = (value: T, delay: number): T => {\n const [debouncedValue, setDebouncedValue] = React.useState(value);\n React.useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n return debouncedValue;\n};\n// End of dummy custom hooks\n\n// Copied from README.md Custom Hooks section\nexport function CustomHooksExample() {\n return (\n <$ hooks={{ useToggle, useDebounce }}>\n {/* @ts-ignore */}\n {({ useToggle, useDebounce, useState }) => { // Added useState for completeness\n const [open, toggle] = useToggle(false);\n const dOpen = useDebounce(open, 250);\n const [count, setCount] = useState(0); // Example of using a built-in hook alongside\n\n return (\n
\n \n

'open' (from useToggle): {open.toString()}

\n

Debounced 'open' (from useDebounce): {dOpen.toString()}

\n
\n \n
\n );\n }}\n \n );\n}\nCustomHooksExample.storyName = 'Using Custom Hooks';\n\nconst meta: Meta = {\n title: 'Examples/Custom Hooks',\n component: CustomHooksExample,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;" }, { "path": "src/stories/03-NestingRenderHooks.stories.tsx", "content": "import type { Meta } from '@storybook/react';\nimport React from 'react'; // Needed for useState, useTransition in this example\nimport $ from '../index';\n\n// Copied from README.md Nesting RenderHooks section\ntype Category = {\n id: number;\n name: string;\n posts: { id: number; title: string }[];\n};\n\nconst data: Category[] = [\n {\n id: 1,\n name: 'Tech',\n posts: [{ id: 11, title: 'Next-gen CSS' }],\n },\n {\n id: 2,\n name: 'Life',\n posts: [\n { id: 21, title: 'Minimalism' },\n { id: 22, title: 'Travel hacks' },\n ],\n },\n {\n id: 3,\n name: 'Food',\n posts: [\n { id: 31, title: 'Quick Dinners' },\n { id: 32, title: 'Baking Bread' },\n { id: 33, title: 'Global Cuisine' },\n ],\n },\n];\n\nexport function NestedExample() {\n return (\n
    \n {data.map((cat) => (\n /* ───── 1️⃣ Outer RenderHooks for each category row ───── */\n <$ key={cat.id}>\n {({ useState, useTransition }) => {\n const [expanded, setExpanded] = useState(false);\n const [likes, setLikes] = useState(0);\n const [isPending, startTransition] = useTransition();\n\n return (\n
  • \n \n\n {expanded && (\n
      \n {cat.posts.map((post) => (\n /* ───── 2️⃣ Inner RenderHooks per post row ───── */\n <$ key={post.id}>\n {({ useState: useItemState }) => {\n const [liked, setItemLiked] = useItemState(false);\n\n const toggleLike = () => {\n setItemLiked((prev) => {\n const next = !prev;\n // 🔄 Update outer «likes» using startTransition from the parent RenderHooks\n startTransition(() => {\n setLikes((c) => c + (next ? 1 : -1));\n });\n return next;\n });\n };\n\n return (\n
    • \n {post.title}{' '}\n \n
      • \n );\n }}\n \n ))}\n
    \n )}\n
    • \n );\n }}\n \n ))}\n
\n );\n}\nNestedExample.storyName = 'Using Nested Hooks';\n// End of copied code\n\nconst meta: Meta = {\n title: 'Examples/Nested Hooks',\n component: NestedExample,\n parameters: {\n layout: 'padded',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\n" }, { "path": "src/stories/Header.tsx", "content": "import React from 'react';\n\nimport { Button } from './Button';\nimport './header.css';\n\ntype User = {\n name: string;\n};\n\nexport interface HeaderProps {\n user?: User;\n onLogin?: () => void;\n onLogout?: () => void;\n onCreateAccount?: () => void;\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (\n
\n
\n
\n \n \n \n \n \n \n \n

Acme

\n
\n
\n {user ? (\n <>\n \n Welcome, {user.name}!\n \n
\n
\n
\n);\n" }, { "path": "src/stories/Page.tsx", "content": "import React from 'react';\n\nimport { Header } from './Header';\nimport './page.css';\n\ntype User = {\n name: string;\n};\n\nexport const Page: React.FC = () => {\n const [user, setUser] = React.useState();\n\n return (\n
\n setUser({ name: 'Jane Doe' })}\n onLogout={() => setUser(undefined)}\n onCreateAccount={() => setUser({ name: 'Jane Doe' })}\n />\n\n
\n

Pages in Storybook

\n

\n We recommend building UIs with a{' '}\n \n component-driven\n {' '}\n process starting with atomic components and ending with pages.\n

\n

\n Render pages with mock data. This makes it easy to build and review page states without\n needing to navigate to them in your app. Here are some handy patterns for managing page\n data in Storybook:\n

\n
    \n
  • \n Use a higher-level connected component. Storybook helps you compose such data from the\n \"args\" of child component stories\n
    • \n
  • \n Assemble data in the page component from your services. You can mock these services out\n using Storybook.\n
    • \n
\n

\n Get a guided tutorial on component-driven development at{' '}\n \n Storybook tutorials\n \n . Read more in the{' '}\n \n docs\n \n .\n

\n
\n Tip Adjust the width of the canvas with the{' '}\n \n \n \n \n \n Viewports addon in the toolbar\n
\n
\n
\n );\n};\n" }, { "path": "src/stories/button.css", "content": ".storybook-button {\n display: inline-block;\n cursor: pointer;\n border: 0;\n border-radius: 3em;\n font-weight: 700;\n line-height: 1;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n.storybook-button--primary {\n background-color: #555ab9;\n color: white;\n}\n.storybook-button--secondary {\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n background-color: transparent;\n color: #333;\n}\n.storybook-button--small {\n padding: 10px 16px;\n font-size: 12px;\n}\n.storybook-button--medium {\n padding: 11px 20px;\n font-size: 14px;\n}\n.storybook-button--large {\n padding: 12px 24px;\n font-size: 16px;\n}\n" }, { "path": "src/stories/header.css", "content": ".storybook-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 15px 20px;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n.storybook-header svg {\n display: inline-block;\n vertical-align: top;\n}\n\n.storybook-header h1 {\n display: inline-block;\n vertical-align: top;\n margin: 6px 0 6px 10px;\n font-weight: 700;\n font-size: 20px;\n line-height: 1;\n}\n\n.storybook-header button + button {\n margin-left: 10px;\n}\n\n.storybook-header .welcome {\n margin-right: 10px;\n color: #333;\n font-size: 14px;\n}\n" }, { "path": "src/stories/page.css", "content": ".storybook-page {\n margin: 0 auto;\n padding: 48px 20px;\n max-width: 600px;\n color: #333;\n font-size: 14px;\n line-height: 24px;\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n.storybook-page h2 {\n display: inline-block;\n vertical-align: top;\n margin: 0 0 4px;\n font-weight: 700;\n font-size: 32px;\n line-height: 1;\n}\n\n.storybook-page p {\n margin: 1em 0;\n}\n\n.storybook-page a {\n color: inherit;\n}\n\n.storybook-page ul {\n margin: 1em 0;\n padding-left: 30px;\n}\n\n.storybook-page li {\n margin-bottom: 8px;\n}\n\n.storybook-page .tip {\n display: inline-block;\n vertical-align: top;\n margin-right: 10px;\n border-radius: 1em;\n background: #e7fdd8;\n padding: 4px 12px;\n color: #357a14;\n font-weight: 700;\n font-size: 11px;\n line-height: 12px;\n}\n\n.storybook-page .tip-wrapper {\n margin-top: 40px;\n margin-bottom: 40px;\n font-size: 13px;\n line-height: 20px;\n}\n\n.storybook-page .tip-wrapper svg {\n display: inline-block;\n vertical-align: top;\n margin-top: 3px;\n margin-right: 4px;\n width: 12px;\n height: 12px;\n}\n\n.storybook-page .tip-wrapper svg path {\n fill: #1ea7fd;\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n /* Visit https://aka.ms/tsconfig to read more about this file */\n\n /* Projects */\n // \"incremental\": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */\n // \"composite\": true, /* Enable constraints that allow a TypeScript project to be used with project references. */\n // \"tsBuildInfoFile\": \"./.tsbuildinfo\", /* Specify the path to .tsbuildinfo incremental compilation file. */\n // \"disableSourceOfProjectReferenceRedirect\": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */\n // \"disableSolutionSearching\": true, /* Opt a project out of multi-project reference checking when editing. */\n // \"disableReferencedProjectLoad\": true, /* Reduce the number of projects loaded automatically by TypeScript. */\n\n /* Language and Environment */\n \"target\": \"es2022\", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */\n \"lib\": [\"es2022\", \"dom\"],\n \"jsx\": \"react\", /* Specify what JSX code is generated. */\n // \"libReplacement\": true, /* Enable lib replacement. */\n // \"experimentalDecorators\": true, /* Enable experimental support for legacy experimental decorators. */\n // \"emitDecoratorMetadata\": true, /* Emit design-type metadata for decorated declarations in source files. */\n // \"jsxFactory\": \"\", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */\n // \"jsxFragmentFactory\": \"\", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */\n // \"jsxImportSource\": \"\", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */\n // \"reactNamespace\": \"\", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */\n // \"noLib\": true, /* Disable including any library files, including the default lib.d.ts. */\n // \"useDefineForClassFields\": true, /* Emit ECMAScript-standard-compliant class fields. */\n \"moduleDetection\": \"force\",\n\n /* Modules */\n \"module\": \"NodeNext\", /* Specify what module code is generated. */\n // \"rootDir\": \"./\", /* Specify the root folder within your source files. */\n \"moduleResolution\": \"nodenext\", /* Specify how TypeScript looks up a file from a given module specifier. */\n // \"baseUrl\": \"./\", /* Specify the base directory to resolve non-relative module names. */\n // \"paths\": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */\n // \"rootDirs\": [], /* Allow multiple folders to be treated as one when resolving modules. */\n // \"typeRoots\": [], /* Specify multiple folders that act like './node_modules/@types'. */\n // \"types\": [], /* Specify type package names to be included without being referenced in a source file. */\n // \"allowUmdGlobalAccess\": true, /* Allow accessing UMD globals from modules. */\n // \"moduleSuffixes\": [], /* List of file name suffixes to search when resolving a module. */\n // \"allowImportingTsExtensions\": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */\n // \"rewriteRelativeImportExtensions\": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */\n // \"resolvePackageJsonExports\": true, /* Use the package.json 'exports' field when resolving package imports. */\n // \"resolvePackageJsonImports\": true, /* Use the package.json 'imports' field when resolving imports. */\n // \"customConditions\": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */\n // \"noUncheckedSideEffectImports\": true, /* Check side effect imports. */\n \"resolveJsonModule\": true,\n // \"allowArbitraryExtensions\": true, /* Enable importing files with any extension, provided a declaration file is present. */\n // \"noResolve\": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */\n\n /* JavaScript Support */\n \"allowJs\": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */\n // \"checkJs\": true, /* Enable error reporting in type-checked JavaScript files. */\n // \"maxNodeModuleJsDepth\": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */\n\n /* Emit */\n \"declaration\": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */\n // \"declarationMap\": true, /* Create sourcemaps for d.ts files. */\n // \"emitDeclarationOnly\": true, /* Only output d.ts files and not JavaScript files. */\n \"sourceMap\": true, /* Create source map files for emitted JavaScript files. */\n // \"inlineSourceMap\": true, /* Include sourcemap files inside the emitted JavaScript. */\n // \"noEmit\": true, /* Disable emitting files from a compilation. */\n // \"outFile\": \"./\", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */\n \"outDir\": \"dist\", /* Specify an output folder for all emitted files. */\n // \"removeComments\": true, /* Disable emitting comments. */\n // \"importHelpers\": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */\n // \"downlevelIteration\": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */\n // \"sourceRoot\": \"\", /* Specify the root path for debuggers to find the reference source code. */\n // \"mapRoot\": \"\", /* Specify the location where debugger should locate map files instead of generated locations. */\n // \"inlineSources\": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */\n // \"emitBOM\": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */\n // \"newLine\": \"crlf\", /* Set the newline character for emitting files. */\n // \"stripInternal\": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */\n // \"noEmitHelpers\": true, /* Disable generating custom helper functions like '__extends' in compiled output. */\n // \"noEmitOnError\": true, /* Disable emitting files if any type checking errors are reported. */\n // \"preserveConstEnums\": true, /* Disable erasing 'const enum' declarations in generated code. */\n // \"declarationDir\": \"./\", /* Specify the output directory for generated declaration files. */\n\n /* Interop Constraints */\n \"isolatedModules\": true, /* Ensure that each file can be safely transpiled without relying on other imports. */\n // \"verbatimModuleSyntax\": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */\n // \"isolatedDeclarations\": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */\n // \"erasableSyntaxOnly\": true, /* Do not allow runtime constructs that are not part of ECMAScript. */\n // \"allowSyntheticDefaultImports\": true, /* Allow 'import x from y' when a module doesn't have a default export. */\n \"esModuleInterop\": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */\n // \"preserveSymlinks\": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */\n \"forceConsistentCasingInFileNames\": true, /* Ensure that casing is correct in imports. */\n\n /* Type Checking */\n \"strict\": true, /* Enable all strict type-checking options. */\n // \"noImplicitAny\": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */\n // \"strictNullChecks\": true, /* When type checking, take into account 'null' and 'undefined'. */\n // \"strictFunctionTypes\": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */\n // \"strictBindCallApply\": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */\n // \"strictPropertyInitialization\": true, /* Check for class properties that are declared but not set in the constructor. */\n // \"strictBuiltinIteratorReturn\": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */\n // \"noImplicitThis\": true, /* Enable error reporting when 'this' is given the type 'any'. */\n // \"useUnknownInCatchVariables\": true, /* Default catch clause variables as 'unknown' instead of 'any'. */\n // \"alwaysStrict\": true, /* Ensure 'use strict' is always emitted. */\n // \"noUnusedLocals\": true, /* Enable error reporting when local variables aren't read. */\n // \"noUnusedParameters\": true, /* Raise an error when a function parameter isn't read. */\n // \"exactOptionalPropertyTypes\": true, /* Interpret optional property types as written, rather than adding 'undefined'. */\n // \"noImplicitReturns\": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */\n // \"noFallthroughCasesInSwitch\": true, /* Enable error reporting for fallthrough cases in switch statements. */\n \"noUncheckedIndexedAccess\": true, /* Add 'undefined' to a type when accessed using an index. */\n // \"noImplicitOverride\": true, /* Ensure overriding members in derived classes are marked with an override modifier. */\n // \"noPropertyAccessFromIndexSignature\": true, /* Enforces using indexed accessors for keys declared using an indexed type. */\n // \"allowUnusedLabels\": true, /* Disable error reporting for unused labels. */\n // \"allowUnreachableCode\": true, /* Disable error reporting for unreachable code. */\n\n /* Completeness */\n // \"skipDefaultLibCheck\": true, /* Skip type checking .d.ts files that are included with TypeScript. */\n \"skipLibCheck\": true /* Skip type checking all .d.ts files. */\n },\n \"include\": [\"src\", \"vite-env.d.ts\", \".storybook\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n" }, { "path": "vite-env.d.ts", "content": "/// \n/// \n\n// Extend the existing ImportMetaEnv interface with your custom variables\ninterface ImportMetaEnv {\n readonly STORYBOOK_CODESANDBOX_TOKEN: string;\n}\n\ninterface ImportMeta {\n readonly env: ImportMetaEnv;\n}\n" }, { "path": "vitest.config.ts", "content": "import { defineConfig } from 'vitest/config';\nimport react from '@vitejs/plugin-react'; // Required for Vitest to process React components\n\nexport default defineConfig({\n plugins: [react()],\n test: {\n globals: true,\n environment: 'happy-dom', // or 'jsdom'\n include: ['src/**/*.test.{ts,tsx}'],\n testTimeout: 30000, // Increased timeout to 30 seconds\n coverage: {\n provider: 'v8', // or 'istanbul'\n reporter: ['text', 'json', 'html'],\n reportsDirectory: './coverage',\n include: ['src/**/*.{ts,tsx}'],\n exclude: [\n 'src/**/*.test.{ts,tsx}',\n 'src/**/index.{ts,tsx}', // Usually, the main export file doesn't need direct coverage if its parts are tested\n 'vitest.config.ts',\n 'vitest.setup.ts',\n ],\n },\n },\n}); " } ]