open-index/open-npm huggingface dataset:
npm package: @iosio/babel-plugin-jcss
Description: custom babel plugin for template string css autoprefixing and minifying
Latest version: 0.7.12

# @iosio/babel-plugin-jcss

<img src="https://img.shields.io/npm/v/@iosio/babel-plugin-jcss.svg?style=flat-square"/>

> custom babel plugin for template string css autoprefixing and minifying

## Installation 

```sh
npm install @iosio/babel-plugin-jcss --save-dev
```
## Usage

Include the following in your babelrc or babel.config.js file

```js
module.exports = {
  "plugins":[
    [
        "@iosio/babel-plugin-jcss",
         {
             "browsers": ["last 2 versions"], //overrides
             "postCssOptions":  {}
         }
     ]
  ]
};
```

Babel will look for the tag 'jcss' with a tagged string, run the post css and minifying and remove the tag

```js
export const styles = jcss`   
        :host{
            display:flex;
            align-items:center;
            user-select:none;
        }
`;
```

Results will look something like this

```js
export const styles = `:host{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`;
```
npm package: @iosio/babel-plugin-minify-html-literals
Description: custom babel plugin for minifying html template strings in javascript
Latest version: 0.7.12

# @iosio/babel-plugin-jcss

<img src="https://img.shields.io/npm/v/@iosio/babel-plugin-jcss.svg?style=flat-square"/>

> custom babel plugin for template string css autoprefixing and minifying

## Installation 

```sh
npm install @iosio/babel-plugin-jcss --save-dev
```
## Usage

Include the following in your babelrc or babel.config.js file

```js
module.exports = {
  "plugins":[
    [
        "@iosio/babel-plugin-jcss",
         {
             "browsers": ["last 2 versions"], //overrides
             "postCssOptions":  {}
         }
     ]
  ]
};
```

Babel will look for the tag 'jcss' with a tagged string, run the post css and minifying and remove the tag

```js
export const styles = jcss`   
        :host{
            display:flex;
            align-items:center;
            user-select:none;
        }
`;
```

Results will look something like this

```js
export const styles = `:host{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`;
```
npm package: @iosio/fuse-worker
Description: > Delegates fuse.js fuzzy search to a worker thread.
Latest version: 0.7.12

# @iosio/fuse-worker

> Delegates fuse.js fuzzy search to a worker thread.


## Installation
```sh
npm install @iosio/fuse-worker
```
Requires configuring your build system to copy the worker file from node_modules 
to the root of the build destination where the application is served from.

Copy path: 'node_modules/@iosio/fuse-worker/lib/fuse.worker.js'

(As of now, version 3.4.5 of fuse.js is bundled with the worker file)


## Usage

To create a new fuse worker, import FuseWorker and call the factory function that creates and connects to a web worker.
```js
import {FuseWorker} from '@iosio/fuse-worker';

const fuse = FuseWorker({
    workerURL: './path/to/fuse.worker.js', // defaults to './fuse.worker.js'.
    list: [], //optionally pass the list to perform the search in, or set the list using fuse.set({list}) .
    options: {}, //optionally merge options into the default fuse.js options config or use fuse.set({options}) .
})
```

**fuse options:** See https://fusejs.io/ for more info on fuse.js and the available options. The following is what 
exists as the default options.
```js
let options = {
    shouldSort: true,
    minMatchCharLength: 1,
    findAllMatches: true,
    keys: ['name'],
    maxPatternLength: 50,
    threshold: 0.4,
    distance: 1000,
    location: 0,
    ...options //any options you pass will be merged in here
};
```

**fuse.set** As stated above, the list and options on the fuse worker instance may be updated by calling fuse.set
```js

fuse.set({
    list: [...your_new_list_to_search_in],
    options: {...any_new_options}
});
```

**fuse.search** To perform a search, call fuse.search passing a string text value as the first argument and a callback 
function as the second argument.
```js
fuse.search('some value to search for', (results) => {
    console.log('the results from fuse.js', results)
});
```
npm package: @iosio/history
Description: A simple and slimmer history util
Author: iosio
Latest version: 2.1.3

# IOSIO history
<img src="https://img.shields.io/circleci/project/github/iosio/history.svg?style=flat-square" /><img src="https://img.shields.io/npm/v/@iosio/history.svg?style=flat-square" />

A simple and slimmer history util

```sh
npm i @iosio/history
```
npm package: @iosio/jcss
Description: custom babel plugin for template string css autoprefixing and minifying
Latest version: 0.0.2

# @iosio/jcss

<img src="https://img.shields.io/npm/v/@iosio/jcss.svg?style=flat-square"/>

> custom babel plugin for template string css autoprefixing and minifying

## Installation 

```sh
npm install @iosio/jcss --save-dev
```
## Usage

Include the following in your babelrc or babel.config.js file

```json
{
  "plugins":[
    ["@iosio/jcss"]
  ]
}
```

Babel will look for the tag 'jcss' with a tagged string, run the post css and minifying and remove the tag

```js
export const styles = jcss`   
        :host{
            display:flex;
            align-items:center;
            user-select:none;
        }
`;
```

Results will look something like this

```js
export const styles = `:host{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`;
```
npm package: @iosio/jss_nano
Description: minimal css in js with autoprefixing (inspired by cxs)
Author: iosio
Latest version: 1.1.3

# IOSIO jss_nano
<img src="https://img.shields.io/circleci/project/github/iosio/jss_nano.svg?style=flat-square" /><img src="https://img.shields.io/npm/v/@iosio/jss_nano.svg?style=flat-square" />

minimal css in js with autoprefixing (inspired by cxs)

```sh
npm i @iosio/jss_nano
```
npm package: @iosio/lorem
Description: import lorem ipsum dummy text into js
Latest version: 0.7.12


    
# @iosio/lorem

> import lorem ipsum dummy text into js

## Installation 
```sh
npm install @iosio/lorem --save
```
### Usage
```js
import {lorem} from '@iosio/lorem';

// will not return greater than 2154 characters
let text = lorem();

let text200Char = lorem(200); // gets 200 characters. 
```
### License

[MIT]

[MIT]: https://choosealicense.com/licenses/mit/
npm package: @iosio/obi-preact-connect
Description: > @iosio/obi hook and connect functions for preact
Latest version: 0.7.12

# @iosio/obi-preact-connect

> @iosio/obi hook and connect functions for preact

## Installation
```sh
npm install @iosio/obi @iosio/obi-preact-connect
```

Quick example for now
```js
import {h, render} from "preact"
import {obi} from "@iosio/obi";
import {connectObi, useObi} from "@iosio/obi-preact-connect";

const state = obi({
    count: 0,
    test: {
        value: 'heyyo'
    }
});


const Counter = connectObi(state)(({test}) => (
    <h1>
        {test} Count: {state.count}
    </h1>
));

const {test} = state;

const Input = () => {
    useObi(state.test);
    return (
        <input value={test.value} onInput={({target}) => test.value = target.value}/>
    )
};

const App = () => {

    useObi(state.test);

    return (

        <div>

            <Input/>

            <button onClick={() => state.count++}>
                inc
            </button>
            Heyyoo

            <Counter test={state.test.value}/>

        </div>
    )
};


render(<App/>, document.body);


```
npm package: @iosio/pwc
Description: build web components using preact
Latest version: 0.1.5

# @iosio/pwc
<img src="https://img.shields.io/circleci/project/github/iosio/pwc.svg?style=flat-square" /><img src="https://img.shields.io/npm/v/@iosio/pwc.svg?style=flat-square" /><img src="https://img.shields.io/bundlephobia/minzip/@iosio/pwc.svg?style=flat-square" />
> create web components using preact

## Installation 
```sh
npm install @iosio/pwc --save
```

### Quick example for now

```js
import {h, Fragment, Component} from 'preact';
import {useState} from 'preact/hooks'
import {pwc} from '@iosio/pwc';

//use functional components
export const ColorComponent = pwc('color-component', ({foo, host}) => {

  const [color, setColor] = useState('red')
  
  const changeColor = () =>{
     setColor(color === 'red' ? 'blue' : 'red');
  }
  
  return (
    <div>
    
      <h1 style={{color}}>hello i am {color}</h1>
      
      <button onClick={changeColor}>hello - {foo}</button>
      
      <slot/>
      
    </div>
  )
  
}, {foo: Number});



//or use class components
export const CountComponent = pwc('count-component', class extends Component{
    
    static propTypes = {name: String};
    
    state = {count:0}
    
    inc = () => this.setState(state => ({count: state.count + 1}));
    
    render({host, name}, {count}){
        return(
            <Fragment>
                <style>{
                    `
                    :host{
                       background: black;
                       padding: 10px;
                    }
                    .derp{
                        background: aliceblue;
                    }
                    `
                }</style>
            
                <button className="derp" onClick={this.inc}> click me : {count}</button>
                
                <ColorComponent foo={123}/>
                
                
                <color-component foo={456}>
                    heyoo
                </color-component>
          
            </Fragment>
        )
    }
});


/*
    Build using the boilerplate and consume components in other apps
    or create a standalone app
 */

```

### Coming soon*
**@iosio/pwc-boilerplate** - starter that will include modern build tools and dependencies for creating apps and libs with pwc

then eventually

**@iosio/create-pwc** - a CLI to scaffold UI libraries and apps


### License

[MIT]

[MIT]: https://choosealicense.com/licenses/mit/
npm package: @iosio/quickie
Description: simple push and publish
Latest version: 3.0.6

# @iosio/quickie

> simple build, push and publish

A nice little script to run for npm hobbyists who want to type less.

## Installation 
```sh
npm install -g @iosio/quickie
```

## Basic Usage

To quickly run your build, publish your package and push your code to git, run the following in the terminal:

```sh
quickie
```
The terminal will then guide you through the following prompts:

```branch: (default: "origin master")``` 
Specify where to push and hit enter, if left blank then "origin master" will be used when the command executes later.


```message for git commit: (default: ".")``` 
Specify the commit message and hit enter. If left blank then "." will be used.


```add npm version bump: (default: "patch")``` 
Specify the version type and hit enter. Should be either patch, minor or major. patch will be used if a correct answer is not provided.


then sit back and let the script run your build, push your code and publish!
```
branch: (default: "origin master")
message for git commit: (default: ".")
add npm version bump: (default: "patch")
running build
build finished
git adding
git committed
v3.0.6
publishing to npm
published
pushing to git
done

```

### License

[MIT]

[MIT]: https://choosealicense.com/licenses/mit/
npm package: @iosio/react-router
Description: simple react router
Latest version: 1.0.24

# @iosio/react-router

> Simple react-router.


### Installation

```
npm install @iosio/react-router
```

### Usage

See the example in the demo (/public/index.js).

### useRouter

This router accepts an object where the keys represent the "/path" and the value is a component or an object with two
keys: title and Route (component). The document title will be set when the route changes.

```js
import {useRouter} from '@iosio/react-router';
const pathMap = {
    '/': {title: 'home', Route: HomePageComponent,},
    '/about': {title: 'about', Route: AboutPageComponent},
    '/docs': {title: 'docs', Route: DocsPageComponent}
}

const App = () => {
    const {Route} = useRouter({pathMap});
    return (
        <>
            <nav/>
            <main>
                <Route/>
            </main>
        </>
    )
}

```

- **pathMap** - Object - example: { '/path': { title: 'page title', Route: Component } }

(optional)

- **fallbackPath** - String - default: "/" - the default path to fallback to if no match is found


**Built-in Logic:**

If the user attempts to visit a page that is not on the pathMap, the router will attempt to replace history with the
previously visited path, else it will navigate to "/" or the path that is defined as the fallbackPath.


### Linkage

##### props

- **to** - String
- **toParams** - Object - pass an object to be stringified into query parameters
- **...rest** - rest spread to the root anchor tag element <a {...rest}/>
```js
import {Linkage} from '@iosio/react-router';
// both go to /about?foo=bar
<Linkage to={'/about?foo=bar'}>About</Linkage>
<Linkage to={'/about'} toParams={{foo: 'bar'}}>About</Linkage>
```

### navigate

Programmatically navigate 

```js
import {navigate} from '@iosio/react-router';
// string
navigate('/path?id=1#foo');
// object
navigate({
    pathname: '/path',

    query: '?id=1',
    // or optionally use params (Object that will be stringified)
    params: {id: 1},

    hash: '#foo'
});
// function
navigate(({pathname, query, params, hash}) => ({
    pathname,
    params: {...params, id: 2}
}));
```

### useLocation

```js
import {useLocation} from '@iosio/react-router';
const AboutPageComponent = () => {
    
    const [{path, pathname, query, params, hash}, navigate] = useLocation();
    
    return <h1>About</h1>
};
```

### License

[MIT](https://choosealicense.com/licenses/mit/)