🐛 `$effect.active` is now `$effect.tracking` (readable.svelte.js:33:12)

[oneezy]

Describe the bug

after updating to svelte@next.201 i see the error:

[plugin:vite-plugin-svelte-module] node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`

Reproduction

should just be able to update svelte and see issue

Logs

$ pnpm dev

> @oneezy/ui@2.0.0-next.50 dev V:\@oneezy\ui
> vite dev --port 1111

Re-optimizing dependencies because lockfile has changed
Port 1111 is in use, trying another one...

  VITE v5.3.5  ready in 2992 ms

  ➜  Local:   http://localhost:1112/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
10:09:22 AM [vite] Pre-transform error: node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`
10:09:22 AM [vite] Pre-transform error: node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking` (x2)
10:09:22 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/activeElement/activeElement.svelte.js:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/activeElement/index.js:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/index.js:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/index.js:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /src/lib/utils/observer.svelte.js:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /src/lib/components/atoms/Title/Title.svelte:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /src/lib/index.js:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /src/routes/(template)/+page.svelte:
|- 

10:09:22 AM [vite] Error when evaluating SSR module /src/routes/(template)/+layout.svelte:
|- 

{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * \n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * \n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}
{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * ```html\n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * ```\n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}
10:09:22 AM [vite] Error when evaluating SSR module /src/routes/+error.svelte:
|-

{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * ```html\n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * ```\n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}
{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * ```html\n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * ```\n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}
Failed to fetch page: HttpError { status: 404, body: { message: 'Page not found' } }
{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * ```html\n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * ```\n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}
{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * ```html\n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * ```\n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}
Failed to fetch page: HttpError { status: 404, body: { message: 'Page not found' } }
{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * ```html\n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * ```\n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}
{
  name: 'CompileError',
  id: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js',
  message: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js:33:12 `$effect.active` is now `$effect.tracking`',
  frame: ' 31 |      #stop = null;\n' +
    ' 32 |      get current() {\n' +
    ' 33 |          if ($effect.active()) {\n' +
    '                                   ^\n' +
    ' 34 |              $effect(() => {\n' +
    ' 35 |                  this.#subscribers++;',
  code: 'rune_renamed',
  stack: '',
  loc: {
    line: 33,
    column: 12,
    file: 'node_modules/.pnpm/runed@0.10.0_svelte@5.0.0-next.201/node_modules/runed/dist/utilities/Readable/readable.svelte.js'
  },
  plugin: 'vite-plugin-svelte-module',
  pluginCode: 'import { tick } from "svelte";\n' +
    '/**\n' +
    ' * A class that contains a reactive `current` property\n' +
    ' *\n' +
    ' * Accepts an initial value, and an optional `start` function, which has a `set` function as its first argument,\n' +
    ' * which is used to update the value of the `current` property.\n' +
    ' *\n' +
    ' * @example\n' +
    ' * ```html\n' +
    ' * <script>\n' +
    ' * const now = new Readable(new Date(), (set) => {\n' +
    ' * \tconst interval = setInterval(() => set(new Date()), 1000);\n' +
    ' * \treturn () => clearInterval(interval);\n' +
    ' * });\n' +
    ' * </script>\n' +
    ' *\n' +
    ' * <p>{now.current.toLocaleTimeString()}</p>\n' +
    ' * ```\n' +
    ' *\n' +
    ' * @see {@link https://runed.dev/docs/utilities/readable}\n' +
    ' *\n' +
    ' */\n' +
    'export class Readable {\n' +
    '    #current = $state();\n' +
    '    #start;\n' +
    '    constructor(initialValue, start) {\n' +
    '        this.#current = initialValue;\n' +
    '        this.#start = start;\n' +
    '    }\n' +
    '    #subscribers = 0;\n' +
    '    #stop = null;\n' +
    '    get current() {\n' +
    '        if ($effect.active()) {\n' +
    '            $effect(() => {\n' +
    '                this.#subscribers++;\n' +
    '                if (this.#subscribers === 1) {\n' +
    '                    this.#subscribe(true);\n' +
    '                }\n' +
    '                return () => {\n' +
    '                    tick().then(() => {\n' +
    '                        this.#subscribers--;\n' +
    '                        if (this.#subscribers === 0) {\n' +
    '                            this.#unsubscribe();\n' +
    '                        }\n' +
    '                    });\n' +
    '                };\n' +
    '            });\n' +
    '        }\n' +
    '        else if (this.#subscribers === 0) {\n' +
    '            this.#subscribe(false);\n' +
    '            this.#unsubscribe();\n' +
    '        }\n' +
    '        return this.#current;\n' +
    '    }\n' +
    '    #subscribe(inEffect) {\n' +
    '        this.#stop =\n' +
    '            this.#start((value) => {\n' +
    '                this.#current = value;\n' +
    '            }, inEffect) ?? null;\n' +
    '    }\n' +
    '    #unsubscribe() {\n' +
    '        if (this.#stop === null)\n' +
    '            return;\n' +
    '        this.#stop();\n' +
    '        this.#stop = null;\n' +
    '    }\n' +
    '}\n'
}

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 19.79 GB / 31.75 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.6 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/kit: ^2.5.18 => 2.5.18 
    runed: ^0.10.0 => 0.10.0 
    svelte: next => 5.0.0-next.201

Severity

blocking all usage of WithRunes

[huntabyte]

Hey @oneezy, it appears you're running runed version 0.10.0, if you update to the latest does this issue persist?

[oneezy]

Doh! I thought I had updated but just getting back around to checking this..It's working perfect after an update.