sveltejs / svelte-hmr Goto Github PK

Describe the bug

When creating and running a bare project in a folder where an apostrofe is in the path it throws an import analysis error.

For example in a folder such as: D:\TestRepo's\svelte-app
Renaming the folder to remove the apostrofe will remove the error and allows the project to run again.

See logs for more information.

Reproduction

Any svelte-kit project where the pathname contains an apostrofe. Other characters were not tested.

Logs

23:48:26 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: D:/TestRepo's/appie/.svelte-kit/generated/root.svelte:783:1015
  781|  }
  782|  
  783|  import * as ___SVELTE_HMR_HOT_API from 'D:/TestRepo's/appie/node_modules/svelte-hmr/runtime/hot-api-esm.js';import { adapter as ___SVELTE_HMR_HOT_API_PROXY_ADAPTER } from 'D:/TestRepo's/appie/node_modules/svelte-hmr/runtime/proxy-adapter-dom.js';if (import.meta && import.meta.hot) { if (false) import.meta.hot.acceptExports(['default']);; Root = ___SVELTE_HMR_HOT_API.applyHmr({ m: import.meta, id: "D:/TestRepo's/appie/.svelte-kit/generated/root.svelte", hotOptions: {"preserveLocalState":false,"noPreserveStateKey":["@hmr:reset","@!hmr"],"preserveAllLocalStateKey":"@hmr:keep-all","preserveLocalStateKey":"@hmr:keep","noReload":false,"optimistic":false,"acceptNamedExports":true,"acceptAccessors":true,"injectCss":false,"cssEjectDelay":100,"native":false,"importAdapterName":"___SVELTE_HMR_HOT_API_PROXY_ADAPTER","noOverlay":true,"allowLiveBinding":false,"partialAccept":true}, Component: Root, ProxyAdapter: ___SVELTE_HMR_HOT_API_PROXY_ADAPTER, acceptable: true, preserveLocalState: false, emitCss: true, }); }
     |





                                                        ^
  784|  export default Root;
  785|
      at formatError (file:///D:/TestRepo's/appie/node_modules/vite/dist/node/chunks/dep-75f53616.js:43944:46)
      at TransformContext.error (file:///D:/TestRepo's/appie/node_modules/vite/dist/node/chunks/dep-75f53616.js:43940:19)
      at TransformContext.transform (file:///D:/TestRepo's/appie/node_modules/vite/dist/node/chunks/dep-75f53616.js:41693:22)
      at async Object.transform (file:///D:/TestRepo's/appie/node_modules/vite/dist/node/chunks/dep-75f53616.js:44234:30)
      at async loadAndTransform (file:///D:/TestRepo's/appie/node_modules/vite/dist/node/chunks/dep-75f53616.js:54901:29)
      at async viteTransformMiddleware (file:///D:/TestRepo's/appie/node_modules/vite/dist/node/chunks/dep-75f53616.js:64296:32) (x2)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
    Memory: 1.14 GB / 7.95 GB
  Binaries:
    Node: 16.20.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 115.0.5790.170
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.188)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    svelte: ^4.0.5 => 4.1.2

Severity

annoyance

The following code, in vanilla hot template, triggers a "Maximum call stack size" on loading:

App.svelte

<!-- App.svelte -->

<script>
  export let ready = false
</script>

<svelte:options accessors={true} />

{#if ready}

{:else}
  <div>Loading...</div>
{/if}

// main.js

import App from './App.svelte'

const app = new App({
  target: document.body,
  props: {
    name: 'world',
  },
})

setTimeout(() => {
  app.ready = true
})

// recreate the whole app if an HMR update touches this module
if (import.meta.hot) {
  import.meta.hot.dispose(() => {
    app.$destroy()
  })
  import.meta.hot.accept()
}

As we chatted about it on Discord, that would be very cool to have HMR on a global SCSS file for SvelteKit like that:

// $layout.svelte
<style lang="scss" global>
    @import "../style/style.scss";
</style>

Right now it doesn't seem to hot reload the changes when changing an imported SCSS file.

Describe the bug

this i use to observe changed value
$: {
filterSearchResults(searchTerm);
console.log(selections);
}
------ but this goes out of control and keeps printing forever
setInterval(() => {
console.log(selections);
}, 1000);

Reproduction

this i use to observe changed value
$: {
filterSearchResults(searchTerm);
console.log(selections);
}
------ but this goes out of control and keeps printing forever
setInterval(() => {
console.log(selections);
}, 1000);

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 7.16 GB / 15.94 GB
  Binaries:
    Node: 20.6.1 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD        
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.7.6 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.91)
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.1 => 3.0.1 
    @sveltejs/adapter-node: ^2.0.1 => 2.0.1
    @sveltejs/kit: ^2.0.4 => 2.0.4
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1
    svelte: ^4.2.8 => 4.2.8
    vite: ^5.0.10 => 5.0.10

Severity

serious, but I can work around it

Additional Information

import.meta is only recognized by Webpack 5 (webpack/webpack#6719 (comment)) and it will cause error like this in Webpack 4.

ERROR in ./src/App.svelte 97:303
Module parse failed: 'import' and 'export' may only appear at the top level (97:303)
File was processed with these loaders:
 * ./node_modules/svelte-loader/index.js
You may need an additional loader to handle the result of these loaders.
|       }
| }
> import * as ___SVELTE_HMR_HOT_API from '/home/ishitatsuyuki/Documents/projectl/node_modules/svelte-loader/lib/hot-api.js';import ___SVELTE_HMR_HOT_API_PROXY_ADAPTER from '/home/ishitatsuyuki/Documents/projectl/node_modules/svelte-hmr/runtime/proxy-adapter-dom.js';if (module && module.hot) { if (false) import.meta.hot.accept(); App = ___SVELTE_HMR_HOT_API.applyHmr({ m: module, id: "\"src/App.svelte\"", hotOptions: {"preserveLocalState":false,"noPreserveStateKey":["@hmr:reset","@!hmr"],"preserveAllLocalStateKey":"@hmr:keep-all","preserveLocalStateKey":"@hmr:keep","noReload":false,"optimistic":true,"acceptNamedExports":true,"acceptAccessors":true,"injectCss":true,"cssEjectDelay":100,"native":false,"compatVite":false,"importAdapterName":"___SVELTE_HMR_HOT_API_PROXY_ADAPTER","absoluteImports":true,"noOverlay":false}, Component: App, ProxyAdapter: ___SVELTE_HMR_HOT_API_PROXY_ADAPTER, acceptable: true, cssId: undefined, nonCssHash: undefined, ignoreCss: false, }); }
| export default App;
| 
 @ ./src/renderer.ts 31:0-23
 @ multi ./src/renderer.ts webpack-hot-middleware/client

This was introduced by rixo@a5e0973. Perhaps it could be reverted.

System.err: TypeError: Cannot create property 'm' on boolean 'false'

for a component

<script>
  export let prop
</script>

see halfnelson/svelte-native#123

Please understand that I already spent too much time before deciding about posting this issue here, and I think that this repository is the best fit for it at the moment:

• This all started after reading the deprecation notice at https://github.com/intrnl/vite-plugin-svelte about using https://github.com/sveltejs/rollup-plugin-svelte or https://github.com/rixo/rollup-plugin-svelte-hot due to the official support for rollup plugins in Vite2. But the details are lacking. I tried to write something there but unfortunately, the repository is archived and read only.
• I already managed to use https://github.com/sveltejs/rollup-plugin-svelte with svelte-preprocess and https://github.com/sass/dart-sass by adding some minimal configuration and everything is working smoothly with development and production modes (see below).
• https://github.com/vitejs/vite isn't the right place for this issue for these reasons:
  • Vite2 is expecting the support for components libraries by using plugins (even for vue.js) https://vitejs.dev/plugins/
  • This repository (https://github.com/rixo/svelte-hmr) is about bringing HMR support to svelte and Vite is already mentioned at Svelte HMR tools section. I'm not requesting that you support Vite2 but we may use this as a starting point for the crowd to join the discussion if any.

** This is the configuration I'm using for Vite2 + Svelte without HMR Support:**

// vite.config.js

import svelte from 'rollup-plugin-svelte'
const preprocess = require('./svelte.config.js').preprocess // this is optional
const production = (process.env.NODE_ENV === 'production')

export default {
    plugins: [
        svelte({
            preprocess, // this is optional
            dev: !production,
            emitCss: false // this is needed during development to avoid error messages claiming about missing css files
                           // e.g: claiming about missing App.css!
        })
    ],
  optimizeDeps: {
    include: ['svelte/internal', 'svelte/store'] // likely you'll need to add more entries as you use some other modules in your app
                                                 // e.g: 'svelte/transition'
  }
}

Unfortunately, I'm failing to achieve the same thing based on some configuration content from https://github.com/rixo/svelte-template-hot and this is expected as Vite2 is likely not using rollup-plugin-hot.

when modify the ChatRoute.svelte file and save it , hmr is effect ,but tauri log duplicate, and the old svelte file is cached and be run!

09-22 20:56:59.066 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte - Line 269 - Msg: kkk onBlur
09-22 20:56:59.067 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte - Line 245 - Msg: Android keyboard exit2
09-22 20:56:59.068 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695386546100 - Line 269 - Msg: kkk onBlur
09-22 20:56:59.068 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695386546100 - Line 245 - Msg: Android keyboard exit2
09-22 20:56:59.068 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695386570693 - Line 269 - Msg: kkk onBlur
09-22 20:56:59.068 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695386570693 - Line 245 - Msg: Android keyboard exit2
09-22 20:56:59.068 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695387039174 - Line 269 - Msg: input onBlur
09-22 20:56:59.069 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695387039174 - Line 245 - Msg: Android keyboard exit1
09-22 20:56:59.069 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695387399206 - Line 269 - Msg: input onBlur
09-22 20:56:59.069 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695387399206 - Line 245 - Msg: Android keyboard exit1
09-22 20:56:59.069 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695387400735 - Line 269 - Msg: input onBlur
09-22 20:56:59.069 25989 25989 I Tauri/Console: File: http://tauri.localhost/src/routes/ChatRoute.svelte?t=1695387400735 - Line 245 - Msg: Android keyboard exit1

I am not sure the issue is occured by tauri or svelte.

Moving here from sveltejs/kit#1653

Describe the bug
When JavaScript is in a string, HMR code is inserted into it.

<code>
{`
const product = 1 * 1;

export default product;
`.trim()}
</code>

is displayed in the browser as

const product = 1 * 1; import * as ___SVELTE_HMR_HOT_API from '/sveltekit-javascript-repro/node_modules/svelte-hmr/runtime/hot-api-esm.js';import { adapter as ___SVELTE_HMR_HOT_API_PROXY_ADAPTER } from '/sveltekit-javascript-repro/node_modules/svelte-hmr/runtime/proxy-adapter-dom.js';if (import.meta && import.meta.hot) { if (false) import.meta.hot.accept(); product = ___SVELTE_HMR_HOT_API.applyHmr({ m: import.meta, id: "/sveltekit-javascript-repro/src/routes/index.svelte", hotOptions: {"preserveLocalState":false,"noPreserveStateKey":["@hmr:reset","@!hmr"],"preserveAllLocalStateKey":"@hmr:keep-all","preserveLocalStateKey":"@hmr:keep","noReload":false,"optimistic":true,"acceptNamedExports":true,"acceptAccessors":true,"injectCss":false,"cssEjectDelay":100,"native":false,"importAdapterName":"___SVELTE_HMR_HOT_API_PROXY_ADAPTER","noOverlay":true}, Component: product, ProxyAdapter: ___SVELTE_HMR_HOT_API_PROXY_ADAPTER, acceptable: true, preserveLocalState: false, emitCss: true, }); } export default product;

Repro
https://github.com/kwangure/sveltekit-javascript-repro

Expected behavior
HMR code should not be injected into strings.

Severity
It's not severe, but it it annoying. It's possible to work around it by escaping/HTML-encoding the JS text.

I'm getting tired of projects and websites that say "We do TLA" but never tell you what TLA stands for.

This would also attract users - once I looked it up this looks possibly useful. :-)

I'm having some bizarre issues with the latest 0.6.1, I'd previously (like 2 days ago) created a project with 0.6.0 and updated it to 0.6.1 and started getting some crazy errors, I spent a few minutes looking at it this evening and found I can repro with the templates as well:

npx svite create -ts -pm yarn my-first-svite-project
yarn dev

results in (I'm on windows):

[vite] Optimizable dependencies detected:
svelte/animate, svelte/easing, svelte/internal, svelte/motion, svelte/store, svelte/transition, svelte, svelte-hmr/runtime/proxy-adapter-dom, svelte-hmr/runtime/hot-api-esm

[vite] Dep optimization failed with error:
Could not load \node_modules\svelte\internal (imported by node_modules\svelte-hmr\runtime\svelte-hooks.js): ENOENT: no such file or directory, open 'C:\node_modules\svelte\internal'
[Error: Could not load \node_modules\svelte\internal (imported by node_modules\svelte-hmr\runtime\svelte-hooks.js): ENOENT: no such file or directory, open 'C:\node_modules\svelte\internal'] {

Seemingly it's resolving imports as though they are from root which on windows would be c:.

On a somewhat unrelated note, I see you removed esbuild, in 0.6.0 the esbuild module would pull down an esbuild.exe that lived in its node_modules dir. Every so often (I think when I'd kill the dev process) the executable would get magically deleted, I'd have to remove the esbuild node_modules dir and reinstall with yarn install --check-files.

👋

I've got this issue when "source": "remote" is enabled in the snowpack config, the error comes from svelte-hmr but it may not be the guilty

To reproduce:

• Bootstrap a svelte project with create-snowpack-app

npx create-snowpack-app test --template @snowpack/app-template-svelte-typescript

• Then add source: "remote" to snowpack.config.js

Describe the issue

When updating the code of parent component, the local state of children component is lost(with preserveLocalState: true). While the local state of parent component can be kept.

In below screenshot, the local state of Counter will reset to default when App is change. Because in svelte-hmr, when parent component is changed, it will recreate itself(can keep local state) and it's children components(without keeping local state).

Expected behavior

The local state of children is kept as well when updating parent component, just like react does. It's annoying when debugging between parent component and children components if the local state is lost.

And developer may think it's a bug of HMR because of the inconsistence.

I got this error lately, not really knowing why and where this come from. Tried with a fresh clone from the svelte-template-hot git repo, I get the same error.

Any lead? 🙈

I integrated twin.macro into my svelte project, and everything works as expected, but after making any change, HMR always errors out with "ReferenceError: tw is not defined".

Here's a reproduction repo. Run yarn dev, then make any change in the template, and the error will show up.

The parts of the code using tw, in and out of the template, are replaced with a JS object of the corresponding tailwind styles, but HMR (or something else?) is capturing tw as if it's a reactive component variable, as seen in the compiled output:

  $$self.$capture_state = () => ({
    css: _emotion_css__WEBPACK_IMPORTED_MODULE_1__["css"],
    tw,
    bigText
  });

I'm not sure what would be the best way around this 🤔 I can provide any additional details as needed

I had an issue today with Svite and svelte-hmr when the page was only showing changes when I manually reloaded the page. In my application I had directly installled svelte-hmr. The issue just occurs when I install [email protected] and above. The issue does not occur when I install [email protected] or below.

In my Svite application I can remove svelte-hmr from the package.json since Svite has a dependency (indirectly) on svelte-hmr (0.10.1). So my solution to this issue is to not directly install svelte-hmr in my application.

I tried to debug why this is causing a problem and got as far as seeing that acceptable is undefined and therefore
in hot-api.js:72 canAccept is false. acceptable is set by calling isAcceptable() in function createMakeHot/makeHot but I don't think that this function is ever called.

Tested with this default Svite application and [email protected]
https://github.com/wfisk/hot

After component update i see

Failed to init component
<Sidebar>
TypeError: Cannot read property 'children' of undefined
    at removeNode (<anonymous>:118:31)
    at Object.block.d (<anonymous>:280:11)
    at destroy_component (http://localhost:8080/_snowpack/pkg/svelte.internal.v3.37.0.js:1336:32)
    at Sidebar.$destroy (http://localhost:8080/_snowpack/pkg/svelte.internal.v3.37.0.js:1443:5)
    at Sidebar.$destroy (http://localhost:8080/_snowpack/pkg/svelte.internal.v3.37.0.js:1552:11)
    at Sidebar.targetCmp.$replace (http://localhost:8080/_snowpack/pkg/svelte-hmr.runtime.hot-api-esm.v0.13.3.js:178:20)
    at refreshComponent (http://localhost:8080/_snowpack/pkg/svelte-hmr.runtime.hot-api-esm.v0.13.3.js:415:28)
    at ProxyAdapterDom.rerender (http://localhost:8080/_snowpack/pkg/svelte-hmr.runtime.proxy-adapter-dom.v0.13.3.js:196:5)
    at http://localhost:8080/_snowpack/pkg/svelte-hmr.runtime.hot-api-esm.v0.13.3.js:644:9
    at Array.forEach (<anonymous>)
    ```

If you have some code that accepts both a svelte component or a function, you can tell them apart with things like:

import { SvelteComponent } from 'svelte';
import Component from './Component.svelte';

// Option 1
!!Component.prototype instanceof SvelteComponent;

// Option 2
!!Component.prototype.$destroy;

However, when you've got svelte-hmr enabled then ProxyComponent gets in the way and neither of these work.

Please could ProxyComponent be changed in some way so that there is something we can do to tell between functions and components that will also work with svelte-hmr?

Thanks.

Hi I'm new to Svelte so I'm not sure if this is the right place to ask this problem.
Basically I have a YoutubePlayer component as follow:

<script >
  import { onMount } from 'svelte';

  export let youtubePlayer: YouTubePlayer;
  export let videoId: string | undefined;
  export let playing = false;

  const playerId = crypto.randomUUID();

  $: {
    if (videoId && youtubePlayer && typeof youtubePlayer.loadVideoById === 'function') {
    youtubePlayer.loadVideoById(videoId);
    }
  }

  $: {
    if (youtubePlayer.playVideo &&
      youtubePlayer.pauseVideo
    ) {
      if (playing) {
        youtubePlayer.playVideo();
      } else {
        youtubePlayer.pauseVideo();
      }
    }
  }

  onMount(() => {
    console.log('MOUNT');
    function load() {
      youtubePlayer = new YT.Player(playerId, {
        videoId,
        playerVars: { autoplay: 1, mute: 1 },
      });
    }

    if (window.YT) {
      load();
    } else {
      // @ts-ignore
      window.onYouTubeIframeAPIReady = load;
    }
  });
</script>

<svelte:head>
  <script src="https://www.youtube.com/iframe_api"></script>
</svelte:head>

<div id={playerId} />

When I comment/uncomment this part and save the file..

$: {
    if (youtubePlayer.playVideo &&
      youtubePlayer.pauseVideo
    ) {
      if (playing) {
        youtubePlayer.playVideo();
      } else {
        youtubePlayer.pauseVideo();
      }
    }
}

... then onMount will be triggered again and a new instance of YoutubePlayer is created.
Since I don't show/hide the component, I expect it to be not mounted again.

Hi there,

I am not sure if this error related to Svelte or svelte-hmr. I try to build Svelte for Laravel using webpack (from laravel-mix), once I try to build it, got the following error:

WARNING in ./node_modules/.pnpm/[email protected][email protected]/node_modules/svelte-hmr/runtime/proxy-adapter-dom.js 7:21-52
export 'insert_hydration' (imported as 'svelteInternal') was not found in 'svelte/internal'

Hi @rixo / @dominikg,

I'd like to find out if at all possible that the reload mechanism associated with ProxyComponent could be exposed on $$ / internal API; perhaps name it hmr_reload. A use case just presented itself for the platform that I deliver my Svelte UI framework on as things go. This is a TTRPG / VTT / Foundry VTT. They just enabled custom hot reloading for data files including localization / i18n. I can easily tap into the platforms hot reload callback and reload the mounted Svelte component with access to the reload function that currently is only used for import.meta.hot internally to svelte-hmr otherwise it is not accessible.

It should be noted that I simply expose the reload method on ProxyComponent for this proof of concept demo. Ideally it would be exposed on $$ though as internal API.

Thanks for your work on this package. I can see bespoke hot reloading made possible with this one adjustment and I know all the devs using my UI framework would like to have hot reloading for language / i18n data changes.

Here is a video demoing hot reload for i18n by modifying a language / translation JSON file on Foundry + my Svelte UI framework:

This might not be the place for this, but it's the only work really out there with Svelte + HMR, so:

Any ideas on how to get the web component output working with HMR? I'm looking at https://open-wc.org/docs/development/hot-module-replacement/ which looks for a hotReplacedCallback on the outputted web component.

Not particularly familiar with HMR, so any pointers here on how I could implement this would be awesome!

This issue is affecting Rollup, Nollup and Webpack

1. Create a new project using either rollup or webpack template
2. Open App.svelte and replace content with code listed below:
3. Run the development server
4. Edit App.svelte (e.g: by adding emply lines), then save to force HMR
5. Inspect the logs

Code:

<!-- HMR is breaking the binding -->
<div bind:this={targetElement}>target element</div>

<script>
    export let name // comment this line to kill all problems
    import { onMount, onDestroy, tick } from 'svelte'

	let interval
	let targetElement

	onMount(async () => {
		interval = setInterval(() => { console.log('interval...') }, 1000)

		console.log('before tick:')
		console.log('targetElement:', targetElement) // referencing the new dom element after HMR
		console.log('parent:', targetElement.parentNode) // 'body' is the parent
		console.log('interval:', interval)
		console.log('')

		await tick() // issue: restoring non exported state is done during this phase.

		console.log('after tick:')
		console.log('targetElement:', targetElement) // issue: referencing the older element, and no longer referencing the current dom element. use chrome dev tools and hover on the log to confirm
		console.log('parent:', targetElement.parentNode) // 'null'
		console.log('interval:', interval) // even interval is replaced with the old value, and the correct value for use during destruction is lost
		console.log('')
	})

	onDestroy(() => {
		// issue: targetElement is still referencing the oldest element
		
		console.log('onDestroy:')
		console.log('interval:', interval) // issue: interval is referencing the first ever created interval and no way to stop it
		console.log('')
		clearInterval(interval) // this isn't destroying the recently created interval
	})
</script>

Hi @rixo et al.

I'm working full time+ on a desktop app like UI library for Svelte and have now been testing w/ the latest Vite & HMR. Each "application" has an external JS class reference that mounts a Svelte component; think the outer application window / header bar. This external class controls closing the window and positional aspects. HMR currently works fine for children components of the main mounted Svelte component for the app window. However, for refreshes in the main mounted component for each app window I need to receive a specific callback in the outer JS application class to update the mounted element reference and component details and hook it up to the existing position store that is located in the external class.

I have followed the Svelte store subscriber mechanism in ProxyComponent adding a single subscribe method that returns an unsubscribe function. I am aware that the ideal contract of ProxyComponent doesn't add any methods as it passes through everything to the wrapped actual Svelte component. I would be more than glad to discuss alternatives.

I have verified that the changes I have made in my fork pass all tests and that this feature solves my problem. I haven't added any new tests yet or made a formal PR as I'd like to discuss these proposed changes:
https://github.com/typhonjs-svelte/svelte-hmr
https://github.com/typhonjs-svelte/svelte-hmr/commit/9cc56aebb3342071065b119a744c203478cbce68

Just for some background here is a dev snapshot overview that shows my desktop app UI library in action. Presently I'm developing this UI library on the Foundry VTT TTRPG platform, but also plan to make it generally available to Svelte community in the near future for any app dev purposes.
https://www.youtube.com/watch?v=yIc0fYh1YGM&t

svelte 3.24.1 adds $$set to Component.
sveltejs/svelte@ec0f79c#diff-ecb0aaf6c6a96e9db9ecc8572bf838ab

Due to this svelte-hmr proxy no longer works correctly and reactivity is broken.

I'm sending a PR shortly

It seems that no matter which component I edit, HMR will reload entire component tree on svelte-native.
I edit plain small component children but still face the same behavior.

Is there any kind of debugging mode for HMR I could try to provide with more information?

Describe the bug

When a component exposes a function with export const doStuff = () => { /* code */ } so that an outer component can invoke it, the code inside the exported function doesn't have access to the local variables anymore after reload.

Reproduction

https://svelte.dev/repl/5d2a100498f34c50ad9ce2ff2a4e3569?version=3.46.4

Logs

No response

System Info

macOS

Severity

annoyance

├─┬ @sveltejs/vite-plugin-svelte 3.0.2
│ └─┬ svelte-hmr 0.15.3
│ └── ✕ unmet peer svelte@"^3.19.0 || ^4.0.0": found 5.0.0-next.48

Hello, I have this issue that I'm debugging and wanted to file it here in case someone might have some insight offhand. I can run my SvelteKit app just fine directly on localhost, but when I give it a more prod like setup, running through a couple layers of proxy that do SSL termination and authentication, I end up with this fatal error:

index.mjs:649 Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (index.mjs:649)
    at setContext (index.mjs:679)
    at instance (root.svelte? [sm]:14)
    at init (index.mjs?v=2047e563:1485)
    at new Root (root.svelte? [sm]:16)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:240)
    at new Proxy<Root> (proxy.js:340)
    at Renderer._init (start.js:620)
    at Renderer.start (start.js:504)

I've spent a couple hours investigating and I'm mystified at the moment. All my JS resources are loading fine. I'll keep debugging on this but if anyone recognizes the stack trace or can imagine how this might happen I'd be thankful!

I keep having this issue on screen with svelte-hmr (using Sapper tho)

Failed to init component
<[location]>
TypeError: page.set is not a function
    at Location.$$self.$inject_state (http://127.0.0.1:38670/client/@hot/src/routes/location/[country]/[location].js:706:35)
    at restoreState (http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/svelte-hooks.js:87:15)
    at createComponent (http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/svelte-hooks.js:158:13)
    at Location.targetCmp.$replace (http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/svelte-hooks.js:200:21)
    at refreshComponent (http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/proxy.js:126:29)
    at ProxyAdapterDom.rerender (http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/proxy-adapter-dom.js:72:11)
    at refreshComponent (http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/proxy.js:116:23)
    at ProxyAdapterDom.rerender (http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/proxy-adapter-dom.js:72:11)
    at http://127.0.0.1:38670/client/@hot/node_modules/.pnpm/registry.npmjs.org/svelte-hmr/0.1.4/node_modules/svelte-hmr/runtime/proxy.js:303:15
    at Array.forEach (<anonymous>)

I basically fetch a request to get photos from the current URL and update a store writable like this:

// ...
import { apiEndpoints, site, locations, currentLocation } from '../../../store'
import { stores } from '@sapper/app'
// ...
const { page } = stores()
// ...
// Update current location
const location = $locations.find(loc => loc.slug === $page.params.location)
currentLocation.set({ location, photos })

// Define full location
const locationFull = `${location.name}, ${location.country.name}`

But whenever I update something in a variable or anything, I get the previous error. Tried many things but can't see why. This is not replicating using a more standard rollup config without HMR/svelte-hot.

this https://github.com/sveltejs/svelte-hmr/blob/master/packages/svelte-hmr/lib/make-hot.js#L447 only checks for false, in svelt 3.53+ it needs to check for 'external' too

see sveltejs/svelte#7914

alongside the path to hot api, adapter path should be exposed as well.

this is to get vite and pnpm interop to work correctly without having svelte-hmr as peer dependency

making svelte-hmr a peer dependency in vite-plugin-svelte doesn't seem right, and the only possible solution is to create two runtime files on the plugin that will in turn import the ones from svelte-hmr

alternative solution would be to copy createMakeHot function over, but i think that it would be best to discuss about this first 🙂

Had an issue this morning where hot-api-esm.js and proxy-adapter-dom.js both started trying to load from the root of my hard drive rather than the dev website after installing updates (using SvelteKit / vite).

Tracked it down to the "/" added at the start of this:
https://github.com/rixo/svelte-hmr/blob/f41cefc8296dd32a172627b330f895bf196eacd7/index.js#L5

Sorry, completely unfamiliar with the package but removing the "/" made things work again.

To reproduce, just create a brand new project as per https://github.com/sveltejs/kit, then start dev mode - the two files above will probably fail to load and the app not function.

To fix, add "svelte-hmr": "0.13.1" to your package.json to use the previous version of this package.

Hello,

I'm working on some change on the way Svelte manage the event-handler via the on:event directive.
My changes work fine as long as the code is not reloaded via HMR...

In fact my code process the handlers added to the component, via .$on() (called by on:event={handler}), who were stored on cmp.$$.callbacks.
But when the code is refreshed via HMR, the component is fully recreated with props, and cmp.$$.callbacks is updated, but I have no way to detect that, so my code cannot (re)process the handlers correctly.

I need a way to know that the component was reloaded in order to reprocess cmp.$$.callback.

I see this comment about the undocumented hook cmp.$$.on_hmr : #57 (comment)
But it seem it didn't work on my case, because this field is initialized when svelte-hmr instrument the component (line 216 of svelte-hooks.js), and it will overwritte my own hook initialized when my component is created :

    targetCmp.$$.on_hmr = []

I edited this line of svelte-hooks.js in order to keep my hooks :

   targetCmp.$$.on_hmr = targetCmp.$$.on_hmr || [];

It's seem to work for me, but I don't know how Svelte-HMR works nor the impact of this change.

Or is there another way to detect code reload ?

Thanks

When creating a new Svelte project with pnpm create svelte and choosing Svelte 5, pnpm install warns about unmet peer dependencies. svelte-hmr lists dependencies on svelte@"^3.19.0 || ^4.0.0", but not Svelte 5.

If I ignore the error and proceed, everything seems to work as it should, but it would be nice if the svelte-hmr package explicitly listed Svelte 5 has a valid peer dependency.

I tried to kick the tires on snowpack, and I'm encountering an error when I try to use one of my components in dev mode. It seems to be related to svelte-hmr, I think.

This is the exception I see on the client:

<AddSymbolsDialog>
Error: 'target' is a required option
    at new SvelteComponentDev (http://localhost:8080/web_modules/svelte/internal.js:1628:19)
    at new AddSymbolsDialog (http://localhost:8080/_dist_/AddSymbolsDialog.js:185:3)
    at createProxiedComponent (http://localhost:8080/web_modules/svelte-hmr/runtime/hot-api-esm.js:201:9)
    at new ProxyComponent (http://localhost:8080/web_modules/svelte-hmr/runtime/hot-api-esm.js:440:20)
    at new Proxy<AddSymbolsDialog> (http://localhost:8080/web_modules/svelte-hmr/runtime/hot-api-esm.js:504:11)
    at create_if_block (http://localhost:8080/web_modules/svelte-simple-modal.js:609:25)
    at Object.p (http://localhost:8080/web_modules/svelte-simple-modal.js:963:17)
    at update (http://localhost:8080/web_modules/svelte-simple-modal.js:247:36)
    at flush (http://localhost:8080/web_modules/svelte-simple-modal.js:216:13)

It works fine running from a rollup bundle.

Full source to this project is available here on the snowpack branch.

I put together a very minimal project that reproduces the issue. To reproduce:

git clone https://git.sr.ht/~tuxpup/minimal-modal-hmr-test
cd minimal-modal-hmr-test
npm install
npm run dev

Then click on the "Show a big surprise" button.

To see how it should work:

npm run build
npm run serve

Then visit http://localhost:5000 and click the same button. You should see a modal with an OK button instead of the exception.