https://github.com/divriots/universal-story-render
Universal story renderer, compatible with most JS UI frameworks out there.
https://github.com/divriots/universal-story-render
Last synced: 10 months ago
JSON representation
Universal story renderer, compatible with most JS UI frameworks out there.
- Host: GitHub
- URL: https://github.com/divriots/universal-story-render
- Owner: divriots
- Created: 2021-07-05T09:56:09.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-05-30T14:56:33.000Z (about 4 years ago)
- Last Synced: 2025-05-04T07:45:58.563Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://components.studio/view/SX8bfi6VKU5FdIMUa8jK
- Size: 19.5 KB
- Stars: 23
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Universal story renderer
This tiny library dynamically discovers the type (UI elements only) of a given JS object using typical frameworks signatures.
It also supports rendering of that object.
## Table of Contents
- [Install](#install)
- [Usage](#usage)
## Install
This project uses [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
```sh
$ npm install --save @divriots/universal-story-render
```
## Usage
```js
// using React jsx
import { typeOf, render } from "@divriots/universal-story-render";
import ReactDOM from "react-dom";
console.log(typeOf(
)); // React
render(() => ReactDOM, , "React", div);
```
## Supported component types
| Library | typeOf value | dynamic required render library |
| ---------------- | ----------------------- | ------------------------------- |
| React | `React` | `react-dom` |
| Preact | `Preact` | `preact` |
| Stencil | `Stencil` | `@stencil/core/internal/client` |
| Omi | `Omi` | `omi` |
| Riot | `Riot`\|`RiotStory` | `riot` |
| Svelte | `Svelte`\|`SvelteStory` | none |
| Vue | `Vue` | `vue` |
| Solid | `Solid` | `solid-js/dom` |
| Fast | `ViewTemplate` | none |
| Lit | `TemplateResult` | `lit-html` |
| LWC | `Lwc` | `lwc` |
| uhtml | `Hole` | `uhtml` |
| lighterhtml | `LighterHole` | `lighterhtml` |
| DOM | `Element` | none |
| DocumentFragment | `DocumentFragment` | none |
| Iterable | `Iterable` | none |
| Angular | `Angular` | `@angular/platform-browser-dynamic`, `@angular/core`, `@angular/platform-browser` |
## Explicit type
If the passed object/function has a String property `_$story_type$`, its value will be used as type (no guessing)
## Custom renderers
On top of framework renderers, this library also support 2 custom renderers (which can be used with above `_$story_type$` property):
### `RenderProp`
```
const obj = {
render(div) {
// ...
}
}
render(null, obj, "RenderProp", div);
```
### `RenderFn`
```
const obj = function render(div) {
// ...
}
render(null, obj, "RenderFn", div);
```