open-index/open-npm huggingface dataset:
npm package: @kkt/plugin-less
Description: Support less.
Author: Kenny Wong
Latest version: 3.1.13

@kkt/plugin-less
---

This package contains a plugin for using [Less](https://github.com/less/less.js) with [@kkt/ssr](https://github.com/kktjs/ssr).


## Usage in @kkt/ssr Projects

```bash
npm add @kkt/plugin-less --dev
```

### With the default options

```js
// .kktrc.js
module.exports = {
  plugins: [
    require.resolve('@kkt/plugin-less'),
  ],
};
```
npm package: @kkt/plugin-pro-access
Description: kktp plugins
Author: SunLxy
Latest version: 1.1.5

## 权限配置

权限控制，开启 `access` 配置, 则`src`目录下自动生成 `access` 文件。可以在业务中根据路径来定制需求。


## 参数

```ts
export interface AccessPluginProps {
  /** 是否开启权限 */
  access?: string;
}

```

## roles

当路由配置`roles`参数，在页面中可以直接获取`roles`用于页面模块校验权限。
```ts
// config/routes.json
const routes = [
  // ....
  {
    path: '/demo',
    element: '@/pages/demo',
    roles: ['admin', 'users']
  }
]

// page
const Page = (props) => {
  const { roles = [] } = props;

  return <div />
}
export default Page;
```

## access.ts

页面跳转拦截，思路来源于`vue-router`的`beforeEach`。

```ts
// src/access.ts
/**
 * @path: 当前页面地址
 * @return 返回true则通过，返回路由则表示跳转
 */
const beforeEach = (path: string) => {
  return new Promise((resolve, reject) => {
    const isAuth = false;
    if (isAuth) {
      resolve(true);
    } else {
      // 如果当前无权限则跳转到 login 页面
      resolve('/login')
    }
  })
};

export default beforeEach;
```

## `kktp`配置文件

```ts
// .kktprc.ts
export default {
  access: true
}
```

### Contributors

<a href="https://github.com/kktjs/kkt-pro/graphs/contributors">
  <img src="https://kktjs.github.io/kkt-pro/CONTRIBUTORS.svg" />
</a>

### License

Licensed under the MIT License.
npm package: @kkt/plugin-pro-config
Description: kktp plugins
Author: SunLxy
Latest version: 1.1.5

配置 .kktprc
====

`kktp`内置配置处理包，配置约定在根目录，命名为 `.kktprc.[ts|js]`。

## 参数

```ts
import webpack from 'webpack';
import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
import { RouterPluginProps } from '@kkt/plugin-pro-router';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

export type DefaultDefineType = {};

export type OverrideWebpackType = (
  conf: WebpackConfiguration,
  env: 'development' | 'production',
  options?: LoaderConfOptions | undefined,
) => WebpackConfiguration;

export type PluginsType = (
  | ((this: webpack.Compiler, compiler: webpack.Compiler) => void)
  | webpack.WebpackPluginInstance
  | [string, Record<string, any>]
  | string
)[];

export type KKTPlugins = (
  | OverrideWebpackType
  | {
      loader?: OverrideWebpackType;
      options?: LoaderConfOptions | undefined | Record<string, any>;
    }
  | string
  | [string, Record<string, any>]
)[];

export type KKTPAnalyze = BundleAnalyzerPlugin['opts'];

export interface OverrideKKTPConfigProps extends Omit<WebpackConfiguration, 'plugins'> {
  /**
   * 别名
   * 默认系统内置两个别名
   * 1. `@` 指向 src 目录
   * 2. `@@` 指向 src/.kktp 目录
   */
  alias?: Record<string, string | false | string[]>;
  /** 插件 */
  plugins?: PluginsType;
  /** 默认全局变量 define ， 注意：对象的属性值会经过一次 JSON.stringify 转换   */
  define?: Record<string, any> & DefaultDefineType;
  /** kkt plugin  */
  kktPlugins?: KKTPlugins;
  /** 项目前缀 */
  publicPath?: string;
  /** 提供回调函数，更改 webpack 的最终配置。 */
  overrideWebpack?: OverrideWebpackType;
  /** 输出 */
  output?: Omit<WebpackConfiguration['output'], 'publicPath'>;
  /**自动生成文件目录名称**/
  cacheDirName?: string;
  /**自动生成入口文件*/
  initEntery?: boolean;
  /**路由配置*/
  initRoutes?: RouterPluginProps | boolean;
  /**
   * 1. 自动生成models集合配置文件
   * 2. 当传递的是字符串的时候，用于自己定义状态管理的引用地址
   */
  initModel?: boolean | string;
  /** 是否开启权限 */
  access?: boolean;
  /** 分析产物构成 */
  analyze?: KKTPAnalyze;
}


```

## 配置文件

```ts
// .kktprc.ts
export default {
  // ...
  alias:{
    "react-native":"react-native-web",
  },
  define:{
    "BAST":"111",
    "TEST":"222"
  }
  initEntery:true,
  initRoutes:true,
}
```

**plugins使用**

```ts
// .kktprc.ts
export default {
  // ...
  plugins:["@kkt/plugin-pro-router"]
  // plugins:[["@kkt/plugin-pro-router",{ autoRoutes:true, }]]  
}
```

**analyze 使用**

用于分析 bundle 构成。通过配置`--analyzer=1`生效。可以通过`analyze`选项自定义配置。`analyze` 插件的具体配置项，见 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)

```ts
// package.json
"scripts": {
  "start": "kktp start --analyzer=1",
  "build": "kktp build --analyzer=1"
},

// .kktprc.ts
export default {
  // ...
  analyzer: {
    analyzerPort: 9999 // 自定义端口
  }
}
```
**overrideWebpack 使用**

```ts
// .kktprc.ts
export default {
  // ...
  overrideWebpack:(conf, env, options)=>{
    // 处理 conf
    return conf;
  }
}
```

### Contributors

<a href="https://github.com/kktjs/kkt-pro/graphs/contributors">
  <img src="https://kktjs.github.io/kkt-pro/CONTRIBUTORS.svg" />
</a>

### License

Licensed under the MIT License.
npm package: @kkt/plugin-pro-entry
Description: 自动生成入口文件
Author: SunLxy
Latest version: 1.1.5

自动生成入口
====

`kktp`内置插件,需要配合`@kkt/plugin-pro-router`插件使用

## 全局样式

`kktp` 中约定`src/global.css 为全局样式`, 如果存在此文件，会被自动引入到入口文件最前面。

## 参数

```ts
type InitEntryOptions = {
  /**在src目录下生成的临时文件夹名称*/
  cacheDirName?: string;
  /**是否生成 react-redux Provider状态管理组件包裹*/
  redux?: boolean;
};
```

## `kktp`配置文件

```ts
// .kktprc.ts
export default {
  // ...
  initEntery:true,
  initRoutes:true,
}
```

### Contributors

<a href="https://github.com/kktjs/kkt-pro/graphs/contributors">
  <img src="https://kktjs.github.io/kkt-pro/CONTRIBUTORS.svg" />
</a>

### License

Licensed under the MIT License.
npm package: @kkt/plugin-pro-icons
Description: kktp plugins
Author: SunLxy
Latest version: 1.0.5

本地 icon 使用
====

在 `kktp` 配置文件设置，开启 `icons` 功能。

本地 svg icon 的使用需要把 svg 保存在 `src/icons` 目录下，比如在 `src/icons` 目录下有个 `logo.svg`，然后可以这样引用：

```ts
import { Icons } from '@kkt/pro';

<Icons type="logo" />
```

## `Icons`组件属性

- `type` 指定 icon，名称为svg文件前缀，支持远程路径。
- `style` 外部容器样式。
- `className` 外部容器样式名。

## `kktp`配置文件

```ts
// .kktprc.ts
export default {
  icons: true
}
```
npm package: @kkt/plugin-pro-rematch
Description: kktp plugins
Author: SunLxy
Latest version: 1.1.5

## 状态管理

`kktp`内置插件,是以`@rematch/core`包为基础进行自动收集状态管理。使用此插件需要安装`@rematch/core`和`@rematch/loading`包。

## 参数

```ts
export interface ModelspluginProps {
  /**自动生成文件目录名称*/
  cacheDirName?: string;
}
```

## models ts 实例

```ts
// src/models/demo.ts
export interface DemoState {
  test?: string;
}

const demo = {
  name: 'demo',
  state: {
    test: '测试State',
  },
  reducers: {
    updateState: (state: DemoState, payload: DemoState): DemoState => ({
      ...state,
      ...payload,
    }),
  },
  effects: (dispatch) => {
    const { demo } = dispatch;
    return {
      async verify() {
        demo.updateState({ test: '测试22' });
      },
    }
  },
};
export default demo;


// src/pages/ceshi.tsx
import { RootState, useSelector, dispatch } from '@kkt/pro';
const Ceshi = () => {
  // 获取demo数据
  const store = useSelector((store: RootState) => store.demo);
  // Dispatch
  const dispatch = useDispatch<Dispatch>();

  const click = () => {
    dispatch({
      type: 'demo/verify',
      payload: {}
    })
  }
  return <div />
}
export default Ceshi;
```

## 自动收集文件引入

1. 约定`src/**/models/**/*.(js|ts)`文件

## `kktp`配置文件

```ts
// .kktprc.ts
export default {
  // ...
  initModel:true,
}
```

### Contributors

<a href="https://github.com/kktjs/kkt-pro/graphs/contributors">
  <img src="https://kktjs.github.io/kkt-pro/CONTRIBUTORS.svg" />
</a>

### License

Licensed under the MIT License.
npm package: @kkt/plugin-pro-router
Description: kktp plugins
Author: SunLxy
Latest version: 1.1.5

## 路由配置

`kktp`内置插件，用于自动进行生成路由配置。使用此插件需要安装`react-router`和`react-router-dom`依赖包

## 参数

```ts
export interface RouterPluginProps {
  /**处理图标菜单中图标引入问题*/
  analysisRoutersIcon?: (icons: { name: string; newName: string }[]) => string;
  /**
   * @description 在src目录下生成的临时文件夹名称
   * @default .kktp
   * */
  cacheDirName?: string;
  /**
   * @description 路由类型
   * @default "hash"
   */
  routesType?: 'browser' | 'hash' | 'memory';
  /** 路由权限名称，默认查找src目录下access.[js | ts]文件 */
  accessDirName?: string;
  /**页面加载loading组件地址*/
  fallbackElement?: string;
  /**路由外层包裹组件，可以用于自定义添加路由**/
  routesOutletElement?: string;
  /**自动生成路由配置*/
  autoRoutes?: boolean;
  /**自动生成路由layout布局组件地址*/
  outletLayout?: string;
}
```

## 路由生成方式

**1. 通过配置进行生成路由**

- 约定根目录下`config/routes.(json|js|ts)`为[路由菜单配置](https://github.com/kktjs/kkt-pro/tree/dev/packages/plugin/pro#kktproroutesprops)



**2. 自动生成路由**

- 约定`src/pages`文件夹为根据生成路由
- 约定`src/pages/index.(js|jsx|tsx)`文件为默认路由
- 约定`src/pages/**/index.(js|jsx|tsx)`文件为对应路由展示页面

## 页面参数

在`kktp`中，页面内置了`roles`、`navigate`、`routes`。

- `roles` 页面权限，`config/routes.json`菜单上配置了 `roles`，则在页面上获取。

- `navigate` 跳转。

- `routes` 路由`path="/"`路由下的子集路由集合。

```tsx
import { KktproPageProps } from '@kkt/pro';

const Page = (props: KktproPageProps) => {
  const { navigate, roles = [], routes = [] } = props;

  return <div />
};
export default Page;
```

## 页面跳转

页面中可直接通过 `navigate` 跳转， 或者通过`react-router-dom`提供的 `useNavigate`来跳转。

```tsx
import { KktproPageProps, useNavigate } from '@kkt/pro';

const Page = (props: KktproPageProps) => {
  const { navigate } = props;
  // const navigate = useNavigate();

  const click = () => {
    navigate('/demo');
  };

  return <button onClick={click}>navigate</button>
};
export default Page;
```

## 支持页面导出`react-router 6`配置参数

```tsx
// 路由加载文件 src/pages/about/index.tsx
const Index = ()=>{
  return <div>导出element</div>
}
export default Index;
export const element = <Index />;
export const loader = ()=>{}
export const action = ()=>{}
const ErrorElement = ()=><div>errorElement</div>
export const errorElement =<ErrorElement />
export const lazy=()=>import("@/about")
export const path="/about"
export const shouldRevalidate=({ currentUrl }) => {
  // only revalidate if the submission originates from
  // the `/meal-plans/new` route.
  return currentUrl.pathname === "/meal-plans/new";
}

```

## `kktp`配置文件

```ts
// .kktprc.ts
export default {
  // ...
  initRoutes:{
    outletLayout:"@/layout" // 自动生成路由layout布局组件地址
  },
}
```

### Contributors

<a href="https://github.com/kktjs/kkt-pro/graphs/contributors">
  <img src="https://kktjs.github.io/kkt-pro/CONTRIBUTORS.svg" />
</a>

### License

Licensed under the MIT License.
npm package: @kkt/plugin-scss
Description: Support sass.
Author: Kenny Wong
Latest version: 1.2.0

@kkt/plugin-scss
---

This package contains a plugin for using [SCSS/SASS](https://sass-lang.com/) with [@kkt/ssr](https://github.com/jaywcjlove/kkt-ssr).

## Usage in @kkt/ssr Projects

```bash
npm add @kkt/plugin-scss --dev
```

### With the default options

```js
// .kktrc.js
module.exports = {
  plugins: [
    require.resolve('@kkt/plugin-scss'),
  ],
};
```
npm package: @kkt/plugin-stylus
Description: Support stylus.
Author: Kenny Wong
Latest version: 1.2.0

@kkt/plugin-stylus
---

This package contains a plugin for using [stylus](https://github.com/stylus/stylus/) with [@kkt/ssr](https://github.com/jaywcjlove/kkt-ssr).


## Usage in @kkt/ssr Projects

```bash
npm add @kkt/plugin-stylus --dev
```

### With the default options

```js
// .kktrc.js
module.exports = {
  plugins: [
    require.resolve('@kkt/plugin-stylus'),
  ],
};
```