Easily build JAMStack websites or server-run web-apps, using the same components and toolset for rendering the static content (server-side-rendered or prerendered) and dynamic content (client-side interactive/dynamic content).
Example: Static HTML
import { compile } from '@connectv/sdh';
compile(renderer =>
<html>
<head>
<title>Hellow World Example</title>
</head>
<body>
<h1>Hellow World!</h1>
</body>
</html>
).save('dist/index.html');
► TRY IT!
Example: Static HTML using Components
export function Card({ title, text }, renderer) {
return <div class="card">
<h2>{title}</h2>
<p>{text}</p>
</div>
}
import { compile } from '@connectv/sdh';
import { Card } from './card';
compile(renderer =>
<fragment>
<h1>List of stuff</h1>
<Card title='Carrots' text='they are pretty good for you.'/>
</fragment>
).save('dist/index.html');
► TRY IT!
Example: Interactive content
import { state } from '@connectv/core';
import { transport } from '@connectv/sdh';
export function Counter(_, renderer) {
const count = state(0);
return <div onclick={() => count.value++}>You have clicked {count} times!</div>
}
export const $Counter = transport(Counter);
import { compile, save, Bundle } from '@connectv/sdh';
import { $Counter } from './counter';
const bundle = new Bundle('./bundle.js', 'dist/bundle.js');
compile(renderer =>
<fragment>
<p>
So this content will be prerendered, but the following component will be
rendered on the client side.
</p>
<$Counter/>
</fragment>
)
.post(bundle.collect())
.save('dist/index.html')
.then(() => {
save(bundle);
});
Installation
npm i @connectv/sdh
NodeJS does not support JSX/TSX syntax on its own, so for enabling that you would need to use a transpiler such as
Typescript or Babel. You should then configure your transpiler to use renderer.create
as its JSX factory:
For Typescript:
Add this to your tsconfig.json
file:
"compilerOptions": {
"jsx": "react",
"jsxFactory": "renderer.create"
}
Add this to your Babel config:
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "renderer.create"
}]
]
}