sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
77.45k stars 4.04k forks source link

Custom Element Lifecycles missing #9350

Open vipero07 opened 8 months ago

vipero07 commented 8 months ago

Describe the bug

When making a custom element the following lifecycles never appear to run: onMount afterUpdate beforeUpdate

I haven't tried others.

Reproduction

Pull down this repo, run pnpm dev note how the images show up. Now update the svelte version to 4.2.2 (this hasn't worked since 4.0.0 though), fix the panorama.svelte file to use customElement instead of tag and run pnpm dev. Note how the images don't load. Upon inspection of the generated bundle stats from the rollup visualizer I can see it is missing any references to the methods used inside of the onMount method. I tried just putting console.log inside the onMount method and see no logs.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 18.88 GB / 31.69 GB
  Binaries:
    Node: 21.0.0 - ~\AppData\Local\Volta\tools\image\node\21.0.0\node.EXE
    Yarn: 4.0.0-rc.53 - ~\AppData\Local\Volta\tools\image\yarn\4.0.0-rc.53\bin\yarn.CMD
    npm: 10.2.1 - ~\AppData\Local\Volta\tools\image\npm\10.2.1\bin\npm.CMD
    pnpm: 8.9.2 - C:\Program Files\Volta\pnpm.EXE
  Browsers:
    Edge: Chromium (118.0.2088.61)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    rollup: ^4.1.4 => 4.1.4
    svelte: ^4.2.2 => 4.2.2

Severity

blocking an upgrade

flipkickmedia commented 5 months ago

Im seeing this also.

<script>
        import {onMount,beforeUpdate,afterUpdate} from 'svelte';
        beforeUpdate(() => {
               console.log("beforeupdate")
        });

        afterUpdate(() => {
            console.log("afterupdate")
        });

        onMount(() => {
            console.log("onmount")

        });
</script>

<div>test</div>