Skip to content

feat: add mochi:clientOnly directive for browser-only components#89

Open
khromov wants to merge 5 commits into
mainfrom
feat/client-only-directive
Open

feat: add mochi:clientOnly directive for browser-only components#89
khromov wants to merge 5 commits into
mainfrom
feat/client-only-directive

Conversation

@khromov

@khromov khromov commented Jun 9, 2026

Copy link
Copy Markdown
Owner
  • New mochi:clientOnly directive: component is never server-rendered — SSR emits only the island wrapper (plus optional fallback children), the browser mounts it with Svelte mount()
  • Fallback children render as an SSR placeholder and are removed at mount (not passed as a children snippet)
  • Props serialized via the existing props-ref/devalue pipeline; implicit islandId/isHydratable injected at mount
  • Combining with mochi:hydrate*/mochi:defer* is a compile error
  • Tests: preprocessor unit tests + SSR integration test with fixtures
  • Docs: new 55-client-only.md page + cross-refs in selective hydration
  • Demo: /demos/client-only/ — animated canvas reading window/navigator at script top level

@github-actions

github-actions Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Mochi review report

Try this PR

Expand instructions 
gh run download -R khromov/mochi 27437418816 -n mochi-framework-pr -D /tmp/mochi-pr && bun i /tmp/mochi-pr/mochi-framework-pr.tgz

Download manually

Dependency report

Expand report 
Direct: 11
Peer:   3 (svelte, @tailwindcss/node, @tailwindcss/oxide)
Dev:    8
Total unique packages reachable from production deps (roots + transitive): 28
Total on-disk size of those packages: 5.19 MB

Toplist — direct deps ranked by total size (self + transitive):
      total       self  count  package
    4.76 MB    2.71 MB     19  svelte
   680.0 kB   141.4 kB      3  svelte-shaker
   526.4 kB   441.4 kB      1  magic-string
   180.6 kB   145.3 kB      1  chokidar
    51.2 kB    51.2 kB      0  devalue
    30.4 kB    30.4 kB      0  deepmerge
    28.0 kB    28.0 kB      0  negotiator
    25.8 kB    25.8 kB      0  mitt
    25.3 kB    25.3 kB      0  js-cookie
    13.4 kB    13.4 kB      0  nanoid
    12.3 kB    12.3 kB      0  zimmerframe

Transitive breakdown for the heaviest deps:

  svelte (19, 2.05 MB transitive): @jridgewell/gen-mapping (91.6 kB), @jridgewell/remapping (58.0 kB), @jridgewell/resolve-uri (51.9 kB), @jridgewell/sourcemap-codec (85.0 kB), @jridgewell/trace-mapping (143.3 kB), @sveltejs/acorn-typescript (194.2 kB), @types/estree (25.5 kB), @types/trusted-types (8.4 kB), acorn (545.5 kB), aria-query (172.8 kB), axobject-query (108.3 kB), clsx (8.4 kB), devalue (51.2 kB), esm-env (3.7 kB), esrap (86.1 kB), is-reference (3.9 kB), locate-character (5.2 kB), magic-string (441.4 kB), zimmerframe (12.3 kB)

  svelte-shaker (3, 538.6 kB transitive): @jridgewell/sourcemap-codec (85.0 kB), magic-string (441.4 kB), zimmerframe (12.3 kB)

  magic-string (1, 85.0 kB transitive): @jridgewell/sourcemap-codec (85.0 kB)

  chokidar (1, 35.3 kB transitive): readdirp (35.3 kB)

Lines of code

packages/mochi
Category main PR Δ
src/**/*.test.ts 6736 6874 +138
src/{types.ts,*.d.ts} 703 705 +2
src/web-components/** 445 450 +5
Other 2834 2908 +74
Total 19453 19672 +219

Unchanged: src/Mochi.ts (1313), src/ComponentRegistry.ts (1625), src/hooks.ts (235), src/{requestContext,forms,errors}.ts (298), src/{events,log,logger}.ts (351), src/consoleLogger.ts (377), src/cookies*.ts (157), src/extensions.ts (191), src/cache.ts (157), src/middleware/** (81), src/enhance*.ts (184), src/build*.ts (258), src/proxy.ts (125), src/cli* (120), src/{csrf,serverIslandCrypto}.ts (240), src/debug-bar/** (2233), src/templates/** (790).

packages/docs
Category main PR Δ
Docs 3833 3878 +45
Total 3833 3878 +45
packages/site
Category main PR Δ
src/demos/** 5786 5915 +129
src/lib/** 949 957 +8
Other 1375 1377 +2
Total 10295 10434 +139

Unchanged: src/components/** (2159), src/stores/** (26).

packages/demos
Category main PR Δ
Total 3100 3100 0

Unchanged: src/hn/** (1083), Other (2017).

packages/minimal
Category main PR Δ
Total 536 536 0

Unchanged: Other (536).

packages/cli
Category main PR Δ
Total 479 479 0

Unchanged: src/**/*.test.ts (117), src/cli* (138), src/{create,templates,utils}.ts (220), Other (4).

@khromov

khromov commented Jun 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner Author

We should change children for default content after all and align with other components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@khromov