chore: fix all tsc errors in tests and gate CI on typecheck

.changeset/typecheck-tests.md

@@ -0,0 +1,5 @@
+---
+"@effex/dom": patch
+---
+
+Fix the `renderToString` return-type inference so provided dependencies (`RendererContext`, `ControlCtx`, `SuspenseBoundaryCtx`, `Scope`) are properly subtracted from the output `R`. Previously the signature used `Deps | R`, which TypeScript can't do set-subtraction from, so those tags leaked into the returned Effect's requirements — callers whose element required `Scope` (from `Signal.make`) or the other provided tags saw them appear in `Effect.runPromise` arguments even though `renderToString` itself provides them internally. Switched to `Exclude<R, Deps>`; the runtime behaviour is unchanged.

.github/workflows/ci.yml

@@ -21,6 +21,8 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
+      - run: pnpm typecheck
+
       - run: pnpm build
 
       - run: pnpm test -- --run

packages/core/src/AsyncReadable.test.ts

@@ -1,8 +1,8 @@
 import { Effect, Option, Scope } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { AsyncReadable } from "./AsyncReadable";
-import { Signal } from "./Signal";
+import { AsyncReadable } from "./AsyncReadable.js";
+import { Signal } from "./Signal.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, Scope.Scope>): Promise<A> =>
   Effect.runPromise(Effect.scoped(effect));

packages/core/src/Mutation.test.ts

@@ -1,8 +1,8 @@
 import { Effect, Option, Scope } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { Mutation } from "./Mutation";
-import { Signal } from "./Signal";
+import { Mutation } from "./Mutation.js";
+import { Signal } from "./Signal.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, Scope.Scope>): Promise<A> =>
   Effect.runPromise(Effect.scoped(effect));

packages/core/src/Readable.test.ts

@@ -1,8 +1,8 @@
 import { Chunk, Effect, Stream } from "effect";
 import { describe, expect, it } from "vitest";
 
-import * as Readable from "./Readable";
-import * as Signal from "./Signal";
+import * as Readable from "./Readable.js";
+import * as Signal from "./Signal.js";
 
 describe("Readable", () => {
   describe("make", () => {

packages/core/src/Ref.test.ts

@@ -1,7 +1,7 @@
 import { Effect, Fiber } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { Ref } from "./Ref";
+import { Ref } from "./Ref.js";
 
 describe("Ref", () => {
   it("should create a ref with null current initially", async () => {

packages/core/src/Signal.test.ts

@@ -1,8 +1,8 @@
 import { Effect, Stream } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { Readable } from "./Readable";
-import { Signal } from "./Signal";
+import { Readable } from "./Readable.js";
+import { Signal } from "./Signal.js";
 
 describe("Signal.fromNullable", () => {
   it("should return existing signal when provided", async () => {

packages/core/src/SignalArray.test.ts

@@ -1,8 +1,8 @@
 import { Effect, Fiber, Option, Scope, Stream } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { Readable } from "./Readable";
-import { Signal } from "./Signal";
+import { Readable } from "./Readable.js";
+import { Signal } from "./Signal.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, Scope.Scope>): Promise<A> =>
   Effect.runPromise(Effect.scoped(effect));

packages/core/src/SignalMap.test.ts

@@ -1,8 +1,8 @@
 import { Effect, Fiber, Option, Scope, Stream } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { combine } from "./Readable";
-import { Signal } from "./Signal";
+import { combine } from "./Readable.js";
+import { Signal } from "./Signal.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, Scope.Scope>): Promise<A> =>
   Effect.runPromise(Effect.scoped(effect));

packages/core/src/SignalSet.test.ts

@@ -1,8 +1,8 @@
 import { Effect, Fiber, Scope, Stream } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { combine } from "./Readable";
-import { Signal } from "./Signal";
+import { combine } from "./Readable.js";
+import { Signal } from "./Signal.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, Scope.Scope>): Promise<A> =>
   Effect.runPromise(Effect.scoped(effect));

packages/core/src/SignalStruct.test.ts

@@ -1,8 +1,8 @@
 import { Effect, Fiber, Scope, Stream } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { combine } from "./Readable";
-import { Signal } from "./Signal";
+import { combine } from "./Readable.js";
+import { Signal } from "./Signal.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, Scope.Scope>): Promise<A> =>
   Effect.runPromise(Effect.scoped(effect));

packages/core/src/Transition.test.ts

@@ -1,8 +1,8 @@
 import { Effect } from "effect";
 import { describe, expect, it } from "vitest";
 
-import { Signal } from "./Signal";
-import { InvalidTransition, Transition } from "./Transition";
+import { Signal } from "./Signal.js";
+import { InvalidTransition, Transition } from "./Transition.js";
 
 describe("Transition", () => {
   describe("make", () => {

packages/dom/src/Animation/Animation.test.ts

@@ -1,13 +1,13 @@
 import { Effect } from "effect";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { runEnterAnimation, runExitAnimation } from "./core";
+import { runEnterAnimation, runExitAnimation } from "./core.js";
 import {
   calculateStaggerDelay,
   stagger,
   staggerEased,
   staggerFromCenter,
-} from "./index";
+} from "./index.js";
 
 // Mock window.matchMedia for reduced motion tests
 const mockMatchMedia = (matches: boolean) => {

packages/dom/src/Boundary.test.ts

@@ -1,10 +1,10 @@
 import { Effect, Layer } from "effect";
 import { beforeEach, describe, expect, it } from "vitest";
 
-import { Boundary } from "./Boundary";
-import { $ } from "./Element";
-import { DOMRendererLive } from "./Render/DOMRenderer";
-import { ClientSuspenseBoundaryCtx } from "./SuspenseBoundaryCtx";
+import { Boundary } from "./Boundary.js";
+import { $ } from "./Element/index.js";
+import { DOMRendererLive } from "./Render/DOMRenderer.js";
+import { ClientSuspenseBoundaryCtx } from "./SuspenseBoundaryCtx/index.js";
 
 // ClientSuspenseBoundaryCtx depends on DOMRendererLive
 const TestLayer = Layer.provideMerge(

packages/dom/src/Control/Control.test.ts

@@ -4,10 +4,10 @@ import { beforeEach, expect } from "vitest";
 
 import { Readable, Signal } from "@effex/core";
 
-import { ClientControlCtx, each, match, when } from ".";
-import { collect } from "../Collect";
-import { $ } from "../Element";
-import { DOMRendererLive } from "../Render/DOMRenderer";
+import { collect } from "../Collect.js";
+import { $ } from "../Element/index.js";
+import { DOMRendererLive } from "../Render/DOMRenderer.js";
+import { ClientControlCtx, each, match, when } from "./index.js";
 
 const TestLayer = Layer.mergeAll(ClientControlCtx, DOMRendererLive);
 

packages/dom/src/Element/core.test.ts

@@ -3,9 +3,9 @@ import { beforeEach, describe, expect, it } from "vitest";
 
 import { RendererContext, Signal } from "@effex/core";
 
-import { DOMRendererLive } from "../Render/DOMRenderer";
-import * as Core from "./core";
-import { make as makeRef } from "./ref";
+import { DOMRendererLive } from "../Render/DOMRenderer.js";
+import * as Core from "./core.js";
+import { make as makeRef } from "./ref.js";
 
 const runTest = <A, E>(
   effect: Effect.Effect<A, E, Scope.Scope | RendererContext>,

packages/dom/src/Element/ref.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from "vitest";
 
 import { Readable } from "@effex/core";
 
-import { bindElementToRef, make } from "./ref";
+import { bindElementToRef, make } from "./ref.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, Scope.Scope>): Promise<A> =>
   Effect.runPromise(Effect.scoped(effect));

packages/dom/src/Portal.test.ts

@@ -1,10 +1,10 @@
 import { Effect, Exit, Scope } from "effect";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
-import { collect } from "./Collect";
-import { $ } from "./Element";
-import { Portal } from "./Portal";
-import { DOMRendererLive } from "./Render/DOMRenderer";
+import { collect } from "./Collect.js";
+import { $ } from "./Element/index.js";
+import { Portal } from "./Portal.js";
+import { DOMRendererLive } from "./Render/DOMRenderer.js";
 
 describe("Portal", () => {
   let portalRoot: HTMLDivElement;

packages/dom/src/Render/DOMRenderer.test.ts

@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it } from "vitest";
 
 import { RendererContext } from "@effex/core";
 
-import { DOMRenderer, DOMRendererLive } from "./DOMRenderer";
+import { DOMRenderer, DOMRendererLive } from "./DOMRenderer.js";
 
 const runTest = <A>(effect: Effect.Effect<A, never, RendererContext>) =>
   Effect.runPromise(effect.pipe(Effect.provide(DOMRendererLive)));

packages/dom/src/Render/client/client.test.ts

@@ -1,10 +1,10 @@
 import { Effect, Fiber } from "effect";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
-import { collect } from "../../Collect";
-import { $ } from "../../Element";
-import { DOMRendererLive } from "../DOMRenderer";
-import { mount } from "./client";
+import { collect } from "../../Collect.js";
+import { $ } from "../../Element/index.js";
+import { DOMRendererLive } from "../DOMRenderer.js";
+import { mount } from "./client.js";
 
 describe("mount", () => {
   let container: HTMLElement;

packages/dom/src/Render/hydrate/hydrate.test.ts

@@ -3,12 +3,12 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { Readable, Signal } from "@effex/core";
 
-import { Boundary } from "../../Boundary";
-import { collect } from "../../Collect";
-import { each, match, when } from "../../Control";
-import { $ } from "../../Element";
-import { renderToString } from "../server";
-import { hydrate } from "./index";
+import { Boundary } from "../../Boundary.js";
+import { collect } from "../../Collect.js";
+import { each, match, when } from "../../Control/index.js";
+import { $ } from "../../Element/index.js";
+import { renderToString } from "../server/index.js";
+import { hydrate } from "./index.js";
 
 describe("Hydration", () => {
   let container: HTMLElement;

packages/dom/src/Render/server/index.ts

@@ -24,7 +24,7 @@
  * @module
  */
 
-import { Effect, Layer } from "effect";
+import { Effect, Layer, type Scope } from "effect";
 
 import {
   RendererContext,
@@ -73,13 +73,13 @@ export const renderToString = <
   E = never,
   R = never,
 >(
-  element: Element.Element<
-    A,
-    E,
-    RendererContext | ControlCtx | SuspenseBoundaryCtx | R
-  >,
+  element: Element.Element<A, E, R>,
   _options: RenderToStringOptions = {},
-): Effect.Effect<string, E, R> => {
+): Effect.Effect<
+  string,
+  E,
+  Exclude<R, RendererContext | ControlCtx | SuspenseBoundaryCtx | Scope.Scope>
+> => {
   const StringRendererLayer = Layer.succeed(
     RendererContext,
     StringRenderer as Renderer<unknown>,
@@ -105,7 +105,11 @@ export const renderToString = <
     Effect.provide(StringRendererLayer),
     Effect.provide(SSRControlCtx),
     withSSRContext,
-  );
+  ) as Effect.Effect<
+    string,
+    E,
+    Exclude<R, RendererContext | ControlCtx | SuspenseBoundaryCtx | Scope.Scope>
+  >;
 };
 
 // Re-export types and utilities

packages/dom/src/Render/server/server.test.ts

@@ -3,11 +3,11 @@ import { describe, expect, it } from "vitest";
 
 import { Readable, Signal } from "@effex/core";
 
-import { Boundary } from "../../Boundary";
-import { collect } from "../../Collect";
-import { each, match, when } from "../../Control";
-import { $ } from "../../Element";
-import { renderToString } from "./index";
+import { Boundary } from "../../Boundary.js";
+import { collect } from "../../Collect.js";
+import { each, match, when } from "../../Control/index.js";
+import { $ } from "../../Element/index.js";
+import { renderToString } from "./index.js";
 
 describe("SSR", () => {
   describe("renderToString", () => {

packages/dom/src/Template.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from "vitest";
 
 import { Readable, Signal } from "@effex/core";
 
-import { t } from "./Template";
+import { t } from "./Template.js";
 
 describe("Template (t)", () => {
   describe("static templates", () => {

packages/dom/src/VirtualList/VirtualList.test.ts

@@ -3,17 +3,17 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { Readable, Signal } from "@effex/core";
 
-import { $ } from "../Element";
-import { DOMRendererLive } from "../Render/DOMRenderer";
+import { $ } from "../Element/index.js";
+import { DOMRendererLive } from "../Render/DOMRenderer.js";
 import {
   calculateItemOffset,
   calculateScrollToPosition,
   calculateTotalHeight,
   calculateVisibleRange,
   parseHeight,
   rangesEqual,
-} from "./helpers";
-import { ClientVirtualListCtx, virtualEach, VirtualListRef } from "./index";
+} from "./helpers.js";
+import { ClientVirtualListCtx, virtualEach, VirtualListRef } from "./index.js";
 
 const runTest = <A, R>(effect: Effect.Effect<A, never, R>) =>
   Effect.runPromise(

packages/dom/src/helpers/strings.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { toCamelCase, toKebabCase } from "./strings";
+import { toCamelCase, toKebabCase } from "./strings.js";
 
 describe("toKebabCase", () => {
   it("should convert camelCase to kebab-case", () => {

packages/router/src/Link.test.ts

@@ -86,7 +86,7 @@ describe("Link", () => {
 
       const el = await Effect.runPromise(
         Link(
-          { to: UserRoute, params: { id: "123" } },
+          { to: UserRoute as LinkProps["to"], params: { id: "123" } },
           Effect.succeed("User"),
         ).pipe(Effect.scoped, Effect.provide(layer)),
       );

packages/router/src/Navigation.test.ts

@@ -1,4 +1,4 @@
-import { Effect, Option, Schema } from "effect";
+import { Effect, Schema } from "effect";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import {