Ref-Lit JS

Lightweight progressive JavaScript rendering framework

Features

• Based on ref.js & lit-html.js
• Using Web Component API
• Lightweight (mini-source less than 20k)
• Faster & Simply

Example

Live Demo

<!-- html -->
<my-component></my-component>

// javascript
<script type="module">
    import 'https://unpkg.com/@palerock/ref-lit/build/ref-lit.mini.js';

    const {defineComponent, html} = window.$ref_lit;

    defineComponent('custom-input',
        {
            value: '',
            type: 'text',
            placeholder: 'please input...'
        },
        ({props, component}) => {

            function onInputChanged(e) {
                component.dispatchEvent(new CustomEvent('cvalue', {
                    detail: {value: e.target.value}
                }));
            }

            return () => html`
                <input value=${props.value} type=${props.type} placeholder=${props.placeholder} @keyup=${onInputChanged} >
            `
        }
    );

    defineComponent('my-component', {}, ({ref}) => {

        function onValueChanged(e) {
            ref.value = e.detail.value;
        }

        return () => html`
            <div>
                <p>${ref.value}</p>
                <custom-input value=${ref.value} @cvalue=${onValueChanged}></custom-input>
            </div>
        `
    });
</script>

Import Ref-Lit JS

• If using npm or yarn

  # npm
  npm i @palerock/ref-lit

  # yarn
  yarn add @palerock/ref-lit

• Using <script src> on browser

  <script src="xxx/ref-lit.mini.js"></script>
  <script>
      const {defineComponent, html} = window.$ref_lit;
  </script>

• Using Module on browser

  <script type="module">
      import 'xxx/ref-lit.mini.js';
      const {defineComponent, html} = window.$ref_lit;
  </script>

How to get the ref-js sources? View the root dir named build, mini-js or normal chose by yourself.

API Documentation

Now, the documentation is writing. You can take a quick look at the src ./src/demo for demos, it's easy to reach it.

Related Path

• 中文文档地址：./readme-zh_CN.md