compilerOptions runes per directory

[bfanger]

Describe the problem

When enabling rune mode:

// svelte.config.js
export default {
  compilerOptions: { runes: true },
};

You're getting consistent behavior and are getting useful hint like:
'x' is updated, but is not declared with '$state(...)'. Changing its value will not correctly trigger updates
for your Svelte components which is great!

However this compilerOption is enabled globally so all npm packages that are not using runes will fail to compile with errors like: Cannot use 'export let' in runes mode — use '$props()' instead

Describe the proposed solution

Ideas:

Dynamic options via a callback

compilerOptions: ({ filename }) => {
  if (isMyComponentDir(filename)) {
    return { runes: true }
  }
},

.htaccess style

Additional svelte.config.js files compilerOptions are combined, also allows packages to specify behavior.

Remove the runes from compilerOptions?

Developer are expected to add <svelte:options runes={true} /> when not using any runes in a file.

Preprocessor workaround

I've written a simple preprocessor that injects <svelte:options runes /> tags into files that don't have a <svelte:option /> tag based on it filename.

const runeModePreprocessor = {
  name: "runesMode",
  markup({ content, filename }) {
    if (filename.startsWith(srcFolder) && content.indexOf("<svelte:options") === -1) {
      content += `\n<svelte:options runes />`;
    }
    return { code: content };
  },
};

https://github.com/bfanger/svelte-project-template/blob/31b9982286f7c15280775fce83bd3b5f14fc3a42/src/runesMode.js

Importance

nice to have

[gtm-nayan]

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions

[7nik]

Seems to be a duplicate of #11523
And the workaround is using dynamicCompileOptions in your svelte.config.js:

	compilerOptions: {
		runes: true
	},
	vitePlugin: {
		dynamicCompileOptions({ filename }) {
			if (filename.includes('node_modules')) {
				return { runes: false };
			}
		}
	},

[bfanger]

Thanks for sharing the dynamicCompilerOptions in the vite plugin, but at the moment that is a worse workaround than using a preprocessor:

{ runes: false } will result in ReferenceError: props is not defined once you've got dependencies that have upgraded to runes.
(Try changing that to { runes: undefined } which seems to reset it to the default autodetect mode )

Flipping the condition doesn't have the desired effect:

    if (filename.includes('node_modules') === false) {
      return { runes: true };
    }

The warnings are visible in the terminal that's running vite dev but the warnings are not shown where I want them, in VSCode.

That's because VSCode applies the preprocessors but doesn't seem to apply the dynamicCompileOptions.