Client-side components created under Node.js are missing important lifecycle events.

[brev]

Describe the bug

Hello! Thanks for the great software and community.

Issue: Svelte Client-side components created under Node.js are missing important lifecycle events.

From the documentation, the difference between a Client- and Server-side component is supposed to be the { generate: "dom|ssr" } option during compile().

However, any Client-side component created with Node.js will not be complete. Three of its lifecycle methods (onMount, beforeUpdate, afterUpdate) will be missing, replaced with no-op SSR stubs.

This means that important lifecycle methods of client-side Svelte/Kit components cannot be tested under Node.js + Svelte ESM loader + JSDOM! For specifics on what I'm up to, please see: sveltejs/kit#19 (comment)

Related context:

• onDestroy hook not called on SSR since version 3.39.0 in production mode #6676
• resolve svelte to a different module in SSR mode #6372
• expose svelte/ssr which have noop for lifecycle events #6416

Seems like the SSR no-ops need to be applied based on the { generate: "dom|ssr" } option, instead of automatically loading from the exports in package.json?

I believe this used to work correctly, probably back before the related package.json changes in the issue links above.

I may be able to work on this (very slowly), but would need some guidance to get started.

Thanks.

Reproduction

https://github.com/brev/issue-svelte-node-client-side-lifecycle

Logs

No response

System Info

System:
    OS: macOS 12.1
    CPU: (4) x64 Intel(R) Core(TM) m3-7Y32 CPU @ 1.10GHz
    Memory: 473.13 MB / 8.00 GB
    Shell: 5.8.1 - /usr/local/bin/zsh
  Binaries:
    Node: 17.5.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 8.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Firefox: 97.0
    Safari: 15.2
  npmPackages:
    svelte: ^3.46.0 => 3.46.4

Severity

annoyance

[bluwy]

Seems like the SSR no-ops need to be applied based on the { generate: "dom|ssr" } option, instead of automatically loading from the exports in package.json?

We can't apply based on generate since onMount, beforeUpdate, afterUpdate can be used everywhere including in JS files.

Maybe using nodejs conditions with --condition=browser could bypass it, but sounds a bit hacky to me. Personally, I'm not a huge fan of jsdom solutions and prefer using something like playwright or cypress instead.

[brev]

I've found a functional workaround, which isn't too ugly:

<!-- Component.svelte -->
<script>
  import { onMount } from "svelte";

  let name = "Alice";

  export const onMountHandle = () => {
    name = "Bob";
  }

  onMount(onMountHandle);
</script>

<div>
  <h1>{name}</h1>
</div>

// Component.test.js
test("onMount", async () => {
  const { component, findByText, getByText } = render(Component);
  assert.ok(getByText("Alice"));

  component.onMountHandle()
  assert.ok(await findByText("Bob"));
});

[brev]

Closing as SvelteKit is moving even futher away from this.

I've found https://github.com/nickbreaton/vitest-svelte-kit to be a great alternative solution.