Skip to content

Latest commit

 

History

History
145 lines (115 loc) · 3.32 KB

README.md

File metadata and controls

145 lines (115 loc) · 3.32 KB
Raw

repo banner

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

// card.tsx

const style = `
  display: inline-block;
  vertical-align: top;
  padding: 8px;
  border-radius: 8px;
  margin: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
`;

export function Card({ title, text }, renderer) {
  return <div style={style}>
      <h2>{title}</h2>
      <p>{text}</p>
    </div>
}
// main.tsx

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

// counter.tsx

import { state } from "@connectv/core";
import { transport } from "@connectv/sdh/transport";

const style = `
  border-radius: 3px;
  background: #424242;
  cursor: pointer;
  padding: 8px;
  color: white;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
`;

export function Counter(_, renderer) {
  const count = state(0);
  return (
    <div style={style} onclick={() => count.value++}>
      You have clicked {count} times!
    </div>
  );
}

export const $Counter = transport(Counter); // --> transports `Counter` to client-side
// main.tsx

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())                    // --> collect all necessary dependencies in the bundle
.save('dist/index.html')
.then(() => save(bundle))                  // --> build the bundle and store it on fs

► TRY IT!

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"
}

For Babel (plugin-transform-react-jsx):

Add this to your Babel config:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "renderer.create"
    }]
  ]
}