Setup example package
Some checks failed
Lint / lint (push) Failing after 40s

This commit is contained in:
Julien Valverdé
2026-02-13 05:09:23 +01:00
parent 2c95e13aab
commit 8d8d73b3d0
12 changed files with 215 additions and 98 deletions

View File

@@ -0,0 +1,58 @@
# Effect FC
[Effect-TS](https://effect.website/) integration for React 19.2+ that allows you to write function components using Effect generators.
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.19+
- `react` & `@types/react` 19.2+
## Known issues
- React Refresh doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
## What writing components looks like
```typescript
export class Todos extends Component.make("Todos")(function*() {
const state = yield* TodosState
const [todos] = yield* useSubscribables(state.ref)
yield* useOnMount(() => Effect.andThen(
Console.log("Todos mounted"),
Effect.addFinalizer(() => Console.log("Todos unmounted")),
))
const TodoFC = yield* Todo
return (
<Container>
<Heading align="center">Todos</Heading>
<Flex direction="column" align="stretch" gap="2" mt="2">
<TodoFC _tag="new" />
{Chunk.map(todos, todo =>
<TodoFC key={todo.id} _tag="edit" id={todo.id} />
)}
</Flex>
</Container>
)
}) {}
const TodosStateLive = TodosState.Default("todos")
const Index = Component.make("Index")(function*() {
const context = yield* useContext(TodosStateLive)
const TodosFC = yield* Effect.provide(Todos, context)
return <TodosFC />
}).pipe(
Component.withRuntime(runtime.context)
)
export const Route = createFileRoute("/")({
component: Index
})
```

View File

@@ -0,0 +1,8 @@
{
"$schema": "https://biomejs.dev/schemas/latest/schema.json",
"root": false,
"extends": "//",
"files": {
"includes": ["./src/**"]
}
}

View File

@@ -0,0 +1,23 @@
{
"name": "@effect-docker/example",
"type": "module",
"license": "MIT",
"scripts": {
"lint:tsc": "tsc --noEmit",
"lint:biome": "biome lint",
"clean:cache": "rm -rf .turbo",
"clean:dist": "rm -rf dist",
"clean:modules": "rm -rf node_modules"
},
"devDependencies": {
"tsx": "^4.21.0"
},
"dependencies": {
"@effect/platform": "^0.94.4",
"@effect/platform-bun": "^0.87.1",
"@effect/platform-node": "^0.104.1",
"effect": "^3.19.16",
"effect-docker": "workspace:*",
"undici": "^7.19.0"
}
}

View File

@@ -0,0 +1,35 @@
import { HttpClient, HttpClientRequest } from "@effect/platform"
import { NodeHttpClient, NodeRuntime } from "@effect/platform-node"
import { Effect, Layer } from "effect"
import { Docker153Client } from "effect-docker"
import { Agent } from "undici"
const DockerSocketHttpClient = Layer.effect(
HttpClient.HttpClient,
Effect.map(HttpClient.HttpClient, HttpClient.mapRequest(HttpClientRequest.prependUrl("http://localhost"))),
).pipe(
Layer.provide(NodeHttpClient.layerUndiciWithoutDispatcher),
Layer.provide(
Layer.succeed(NodeHttpClient.Dispatcher, new Agent({
socketPath: "/var/run/docker.sock"
}))
),
)
export class DockerClient extends Effect.Service<DockerClient>()("@effect-docker/example/socket/DockerClient", {
effect: Docker153Client.make,
dependencies: [DockerSocketHttpClient],
}) {}
const withService = Effect.gen(function*() {
const docker = yield* DockerClient
const containers = yield* docker.listContainers({ all: true })
console.log(containers)
})
withService.pipe(
Effect.provide(DockerClient.Default),
NodeRuntime.runMain,
)

View File

@@ -0,0 +1,38 @@
{
"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,
"sourceMap": true,
"plugins": [
{ "name": "@effect/language-service" }
]
},
"include": ["./src"]
}