Notoriously Punctual Manatee

    TypeScript icon, indicating that this package has built-in type declarations

    0.2.8 • Public • Published

    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 => 
          <title>Hellow World Example</title>
          <h1>Hellow World!</h1>

    ► 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}>
    // main.tsx
    import { compile } from '@connectv/sdh';
    import { Card } from './card';
    compile(renderer => 
        <h1>List of stuff</h1>
        <Card title='🥕Carrots' text='they are pretty good for you.'/>

    ► 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!
    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 =>
          So this content will be prerendered, but the following component will be
          rendered on the client side.
    .post(bundle.collect())                    // --> collect all necessary dependencies in the bundle
    .then(() => save(bundle))                  // --> build the bundle and store it on fs

    ► TRY IT!


    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"




    npm i @connectv/sdh

    DownloadsWeekly Downloads






    Unpacked Size

    440 kB

    Total Files


    Last publish


    • lorean.victor