From 476b7bfe660dd39079408e1d642d793a924b91ef Mon Sep 17 00:00:00 2001 From: harrywan Date: Wed, 2 Feb 2022 22:04:01 +0800 Subject: [PATCH] feat: plugin-pinia --- README.md | 2 +- build.config.js | 1 + docs/.vuepress/configs/sidebar/en.ts | 1 + docs/.vuepress/configs/sidebar/zh.ts | 1 + docs/reference/plugin/README.md | 2 +- docs/reference/plugin/plugins/pinia.md | 90 +++++++++++++++++++ docs/zh/reference/plugin/README.md | 2 +- docs/zh/reference/plugin/plugins/pinia.md | 90 +++++++++++++++++++ docs/zh/reference/plugin/plugins/vuex.md | 2 +- packages/fes-plugin-pinia/LICENSE | 21 +++++ packages/fes-plugin-pinia/README.md | 66 ++++++++++++++ packages/fes-plugin-pinia/build.config.js | 4 + packages/fes-plugin-pinia/package.json | 37 ++++++++ packages/fes-plugin-pinia/src/helper.js | 58 ++++++++++++ packages/fes-plugin-pinia/src/index.js | 58 ++++++++++++ .../fes-plugin-pinia/src/runtime/core.tpl | 17 ++++ .../fes-plugin-pinia/src/runtime/runtime.js | 6 ++ packages/fes-plugin-vuex/.fatherrc.js | 3 - packages/fes-plugin-windicss/.fatherrc.js | 3 - packages/fes-template/.fes.js | 3 + packages/fes-template/package.json | 10 ++- packages/fes-template/src/app.js | 8 +- packages/fes-template/src/pages/pinia.vue | 31 +++++++ packages/fes-template/src/store/main.js | 21 +++++ yarn.lock | 47 +++++++--- 25 files changed, 555 insertions(+), 29 deletions(-) create mode 100644 docs/reference/plugin/plugins/pinia.md create mode 100644 docs/zh/reference/plugin/plugins/pinia.md create mode 100644 packages/fes-plugin-pinia/LICENSE create mode 100644 packages/fes-plugin-pinia/README.md create mode 100644 packages/fes-plugin-pinia/build.config.js create mode 100644 packages/fes-plugin-pinia/package.json create mode 100644 packages/fes-plugin-pinia/src/helper.js create mode 100644 packages/fes-plugin-pinia/src/index.js create mode 100644 packages/fes-plugin-pinia/src/runtime/core.tpl create mode 100644 packages/fes-plugin-pinia/src/runtime/runtime.js delete mode 100644 packages/fes-plugin-vuex/.fatherrc.js delete mode 100644 packages/fes-plugin-windicss/.fatherrc.js create mode 100644 packages/fes-template/src/pages/pinia.vue create mode 100644 packages/fes-template/src/store/main.js diff --git a/README.md b/README.md index a13b63ce..d307be75 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | | [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） | | [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 | - +| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 | ## 像数 1, 2, 3 一样容易 使用 `yarn`： diff --git a/build.config.js b/build.config.js index 1c964ad4..09da5329 100644 --- a/build.config.js +++ b/build.config.js @@ -17,6 +17,7 @@ module.exports = { 'fes-plugin-request', 'fes-plugin-sass', 'fes-plugin-vuex', + 'fes-plugin-pinia', 'fes-preset-built-in', 'fes-plugin-windicss', 'fes-runtime', diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts index 53d0f1c1..510be41f 100644 --- a/docs/.vuepress/configs/sidebar/en.ts +++ b/docs/.vuepress/configs/sidebar/en.ts @@ -61,6 +61,7 @@ export const en: SidebarConfig = { '/reference/plugin/plugins/windicss.md', '/reference/plugin/plugins/sass.md', '/reference/plugin/plugins/editor.md', + '/reference/plugin/plugins/pinia.md', ], }, { diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts index 9b98629a..dd87e85f 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -61,6 +61,7 @@ export const zh: SidebarConfig = { '/zh/reference/plugin/plugins/windicss.md', '/zh/reference/plugin/plugins/sass.md', '/zh/reference/plugin/plugins/editor.md', + '/zh/reference/plugin/plugins/pinia.md', ], }, { diff --git a/docs/reference/plugin/README.md b/docs/reference/plugin/README.md index 35ad9aa0..afa61438 100644 --- a/docs/reference/plugin/README.md +++ b/docs/reference/plugin/README.md @@ -16,7 +16,7 @@ | [@fesjs/plugin-sass](./plugins/sass.md) | 样式支持sass | | [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） | | [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 | - +| [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 | ## 架构 diff --git a/docs/reference/plugin/plugins/pinia.md b/docs/reference/plugin/plugins/pinia.md new file mode 100644 index 00000000..880fd510 --- /dev/null +++ b/docs/reference/plugin/plugins/pinia.md @@ -0,0 +1,90 @@ +# @fesjs/plugin-pinia + +## 介绍 +集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。 + + +为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出： +```js +import { defineStore } from 'pinia'; +``` + +约定 `plugin` 定义放在 `stores` 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 +``` +└── src + ├── pages + │ └── index.vue + └── stores + │ ├── plugin-logger.js + │ ├── user.js + └── app.js +``` + +## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-pinia": "^2.0.0", + "pinia": "^2.0.11" + } +} +``` + +## API + +### pinia +`createPinia`执行后创建的实例。 + +```js +import { pinia } from '@fesjs/fes' +``` + +## 使用 + +### 定义 store +我们在 `src/store/main.js`中： +```js +import { defineStore } from 'pinia' + +// useStore could be anything like useUser, useCart +// the first argument is a unique id of the store across your application +export const useStore = defineStore('main', { + // other options... +}) +``` + +### setup + +```js +import { useStore } from '@/store/main' +export default { + setup(){ + const store = useStore() + } +} +``` + +### 非setup +比如在app.js中: +```js +import { pinia } from '@fesjs/fes' + +export const beforeRender = { + loading: , + action() { + const { setRole } = accessApi; + return new Promise((resolve) => { + setTimeout(() => { + const store = useStore(pinia); + store.$patch({ + userName: '李雷', + role: 'admin' + }); + setRole('admin'); + }, 1000); + }); + } +}; +``` \ No newline at end of file diff --git a/docs/zh/reference/plugin/README.md b/docs/zh/reference/plugin/README.md index 35ad9aa0..afa61438 100644 --- a/docs/zh/reference/plugin/README.md +++ b/docs/zh/reference/plugin/README.md @@ -16,7 +16,7 @@ | [@fesjs/plugin-sass](./plugins/sass.md) | 样式支持sass | | [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） | | [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 | - +| [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 | ## 架构 diff --git a/docs/zh/reference/plugin/plugins/pinia.md b/docs/zh/reference/plugin/plugins/pinia.md new file mode 100644 index 00000000..880fd510 --- /dev/null +++ b/docs/zh/reference/plugin/plugins/pinia.md @@ -0,0 +1,90 @@ +# @fesjs/plugin-pinia + +## 介绍 +集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。 + + +为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出： +```js +import { defineStore } from 'pinia'; +``` + +约定 `plugin` 定义放在 `stores` 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 +``` +└── src + ├── pages + │ └── index.vue + └── stores + │ ├── plugin-logger.js + │ ├── user.js + └── app.js +``` + +## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-pinia": "^2.0.0", + "pinia": "^2.0.11" + } +} +``` + +## API + +### pinia +`createPinia`执行后创建的实例。 + +```js +import { pinia } from '@fesjs/fes' +``` + +## 使用 + +### 定义 store +我们在 `src/store/main.js`中： +```js +import { defineStore } from 'pinia' + +// useStore could be anything like useUser, useCart +// the first argument is a unique id of the store across your application +export const useStore = defineStore('main', { + // other options... +}) +``` + +### setup + +```js +import { useStore } from '@/store/main' +export default { + setup(){ + const store = useStore() + } +} +``` + +### 非setup +比如在app.js中: +```js +import { pinia } from '@fesjs/fes' + +export const beforeRender = { + loading: , + action() { + const { setRole } = accessApi; + return new Promise((resolve) => { + setTimeout(() => { + const store = useStore(pinia); + store.$patch({ + userName: '李雷', + role: 'admin' + }); + setRole('admin'); + }, 1000); + }); + } +}; +``` \ No newline at end of file diff --git a/docs/zh/reference/plugin/plugins/vuex.md b/docs/zh/reference/plugin/plugins/vuex.md index 8fd02429..d6e27c48 100644 --- a/docs/zh/reference/plugin/plugins/vuex.md +++ b/docs/zh/reference/plugin/plugins/vuex.md @@ -4,7 +4,7 @@ 增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示 -约定模式，module和plugin定义放在sotres目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 +约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 ``` └── src ├── pages diff --git a/packages/fes-plugin-pinia/LICENSE b/packages/fes-plugin-pinia/LICENSE new file mode 100644 index 00000000..0978fbf7 --- /dev/null +++ b/packages/fes-plugin-pinia/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020-present webank + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/packages/fes-plugin-pinia/README.md b/packages/fes-plugin-pinia/README.md new file mode 100644 index 00000000..c1fa36b0 --- /dev/null +++ b/packages/fes-plugin-pinia/README.md @@ -0,0 +1,66 @@ + +## Fes.js 是什么？ +Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 + +它主要具备以下功能： +- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。 + +- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。 + +- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。 + +- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。 + +- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。 + +## 插件 + +| 插件 | 介绍 | +| ---- | ---- | +| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`，提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局，包括导航以及侧边栏 | +| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`，提供国际化能力 | +| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 | +| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） | +| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 | + +## 像数 1, 2, 3 一样容易 +使用 `yarn`： +```bash +# 创建模板 +yarn create @fesjs/fes-app myapp + +# 安装依赖 +yarn + +# 运行 +yarn dev +``` + +使用 `npm`： +```bash +# 创建模板 +npx @fesjs/create-fes-app myapp + +# 安装依赖 +npm install + +# 运行 +npm run dev +``` + +## 反馈 + +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + diff --git a/packages/fes-plugin-pinia/build.config.js b/packages/fes-plugin-pinia/build.config.js new file mode 100644 index 00000000..828db044 --- /dev/null +++ b/packages/fes-plugin-pinia/build.config.js @@ -0,0 +1,4 @@ + +module.exports = { + copy: ['runtime'] +}; diff --git a/packages/fes-plugin-pinia/package.json b/packages/fes-plugin-pinia/package.json new file mode 100644 index 00000000..155101d5 --- /dev/null +++ b/packages/fes-plugin-pinia/package.json @@ -0,0 +1,37 @@ +{ + "name": "@fesjs/plugin-pinia", + "version": "2.0.0", + "description": "@fesjs/plugin-pinia", + "main": "lib/index.js", + "files": [ + "lib" + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/WeBankFinTech/fes.js.git", + "directory": "packages/fes-plugin-pinia" + }, + "keywords": [ + "fes" + ], + "author": "harrywan", + "license": "MIT", + "bugs": { + "url": "https://github.com/WeBankFinTech/fes.js/issues" + }, + "homepage": "https://github.com/WeBankFinTech/fes.js#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@fesjs/utils": "^2.0.3" + }, + "peerDependencies": { + "@fesjs/fes": "^2.0.0", + "vue": "^3.0.5", + "pinia": "^2.0.11" + } +} diff --git a/packages/fes-plugin-pinia/src/helper.js b/packages/fes-plugin-pinia/src/helper.js new file mode 100644 index 00000000..334ba96c --- /dev/null +++ b/packages/fes-plugin-pinia/src/helper.js @@ -0,0 +1,58 @@ +import { winPath } from '@fesjs/utils'; +import { readdirSync, statSync } from 'fs'; +import { join } from 'path'; + +/** + * 获取文件夹所有JS文件路径 + * @param {string} dir + */ +function getDirFilePaths(dir) { + const dirs = readdirSync(dir); + let pathList = []; + for (const name of dirs) { + const path = winPath(join(dir, name)); + const info = statSync(path); + if (info.isDirectory()) { + pathList = pathList.concat(getDirFilePaths(path)); + } else if (path.endsWith('.js')) { + pathList.push(path); + } + } + return pathList; +} + +/** + * 路径转驼峰 + * @param {*} path + */ +function pathToHump(path, root) { + return path.replace(root, '') + .replace('.js', '') + .replace(RegExp('(/|\\.|-|_)\\S', 'g'), text => text[1].toUpperCase()) + .replace(/\S/, text => text.toLowerCase()); +} + + +function parsePlugin(paths = [], root) { + const plugins = []; + const importPlugins = []; + paths.forEach((path) => { + const moduleName = pathToHump(path, root); + importPlugins.push(`import ${moduleName} from '${path}'`); + plugins.push(moduleName); + }); + return { plugins, importPlugins }; +} + +export function parseStore(root) { + const paths = getDirFilePaths(root); + const pluginPaths = []; + paths.forEach((path) => { + if (path.indexOf('plugin') > -1) { + pluginPaths.push(path); + } + }); + return { + ...parsePlugin(pluginPaths, root) + }; +} diff --git a/packages/fes-plugin-pinia/src/index.js b/packages/fes-plugin-pinia/src/index.js new file mode 100644 index 00000000..164ec5ee --- /dev/null +++ b/packages/fes-plugin-pinia/src/index.js @@ -0,0 +1,58 @@ +import { readFileSync } from 'fs'; +import { join } from 'path'; +import { winPath } from '@fesjs/utils'; +import { parseStore } from './helper'; + +const namespace = 'plugin-pinia'; + +export default (api) => { + const { + paths, + utils: { Mustache } + } = api; + + api.describe({ + key: 'pinia', + config: { + schema(joi) { + return joi.object(); + }, + onChange: api.ConfigChangeType.regenerateTmpFiles + } + }); + + const absCoreFilePath = join(namespace, 'core.js'); + const absRuntimeFilePath = join(namespace, 'runtime.js'); + + api.onGenerateFiles(() => { + const root = winPath(join(paths.absSrcPath, api.config.singular ? 'store' : 'stores')); + const store = parseStore(root); + + // 文件写出 + api.writeTmpFile({ + path: absCoreFilePath, + content: Mustache.render( + readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'), + { + IMPORT_PLUGINS: store.importPlugins.join('\n'), + PLUGINS: store.plugins + } + ) + }); + + api.copyTmpFiles({ + namespace, + path: join(__dirname, 'runtime'), + ignore: ['.tpl'] + }); + }); + + api.addPluginExports(() => [ + { + specifiers: ['pinia'], + source: absCoreFilePath + } + ]); + + api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); +}; diff --git a/packages/fes-plugin-pinia/src/runtime/core.tpl b/packages/fes-plugin-pinia/src/runtime/core.tpl new file mode 100644 index 00000000..e026add8 --- /dev/null +++ b/packages/fes-plugin-pinia/src/runtime/core.tpl @@ -0,0 +1,17 @@ +import { createPinia } from 'pinia' +{{{IMPORT_PLUGINS}}}; + +const pinia = createPinia(); + +{{#PLUGINS}} +pinia.use({{.}}); +{{/PLUGINS}} + +const install = function (app) { + app.use(pinia); +} + +export { + install, + pinia, +}; diff --git a/packages/fes-plugin-pinia/src/runtime/runtime.js b/packages/fes-plugin-pinia/src/runtime/runtime.js new file mode 100644 index 00000000..d775ceb9 --- /dev/null +++ b/packages/fes-plugin-pinia/src/runtime/runtime.js @@ -0,0 +1,6 @@ +// eslint-disable-next-line import/extensions +import { install } from './core'; + +export function onAppCreated({ app }) { + install(app); +} diff --git a/packages/fes-plugin-vuex/.fatherrc.js b/packages/fes-plugin-vuex/.fatherrc.js deleted file mode 100644 index 332f1bff..00000000 --- a/packages/fes-plugin-vuex/.fatherrc.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - disableTypeCheck: false, -}; diff --git a/packages/fes-plugin-windicss/.fatherrc.js b/packages/fes-plugin-windicss/.fatherrc.js deleted file mode 100644 index 332f1bff..00000000 --- a/packages/fes-plugin-windicss/.fatherrc.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - disableTypeCheck: false, -}; diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js index cd2ca5f8..e9af40ae 100644 --- a/packages/fes-template/.fes.js +++ b/packages/fes-template/.fes.js @@ -72,6 +72,9 @@ export default { }, { name: 'cssModule' + }, + { + name: 'pinia' } ] }, diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json index 74321411..547fe21a 100644 --- a/packages/fes-template/package.json +++ b/packages/fes-template/package.json @@ -48,7 +48,7 @@ "dependencies": { "@fesjs/fes": "^2.0.0", "@fesjs/plugin-access": "^2.0.0", - "@fesjs/plugin-layout": "^3.0.0", + "@fesjs/plugin-layout": "^4.0.0", "@fesjs/plugin-locale": "^3.0.0", "@fesjs/plugin-model": "^2.0.0", "@fesjs/plugin-enums": "^2.0.0", @@ -59,9 +59,11 @@ "@fesjs/plugin-sass": "^2.0.0", "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0", "@fesjs/plugin-windicss": "^2.0.0", - "@fesjs/fes-design": "^0.1.10", + "@fesjs/plugin-pinia": "^2.0.0", + "@fesjs/fes-design": "^0.2.10", "vue": "^3.0.5", - "vuex": "^4.0.0" + "vuex": "^4.0.0", + "pinia": "^2.0.11" }, "private": true -} \ No newline at end of file +} diff --git a/packages/fes-template/src/app.js b/packages/fes-template/src/app.js index f9c66d27..167601b7 100644 --- a/packages/fes-template/src/app.js +++ b/packages/fes-template/src/app.js @@ -1,9 +1,9 @@ -import { access as accessApi } from '@fesjs/fes'; +import { access as accessApi, pinia } from '@fesjs/fes'; import PageLoading from '@/components/PageLoading'; import UserCenter from '@/components/UserCenter'; - +import { useStore } from '@/store/main'; export const beforeRender = { loading: , @@ -11,6 +11,10 @@ export const beforeRender = { const { setRole } = accessApi; return new Promise((resolve) => { setTimeout(() => { + const store = useStore(pinia); + store.$patch({ + userName: '李雷' + }); setRole('admin'); resolve({ userName: '李雷' diff --git a/packages/fes-template/src/pages/pinia.vue b/packages/fes-template/src/pages/pinia.vue new file mode 100644 index 00000000..f55fc856 --- /dev/null +++ b/packages/fes-template/src/pages/pinia.vue @@ -0,0 +1,31 @@ + + +{ + "name": "pinia", + "title": "pinia" +} + + + + diff --git a/packages/fes-template/src/store/main.js b/packages/fes-template/src/store/main.js new file mode 100644 index 00000000..0541aae9 --- /dev/null +++ b/packages/fes-template/src/store/main.js @@ -0,0 +1,21 @@ +import { defineStore } from 'pinia'; + +// useStore could be anything like useUser, useCart +// the first argument is a unique id of the store across your application +export const useStore = defineStore('main', { + // other options... + state: () => ({ + // all these properties will have their type inferred automatically + counter: 0, + name: 'Eduardo', + isAdmin: true + }), + actions: { + increment() { + this.counter++; + }, + randomizeCounter() { + this.counter = Math.round(100 * Math.random()); + } + } +}); diff --git a/yarn.lock b/yarn.lock index e5dcf428..308b0025 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1453,28 +1453,24 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" -"@fesjs/fes-design@^0.1.10": - version "0.1.10" - resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.10.tgz#b7caaec676fcd1b2f86f5626b8b575f8d899b0c8" - integrity sha512-VEt3gA6ExM7WRhXE1k98Ufgee8h9tTL6nqJOItqHPB0jEcakW5z/r0tSByJND4es7zthwMUihHBzccwvjOVBCQ== +"@fesjs/fes-design@^0.2.10": + version "0.2.11" + resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.2.11.tgz#b0b7857e8122e787206ba0166f6c7b894a323b28" + integrity sha512-kunu3gOHsDied7XT57btH7WkhyAe4WNvKHoSsFzYlMmvT3wIW9RlYlmebD8e7SRCq12Ule1F+7YdYHDf/w6v/A== dependencies: "@babel/runtime" "^7.16.3" "@juggle/resize-observer" "^3.3.1" "@popperjs/core" "^2.4.0" + "@types/lodash-es" "^4.17.5" + "@types/normalize-wheel" "^1.0.0" "@vue/shared" "^3.2.19" "@vueuse/core" "^6.7.5" async-validator "^4.0.1" + csstype "^3.0.10" lodash-es "^4.17.21" normalize-wheel "^1.0.1" stickybits "^3.7.9" -"@fesjs/plugin-layout@^3.0.0": - version "3.0.0" - resolved "https://registry.npmmirror.com/@fesjs/plugin-layout/download/@fesjs/plugin-layout-3.0.0.tgz#51d5706ab59b0c03bbd9e9d3e3983b68840c5549" - integrity sha512-tdLbiQpfCp6zOaekmjYPIir9d0QaOu4+88FZZ4bj8STjOP2iMsqxuc8P5hyL0tjZjrpUNmepYmkAAaKWcQMnXg== - dependencies: - "@fesjs/utils" "^2.0.3" - "@gar/promisify@^1.0.1": version "1.1.2" resolved "https://registry.npmmirror.com/@gar/promisify/download/@gar/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" @@ -2885,6 +2881,18 @@ resolved "https://registry.npmmirror.com/@types/linkify-it/download/@types/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9" integrity sha1-/SzS7bqn6qx+fzwXSLUqGRQ4Rsk= +"@types/lodash-es@^4.17.5": + version "4.17.5" + resolved "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.5.tgz#1c3fdd16849d84aea43890b1c60da379fb501353" + integrity sha512-SHBoI8/0aoMQWAgUHMQ599VM6ZiSKg8sh/0cFqqlQQMyY9uEplc0ULU5yQNzcvdR4ZKa0ey8+vFmahuRbOCT1A== + dependencies: + "@types/lodash" "*" + +"@types/lodash@*": + version "4.14.178" + resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8" + integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw== + "@types/markdown-it@^12.2.3": version "12.2.3" resolved "https://registry.npmmirror.com/@types/markdown-it/download/@types/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51" @@ -2923,6 +2931,11 @@ resolved "https://registry.npmmirror.com/@types/normalize-package-data/download/@types/normalize-package-data-2.4.1.tgz?cache=0&sync_timestamp=1637268453735&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fnormalize-package-data%2Fdownload%2F%40types%2Fnormalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" integrity sha1-0zV0eaD9/dWQf+Z+F+CoXJBuEwE= +"@types/normalize-wheel@^1.0.0": + version "1.0.0" + resolved "https://registry.npmmirror.com/@types/normalize-wheel/-/normalize-wheel-1.0.0.tgz#d973b53557dc59c6136b5b737ae930e9218cb452" + integrity sha512-SzWYVzP7Q8w4/976Gi3a6+J/8/VNTq6AW7wDafXorr1MYTxyZqJTbUvwQt1hiG3PXyFUMIKr+s6q3+MLz2c/TQ== + "@types/parse-json@^4.0.0": version "4.0.0" resolved "https://registry.npmmirror.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" @@ -3063,7 +3076,7 @@ "@vue/compiler-dom" "3.2.27" "@vue/shared" "3.2.27" -"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18", "@vue/devtools-api@^6.0.0-beta.7": +"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18", "@vue/devtools-api@^6.0.0-beta.21", "@vue/devtools-api@^6.0.0-beta.7": version "6.0.0-beta.21.1" resolved "https://registry.npmmirror.com/@vue/devtools-api/download/@vue/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97" integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw== @@ -5297,7 +5310,7 @@ csstype@^2.6.8: resolved "https://registry.npmmirror.com/csstype/download/csstype-2.6.19.tgz?cache=0&sync_timestamp=1637224539572&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcsstype%2Fdownload%2Fcsstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa" integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ== -csstype@^3.0.2: +csstype@^3.0.10, csstype@^3.0.2: version "3.0.10" resolved "https://registry.npmmirror.com/csstype/download/csstype-3.0.10.tgz?cache=0&sync_timestamp=1637224539572&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcsstype%2Fdownload%2Fcsstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== @@ -10357,6 +10370,14 @@ pify@^5.0.0: resolved "https://registry.npmmirror.com/pify/download/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f" integrity sha1-H17KP16H6+wozG1UoOSq8ArMEn8= +pinia@^2.0.11: + version "2.0.11" + resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.11.tgz#ff03c714f5e5f16207280a4fc2eab01f3701ee2b" + integrity sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw== + dependencies: + "@vue/devtools-api" "^6.0.0-beta.21" + vue-demi "*" + pinkie-promise@^2.0.0: version "2.0.1" resolved "https://registry.npmmirror.com/pinkie-promise/download/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"