open-index/open-npm huggingface dataset:
npm package: @halfotaku/json-in-order
Description: Like `JSON.parse`, but preserving the key order from JSON objects; wherever `JSON.parse` produces a plain `object`, it produces a `Map`.
Author: Sander Evers
Latest version: 0.3.0

# json-in-order

Like `JSON.parse`, but preserving the key order from JSON objects; wherever `JSON.parse` produces a plain `object`, it produces a `Map`.

## Usage

```js
import {parse} from 'json-in-order';

const json = '{"2":"hearts","1":"soul"}';
const m = parse(json);

console.log(m.constructor.name);   // Map
console.log([...m].join(' / '));   // 2,hearts / 1,soul
```

## Motivation

Since ES2015, JavaScript `object` keys have a well-defined order for iteration. This is _almost_ the order in which
they were inserted, [but not quite](https://stackoverflow.com/a/5525820). In particular, the keys `"2"` and
`"1"` from the above example are returned in a different order if you put them in an `object`:

```js
const obj = {"2":"hearts"};
obj["1"]="soul";
console.log(Object.entries(obj).join(' / '));  // 1,soul / 2,hearts
```

This means that if you're parsing JSON, and are interested in the order in which the keys appear in the input string, you cannot use
`JSON.parse` - because it will always construct an `object`. In which, by the way, it is totally justified, because
[objects have no defined order](https://www.json.org/json-en.html) in the JSON spec.

Still, object keys do have an order in the JSON string, and who is Douglas Crockford to say that you must ignore it?
ES2015 also introduced a standard [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
datatype whose iteration order does follow the exact insertion order. The package you are looking at parses JSON objects as a `Map` instead
of an `object`. Use it as you see fit.

## Usage without build

You can also use this package directly in the browser.

```html
<script src="https://cdn.jsdelivr.net/npm/json-in-order@latest"></script>
```

This makes it available in the global namespace as `jio`:

```html
<script>
    console.log(jio.parse('{"say":"cheese"}').get("say"));
</script>
```

## Credits

Actual parsing is performed by [clarinet](https://github.com/dscape/clarinet).
npm package: @halftome/amplify-transformers
Description: Useful GraphQL transformers for AppSync/Amplify
Author: Benjamin Tamasi
Latest version: 2.0.7

# Amplify Transformers

A collection of useful transformers for your GraphQL schema

## Installation

Install with `npm install --save @halftome/amplify-transformers`

## Usage

### Setup Custom Transformers

Edit `amplify/backend/api/<YOUR_API>/transform.conf.json` and append the following:

```json
"transformers": [
  "@halftome/amplify-transformers/dist/PipelineTransformer",
  "@halftome/amplify-transformers/dist/DynamoDBTransformer"
]
```

### DynamoDB

Use the `@dynamodb` directive to attach a DynamoDB resolver to your field.

Example:

```graphql
type Foo @model {
  id: ID!
  name: String!
}

type Query {
  fooBar: Foo @dynamodb(table: "Foo")
}
```

The default templates will be `Query.fooBar.req.vtl` and `Query.fooBar.res.vtl` generated from the type and the field. If they don't exist, they will be generated, but you need to change the content of the request mapping template.

### Pipeline

Use the `@pipeline` directive to attach a Pipeline resolver to your field. This will just create an empty pipeline. To add functions to the pipeline, use the other directives.

Example:

```graphql
type Foo @model {
  id: ID!
  name: String!
}

type Baz @model {
  id: ID!
  name: String!
}

type Query {
  fooBarBaz: FooBaz
    @pipeline
    @dynamodb(table: "Foo", name: "GetFoo")
    @dynamodb(table: "Baz", name: "GetBaz")
}
```

This will create a pipeline which executes two dynamodb resolvers one after another. First `Foo`, then `Baz`. Their request mapping templates are in the `pipelineFunctions` directory, and need to be overriden to do anything useful.

## Known Issues / Gotchas

When chaining directives, their order is not necessarily in the order they are written in GraphQL. See this issue for details: https://github.com/aws-amplify/amplify-cli/issues/6176 This is why its important to have the pipeline transformer defined first in `transform.conf.json`. Hopefully this will be fixed soon, and it will allow us to use the `@function` directive with the `@pipeline`
npm package: @halftome/szamlazz-client
Description: Javascript client for using szamlazz.hu API
Author: halftome@gmail.com
Latest version: 2.0.2

## Client for Szamlazz.hu API

### Usage:

```javascript
import SZClient from '@halftome/szamlazz-client'

const client = new SZClient({ username: 'demo', password: 'demo' })

const invoice = await c.generateInvoice(
  {
    // Invoice options
  },
  [
    // List of items
  ],
)
```
npm package: @halftome/vue-router-mapper
Description: Two way bindings for vue-router
Author: Benjamin Tamasi
Latest version: 1.0.1

# Vue Router Mapper

Two way bindings for vue-router

## Installation

`npm install --save @halftome/vue-router-mapper

## Usage

Import the required mapper function:

```javascript
import {mapRouterQuery} from @halftome/vue-router-mapper
```

In any of your vue components, Add the required query params to your `computed`:

```javascript
computed: {
    ...mapRouterQuery(['page_number', 'search']),
}
```

And you now have 2-way data binding. Feel free read/write to these variables. For example a search:

```html
<template>
  <div>
    You are on page {{ page_number }}
    <p>Search: <input v-model="search" /></p>
  </div>
</template>
```

As you type, the url will be updated.

Instead of doing `this.$routes.query.search` to get the value, and `this.$router.push({query: {search: 'value'}})`, you can now elegantly use v-model or a .sync modifier on a prop, allowing you to write cleaner and more concise code.

You can also use `mapRouterHash` and `mapRouterParams` in the same way, to use the respective values.
npm package: @halfwork.cn/js
Description: 在您的网站上显示 aiflows 的 Javascript 库
Latest version: 1.0.7

# HALF.done Aiflow JS 库

用于嵌入 HALF.done aiflow 的前端库 [Aiflow](https://www.halfdone.cn/).

## 安装

### Using npm

执行命令如下:

```bash
npm install @halfwork.cn/js
```

### 在 HTML 代码中粘贴

```
<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/js@1.0.6/dist/web.js'

  Aiflow.initStandard({
    aiflow: '工作流ID',
  })
</script>

<aiflow-standard style="width: 100%; height: 600px; "></aiflow-standard>
```

## 标准模式

您可以通过单击工作流编辑器中的“服务集成”选项中的“Javascript插件”按钮来获取标准的HTML和Javascript代码。在那里，您可以更改容器尺寸。如下是代码示例:

```html
<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/js@1.0.6/dist/web.js'

  Aiflow.initStandard({
    aiflow: '工作流ID',
  })
</script>

<aiflow-standard style="width: 100%; height: 600px; "></aiflow-standard>
```

此代码将创建一个宽度为 100% 和  高度 600px的容器.

## 弹窗模式

您可以通过单击工作流编辑器中的“服务集成”选项中的“Javascript插件”按钮来获取标准的HTML和Javascript代码。在那里，您可以更改容器尺寸。如下是代码示例:

```html
<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/js@0.2/dist/web.js'

  Aiflow.initPopup({
    aiflow: 'my-aiflow',
    apiHost: 'http://localhost:3005',
    autoShowDelay: 3000,
  })
</script>
```

此代码将在 3 秒后自动触发弹出窗口.

### 打开或关闭弹出窗口

您可以使用以下命令:

```js
Aiflow.open()
```

```js
Aiflow.close()
```

```js
Aiflow.toggle()
```

例如，您可以将这些命令绑定到按钮元素上:

```html
<button onclick="Aiflow.open()">联系我们</button>
```

## 按钮模式

您可以通过单击工作流编辑器中的“服务集成”选项中的“Javascript插件”按钮来获取标准的HTML和Javascript代码。在那里，您可以更改容器尺寸。如下是代码示例::

```html
<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/js@0.2/dist/web.js'

  Aiflow.initBubble({
    aiflow: 'my-aiflow',
    previewMessage: {
      message: '我有一个问题要问你!',
      autoShowDelay: 5000
    },
    theme: {
      button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
      previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
      chatWindow: { backgroundColor: '#ffffff' },
    },
  })
</script>
```

此代码将显示气泡，并在 5 秒后显示预览消息

### 打开或关闭预览消息

您可以使用以下命令:

```js
Aiflow.showPreviewMessage()
```

```js
Aiflow.hidePreviewMessage()
```

### 打开或关闭工作流

您可以使用以下命令:

```js
Aiflow.open()
```

```js
Aiflow.close()
```

```js
Aiflow.toggle()
```

例如，您可以将这些命令绑定到按钮元素上:

```html
<button onclick="Aiflow.open()">联系我们</button>
```

## 其他配置

您可以通过添加“prefilledVariables”选项在嵌入代码中预填充机器人变量值。下面是一个示例:

```js
Aiflow.initStandard({
  aiflow: 'my-aiflow',
  prefilledVariables: {
    'Current URL': 'https://my-site/account',
    'User name': 'HALF.done',
  },
})
```

它将用“https：my-siteaccount”预填充“当前URL”变量，用“John Doe”预填充“用户名”变量。有关变量的更多信息：[here]（editorvariables）。请注意，如果您的网站 URL 包含查询参数（即 https：halfwork.cn？User%20name=John%20Doe），变量将自动注入 aiflow。因此，无需手动将查询参数传输到机器人嵌入配置
npm package: @halilbrhmtrn/react-analog-clock
Description: A themable analog clock component
Latest version: 2.1.4

# \<AnalogClock /\>

AnalogClock is a themable clock component. It provides an easy way of adding a clock to your application. The clock is fully responsive based on the `width` prop you pass in.

```
npm install --save @halilbrhmtrn/react-analog-clock
```
This is the original repo: 
Try out the [DEMO](http://zackargyle.github.io/react-analog-clock/)

![](https://raw.githubusercontent.com/zackargyle/react-analog-clock/master/demo/screenshot.png)

### Usage
```js
import AnalogClock, { Themes } from 'react-analog-clock';

ReactDOM.render(<AnalogClock theme={Themes.dark} />, element);
```

### Props
prop    | default
------- | -------
`width` | 400px
`theme` | Themes.dark
`gmtOffset` (optional)| offset of `new Date()` _(e.g. '-5.5')_ ( No offset anymore)
`showSmallTicks` (optional) | true
`value` | (optional) | set the time with value prop
`enableSeconds` | (optional) | false (set true for displaying seconds)

### Themes
Theme      | Description
---------- | -----------
`dark`     | Black base, black border
`light`    | White base, gray border
`aqua`     | Gray base, aqua border
`lime`     | Green base, white border
`sherbert` | Gradient (green/pink) base, white border
`navy`     | Gradient (blue) base, white border

### Scripts
script         | description
-------------- | -----------
`npm start`    | run the demo on `localhost:3000`
`npm test` | run the test suite
`npm run lint` | run the linter

### Patrons
>Be the first to contribute!
>✌⊂(✰‿✰)つ✌

### Ideas for contribution
- Allow % width values
- Add Timezone (Winter/Summertime) Support
- Update docs with how to write custom themes
- Add hand movement animation

## License
[MIT](http://isekivacenz.mit-license.org/)