open-index/open-npm huggingface dataset:
npm package: @palerock/ref
Description: reference function for javascript
Author: Cangshi
Latest version: 0.1.5

# Ref JS
> Used for creating ref by using `javascript`
## Get Start
### Import the script
1. Install from `NPM` or `yarn`
    ```shell script
    npm i @palerock/ref
    ```
    ```shell script
    yarn add @palerock/ref
    ```
2. Download the source file - `/build/ref.js` or mini file `/build/ref.mini.js`

### Using the script
1. With `NodeJS`
    ```javascript
    const {ref,refs} = require('@palerock/ref');
    ```
    Or using `import` keyword
    ```javascript
    import {ref,refs} from '@palerock/ref';
    ```
2. With HTML on browser
    ```html
    <script src="./xxx/ref-mini.js"></script>
    <script>
        const {ref,refs} = window;
    </script>
    ```

### Demo for Simple Usage
1. Using with dom
    ```javascript
    const {ref} = window;

    // select a dom
    const dom = document.querySelector('h1');

    // create ref
    const domRef = ref(
        dom, ['title'],
        ({title}, targetDom)=>{
            targetDom.innerHTML = title;
        }
    )

    // change the ref
    domRef.title = 'Hello Ref JS';

    console.log(dom.innerHTML); // Hello Ref JS
    ```
2. Using with multi vars in `NodeJS`
    ```javascript
    const {ref} = require('@palerock/ref');

    const dataSource = {
        project: {
            name: 'project 01'
        },
        owner: {
            name: 'Ryan'
        }
    }

    const dataRef = ref(
        dataSource,
        {
            // declare vars and setting the initial values
            projectName: 'Unknown Project Name',
            ownerName: 'Unknown Owner Name'
        },
        ({projectName, ownerName}, targetDataSource)=>{
            targetDataSource.project.name = projectName;
            targetDataSource.owner.name = ownerName;
        }
    )

    dataRef.projectName = 'project ref name';

    console.log(dataSource.project.name); // project ref name
    console.log(dataSource.owner.name); // Unknown Owner Name
    ```

## Documentation
- `ref`: `function`
    - description: create a ref with a object
    - arguments - ordered as following
    - `target`: `Object` what object the ref related.
    - `vars`: `Object|<Array<String>>` declare the vars used in the mapping function
    - `mapping`: `function` when the ref changed, what to do is following the function
        - callback arguments - ordered as following
        - `ref`: `Object` the ref Object
        - `target`: `Object` the target Object

- `refs`: `function`
    - description: create a ref with multi objects
    - arguments - ordered as following
    - `targets`: `List<Object>` what objects the ref related.
    - `vars`: `Object|<Array<String>>` declare the vars used in the mapping function
    - `mapping`: `function` when the ref changed, what to do is following the function
        - callback arguments - ordered as following
        - `ref`: `Object` the ref Object
        - `target`: `Object` the target Object


## Leave your comments with any question or suggestion please
npm package: @palerock/ref-lit
Description: using refJS & html-lit to render component
Author: Cangshi
Latest version: 0.0.1

# Ref-Lit JS
> Lightweight progressive JavaScript rendering framework

## Features
- Based on [ref.js](https://github.com/canguser/ref) & [lit-html.js](https://github.com/Polymer/lit-html)
- Using [Web Component API](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
- Lightweight ([mini-source](https://unpkg.com/@palerock/ref-lit/build/ref-lit.mini.js) less than 20k)
- Faster & Simply

## Example
**[Live Demo](https://jsfiddle.net/cangshi/sku8rtm2/1/)**
```html
<!-- html -->
<my-component></my-component>
```
```javascript
// 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`
    ```shell script
    # npm
    npm i @palerock/ref-lit
    ```
    ```shell script
    # yarn
    yarn add @palerock/ref-lit
    ```
- Using `<script src>` on browser
    ```html
    <script src="xxx/ref-lit.mini.js"></script>
    <script>
        const {defineComponent, html} = window.$ref_lit;
    </script>
    ```
- Using `Module` on browser
    ```html
    <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`](https://github.com/canguser/ref-lit/tree/master/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`](https://github.com/canguser/ref-lit/tree/master/src/demo) for demos, it's easy to reach it.

## Related Path
- 中文文档地址：[./readme-zh_CN.md](./readme-zh_CN.md)