https://github.com/localvoid/ivx
:rocket: Extremely fast functional HTML string renderer
https://github.com/localvoid/ivx
ssr virtual-dom
Last synced: 5 months ago
JSON representation
:rocket: Extremely fast functional HTML string renderer
- Host: GitHub
- URL: https://github.com/localvoid/ivx
- Owner: localvoid
- License: mit
- Created: 2018-04-04T02:44:01.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-26T10:34:00.000Z (over 7 years ago)
- Last Synced: 2025-10-10T09:07:14.066Z (5 months ago)
- Topics: ssr, virtual-dom
- Language: TypeScript
- Homepage:
- Size: 179 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - ivx
README
# [ivx](https://github.com/localvoid/ivx) · [](https://github.com/localvoid/ivx/blob/master/LICENSE) [](https://codecov.io/gh/localvoid/ivx) [](https://circleci.com/gh/localvoid/ivx) [](https://github.com/localvoid/ivx)
ivx is an extremely fast functional HTML string renderer.
|packages|NPM version |
|--------|---------------------------------------------------------------------------------------------------|
|ivx |[](https://www.npmjs.com/package/ivx) |
|ivx-html|[](https://www.npmjs.com/package/ivx-html)|
|ivx-svg |[](https://www.npmjs.com/package/ivx-svg) |
## Features
- Immutable Virtual DOM Nodes
- Implicit data propagation with contexts
- Connectors for sideways data loading
- Diff/Patch renderer
## Basic Example
```js
import { render } from "ivx";
import { div } from "ivx-html";
render(div("message").c("Hello World!"));
// =>
```
## API
### Virtual DOM
#### HTML/SVG Elements
HTML and SVG elements are created with predefined factory functions.
- `ivx-html` package provides factories for HTML elements.
- `ivx-svg` package proived factories for SVG elements.
```ts
interface VNode {
a(attrs: { [key: string]: any } | null): this;
s(style: { [key: string]: any } | null): this;
c(children: VNodeChildren): this;
}
type VNodeChildren = VNodeChildrenArray | VNode | string | number | null;
interface VNodeChildrenArray extends Array { }
```
HTML and SVG elements have three methods:
`a()` method is used to assign attributes.
`s()` method is used to assign styles.
`c()` method is used to assign children nodes.
#### Raw Text
Raw text is used to inject any text into the document without any escaping.
```ts
function raw(text: string): VNode;
```
#### Custom Elements
```ts
interface ElementOptions {
readonly void?: boolean;
readonly attrs?: {};
}
function element(tagName: string, options?: ElementOptions): (className?: string) => VNode;
```
`element()` function creates a factory function for custom elements.
#### Components
```ts
function component(render: () => VNodeChildren): () => VNode;
function component
(
render: undefined extends P ? (props?: P) => VNodeChildren : (props: P) => VNodeChildren,
): undefined extends P ? (props?: P) => VNode
: (props: P) => VNode
;
```
`component()` function creates a factory function for components.
```ts
const A = component<{ text: string }>(
(props) => div().c(props.text),
);
render(
A({ text: "Hello" }),
);
// =>
Hello
```
##### Should Update hint
```ts
function withShouldUpdate
(
shouldUpdate: (prev: P, next: P) => boolean,
c: (props: P) => VNode
,
): (props: P) => VNode
;
```
`withShouldUpdate()` function creates a factory function for components with should update hint.
```ts
const A = withShouldUpdate<{ text: string }>(
(prev, next) => prev.text !== next.text,
component(
(props) => h.div().c(props.text),
),
);
```
#### Context and Connectors
```ts
function context(ctx: T, children: VNodeChildren): VNode;
function connect(
select: (prev: T | null) => T,
render: (props: T) => VNodeChildren,
): () => VNode;
function connect(
select: undefined extends P ? (prev: T | null, props?: P) => T : (prev: T | null, props: P) => T,
render: (props: T) => VNodeChildren,
): undefined extends P ? () => VNode
: (props: P) => VNode
;
function connect(
select: (prev: T | null, props: P, context: C) => T,
render: (props: T) => VNodeChildren,
): undefined extends P ? () => VNode
: (props: P) => VNode
;
```
Connector is a specialized `VNode` that have access to the current context. `connect()` function creates a factory
function for connectors.
`context()` function creates a `VNode` that will modify current context for its `children`.
```ts
const Connector = connect(
(prev, props, context) => {
const result = context.result;
return (prev !== null && prev === result) ? prev :
result;
},
(text) => div().c(text),
);
render(
context({ result: "Hello World!" },
Connector(),
),
);
// =>
Hello World!
```
### Render to String
```ts
function render(
node: VNode,
context: {} = {},
): string;
```
`render()` function renders Virtual DOM into a string.
### Blueprints
```ts
function createBlueprint(
node: VNode,
context: {} = {},
): BlueprintNode;
```
`createBlueprint()` function creates a blueprint that can be used to optimize rendering.
```ts
function renderWithBlueprint(
node: VNode,
blueprint: BlueprintNode,
context: {} = {},
): string;
```
`renderWithBlueprint()` function renders Virtual DOM into a string. When `blueprint` parameter is specified, instead of
rendering string from scratch, it will apply diff/patch algorithm on blueprint.
#### Blueprints linked to Components
```ts
function componentWithBlueprint
(
node: VNode
,
context?: {},
): (props: P) => VNodeChildren;
```
Example:
```ts
import { component, componentWithBlueprint } from "ivx";
import { div } from "ivx-html";
const Button = component((title: string) => div("Button").c(title));
const PrerenderedButton = componentWithBlueprint(Button(""));
render(PrerenderedButton("Go"));
// =>
Go
```