https://github.com/connect-platform/connective-sdh
Library for Static (Server-side) and Dynamic (Client-side) HTML rendering
https://github.com/connect-platform/connective-sdh
Last synced: 11 months ago
JSON representation
Library for Static (Server-side) and Dynamic (Client-side) HTML rendering
- Host: GitHub
- URL: https://github.com/connect-platform/connective-sdh
- Owner: CONNECT-platform
- License: mit
- Created: 2020-02-23T18:27:45.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T04:57:59.000Z (about 3 years ago)
- Last Synced: 2025-04-11T04:18:00.760Z (12 months ago)
- Language: TypeScript
- Size: 1020 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Easily build [JAMStack](https://jamstack.org) 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
```tsx
import { compile } from '@connectv/sdh';
compile(renderer =>
Hellow World Example
Hellow World!
).save('dist/index.html');
```
[► TRY IT!](https://codesandbox.io/s/connective-sdh-hellow-world-deom3)
### Example: Static HTML using Components
```tsx
// 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
{title}
{text}
}
```
```tsx
// main.tsx
import { compile } from '@connectv/sdh';
import { Card } from './card';
compile(renderer =>
List of stuff
).save('dist/index.html');
```
[► TRY IT!](https://codesandbox.io/s/connective-sdh-static-components-r3b8i)
### Example: Interactive content
```tsx
// 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 (
count.value++}>
You have clicked {count} times!
);
}
export const $Counter = transport(Counter); // --> transports `Counter` to client-side
```
```tsx
// 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.
<$Counter/>
)
.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!](https://codesandbox.io/s/connective-sdh-interactive-example-cgfwf)
# Installation
```bash
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:
```json
"compilerOptions": {
"jsx": "react",
"jsxFactory": "renderer.create"
}
```
#### For Babel ([plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)):
Add this to your Babel config:
```json
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "renderer.create"
}]
]
}
```