https://github.com/kato83/hiroshi

Dom generation tool compatible with JSX.
https://github.com/kato83/hiroshi

dom javascript jsx typescript

Last synced: 22 days ago
JSON representation

Dom generation tool compatible with JSX.

• Host: GitHub
• URL: https://github.com/kato83/hiroshi
• Owner: kato83
• License: mit
• Created: 2022-07-31T04:30:38.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-07-31T02:38:00.000Z (over 1 year ago)
• Last Synced: 2024-09-14T06:45:08.080Z (about 2 months ago)
• Topics: dom, javascript, jsx, typescript
• Language: TypeScript
• Homepage:
• Size: 188 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Hiroshi JS

[![npm](https://img.shields.io/npm/v/hiroshi)](https://www.npmjs.com/package/hiroshi)

[![NPM](https://img.shields.io/npm/l/hiroshi)](https://github.com/kato83/hiroshi/blob/master/LICENSE.txt)

[![size](http://img.badgesize.io/https://unpkg.com/hiroshi@latest/dist/esm/hiroshi.js?label=size)](https://unpkg.com/hiroshi@latest/dist/esm/hiroshi.js)

[![gzip size](http://img.badgesize.io/https://unpkg.com/hiroshi@latest/dist/esm/hiroshi.js?compression=gzip&label=gzip+size)](https://unpkg.com/hiroshi@latest/dist/esm/hiroshi.js)

[Japanese Document | 日本語ドキュメント](./README_ja.md)

Dom generation tool compatible with JSX.

It doesn't have the concept of a virtual dom that holds state transitions such as react, preact or vue, nor does it have reactivity like solid js.

But it is a library dedicated to generating very lightweight (about 1 kB) and simple dom objects.

It can be used in a wide variety of projects and situations, as it focuses solely on creating dom.

⚠ This library is intended for use in situations where React is over-specified and is not a complete replacement solution for React.

## CDN

```text

▼ UMD format

https://cdn.jsdelivr.net/npm/hiroshi@latest/dist/umd/hiroshi.js

https://unpkg.com/hiroshi@latest/dist/umd/hiroshi.js

▼ ESM format

https://cdn.jsdelivr.net/npm/hiroshi@latest/dist/esm/hiroshi.js

https://unpkg.com/hiroshi@latest/dist/esm/hiroshi.js

```

## Usage

A sample of JSX in action can be seen below.

[Hiroshi JS Example for ES Module x JSX](https://codepen.io/kato83/pen/zYWLPMP)

The following two different source codes both produce the same display results.

### ES Module with JSX.

```shell

$ npm i hiroshi

```

```jsx

// option 1: Load hiroshi as react for jsx transpile.

import * as React from 'hiroshi';

// option 2: Properly configure babel and typescript and load as hiroshi.

// import {createElement, createRef, Fragment, render} from 'hiroshi';

const Card = (props) => 


  {props.name}
{props.children}

;


const UserList = () => {

  const ref = React.createRef();

  fetch('/api/v1/users').then(res => res.json())

    .then(res => {

      const {current} = ref;

      current.replaceChild(

        React.render(<>{res.map(({name, other}) =>

          {other}

        )}>, current),

        current.firstElementChild

      );

    });

  return 


    Now loading...

  

};


React.render(, document.getElementById('app'));

```

### Universal Module Definition without JSX

```html

  const {h, Fragment, createRef, render} = Hiroshi;

  const Card = (props) => h('div', {className: 'card'}, ...[

    props.name,

    h('br'),

    props.children

  ]);

  const UserList = () => {

    const ref = createRef();

    fetch('/api/v1/users').then(res => res.json())

      .then(res => {

        const {current} = ref;

        current.replaceChild(

          render(h(Fragment, null, ...res.map(({name, other}) =>

            h(Card, {name: name}, other)

          )), current),

          current.firstElementChild

        );

      });

    return h('div', {className: 'userList', ref: ref}, ...[

      h('span', {}, 'Now loading...')

    ]);

  };

  render(h(UserList), document.getElementById('app'));

```