open-index/open-npm huggingface dataset:
npm package: @minar-kotonoha/node-swapper
Description: 这是一款在 windows 下改变 Node 版本的命令行工具，基于环境变量实现。
Author: chengzhuo5
Latest version: 0.0.3

# Node Swapper

这是一款在 windows 下改变 Node 版本的命令行工具，基于环境变量实现。

## 安装

在管理员权限下运行：

`npm i @minar-kotonoha/node-swapper -g`

## 安装 Node 版本

在管理员权限下运行：

```javascript
node-swapper install 15.10.0
```

目前版本号需要精确匹配，未来会支持模糊匹配。

## 卸载 Node Swapper

在管理员权限下运行：

```javascript
node-swapper uninstall
npm uninstall @minar-kotonoha/node-swapper -g
```
npm package: @minar-kotonoha/vite-plugin-qiankun
Description: vite for qiankun, compatible with SSR
Author: chengzhuo
Latest version: 1.0.13

#### 简介

> vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件

- 保留vite构建es模块的优势
- 一键配置，不影响已有的vite配置
- 支持vite开发环境

#### 快速开始

###### 1、在 `vite.config.ts` 中安装插件
```typescript
// vite.config.ts

import qiankun from 'vite-plugin-qiankun';

export default {
  // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致
  plugins: [qiankun('myMicroAppName')],
  // 生产环境需要指定运行域名作为base
  base: 'http://xxx.com/'
}
```
###### 2、在入口文件里面写入乾坤的生命周期配置

```typescript
// main.ts
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

// some code
renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount');
    const { container } = props;
    const mountRoot = container?.querySelector('#root');
    ReactDOM.unmountComponentAtNode(
      mountRoot || document.querySelector('#root'),
    );
  },
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}
```

###### 3、dev下作为子应用调试

> 因为开发环境作为子应用时与热更新插件（可能与其他修改html的插件也会存在冲突）有冲突，所以需要额外的调试配置

```typescript
// useDevMode 开启时与热更新插件冲突,使用变量切换
const useDevMode = true

const baseConfig: UserConfig = {
  plugins: [
    ...(
      useDevMode ? [] : [
        reactRefresh()
      ]
    ),
    qiankun('viteapp', {
      useDevMode
    })
  ],
}
```
上面例子中 `useDevMode = true` 则不使用热更新插件，`useDevMode = false` 则能使用热更新，但无法作为子应用加载。

###### 4、其它使用注意点 `qiankunWindow`

因为es模块加载与`qiankun`的实现方式有些冲突，所以使用本插件实现的`qiankun`微应用里面没有运行在js沙盒中。所以在不可避免需要设置window上的属性时，尽量显示的操作js沙盒，否则可能会对其它子应用产生副作用。qiankun沙盒使用方式
```typescript
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

qiankunWindow.customxxx = 'ssss'

if (qiankunWindow.__POWERED_BY_QIANKUN__) {
  console.log('我正在作为子应用运行')
}

```

#### 例子

详细的信息可以参考例子里面的使用方式
 ```
git clone xx
npm install
npm run example:install
# 生产环境调试demo
npm run example:start
# vite开发环境demo, demo中热更新已经关闭
npm run example:start-vite-dev
```
npm package: @minar-kotonoha/vue-native-core
Description: Library with core functionalities to create Vue Native components
Author: chengzhuo5
Latest version: 0.3.2

# @minar-kotonoha/vue-native-core

原 git：https://github.com/GeekyAnts/vue-native-core，本项目基于此进行了二次开发。

此 npm 包提供了一个 Vue 构造器，可以将 Vue 的响应式机制、生命周期迁移到 react 上，同时保留了 jsx 写法。

## 使用方法

父组件：

```javascript
// Parent.js
import React from 'react';
import { constructor, ref } from '@minar-kotonoha/vue-native-core';
import Child from './Child';

const childRef = ref();
export default constructor({
  data() {
    return {
      showChild: false,
    };
  },
  methods: {
    trigger() {
      this.showChild = !this.showChild;
    },
  },
  mounted() {
    // Vue组件和Vue-React组件以下三种ref使用方式均可，纯React组件只能用第三种。
    childRef.add();
    // childRef.current.add()
    // childRef.current._store.add()
  },
  render() {
    return (
      <div>
        <button onClick={this.trigger}>{this.showChild.toString()}</button>
        {this.showChild && <SubVue ref={childRef} count={1} />}
      </div>
    );
  },
});
```

子组件：

```javascript
// Child.js
import React from 'react';
import { constructor } from '@minar-kotonoha/vue-native-core';

export default constructor({
  props: ['count'], // 此处可以注册属性，注册过的属性可以在this中直接访问，也可以用于computed和watch
  data() {
    return {
      a: 0,
    };
  },
  methods: {
    add() {
      this.a++;
    },
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    this.a = this.props.count; // this.props可以拿到所有的属性
    this.a = this.count; // this中可以拿到注册过的属性
    console.log('mounted');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  render() {
    return <button onClick={this.add}>{this.a}</button>;
  },
});
```

注：由于只是把 Vue 的响应式机制和生命周期移植，最终导出的依然是 React 组件，故并不影响 React 兼容性，Vue 原生组件不能通过 constructor 的方式使用，可以采用原 git 项目中 loader 的方式。

## 模板指令

为了减少包大小以及考虑到很多用户不喜欢模板指令，本项目默认不包含指令功能，如有需要可以移步[@minar-kotonoha/babel-plugin-react-directives](https://github.com/chengzhuo5/babel-plugin-react-directives)