[feat] use a simpler insert and append function when not compile with hydratable

[tanhauhau]

Fixes #6462

Use back the old insert and append method, if it is not compile with hydratable: true

Before submitting the PR, please make sure you do the following

• Prefix your PR title with [feat], [fix], [chore], or [docs].
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

[dummdidumm]

Question for understanding: What's this about? There's only methods ending with _hydration

[tanhauhau]

1. the function you are looking at here, is the magic that turns

@insert(...)

into

import { insert } from 'svelte/internal';
insert(...);

2. svelte/internal exposes a lot of methods, which includes insert and insert_dev, see https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dev.ts

the function you see here, decides on whether to use insert or insert_dev from @insert by checking the compileOptions.dev, similarly, we could decide to use insert or insert_hydration based on compileOptions.hydratable

3. to determine the list of exports from svelte/internal, and then decide whether is there a xxx_dev exported, we build the svelte/internal and write them into a file internal_exports.ts, see

svelte/rollup.config.js

Lines 86 to 92 in 931738e

	writeBundle(bundle) {
	if (dir === 'internal') {
	const mod = bundle['index.mjs'];
	if (mod) {
	fs.writeFileSync('src/compiler/compile/internal_exports.ts', `// This file is automatically generated\nexport default new Set(${JSON.stringify(mod.exports)});`);
	}
	}

for @xxx, the function above check whether xxx_hydration is present within internal_exports, if so, import xxx_hydration instead of xxx. it then checks if xxx_hydration_dev is present, if so it will use xxx_hydration_dev instead of xxx_hydration.

[dummdidumm]

Thanks for the thourough answer! What I don't understand though is why there's this inner if clause for each of these cases. The methods are called append_hydration_dev, but the if clauses look to me like there's also appendHydrationDev which is not the case, or am I misunderstanding something there?
Or in code:
Why this

								if (compile_options.hydratable) {
									if (internal_exports.has(`${name}_hydration`)) {
										name += '_hydration';
									} else if (internal_exports.has(`${name}Hydration`)) {
										name += 'Hydration';
									}
								}

and not this?

								if (compile_options.hydratable) {
									if (internal_exports.has(`${name}_hydration`)) {
										name += '_hydration';
									}
								}

Edit: aaah got the answer, it's the classes

[tanhauhau]

Yea.. there's SvelteComponentDev

svelte/src/runtime/internal/dev.ts

Line 120 in 931738e

export class SvelteComponentDev extends SvelteComponent {

and HtmlTagHydration

[benmccann]

this seems like it could be worth a code comment