example: add primitive react rendering

TylorS · Feb 25, 2024 · fddcc93 · fddcc93
1 parent 7cc1d3a
commit fddcc93
Show file tree

Hide file tree

Showing 14 changed files with 292 additions and 6 deletions.
diff --git a/examples/react-counter/.prettierignore b/examples/react-counter/.prettierignore
@@ -0,0 +1,2 @@
+*.js
+*.ts
diff --git a/examples/react-counter/LICENSE b/examples/react-counter/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present The Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/react-counter/README.md b/examples/react-counter/README.md
@@ -0,0 +1,3 @@
+# @typed/react-counter
+
+A really primitive interop with React for rendering.
diff --git a/examples/react-counter/package.json b/examples/react-counter/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@typed/example-counter",
+  "private": true,
+  "version": "0.0.0",
+  "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tylors/typed.git"
+  },
+  "homepage": "https://github.com/tylors/typed",
+  "scripts": {
+    "build": "vite --config ./vite.config.ts build src",
+    "preview": "vite --config ./vite.config.ts preview src",
+    "start": "vite --config ./vite.config.ts serve src"
+  },
+  "keywords": [],
+  "author": "Typed contributors",
+  "license": "MIT",
+  "sideEffects": [],
+  "dependencies": {
+    "@typed/context": "workspace:*",
+    "@typed/dom": "workspace:*",
+    "@typed/fx": "workspace:*",
+    "@typed/template": "workspace:*",
+    "effect": "2.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
+    "vite": "^5.1.4",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-tsconfig-paths": "^4.3.1"
+  }
+}
diff --git a/examples/react-counter/src/index.html b/examples/react-counter/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+  <title>@typed/counter</title>
+  <meta charset="utf-8" />
+  <meta name="description" content="@typed/fp testing" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script type="module" src="/index.tsx"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/examples/react-counter/src/index.tsx b/examples/react-counter/src/index.tsx
@@ -0,0 +1,43 @@
+import * as Fx from "@typed/fx/Fx"
+import * as RefSubject from "@typed/fx/RefSubject"
+import { DomRenderEvent, renderToLayer } from "@typed/template"
+import { Effect, Layer, Runtime } from "effect"
+import * as React from "react"
+import { createRoot } from "react-dom/client"
+
+const Counter = Fx.gen(function*(_) {
+  const count = yield* _(RefSubject.of(0))
+  const scope = yield* _(Effect.scope)
+  const runtime = yield* _(Effect.runtime<never>())
+  const runFork = Runtime.runFork(runtime)
+  const run = <A, E = never>(effect: Effect.Effect<A, E, never>) => runFork(effect, { scope })
+  const inc = () => run(RefSubject.increment(count))
+  const dec = () => run(RefSubject.decrement(count))
+
+  return renderReact(Fx.map(count, (count) => (
+    <>
+      <p>{count}</p>
+      <button onClick={inc}>+</button>
+      <button onClick={dec}>-</button>
+    </>
+  )))
+})
+
+Counter.pipe(
+  renderToLayer,
+  Layer.launch,
+  Effect.runFork
+)
+
+function renderReact<E = never, R = never>(reactNode: Fx.Fx<React.ReactNode, E, R>) {
+  return Fx.suspend(() => {
+    const el = document.createElement("div")
+    el.classList.add("react-root")
+    const root = createRoot(el)
+
+    return Fx.map(reactNode, (node) => {
+      root.render(node)
+      return DomRenderEvent(el)
+    })
+  })
+}
diff --git a/examples/react-counter/tsconfig.build.json b/examples/react-counter/tsconfig.build.json
@@ -0,0 +1,30 @@
+{
+  "extends": [
+    "../../tsconfig.base.json"
+  ],
+  "compilerOptions": {
+    "outDir": "build/esm",
+    "declarationDir": "build/dts",
+    "tsBuildInfoFile": "build/tsbuildinfo/esm.tsbuildinfo",
+    "rootDir": "src",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/index.tsx"
+  ],
+  "references": [
+    {
+      "path": "../../packages/context"
+    },
+    {
+      "path": "../../packages/dom"
+    },
+    {
+      "path": "../../packages/fx"
+    },
+    {
+      "path": "../../packages/template"
+    }
+  ]
+}
diff --git a/examples/react-counter/tsconfig.examples.json b/examples/react-counter/tsconfig.examples.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "build/tsbuildinfo/examples.tsbuildinfo",
+    "rootDir": "examples",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "build/examples",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "examples/**/*.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}
diff --git a/examples/react-counter/tsconfig.json b/examples/react-counter/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "build/tsbuildinfo/tsconfig.tsbuildinfo",
+    "jsx": "react-jsx"
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.test.json"
+    },
+    {
+      "path": "./tsconfig.examples.json"
+    }
+  ]
+}
diff --git a/examples/react-counter/tsconfig.test.json b/examples/react-counter/tsconfig.test.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "build/test",
+    "declarationDir": "build/test-dts",
+    "tsBuildInfoFile": "build/tsbuildinfo/test.tsbuildinfo",
+    "rootDir": "test",
+    "types": [
+      "vitest/globals"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "test/**/*.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}
diff --git a/examples/react-counter/vite.config.ts b/examples/react-counter/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from "vite"
+import compression from "vite-plugin-compression"
+import tsconfigPaths from "vite-plugin-tsconfig-paths"
+
+export default defineConfig({
+  build: {
+    manifest: true,
+    sourcemap: true
+  },
+  plugins: [
+    tsconfigPaths({}),
+    compression()
+  ]
+})
diff --git a/examples/react-counter/vitest.config.mts b/examples/react-counter/vitest.config.mts
@@ -0,0 +1,5 @@
+/// <reference types="vitest" />
+
+import { makeTestConfig } from "../../vitest.config"
+
+export default makeTestConfig(__dirname)
diff --git a/packages/template/src/internal/render.ts b/packages/template/src/internal/render.ts
@@ -208,6 +208,7 @@ const RenderPartMap: RenderPartMap = {
   },
   "node": (templatePart, node, ctx) => {
     const makeHydrateContext = ctx.makeHydrateContext
+    const renderable = ctx.values[templatePart.index]
     const part = makeRenderNodePart(
       templatePart.index,
       node as HTMLElement | SVGElement,
@@ -216,10 +217,19 @@ const RenderPartMap: RenderPartMap = {
       !!makeHydrateContext
     )
 
+    if (isDirective(renderable)) {
+      const effect = Effect.zipRight(renderable(part), ctx.refCounter.release(templatePart.index))
+      if (makeHydrateContext) {
+        return Effect.provideService(effect, HydrateContext, makeHydrateContext(templatePart.index))
+      } else {
+        return effect
+      }
+    }
+
     ctx.expected++
 
     const handle = handlePart(
-      ctx.values[templatePart.index],
+      renderable,
       Sink.make(ctx.onCause, (value) => Effect.zipRight(part.update(value), ctx.refCounter.release(templatePart.index)))
     )
 
@@ -492,17 +502,22 @@ const RenderPartMap: RenderPartMap = {
     return effects
   },
   "text-part": (templatePart, node, ctx) => {
+    const renderable = ctx.values[templatePart.index]
     const part = TextPartImpl.browser(
       ctx.document,
       templatePart.index,
       node as HTMLElement | SVGElement,
       ctx.renderContext
     )
 
+    if (isDirective(renderable)) {
+      return Effect.zipRight(renderable(part), ctx.refCounter.release(templatePart.index))
+    }
+
     ctx.expected++
 
     return handlePart(
-      ctx.values[templatePart.index],
+      renderable,
       Sink.make(
         ctx.onCause,
         (value) => Effect.zipRight(part.update(value as any), ctx.refCounter.release(templatePart.index))
@@ -735,6 +750,8 @@ function removeChildren(where: HTMLElement, previous: Rendered) {
 }
 
 function replaceChildren(where: HTMLElement, wire: Rendered) {
+  console.log("replaceChildren", wire)
+
   where.replaceChildren(...getNodes(wire))
 }
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# @typed/react-counter

		A really primitive interop with React for rendering.