Socket
Socket
Sign inDemoInstall

@connectv/sdh

Package Overview
Dependencies
11
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@connectv/sdh

Library for Static (Server-side) and Dynamic (Client-side) HTML rendering


Version published
Maintainers
1
Weekly downloads
13
decreased by-13.33%

Weekly downloads

Readme

Source

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

FAQs

Last updated on 01 Sep 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc