Web components structured in such a way which enables both server side and client side rendering.
npm install @fullstackjosh/web-componentssh
npm i @fullstackjosh/web-components
`
Usage
Import and the client-side version of any component:
`jsx
import { registerXYZComponent } from "@fullstackjosh/web-components/XYZComponent";
registerXYZComponent();
// this is a web component which relies on the shadow dom and therefore cannot be rendered server-side
return ;
`
And the equivalent server-side version:
`js
import { getXYZComponentTemplate } from "@fullstackjosh/web-components/XYZComponentTemplate";
const template = getXYZComponentTemplate();
// this is a html string with styles included which you can serve to the user
const html = template({
...props,
});
``