open-index/open-npm huggingface dataset:
npm package: @haoxh/calendar
Description: calendar json
Author: https://github.com/haoxh
Latest version: 1.0.0

# Calendar

4KB 的只负责生成日历json数据工具

###使用与功能

生成的json 数据

```js
const opt = {
    prev: '上个月',
    current: '当前',
    next: '下个月'
  }
const calendar =  Calendar({
    // 获取的每个日历数据的最小单元
    // 这里可以自定义想要的数据
    meta:function(item){
      console.log('meta',item)
      return opt[data.target]
    },
    // callback 参数为最终的日历josn 数据
    callback: function (calendarJson) {
      console.log(calendarJson)
    }
    // 设置 dateStr 输出格式
}).format("YYYY/MM/DD")
// 执行生成可以绘制日历的数据
// 触发了 Calendar callback
calendar.paint()

```

生成的数据

```js
// 每个日历数据的最小单元
{
    // 是否上个月 prev， 当前月 current，下个月 next
    "target": "prev",
    // 这天周几
    "week": 0,
    // 是否为今天
    "isToday": false,
    // 这天的 Date 数据
    // meta 函数返回的数据
    "meta":'上个月',
    "date": Date,
    "dateStr": "2018/11/30",
    "year": 2018,
    "month": 11,
    "day": 30
  }
```

### 其他API

```js
// 初始化
calendar.init().paint()
// 上一个月
calendar.prev().paint()
//下个月
calendar.next().paint()
// 去那年那月
calendar.toDate({year,month}).paint()

```

例子

```js
import  Calendar from '@haoxh/Calendar'
  const opt = {
    prev: '上个月',
    current: '当前',
    next: '下个月'
  }
  const calendar = Calendar({
    meta: function (data) {
      return opt[data.target]
    },
    callback: function (calendarJson) {
      let html = calendarJson.map(i => `<li>${i.day}<span>${i.meta}</span></li>`)
      document.querySelector('#date').innerText = `${calendar.year()}年${calendar.month()}月`
      document.querySelector('#calendar_content').innerHTML = html.join('')
    }
  })
  // 触发 meta callback
  calendar.paint()
  
  // 下个月
  function prev() {
    calendar.prev().paint()
  }

  // 上个月
  function next() {
    calendar.next().paint()
  }

```

![](./image/calendar.gif)
npm package: @haoxh/redux-dva
Description: dva redux中间件的实现
Author: haoxh1990@gmail.com
Latest version: 1.0.0

# redux-dva

[在线的编辑地址](https://codesandbox.io/s/nervous-clarke-16idy)

安装

```sh
npm i -D @haoxh/redux-dva
```

使用

```js
import React, { Component } from 'react';
import {createStore, combineReducers,applyMiddleware} from 'redux'
import {Provider} from './react-redux'
import reduxDva from '@haoxh/redux-dva'
import counter from './counter'

// dva.createReducers([counter]) 已数组的方式注册 model
const CombineReducers = combineReducers(
    reduxDva.createReducers([counter])
  )
// 注册 dva中间件
const middleware = applyMiddleware(reduxDva.middleware)
const store = createStore(CombineReducers,middleware)

/**
使用：
App.js
// ...
store.dispatch({
    type:'counter/set',
    payload:{counter:++counter}
    callback:()=>{}
})
// ...
*/

class App extends Component {
  render() {
    return (
        <Provider store={store} >
            <App />
        </Provider>
    );
  }
}

```

```js
// counter.js
// 拥有 dva model 基本编程规则
export default {
    namespace: 'counter',
    state: {count:0},
    effects: {
      // 可使用 Generator，传入参数与 dva 基本一致
    	*set({payload, callback}, {call, put,select}) {
            // 实现 put 方法，功能与dva 基本一致，可调用本 model 或 其他  namespace model 的 reducers 方法
            // 实现 select 方法，与 dva 基本一致
            // 实现 call 方法，与 dva 基本一致，提示：
            // 需要兼容异步情况(只考虑 Promise 返回情况)，利用 Generator next 方法实现
            /** 
              支持语法：
              let count =  yield call(count,payload,1000)
              let {
                count,
                someName
              } = yield call({
                count: call(count, payload, 1000),
                someName: call(someFunc, payload)
              })
              let [count,someName] = yield call([
                call(count,payload,1000)，
                call(someFunc,payload)
              ])
              let [count,someName] = [
                call(count,payload,1000)，
                call(someFunc,payload)
              ]
            */
            const state = yield select((state)=> state)
            console.log(state)
            const data = yield call(count,payload)
            yield put('setProps',data)
            callback && callback()
        }
    },
    reducers: {
        // 与 dva 一致，这里直接 redux 中的 dispatch（中间件的 next 方法）
    	setProps(state,action){
    		return {...state,...action.payload}
    	}
    }
}

function count(data，delay){
    return new Promise((resolve,reject)=>{
        return setTimeout(_=>{
            resolve(data)
        },delay)
    })
}

```
npm package: @haoxh/single-page
Description: sigle page
Author: https://github.com/haoxh
Latest version: 1.0.0

# sigle page

- 具有单页面功能的多页面应用
- 独立的前端路由功能，不需服务器配置
- 框架代码只有4KB(引入的实际代码)
- oop 编程模式开发
- 完整的页面生命周期钩子函数
- css 将内联到html中，刷新页面无感知
- Service Workers 静态文件缓存

## 安装

``` sh
npm i @haoxh/single-page -D
```

初始化目录

``` sh
npx singlePageInit
```

开启

``` sh
node scripts/start.js
```

打包

``` sh
node scripts/build.js
```


> 目录

<pre style="color:#444">

├─ config wepack 配置 工具源码
├─ .router.js 自动生成的路由配置文件
├─ src 工作区域
│   ├─  common 公共js文件
│   │   ├─ js 公用js与入口
│   │   │     ├─ index.js 入口文件
│   │   │        ...
│   │   ├─ style
│   │         ├─ index.css
│   │            ...
│   ├─ pages 页面
│   │   ├─ home
│   │       ├─ home.html 需要编写的html
│   │       ├─ index.css (css/less)
│   │       ├─index_page.js 路由的入口文件
│   │         ...
</pre>

```js
//.router.js
//自动注入 router 不需编写
import Router from '../../lib/router'
export default new Router([
    {
        path:'/home.html',
        // webpackChunkName 注释必须编写
        import: ()=> import(/*  webpackChunkName: 'home' */ '../../pages/home/index_page.js')
    },
    {
        path:'/person.html',
        import: ()=> import(/*  webpackChunkName: 'person' */ '../../pages/person/index_page.js')
    },
])
```

```html
<!-- home/home.html -->
<html>
<head>
 <!-- 单页面跳转时自动设置 title -->
<title>home page</title>
</head>
<body>
    <div data-router>
       <!-- 编写的内容放在这里，包括数据模板等 -->
    </div>
</body>
</html>

```

```js
// home/page_index.js
import module from '../../common/js/index'
// 引入html
import './home.html'
// css 依赖注入, 将css注入到 当前页面的 html 中
import './index.less'

// 第一个参数为对应的路由的路径
module.define('/home.html', {
    el: class {
        //第一次进入页面时触发
        constructor(router){
            // 设置初始变量
            this.state = {
                a:1
            }
        }
        // 即将进入页面时触发,上个页面还在时
        beforeMount() {}
        // 进入页面并且html渲染后触发
        mounted() {
            // 修改 this.state
            this.setState({a:2},(state)=>{
                // 这里渲染新的DOM,跳转链接功能自动绑定
                // dom.innerHTML = this.state...
            })
            let el = document.querySelector('.home')
            // 使用 this.addEventListener 离开页面自动卸载对应的事件
            this.addEventListener(el, 'scroll', (e)=>{
                // code...
            })
            // 获取 pathname 后的参数，并以对象形式返回
            let query = this.query()
            // 设置标题。默认在html title 填写了，就不用重新设置
            this.setTitle('home')
        }
        // 离开页面时触发
        destroyed() {}
    }
})

```
npm package: @haoxin-web/excalidraw
Description: Haoxin Excalidraw as a React component
Latest version: 1.0.22

# Haoxin Excalidraw

**Haoxin Excalidraw** 作为一个组件导出，可以直接嵌入到您的项目中。我们使用了 [Excalidraw](https://github.com/excalidraw/excalidraw) 作为基础，添加了一些自定义功能。

## 安装

使用 `npm` 或 `yarn` 安装包。

```bash
npm install react react-dom @haoxin-web/excalidraw
# 或
yarn add react react-dom @haoxin-web/excalidraw
```

> **注意**：如果您不想等待下一个稳定版本并尝试未发布的更改，请使用 `@haoxin-web/excalidraw@next`。

#### 自托管字体

默认情况下，Excalidraw 会尝试从 [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod) 下载所有使用的字体。

对于自托管目的，您需要将 `node_modules/@haoxin-web/excalidraw/dist/prod/fonts` 文件夹的内容复制到您的资产应该从其提供的路径（即项目中的 `public/` 目录）。在这种情况下，您还应该将 `window.EXCALIDRAW_ASSET_PATH` 设置为完全相同的路径，例如如果它在根目录中，则为 `/`：

```js
<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
```

### Excalidraw 的尺寸

Excalidraw 占据包含块的 `width` 和 `height` 的 100%，因此请确保您渲染 Excalidraw 的容器具有非零尺寸。

## 演示

访问 [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) 示例。

## 集成

前往 [文档](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration)。

## API

前往 [文档](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api)。

## 贡献

前往 [文档](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing)。
npm package: @haoxin-web/excalidraw-common
Description: 好信云会议 Excalidraw common functions, constants, etc.
Latest version: 1.0.2

# @haoxin-web/excalidraw-common

## 安装

```bash
npm install @haoxin-web/excalidraw-common
```

如果您更喜欢使用 Yarn 而不是 npm，请使用以下命令安装 Excalidraw 工具包：

```bash
yarn add @haoxin-web/excalidraw-common
```

使用 PNPM 时，同样使用以下命令安装该包：

```bash
pnpm add @haoxin-web/excalidraw-common
```
npm package: @haoxin-web/excalidraw-element
Description: Haoxin Excalidraw elements-related logic
Latest version: 1.0.2

# @haoxin-web/excalidraw-element

## 安装

```bash
npm install @haoxin-web/excalidraw-element
```

如果您更喜欢使用 Yarn 而不是 npm，请使用以下命令安装 Excalidraw 工具包：

```bash
yarn add @haoxin-web/excalidraw-element
```

使用 PNPM 时，同样使用以下命令安装该包：

```bash
pnpm add @haoxin-web/excalidraw-element
```
npm package: @haoxin-web/excalidraw-math
Description: Excalidraw math functions
Latest version: 1.0.2

# @haoxin-web/excalidraw-math

## Install

```bash
npm install @haoxin-web/excalidraw-math
```

如果您更喜欢使用 Yarn 而不是 npm，请使用以下命令安装 Excalidraw 工具包：

```bash
yarn add @haoxin-web/excalidraw-math
```

使用 PNPM 时，同样使用以下命令安装该包：

```bash
pnpm add @haoxin-web/excalidraw-math
```