validate props passed to components that need to be hydrated

[s-kris]

Props must be JSON.stringify-able otherwise, unclear js error is thrown.
So it'll be better to have a function to validate the props and display the relevant error and suggested fix.

happy to do a PR if you can point me in the right direction :)

[nickreese]

@s-kris Initial string-ification happens here: https://github.com/Elderjs/elderjs/blob/master/src/partialHydration/partialHydration.ts and is probably a good place for an error.

The actual mounting of components happens here: https://github.com/Elderjs/elderjs/blob/master/src/partialHydration/hydrateComponents.ts but this file is pretty complex as it stands.

[s-kris]

hey @nickreese
basically, we can check for this and throw a relevant errors like this.

 try {
        JSON.stringify(props);
    } catch (e) {
        throw new Error(`Elder.js only supports valid JSON in hydrate-client. Offending component: ${name}. Offending props: ${props}.`);
    }

but here's the thing, when I was testing my component the same error is still thrown.

VM240:1 Uncaught (in promise) SyntaxError: Unexpected token N in JSON at position 0

It turns out the props I was sending are JSON.stringify() friendly. And for some reason, the above error is thrown because the props contain so many fields. When I remove for example say "description", the above error doesn't occur.
Sorry I could check to debug until here only, was caughtup in a producthunt launch :) (it became #2 product of the day :D )

[eight04]

The error is thrown when rendering the server-side component:

elderjs/src/partialHydration/inlineSvelteComponent.ts

Line 35 in 162972c

'data-ejs-props': `{JSON.stringify(${props})}`,

To have a better error message, we have to wrap the entire JSON.parse:

'data-ejs-props': `{(function(){
  try {
    return JSON.stringify(${props});
  } catch (err) {
    throw new Error("failed passing props to hydrated component. props can't be stringified.");
  }
})()}`

I'm not even sure if svelte accepts IIFE as a property.