❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Move to `@hyper-ui/core`

hyper-ui
TypeScript icon, indicating that this package has built-in type declarations

0.9.0 • Public • Published

hyper-ui

A lightweight front-end UI lib.

TOC

Features

Lightweight

This lib is rather lightweight. The size of the file which you need to include is less than 10KB!

Declarative

To create interactive UIs, just define simple components for each state in your app, and changes will be found as well as updated efficiently.

Simple

You can just easily include it and start writing the code of you app because it can be just plain JavaScript.

Usage

npm

  1. Use npm to install it as a dependency:

    npm i hyper-ui

  2. Import the default export from the lib:

    import HUI from "hyper-ui";
    // or
    const HUI = require("hyper-ui");

CDN

  1. Include one of the following script tags in your HTML file: (If you want a specified version, just replace latest with that. For more information, visit www.jsdelivr.com or unpkg.com.)

    <!-- via jsdelivr -->
    <script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/hyper-ui@latest/dist/hyper-ui.umd.min.js"></script>
    <!-- or via unpkg -->
    <script type="text/javascript" crossorigin="anonymous" src="https://unpkg.com/hyper-ui@latest/dist/hyper-ui.umd.min.js"></script>

  2. Access the APIs via the HUI global.

Hello World

<!-- index.html -->
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
    <title>hyper-ui example</title>
    <style type="text/css">
        /* Set the style of the heading which will be added later */
        #heading {
            text-align: center;
        }
    </style> 
</head>
 
<body>
    <!-- Import the lib -->
    <script type="text/javascript" crossorigin="anonymous"
        src="https://cdn.jsdelivr.net/npm/hyper-ui@latest/dist/hyper-ui.umd.min.js"></script> 
    <!-- and your code -->
    <script type="text/javascript" src="./index.js"></script> 
</body>
 
</html>
/* index.js */
// Define a component called `Greeting`
const Greeting = HUI.define('Greeting', {
    // Define the `render` method
    render: function (props) {
        // Render a simple heading: h1#heading
        return HUI('h1', { id: 'heading' }, [
            'Hello,',
            props.target,
            '!'
        ]);
    }
});
// Render the app
HUI.render(
    // Create a greeting
    HUI(Greeting, { target: 'world' })
);

Links

Env Requirements

This lib depends on some features such as Map, Symbol, array.includes and so on. So, if you want to use it in some old browsers, consider including some polyfills. For instance, include hpolyfill in your HTML:

<!-- via jsdelivr -->
<script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/hpolyfill@latest/dist/index.js"></script>
<!-- or via unpkg -->
<script type="text/javascript" crossorigin="anonymous" src="https://unpkg.com/hpolyfill@latest/dist/index.js"></script>

Example

Here is a TODO app example:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
    <title>TODO</title>
</head>
 
<body>
    <!-- Load the lib -->
    <script src="../dist/hyper-ui.umd.js"></script> 
    <!-- Create the app -->
    <script type="text/javascript">
        // Define the app
        const TODO = HUI.define('TODO', {
            // Define the state
            state: ['items'],
            // Define the initializer
            init: function (props, store) {
                // Initialize the item list
                store.set('items', []);
            },
            // Define the renderer
            render: function (props, store) {
                return [
                    // Render a form
                    HUI('form', {
                        // Handle the submit event
                        onsubmit: function (e) {
                            e.preventDefault();
                            // Get the input element and its value
                            var input = store.get('input'),
                                content = input.value;
                            // Validate the input data
                            if (content) {
                                // Add this item
                                store.push('items', content);
                                // Clear the input
                                input.value = '';
                            } else {
                                // Hint the user to input something
                                input.focus();
                            }
                        }
                    }, [
                        // content input
                        HUI('input', {
                            ref: store.setter('input'),
                            placeholder: 'content'
                        }),
                        // submit button
                        HUI('input', {
                            attr: {
                                type: 'submit',
                                value: 'Add'
                            }
                        })
                    ]),
                    // Render an unordered list
                    HUI('ul', {}, store.get('items').map(function (item, i) {
                        // list item
                        return HUI('li', null, [
                            // content
                            HUI('span', { style: 'margin-right: 1em;' }, item),
                            // deleting link
                            HUI('a', {
                                href: 'javascript:;',
                                // Handle the click event
                                onclick: function () {
                                    // Delete the item
                                    store.splice('items', i, 1);
                                }
                            }, 'Del')
                        ]);
                    }))
                ];
            }
        });
        // Render
        HUI.render([
            // Render a heading
            HUI('h1', null, 'TODO'),
            // Render the app
            HUI(TODO)
        ]);
    </script> 
</body>
 
</html>

Readme

Keywords

Package Sidebar

Install

npm i hyper-ui

Repository

github.com/huang2002/hyper-ui

Homepage

github.com/huang2002/hyper-ui#readme

Weekly Downloads

1

Version

0.9.0

License

MIT

Unpacked Size

91.3 kB

Total Files

30

Last publish

Collaborators

  • 3h
Try on RunKit
Report malware