open-index/open-npm huggingface dataset:
npm package: @link-hooks/jsx
Description: jsx transform object tree
Author: xiguan00yu
Latest version: 2.0.1

# DEMO

```shell
npm install @link-hooks/jsx
```

```js
import jsx from "@link-hooks/jsx.esm";

const wf = "world";

jsx`
    <div a=1 b=c>
        Hello <strong>${wf}</strong>
    </div>
`;

// out:
// {
//   t: 'div',
//   p: { a: '1', b: 'c' },
//   sIs: 1,
//   sIe: 12,
//   c: [
//     'Hello',
//     {
//       t: 'strong',
//       p: {},
//       sIs: 33,
//       sIe: 39,
//       c: ['world'],
//       _jsx: true,
//       eIs: 47,
//       eIe: 53
//     }
//   ],
//   _jsx: true,
//   eIs: 65,
//   eIe: 68
// }

const R = ({ c }) => jsx`<div>${c}</div>`;
const o = { d: 1 };

jsx`
    <${R}>
        <div a=${o} />
        <div b=4/>
    </${R}>
`;
// out:
// {
//   t: [Function: R],
//   p: {},
//   c: [
//     {
//       t: 'div',
//       p: { a: { d: 1 } },
//       c: [],
//       sIs: 19,
//       sIe: 32,
//       eIs: 33,
//       eIe: 34,
//       _jsx: true
//     },
//     {
//       t: 'div',
//       p: { b: '4' },
//       c: [],
//       sIs: 49,
//       sIe: 55,
//       eIs: 56,
//       eIe: 57,
//       _jsx: true
//     }
//   ],
//   sIs: 1,
//   sIe: 4,
//   _jsx: true,
//   eIs: 69,
//   eIe: 72
// }
const ar = ["Hello", "World"];
jsx`
    <div>
        ${ar}
    </div>
`;
// {
//   t: 'div',
//   p: {},
//   c: [ 'Hello', 'World' ],
//   sIs: 1,
//   sIe: 4,
//   _jsx: true,
//   eIs: 36,
//   eIe: 39
// }
```

# Upgrade

### V1: 使用 String 的概念，对于整个 Args 都字符串化，以便于算法指针移动

> 优点：速度稍微快一些
>
> 缺点：需要对 Args 去字符串化处理存在 key 的处理

### V2: 使用 Array String 概念，对于两个 Item 间隔插入 Arg，动态的计算指针移动

> 优点：不用处理 Args 字符串化
>
> 缺点：速度可能会慢
npm package: @link-hooks/shopify-app-session-storage-mysql
Description: Shopify App Session Storage for MySQL
Author: link
Latest version: 1.1.2

# fork [@shopify/shopify-app-session-storage-mysql](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-mysql)

1. update mysql version

2. change create mysql connect method


# Session Storage Adapter for MySQL DB

This package implements the `SessionStorage` interface that works with an instance of [MySQL](https://www.mysql.com).

```js
import {shopifyApp} from '@shopify/shopify-app-express';
import {MySQLSessionStorage} from '@shopify/shopify-app-session-storage-mysql';

const shopify = shopifyApp({
  sessionStorage: new MySQLSessionStorage(
    'mysql://username:password@host/database',
  ),
  // ...
});

// OR

const shopify = shopifyApp({
  sessionStorage: MySQLSessionStorage.withCredentials(
    'host.com',
    'thedatabase',
    'username',
    'password',
  ),
  // ...
});
```

If you prefer to use your own implementation of a session storage mechanism that is compatible with the `@shopify/shopify-app-express` package, see the [implementing session storage guide](../shopify-app-session-storage/implementing-session-storage.md).
npm package: @link-hooks/use-event-listener
Description: window add event listener
Author: xiguan00yu
Latest version: 1.0.0

# @link-hooks/use-event-listener

> window add event listener

[![NPM](https://img.shields.io/npm/v/@link-hooks/use-event-listener.svg)](https://www.npmjs.com/package/@link-hooks/use-event-listener) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @link-hooks/use-event-listener
```

## Usage

```tsx
import React, { Component } from 'react'
import useEventListener from '@link-hooks/use-event-listener'

const Example = () => {
  const [hover, setHover] = useState(false)
  //  example-1
  const ref = useEventListener<HTMLDivElement>(
    ['mouseover', 'mouseleave'],
    [() => setHover(true), () => setHover(false)]
  )

  //  example-2
  // const ref = useEventListener<HTMLDivElement>(['mouseover', 'mouseleave'], {
  //   mouseover: () => setHover(true),
  //   mouseleave: () => setHover(false)
  // })

  //  example-3
  // const ref = useEventListener<HTMLDivElement>('mouseover', ) => setHover(true))

  return <div className={`box ${hover ? 'hover' : ''}`} ref={ref} />
}
```

## License

MIT © [xiguan00yu](https://github.com/xiguan00yu)
npm package: @link-intersystems/console-proxy
Description: Easy to use and flexible console redirection library.
Latest version: 1.1.1

# Console Proxy Library

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/link-intersystems/console-proxy/Node.js%20CI)
![Coveralls](https://img.shields.io/coveralls/github/link-intersystems/console-proxy)
![GitHub issues](https://img.shields.io/github/issues-raw/link-intersystems/console-proxy)
[![GitHub](https://img.shields.io/github/license/link-intersystems/console-proxy?label=license)](LICENSE.md)

A library to intercept console function calls.

## Install

     npm i "@link-intersystems/console-proxy"

## Use

    import {
        createConsoleProxy,
        createConsoleTemplate,
        createLogEnablementInterceptor,
    } from "@link-intersystems/console-proxy";

    const logEnablement = createLogEnablementInterceptor();
    const consoleProxy = createConsoleProxy(console, logEnablement);

    logEnablement.setLevelEnabled("debug", false)


    consoleProxy.info("INFO", "Hello", "World");
    consoleProxy.debug("DEBUG", "Hellow", "World");     
    // Since debug is disabled only info is logged.
    // OUTPUT:
    // INFO Hello World

A consoleProxy does not change the default console. 
If you want to change the default console you can either use the [console template](src/template/README.md)

    function codeThatLogs() {
        console.log("Hello");
        console.info("World");
    }

    logEnablement.setLevelEnabled("info", false)

    consoleTemplate.execFn(codeThatLogs)
    // OUTPUT:
    // Hello

or manually enable/disable the [console proxy](src/proxy/README.md).

    const disableConsoleProxy = consoleProxy.enable();
    // The target console's functions will be redirected through the proxy.

    console.log("Hello", "World"); // is proxied

    disableConsoleProxy();
    // The target console's functions are restored.

    console.log("Hello", "World"); // is not proxied

## Console Template Module

The console template module provides template methods that ensure that the console is properly proxies when the target function executes. [Read more](src/template/README.md)

    logEnablementHandler.setLevelEnabled("info", false);
    consoleTemplate.execFn(codeThatLogs)

## Console Proxy Module

The consoleProxy module provides support for intercepting a console, usually the default console. [Read more](src/proxy/README.md)

    let lastInfoLog: string;

    const consoleProxy = createConsoleProxy();
    consoleProxy.setInterceptorFunction("info", (...args) => {
        lastInfoLog = args.join(" ");
    })

    consoleProxy.setInterceptorFunction("log", (...args) => {
        // log diabled
    })

## Console Proxy Interceptors

This module contains interceptors for the console proxy. [Read more](src/interceptors/README.md)

     const logEnablementInterceptor = createLogEnablementInterceptor();
     logEnablementInterceptor.setLevelEnabled("log", false);

     consoleProxy.setInterceptor(logEnablementInterceptor);
npm package: @link-intersystems/console-proxy-dom
Description: DOM extension for the @link-intersystems/console-proxy lib.
Latest version: 1.1.1

# Console Proxy Dom Library

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/link-intersystems/console-proxy-dom/Node.js%20CI)
![Coveralls](https://img.shields.io/coveralls/github/link-intersystems/console-proxy-dom)
![GitHub issues](https://img.shields.io/github/issues-raw/link-intersystems/console-proxy-dom)
[![GitHub](https://img.shields.io/github/license/link-intersystems/console-proxy-dom?label=license)](LICENSE.md)

An extension library for [@link-intersystems/console-proxy](https://github.com/link-intersystems/console-proxy) that contains utilities to redirect console logs to dom elements, e.g. a textarea.

## Install

     npm i "@link-intersystems/console-proxy-dom"

## Use

    import {
        createConsoleProxy,
        createConsoleTemplate,
    } from "@link-intersystems/console-proxy";
    import {
        valueLogConfig,
        defaultLogConfig
    } from "@link-intersystems/console-proxy-dom";

    const consoleProxy = createConsoleProxy();

    const domConsoleLogInterceptor = createDOMConsoleLogInterceptor();
    domConsoleLogInterceptor.setLogTargetSelector("#console"); // the default

    // The defaultLogConfig redirects logs by appending them to the target's innerHtml.
    domConsoleLogInterceptor.setLogConfig(defaultLogConfig); // the default
    
    // The valueLogConfig redirects logs by appending them to the target's value property.
    // E.g. can be used for textareas.
    // domConsoleLogInterceptor.setLogConfig(valueLogConfig);

    consoleProxy.setInterceptor(domConsoleLogInterceptor);

    // will be redirected to the dom element selected by the target css selector.
    consoleProxy.info("INFO", "Hello", "World");
    consoleProxy.debug("DEBUG", "Hellow", "World");     

E.g. a div target

    <div class="container">
        <div class="mb-3">
            <label for="console" class="form-label">Console div</label>
            <div data-testid="consoleOutput" class="form-control" id="console" style="height:8em; overflow: scroll;"></div>
        </div>
    </div>

## Live Demo at codepen.io

See [@link-intersystems/console-proxy-dom](https://codepen.io/rene-link/pen/gOxLvgO)
npm package: @link-intersystems/redux-middlewares
Description: Library of redux middlewares
Latest version: 1.0.2

# Redux Middlewares Library

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/link-intersystems/redux-middlewares/Node.js%20CI)
![Coverage Status](https://coveralls.io/repos/github/link-intersystems/redux-middlewares/badge.svg?branch=master)
![GitHub issues](https://img.shields.io/github/issues-raw/link-intersystems/redux-middlewares)
[![GitHub](https://img.shields.io/github/license/link-intersystems/redux-middlewares?label=license)](LICENSE.md)



A collection of middlewares for Redux. 

## State Change Middleware

The state change middleware allows you to execute reducers as an effect of a state change. It introduces a kind of state listener concept to the Redux store that can be configured with a domain specific language.

    stateChangeMiddleware
      .whenStateChanges((state) => state.counter)
      .thenDispatch({ type: "text", payload: "changed" });

Go to the [state change middleware documentation](src/state/README.md) for details.