{"id":26560600,"url":"https://github.com/wooloo26/rexie","last_synced_at":"2025-03-22T13:18:29.461Z","repository":{"id":281651397,"uuid":"945953865","full_name":"wooloo26/rexie","owner":"wooloo26","description":"⚡ 3kB React-like for PixiJS: Sync/Concurrent rendering, full PixiJS API access","archived":false,"fork":false,"pushed_at":"2025-03-18T10:30:19.000Z","size":508,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T11:35:49.445Z","etag":null,"topics":["canvas","framework","hook","javascript","jsx","pixi","react","renderer","vdom","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wooloo26.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-10T11:41:22.000Z","updated_at":"2025-03-18T10:30:23.000Z","dependencies_parsed_at":"2025-03-11T07:34:13.511Z","dependency_job_id":null,"html_url":"https://github.com/wooloo26/rexie","commit_stats":null,"previous_names":["cyfaboop/rexie","wooloo26/rexie"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wooloo26%2Frexie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wooloo26%2Frexie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wooloo26%2Frexie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wooloo26%2Frexie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wooloo26","download_url":"https://codeload.github.com/wooloo26/rexie/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244959458,"owners_count":20538629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","framework","hook","javascript","jsx","pixi","react","renderer","vdom","webgl"],"created_at":"2025-03-22T13:18:28.810Z","updated_at":"2025-03-22T13:18:29.432Z","avatar_url":"https://github.com/wooloo26.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eRexie\u003c/h1\u003e\n\u003cp align=\"center\"\u003ePixiJS | React Hooks | 3kB\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/wooloo26/rexie/tree/main/docs/ZH.md\"\u003e中文\u003c/a\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cimg width=\"600\" alt=\"preview\" src=\"https://raw.githubusercontent.com/wooloo26/rexie/refs/heads/main/docs/examples.gif\"\u003e\n\u003c/div\u003e\n\n## Features\n\n### Development\n\n- **React Hooks** - `useState`, `useEffect`...`useTransition`, `useSyncExternalStore`\n- **Component-Based** - Native JSX/TSX support with full type system\n- **Focus on Core Logic** - Dedicate to core logic while Rexie handles tedious drawing routines\n- **Sync/Concurrent** - Choose your update strategy per render\n\n### Feather-Light\n\n- **3kB Core** - No heavyweight runtime or syntax sugar, simplicity first\n- **Zero Dependencies** - Only depends on PixiJS core\n- **Direct API Access** - Full exposure of native PixiJS APIs\n- **On-Demand Rendering** - Independent multi-instance rendering, mountable to any container, disposable anytime\n\n### Beyond PixiJS\n\n- **Renderer Agnostic** - Create new renderers with \u003c100 lines of code\n- **Framework Integration** - Built for seamless embedding in React/Vue/etc\n- **Universal Core** - Platform-agnostic core with browser/Canvas/WebGL extensions\n\n## Quick Start\n\nalpha\n\n```tsx\nimport * as PIXI from 'pixi.js'\nimport { h, render, createContext } from 'rexie'\n\nimport App from './App'\n\nconst app = new PIXI.Application()\nexport const AppContext = createContext(app)\n\nasync function mount() {\n    const container = new PIXI.Container()\n    render(\n        \u003cAppContext.Provider value={app}\u003e\n            \u003cApp /\u003e\n        \u003c/AppContext.Provider\u003e,\n        container,\n    )\n\n    app.stage.addChild(container)\n    await app.init({ background: '#ffffff', resizeTo: document.body })\n    document.body.appendChild(app.canvas)\n}\n\nmount()\n```\n\n## Hooks API\n\n### No/Minor Differences\n\n`useState`, `useReducer`, `useEffect`, `useLayoutEffect`, `useCallback`, `useRef`, `useMemo`, `useContext`, `useImperativeHandle`, `useSyncExternalStore`\n\n### Differences\n\n`useTransition`: After the `startTransition` task completes, `isPending` will be updated after the nearest UI render update. If there is no rendering task, it updates immediately.\n\n## FAQ\n\n### Textures\n\nTextures will not be automatically destroyed. You need to manually manage their lifecycle.\n\n### About the `options` Property\n\nCorresponds to the constructor's `options`. This property is only set during initialization and will not update with any subsequent changes.\n\n```ts\n\u003ctext options={textStyle} width={200} /\u003e\n// equivalent to\nconst text = new PIXI.Text(textStyle)\ntext.width = 200\n```\n\n### Handling a Massive Number of `ViewContainer`\n\nIf there is a need to create thousands or even more `ViewContainer`, the performance of virtual DOM will be extremely poor. Compared to `react-dom`, it is more prone to stack overflow due to the deeper function call chains in PixiJS's API. Although `rexie` can adopt queue-based updates like Preact, the performance will still be severely degraded. Therefore, it is recommended to use `useRef` to obtain a `Container` reference and manually `addChild` `ViewContainer`. When the component unmounts, these `ViewContainer` will still be automatically destroyed, so no manual cleanup is required.\n\n### Order of Props\n\nSome setters in PixiJS have execution order dependencies. Props with non-positive-integer keys are traversed in creation order, refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#description).\n\n```ts\n// 1. When text is set before width or placed in constructor options, width affect text\n\u003ctext\n    options={{\n        text,\n    }}\n    width={width}\n/\u003e\n\u003ctext\n    text={text}\n    width={width}\n/\u003e\n\u003ctext\n    options={{\n        width,\n        text,\n    }}\n/\u003e\n// 2. When width is set before text, width won't affect text\n\u003ctext\n    options={{\n        width,\n    }}\n    text={text}\n/\u003e\n\u003ctext\n    width={width}\n    text={text}\n/\u003e\n\u003ctext\n    width={width}\n\u003e{text}\u003c/text\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwooloo26%2Frexie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwooloo26%2Frexie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwooloo26%2Frexie/lists"}