Bugs with component name when hydrating.

[dmitrysmagin]

Hi.

1. When you import a component under the name which doesn't coincide with the filename, it fails to be hydrated because svelteComponent can't find it.

import Comp from "CompLongName.svelte";

<Comp hydrate-client={{}} />

This will give an error:
TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received undefined
at new NodeError (internal/errors.js:322:7)
at validateString (internal/validators.js:124:11)
at Module.require (internal/modules/cjs/loader.js:967:3)
at require (internal/modules/cjs/helpers.js:101:18)
at C:\Users\user\src\homepage\node_modules@elderjs\elderjs\build\utils\svelteComponent.js:21:20

2. When the component name and the corresponding file name have digits, they are trimmed from internal component name

import Comp2test from "Comp2test.svelte";

<Comp2test hydrate-client={{}} />

Internally the name is trimmed to "Comp", so svelteComponent can't find the .svelte file again.

While N1 could be considered a feature (though it's worth noting somewhere on the page), the N2 is definitely a bug (perhaps, regex one)

[eight04]

N1: duplicate of #215.

N2: we have to fix the regex here:

elderjs/src/partialHydration/partialHydration.ts

Line 21 in 6d2cd15

const hydrateableComponentPattern = /<([a-zA-Z]+)[^>]+hydrate-client={([^]*?})}[^/>]*\/>/gim;