open-index/open-npm huggingface dataset:
npm package: @shotzoom/redux-reqres
Description: Redux request/response middleware.
Author: Brenden Snyder
Latest version: 0.0.1

Redux Reqres
============

Request response synchronization middleware. Syncronization should be used when multiple async actions may be dispatched to fetch data, but only the last response should be serviced such as type aheads and search filtering.

## Installation

```bash
npm install @shotzoom/redux-reqres --save
```

## Usage

To use, simply apply the middleware to your redux store and then dispatch the created `request/response` action creators.

```js
import { createStore, applyMiddleware } from 'redux';
import { middlware } from '@shotzoom/redux-reqres';
import reducer from './reducer';

const store = createStore(
  reducer,
  applyMiddleware(middlware)
);
```

After the middleware has been applied, use the `reqres` action creators to dispatch syncronized `request/response` action pairs.

```js
import { reqres } from '@shotzoom/redux-reqres';

const query = (term) => {
  const { request, response } = reqres('api/find');

  return (dispatch) => {
    dispatch(request({ type: 'FIND' }));
    fetch(`api/find?query=${term}`)
      .then((r) => r.json())
      .then((json) => {
        dispatch(response({ type: 'FIND_RECEIVE', results: json.results }));
      });
  };
};

store.dispatch(query('1'));
store.dispatch(query('2'));
store.dispatch(query('3'));
store.dispatch(query('4')); // only service this response.
```

The `request` and `response` action creators will wrap any action that is passed in and will only service the inner action when they meet the following criteria.
1. Has not yet been dispatched.
2. The request has not be invalidated by another request with the same key.

```js
const first = reqres('some key unique to the action creator');
const second = reqres('some key unique to the action creator');

store.dispatch(first.request({ type: 'FIND' });
store.dispatch(first.request({ type: 'FIND' }); // will not service inner action again.
store.dispatch(second.request({ type: 'FIND' }); // will invalidate first request.
store.dispatch(first.response({ type: 'FIND_RECEIVE' })); // will not be serviced.
store.dispatch(second.response({ type: 'FIND_RECEIVE' })); // will be serviced.
store.dispatch(second.response({ type: 'FIND_RECEIVE' })); // has already been serviced.
```
npm package: @shotzoom/redux-tracking
Description: Redux tracking middleware.
Author: Brenden Snyder
Latest version: 0.0.3

Shotzoom tracking middleware
============================

Provides tracking support for redux. Currently only support mixpanel.

## Installation 

```bash
  npm install @shotzoom/redux-tracking --save
```

## Usage

Tracking is done by first applying the tracking middleware to your redux store and then dispatching actions with tracking meta data or by using the `track` action creator.

```js
import { createStore, applyMiddleware } from 'redux';
import { configureMiddleware } from '@shotzoom/redux-tracking';
import reducer from './reducer';

const middleware = applyMiddleware(configureMiddleware(mixpanel));
const store = createStore(reducer, middleware);
```

After the middleware has been applied to the store, simply dispatch actions with tracking metadata.

```js
const viewMore = (page) => {
  return {
    type: 'VIEW_MORE',
    meta: {
      mixpanel: {
        event: 'view more',
        payload: { page: page }
      }
    }
  };
};

store.dispatch(viewMore(10));
```

Instead of using an object payload, a function can be supplied. When a function is used as payload, it will be called by the middleware with the current store state as its only argument and its result will be used as the tracking payload.

```js
const viewMore = (page) => {
  return {
    type: 'VIEW_MORE',
    meta: { 
      mixpanel: {
        event: 'view more',
        payload: (state) => {
          return {
            query: state.query,
            page: page
          };
        }
      }
    }
  };
};

store.dispatch(viewMore(10));
```

If tracking is needed without dispatching any action, you can simply use the `track` action creator.

```js
import { track } from '@shotzoom/redux-tracking';

dispatch(track('view more', { page: 10 }));
dispatch(track('view more', (state) => { query: state.query }));
```

### Tracking api thunks

Because mixpanel can be loaded through an async script tag, configuring the middleware explicitly on page load may not be possible. You can instead pass a thunk that returns the mixpanel api.

```js
configureMiddleware(() => window.mixpanel);
```
npm package: @shoukoo/backstage-plugin-scaffolder-cuelang
Description: Backstage template action
Author: Andy
Latest version: 0.4.12

# Backstage template action for Cuelang
This is a Cuelang actions plugin for the scaffolder-backend in Backstage.

This action utilises the Cue flow engine to dynamically generate templates, you can read more detail [here](https://cuetorials.com/go-api/workflows/custom/)

## Prerequisites
Ensure that Cuelang is properly installed in the Backstage instance

## Installation 
In the root directory of your Backstage project:
```bash 
yarn add --cwd packages/backend @shoukoo/backstage-plugin-scaffolder-cuelang
```
## Getting started
Add the actions to the scaffolder:
```

// packages/backend/src/plugins/scaffolder.ts

import { cueFlowAction } from "@shoukoo/backstage-plugin-scaffolder-cuelang"
import { ScmIntegrations } from '@backstage/integration';
import { createBuiltinActions, createRouter } from '@backstage/plugin-scaffolder-backend';

...

const integrations = ScmIntegrations.fromConfig(env.config);
const builtInActions = createBuiltinActions({
  catalogClient,
  integrations,
  config: env.config,
  reader: env.reader
});

const actions = [
  cueFlowAction({integrations,reader: env.reader,}),
  ...builtInActions
];

return await createRouter({
  logger: env.logger,
  config: env.config,
  database: env.database,
  reader: env.reader,
  catalogClient,
  actions
});
```
npm package: @shoulddoit/van_jsx
Description: van_jsx. A jsx helper for VanJS
Author: zhanlefeng
Latest version: 1.0.3

# van_jsx

一个 VanJS 的 jsx 拓展。

[VanJS] 是一款号称不足 1kb、不需要 React/JSX 的响应式框架。van_js 目标是让 jsx 转换为 VanJS 函数调用。

## 特性

- [x] jsx 工厂函数
  - [x] svg 支持
- [x] render 函数
- [x] IDE 支持（vscode 对 jsx 算是原生支持）

## 核心 API

`h`

- 函数签名: `h(name, props, ...children)`
- 描述: jsx 工厂函数。配合 bundler 的 JSX Factory 选项，可以将 jsx 转换为 h 函数调用
- 参数:
  - name: tag 名称或组件
  - props: 属性对象
  - children: 子元素
- 返回值: HTML 元素或 SVG 元素

`render`

- 函数签名: `h(container, componentOrHTMLElement)`
- 描述: 将组件挂载到 container
- 参数:
  - container: 一个元素或元素的 ID
  - componentOrHTMLElement: 组件或元素
- 返回值: 无

## 组件

VanJS 没有专门的组件概念， VanJS 的本质是 `document.createElement`。但 van_jsx 引入了组件概念。在 van_jsx 中一个组件是指返回 HTMLElement 的函数。

比如：

```js
function DisplayName({ name }) {
  return <div>{name}</div>;
}

render('#app', <DisplayName name={'Tom'}></DisplayName>);
```

上面的 `DisplayName` 就称为一个组件。

## 响应式

所谓的“响应式”是指数据变化会自动更新视图。VanJS 内置了 van.state 用于实现响应式开发范式。van.state 需要将数据包装为函数来追踪。示例可以参考 [reactive](./examples/reactive/index.jsx)。

## van_jsx 和 React 区别

虽然 van_jsx 使用 jsx 语法用于创建 HTML，但是其低层是 VanJS，更深层的实现原理是 DOM 操作。与 React 明显不同。React 是先创建 vdom 然后渲染为 HTML。

## 构建

```sh
pnpm i
pnpm build
pnpm build-examples
```

## 示例

见 [/examples](/examples/)

## LICENSE

MIT

[vanjs]: https://vanjs.org/