diff --git a/packages/effect-components/README.md b/packages/effect-components/README.md new file mode 100644 index 0000000..151d869 --- /dev/null +++ b/packages/effect-components/README.md @@ -0,0 +1,11 @@ +# Reffuse + +[Effect-TS](https://effect.website/) integration for React 19+ with the aim of integrating the Effect context system within React's component hierarchy, while avoiding touching React's internals. + +This library is in early development. While it is (almost) feature complete and mostly usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are more than welcome. + +Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory. + +## Peer dependencies +- `effect` 3.13+ +- `react` & `@types/react` 19+ diff --git a/packages/effect-components/package.json b/packages/effect-components/package.json new file mode 100644 index 0000000..6725149 --- /dev/null +++ b/packages/effect-components/package.json @@ -0,0 +1,37 @@ +{ + "name": "effect-components", + "version": "0.1.0", + "type": "module", + "files": [ + "./README.md", + "./dist" + ], + "license": "MIT", + "repository": { + "url": "git+https://github.com/Thiladev/reffuse.git" + }, + "types": "./dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + }, + "./*": { + "types": "./dist/*.d.ts", + "default": "./dist/*.js" + } + }, + "scripts": { + "build": "tsc", + "lint:tsc": "tsc --noEmit", + "pack": "npm pack", + "clean:cache": "rm -f tsconfig.tsbuildinfo", + "clean:dist": "rm -rf dist", + "clean:node": "rm -rf node_modules" + }, + "peerDependencies": { + "@types/react": "^19.0.0", + "effect": "^3.15.0", + "react": "^19.0.0" + } +} diff --git a/packages/effect-components/src/ReactComponent.ts b/packages/effect-components/src/ReactComponent.ts new file mode 100644 index 0000000..a099a97 --- /dev/null +++ b/packages/effect-components/src/ReactComponent.ts @@ -0,0 +1,25 @@ +import { Effect, Runtime, type Scope } from "effect" +import type * as React from "react" + + +export interface ReactComponent { + readonly fn: (props: P) => Effect.Effect + use(callback: (Component: React.FC

) => React.ReactNode): Effect.Effect +} + +const ReactComponentPrototype: Omit, "fn"> = { + use(this: ReactComponent, callback) { + return Effect.map( + Effect.runtime(), + runtime => callback(props => Runtime.runSync(runtime)(this.fn(props))), + ) + } +} + + +export const make = ( + fn: (props: P) => Effect.Effect +): ReactComponent => Object.setPrototypeOf( + { fn }, + ReactComponentPrototype, +) diff --git a/packages/effect-components/src/index.ts b/packages/effect-components/src/index.ts new file mode 100644 index 0000000..2a7528e --- /dev/null +++ b/packages/effect-components/src/index.ts @@ -0,0 +1 @@ +export * as ReactComponent from "./ReactComponent.js" diff --git a/packages/effect-components/tsconfig.json b/packages/effect-components/tsconfig.json new file mode 100644 index 0000000..eea16a8 --- /dev/null +++ b/packages/effect-components/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + // Enable latest features + "lib": ["ESNext", "DOM"], + "target": "ESNext", + "module": "NodeNext", + "moduleDetection": "force", + "jsx": "react-jsx", + // "allowJs": true, + + // Bundler mode + "moduleResolution": "NodeNext", + // "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + // "noEmit": true, + + // Best practices + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false, + + // Build + "outDir": "./dist", + "declaration": true + }, + + "include": ["./src"] +}