![](\"assets/defuss_mascott.png\")
\n\n\n\n\n defuss\n
![](\"assets/defuss_renderer_coverage_report.png\")
\n\n#### How does the `defuss/render` it work?\n\nA modern build tool like `Vite` (`Astro` builds on `Vite`) watches for changes in your codebase. When you change your code in your code editor, it will tell a transpiler (e.g. `esbuild`, `swc`, `tsc` or `babel`) to read the changed code file and turn it into valid JavaScript code for the target runtime (a browser, Node.js, etc.). When this is done, it will pass all JavaScript code to a bundler to create final, optimized products of code. \n\nBuild tools like `Vite` (and also `Astro`) allow developers to hook into that process and inject 3rd party plugins. `defuss/render` is such a plugin. It will use `esbuild` or `babel` to turn the JSX dialect code (think: `![](\"assets/defuss_cache_coverage_report.png\")
\n\n#### How to use `defuss/cache`?\n\n```ts\nimport { cache } from 'defuss'\n\nconst demoCache = cache('memory') // alternatives: 'local' | 'session' | 'memory'\n\n// store a value\ndemoCache.set('abc', 123)\n\n// read a previously stored value, if not existing, return the default (0)\nconst valueStored = demoCache.get('abc', 0)\n\n// remove a single value\ndemoCache.remove('abc')\n\n// delete all values\ndemoCache.removeAll()\n```\n\n#### How does the `defuss/cache` work?\n\nThe `defuss/cache` module provides a isomorphic (aka. \"runs everywhere\") API for caching across different JavaScript runtime environments, using `localStorage`, `sessionStorage`, and in-memory storage. \n\n- **What**: It offers a simple key/value API for storage operations, supports middleware for custom read/write logic, and provides a fallback to in-memory storage when `localStorage` or `sessionStorage` are unavailable.\n \n- **Why**: This design ensures compatibility in both browser and server-side environments, addressing limitations like private mode restrictions and SSR unavailability of web storage APIs.\n\n- **Where**: \n - In the browser, it uses `localStorage` and `sessionStorage` through the [`WebStorageProvider`](./src/cache/client/index.ts) class.\n - On the server, it defaults to in-memory storage, ensuring that caching is always possible regardless of the environment, as seen in the [`server/index.ts`](./src/cache/server/index.ts).\n - The logic for determining the storage provider is encapsulated in the [`getPersistenceProvider`](./src/cache/client/index.ts) function, which selects the appropriate storage mechanism based on the runtime context.\n\n---\n---\n\n![](\"https://raw.githubusercontent.com/kyr0/defuss/refs/heads/main/assets/defuss_comic.png\")
\n\n