open-index/open-npm huggingface dataset:
npm package: @sliv/ramda-util
Description: [![build status](https://gitlab.com/sliv/ramda-util/badges/master/build.svg)](https://gitlab.com/sliv/ramda-util/commits/master) [![coverage report](https://gitlab.com/sliv/ramda-util/badges/master/coverage.svg)](https://gitlab.com/sliv/ramda-util/commits
Author: sliv
Latest version: 0.0.1

# ramda-util

[![build status](https://gitlab.com/sliv/ramda-util/badges/master/build.svg)](https://gitlab.com/sliv/ramda-util/commits/master)
[![coverage report](https://gitlab.com/sliv/ramda-util/badges/master/coverage.svg)](https://gitlab.com/sliv/ramda-util/commits/master)

# usage

### argPipe

### matchers
`matcher`
`matchOne`
`matchAll`

### dom helper
`tapPreventDefault`
`tapStopPropagation`

### promise helper
`newP`
`allP`
``
npm package: @sliv/rx-event-subject
Description: mostly a react-helper for binding subject to element event
Author: sliv
Latest version: 0.0.1

# rx-event-subject

mostly a react-helper for binding subject to element event

- next is binded to the stream
- no need to call the asObservable
- the typing should be correct 

```typescript jsx
import {EventSubject} from 'rx-event-subject'
class Cmp {
  click$ = EventSubject<MouseEvent>();
  componentDidMount() {
    click$.map(e => e.target).subscribe(console.log)
  }
  render() {
    const {click$} = this;
    return <div onClick={click$.next}>click</div>
  }
}
```
npm package: @sliv/typed-ramda
Description: [![build status](https://gitlab.com/sliv/typed-ramda/badges/master/build.svg)](https://gitlab.com/sliv/typed-ramda/commits/master) [![coverage report](https://gitlab.com/sliv/typed-ramda/badges/master/coverage.svg)](https://gitlab.com/sliv/typed-ramda/com
Author: sliv
Latest version: 0.0.1

# typed-ramda

[![build status](https://gitlab.com/sliv/typed-ramda/badges/master/build.svg)](https://gitlab.com/sliv/typed-ramda/commits/master)
[![coverage report](https://gitlab.com/sliv/typed-ramda/badges/master/coverage.svg)](https://gitlab.com/sliv/typed-ramda/commits/master)

placed typescript typings to ramda for easy autocompletion
npm package: @sliv/typed-rdom
Description: typescript version of React.DOM to enable autocompletion
Author: sliv
Latest version: 0.0.2

# typed React.DOM

it also added helpers 
```js
{
    h: R.createElement,
	ce: R.cloneElement,
	cf: R.createFactory,
	PT: R.PropTypes,
	React: R
}
```

To enable simpler autocomplete for webstorm it export all the types from 
original @types/react
npm package: @sliv/webpack-dynamic-script-loader
Description: a loader for runtime dynamic script.
Author: sliv
Latest version: 0.0.1

# webpack-dynamic-script-loader

a loader for runtime dynamic script.
 
## usage

```js
let config = {
module: {
   rules: [
      {
      	test: /\.dynamic.js/,
      	enforce: 'pre',
      	loaders: ['@sliv/webpack-dynamic-script-loader']
      }        
   ]        
}
}
```

```js
// time.dynamic.js
// notice the require is webpack's require not node's
// use req if you need to access nodeRequire
module.exports = (req) => {
	let os = req('os')
	let runtimeScript = `module.exports = "this machine have ${os.cpus().length} cpu"`
	return runtimeScript
}
```
npm package: @sliverfish17/sx-app-insights-front-end
Description: Reusable Application Insights client with correlation and user flow support
Latest version: 0.1.0

# @solvexus/sx-app-insights-front-end

Reusable Application Insights client for web apps using Microsoft Application Insights.

Features:

- Correlated telemetry (ai.operation.id, parentId, traceID)
- User/session/device tags from cookies
- Exception filtering for noisy websocket disconnects
- Dependency enrichment with appVersions and user details
- React plugin support and SPA route tracking

## Install

Peer dependencies:

- @microsoft/applicationinsights-web
- @microsoft/applicationinsights-react-js

## Usage

```ts
import { createAppInsightsClient } from "@sliverfish17/sx-app-insights-front-end";

const { appInsights, reactPlugin, trackException } = createAppInsightsClient({
  connectionString: "<APPINSIGHTS_CONNECTION_STRING>",
  getCookies: () => ({ userId: "u1", deviceId: "d1", sessionId: "s1" }),
  getOperationId: () => ({ id: "op1", traceID: "trace1" }),
});

export { appInsights, reactPlugin };
```

## API

createAppInsightsClient(options)

- connectionString: string
- getCookies: () => { userId?, deviceId?, sessionId? }
- getOperationId: () => { id: string; traceID: string }
- disableNetworkAutoTracking?: boolean (default true)
- enableAutoRouteTracking?: boolean (default true)

Returns: { appInsights, reactPlugin, trackException }
npm package: @sliversniper/react-atr
Description: ## Motivation
Latest version: 0.1.2

# React-atr

## Motivation

Jsx can get ugly very fast.

use a clojure like way to represent react element

```jsx
<div className="a b c">hello world</div>
['div.a.b.c', 'hello world'] // attr is optional

let onClick = (e) => alert('clicked')
<div onClick={_onClick} />
['div', {onClick}]

or more generally

let wrapAttr = {onClick: () => ''}
let headAttr = {style: {color: 'red'}}
['div', wrapAttr, [
    ['h1', headAttr, 'text'],
    ['section', 'lorem']
]]

```

## API
```
import {ATR, ATRS, CX} from 'react-atr'

ATR(['div', 'hello world'])

let atr = ATRS({ca: 'a...', cb: 'b...'})
atr(['div.wrapper', 'use for css modules'])

let el = CX('div')({ca: true, cb: false}) // ==> 'div.ca'

atr(el)
```
npm package: @sliversniper/react-unalias
Description: decorators for short-alias react lifecycle, default state, props
Latest version: 0.0.2

# react-unalias

## Motive
It 's easier to read and write.

cdm --> componentDidMount

## Downside

## Alias Map
```
'cwm': 'componentWillMount'
'cdm': 'componentDidMount'
'cwrp': 'componentWillReceiveProps'
'cwu': 'componentWillUpdate'
'cdu': 'componentDidUpdate'
'scu': 'shouldComponentUpdate'
'cwum': 'componentWillUnmount'

'ds': 'state'
'dp': 'defaultProps'
'pt': 'propTypes'
```

`dp` as a normal js object

`ds`, `pt` as a function

`pt` 's `this` is binded as `React.PropTypes`

## Usage
```livescript
option =
  cdm: ->
    log 'component did mount'
  ds: ->

react-unalias(option) <|
class App extends React.Component
  render: ->    
```

```javascript
@reactUnalias({
  cdm(){
    log('component did mount')
  },
  ds(){
    return {hello: 'world'}
  }
})
class App extends React.Component{
  render(){

  }
}
```
npm package: @slixites/gatsby-plugin-google-fonts
Description: Performantly and Customizably Bring Google Fonts to Gatsby
Author: Dillon Streator
Latest version: 1.1.1

# @slixites/gatsby-plugin-google-fonts
[![Build Status](https://travis-ci.org/slixites/gatsby-plugin-google-fonts.svg?branch=master)](https://travis-ci.org/slixites/gatsby-plugin-google-fonts) [![Known Vulnerabilities](https://snyk.io/test/github/slixites/gatsby-plugin-google-fonts/badge.svg)](https://snyk.io/test/github/slixites/gatsby-plugin-google-fonts) [![codecov](https://codecov.io/gh/slixites/gatsby-plugin-google-fonts/branch/master/graph/badge.svg)](https://codecov.io/gh/slixites/gatsby-plugin-google-fonts) ![Dependencies](https://david-dm.org/slixites/gatsby-plugin-google-fonts.svg)

## How to use it ?

```js
yarn add @slixites/gatsby-plugin-google-fonts
// or
npm install --save @slixites/gatsby-plugin-google-fonts
```

Add fonts to your `gatsby-config.js`:

```js
module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: '@slixites/gatsby-plugin-google-fonts',
      options: {
        fonts: [
          'Montserrat',
          'source sans pro\:300,400,400i,700',
        ],
        display: 'swap',
        preconnect: true,
        attributes: {
            rel: 'stylesheet preload prefetch',
            as: 'style',
        },
      },
    },
    // ...
  ]
  // ...
}
```


## How to find great ideas ?

- https://fonts.google.com