WIP: merge renderTemplate + hydrateTemplate

examples/realworld/src/client.ts

@@ -1,4 +1,4 @@
-import { hydrateFromWindow } from "@typed/core"
+import { fromWindow } from "@typed/core"
 import { Storage } from "@typed/dom/Storage"
 import "./styles.css"
 import { Effect, Layer } from "effect"
@@ -8,7 +8,7 @@ import { UiClient } from "./ui/client"
 UiClient.pipe(
   Layer.provide(Ui.Live),
   Layer.provide(Storage.layer(localStorage)),
-  Layer.provide(hydrateFromWindow(window, { rootElement: document.getElementById("app")! })),
+  Layer.provide(fromWindow(window, { rootElement: document.getElementById("app")! })),
   Layer.launch,
   Effect.scoped,
   Effect.runFork

packages/compiler/src/Compiler.ts

@@ -127,7 +127,7 @@ export class Compiler {
               const template = templates[index]
               const remaining = templates.slice(index + 1)
               if (target === "dom" || target === "hydrate") {
-                return this.replaceDom(sourceFile, template, remaining, importManager, target === "hydrate")
+                return this.replaceDom(template, remaining, importManager, target === "hydrate")
               }
 
               // return this.replaceHtml(template, remaining, target === "static")
@@ -149,7 +149,6 @@ export class Compiler {
   }
 
   private replaceDom(
-    sourceFile: ts.SourceFile,
     { parts, template }: ParsedTemplate,
     remaining: Array<ParsedTemplate>,
     imports: ImportDeclarationManager,
@@ -1263,6 +1262,10 @@ function* createCommentPartStatements(
   const varName = createVarNameFromNode(node._tag, ctx)
   const commentNode = createComment("")
   const partVarName = `${varName}_part`
+  const templateValues = ts.factory.createPropertyAccessExpression(
+    ts.factory.createIdentifier(`templateContext`),
+    `values`
+  )
 
   addCompilerToolsNamespace(ctx.imports)
 
@@ -1275,7 +1278,15 @@ function* createCommentPartStatements(
         ts.factory.createPropertyAssignment(`index`, ts.factory.createNumericLiteral(node.index))
       ]),
       ts.factory.createIdentifier(varName),
-      ts.factory.createIdentifier(`templateContext`)
+      ts.factory.createIdentifier(`templateContext`),
+      ts.factory.createElementAccessExpression(
+        Chunk.reduce(
+          ctx.templatePath,
+          templateValues as ts.Expression,
+          (expr, index) => ts.factory.createElementAccessExpression(expr, index)
+        ),
+        node.index
+      )
     ])
   )
   yield runPartIfNotNull(partVarName, ctx)

packages/core/src/CoreServices.ts

@@ -15,7 +15,6 @@ import {
   server as CurrentRouteServer
 } from "@typed/router/CurrentRoute"
 import { serverLayer, staticLayer } from "@typed/template/Html"
-import { hydrateLayer } from "@typed/template/Hydrate"
 import { renderLayer } from "@typed/template/Render"
 import type * as RenderContext from "@typed/template/RenderContext"
 import * as RenderQueue from "@typed/template/RenderQueue"
@@ -57,22 +56,6 @@ export function fromWindow(
   ).pipe(Layer.provideMerge(renderLayer(window, options)), Layer.provideMerge(makeQueueLayer(options?.queue ?? "raf")))
 }
 
-/**
- * @since 1.0.0
- */
-export function hydrateFromWindow(
-  window: Window & GlobalThis,
-  options?: DomServicesElementParams & { readonly queue?: "raf" | "sync" | ["idle", IdleRequestOptions] }
-): Layer.Layer<CoreDomServices> {
-  return Layer.mergeAll(
-    GetRandomValues.implement((length: number) =>
-      Effect.succeed(window.crypto.getRandomValues(new Uint8Array(length)))
-    ),
-    Navigation.fromWindow,
-    CurrentRouteBrowser
-  ).pipe(Layer.provideMerge(hydrateLayer(window, options)), Layer.provideMerge(makeQueueLayer(options?.queue ?? "raf")))
-}
-
 /**
  * @since 1.0.0
  */

packages/template/src/Hydrate.ts

@@ -3,51 +3,17 @@
  */
 
 import * as Context from "@typed/context"
-import { Document } from "@typed/dom/Document"
-import type { DomServices, DomServicesElementParams } from "@typed/dom/DomServices"
-import type { GlobalThis } from "@typed/dom/GlobalThis"
 import { RootElement } from "@typed/dom/RootElement"
-import type { CurrentEnvironment } from "@typed/environment"
 import * as Fx from "@typed/fx/Fx"
 import * as Effect from "effect/Effect"
-import * as Layer from "effect/Layer"
+import type * as Layer from "effect/Layer"
 import { HydrateContext } from "./internal/HydrateContext.js"
-import { hydrateTemplate } from "./internal/v2/hydrate.js"
 import { getHydrationRoot } from "./internal/v2/hydration-template.js"
 import { attachRoot } from "./internal/v2/render.js"
 import type { ToRendered } from "./Render.js"
 import * as RenderContext from "./RenderContext.js"
 import { type RenderEvent } from "./RenderEvent.js"
-import { RenderTemplate } from "./RenderTemplate.js"
-
-/**
- * @since 1.0.0
- */
-export const hydrateLayer = (
-  window: Window & GlobalThis,
-  options?: DomServicesElementParams
-): Layer.Layer<
-  | RenderTemplate
-  | RenderContext.RenderContext
-  | CurrentEnvironment
-  | DomServices
-> =>
-  Layer.provideMerge(
-    RenderTemplate.layer(
-      Effect.contextWith(
-        (context: Context.Context<Document | RenderContext.RenderContext>) => {
-          const [document, ctx] = Context.getMany(
-            context,
-            Document,
-            RenderContext.RenderContext
-          )
-
-          return hydrateTemplate(document, ctx)
-        }
-      )
-    ),
-    RenderContext.dom(window, options)
-  )
+import type { RenderTemplate } from "./RenderTemplate.js"
 
 /**
  * @since 1.0.0

packages/template/src/Test.ts

@@ -21,7 +21,7 @@ import type * as Scope from "effect/Scope"
 import * as ElementRef from "./ElementRef.js"
 import { ROOT_CSS_SELECTOR } from "./ElementSource.js"
 import { renderToHtml, renderToHtmlString, serverLayer, staticLayer } from "./Html.js"
-import { hydrate, hydrateLayer } from "./Hydrate.js"
+import { hydrate } from "./Hydrate.js"
 import { adjustTime } from "./internal/utils.js"
 import { render, renderLayer } from "./Render.js"
 import type * as RenderContext from "./RenderContext.js"
@@ -263,7 +263,7 @@ export function testHydrate<R, E, Elements>(
               fromRendered(rendered)
             )
         )),
-      Effect.provide(hydrateLayer(window)),
+      Effect.provide(renderLayer(window)),
       Effect.forkScoped
     )
 

packages/template/src/compiler-tools.ts

@@ -11,7 +11,6 @@ import type * as Chunk from "effect/Chunk"
 import type * as Effect from "effect/Effect"
 import type * as Scope from "effect/Scope"
 import * as utils from "./internal/utils.js"
-import * as hydrate from "./internal/v2/hydrate.js"
 import * as hydrationTemplate from "./internal/v2/hydration-template.js"
 import * as render from "./internal/v2/render.js"
 import type { Placeholder } from "./Placeholder.js"
@@ -72,7 +71,8 @@ export const setupClassNamePart: (
 export const setupCommentPart: (
   { index }: Pick<Template.CommentPartNode, "index">,
   comment: Comment,
-  ctx: render.TemplateContext
+  ctx: render.TemplateContext,
+  renderable: Renderable<any, any>
 ) => Effect.Effect<void, any, any> | null = render.setupCommentPart
 
 /**
@@ -112,8 +112,8 @@ export const setupNodePart: (
 export const setupHydratedNodePart: (
   part: Template.NodePart,
   hole: hydrationTemplate.HydrationHole,
-  ctx: hydrate.HydrateTemplateContext
-) => Effect.Effect<void, any, any> | null = hydrate.setupHydratedNodePart
+  ctx: render.HydrateTemplateContext
+) => Effect.Effect<void, any, any> | null = render.setupHydratedNodePart
 
 /**
  * @since 1.0.0