Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
pinia - npm Package Compare versions
Comparing version 0.1.0 to 2.0.0-alpha.1
106
package.json
| { | ||
| "name": "pinia", | ||
| "version": "0.1.0", | ||
| "version": "2.0.0-alpha.1", | ||
| "description": "Some awesome description", | ||
| "main": "dist/pinia.common.js", | ||
| "module": "dist/pinia.esm.js", | ||
| "unpkg": "dist/pinia.js", | ||
| "browser": "dist/pinia.esm.js", | ||
| "types": "dist/src", | ||
| "main": "dist/pinia.cjs.js", | ||
| "browser": "dist/pinia.esm-browser.js", | ||
| "module": "dist/pinia.esm-bundler.js", | ||
| "unpkg": "dist/pinia.global.js", | ||
| "jsdelivr": "dist/pinia.global.js", | ||
| "types": "dist/pinia.d.ts", | ||
| "sideEffects": false, | ||
@@ -16,51 +17,72 @@ "author": { | ||
| "scripts": { | ||
| "lint": "eslint --color --ext=js,html,vue,ts src __tests__ *.js", | ||
| "lint:fix": "yarn run lint --fix", | ||
| "unit": "jest", | ||
| "build": "rollup -c rollup.config.js", | ||
| "build:dts": "api-extractor run --local --verbose", | ||
| "release": "bash scripts/release.sh", | ||
| "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1", | ||
| "lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"", | ||
| "lint:fix": "yarn run lint --write", | ||
| "test:dts": "tsc -p ./test-dts/tsconfig.json", | ||
| "test:types": "tsc --build tsconfig.json", | ||
| "test:unit": "jest --coverage", | ||
| "dev": "yarn run unit --watchAll", | ||
| "pretest": "yarn run lint", | ||
| "test": "yarn run unit && yarn run build", | ||
| "build": "rollup -c rollup.config.js", | ||
| "prepublishOnly": "yarn run build" | ||
| "test": "yarn run test:types && yarn run test:unit && yarn run build && yarn run build:dts && yarn test:dts" | ||
| }, | ||
| "files": [ | ||
| "nuxt", | ||
| "dist", | ||
| "dist/src", | ||
| "dist/*.js", | ||
| "dist/pinia.d.ts", | ||
| "LICENSE", | ||
| "README.md" | ||
| ], | ||
| "tsd": { | ||
| "directory": "__tests__/dts" | ||
| }, | ||
| "keywords": [], | ||
| "keywords": [ | ||
| "vue", | ||
| "vuex", | ||
| "store", | ||
| "pina", | ||
| "composition", | ||
| "api", | ||
| "setup", | ||
| "typed", | ||
| "typescript", | ||
| "ts", | ||
| "type", | ||
| "safe" | ||
| ], | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "@nuxt/types": "^2.13.0", | ||
| "@rollup/plugin-alias": "^3.0.0", | ||
| "@rollup/plugin-replace": "^2.2.1", | ||
| "@types/jest": "^26.0.0", | ||
| "@typescript-eslint/eslint-plugin": "^2.20.0", | ||
| "@typescript-eslint/parser": "^2.20.0", | ||
| "@vue/composition-api": "^0.6.3", | ||
| "@microsoft/api-extractor": "7.8.1", | ||
| "@nuxt/types": "^2.14.6", | ||
| "@rollup/plugin-alias": "^3.1.1", | ||
| "@rollup/plugin-commonjs": "^15.0.0", | ||
| "@rollup/plugin-node-resolve": "^9.0.0", | ||
| "@rollup/plugin-replace": "^2.3.3", | ||
| "@types/jest": "^26.0.14", | ||
| "@types/node": "^14.11.2", | ||
| "codecov": "^3.6.1", | ||
| "eslint": "^6.4.0", | ||
| "eslint-config-prettier": "^6.10.0", | ||
| "eslint-plugin-prettier": "^3.1.1", | ||
| "jest": "^25.1.0", | ||
| "jest-mock-warn": "^1.1.0", | ||
| "conventional-changelog-cli": "^2.1.0", | ||
| "jest": "^26.4.2", | ||
| "lint-staged": "^10.2.11", | ||
| "pascalcase": "^1.0.0", | ||
| "prettier": "^1.18.2", | ||
| "prettier": "^2.1.2", | ||
| "rimraf": "^3.0.1", | ||
| "rollup": "^2.7.2", | ||
| "rollup-plugin-commonjs": "^10.1.0", | ||
| "rollup-plugin-node-resolve": "^5.2.0", | ||
| "rollup-plugin-terser": "^7.0.0", | ||
| "rollup-plugin-typescript2": "^0.27.0", | ||
| "ts-jest": "^25.2.1", | ||
| "tsd": "^0.13.1", | ||
| "typescript": "^3.8.2", | ||
| "vue": "^2.6.11", | ||
| "vue-server-renderer": "^2.6.11" | ||
| "rollup": "^2.28.1", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "rollup-plugin-typescript2": "^0.27.1", | ||
| "ts-jest": "^26.4.0", | ||
| "typescript": "^4.0.3", | ||
| "vue": "^3.0.0", | ||
| "yorkie": "^2.0.0" | ||
| }, | ||
| "gitHooks": { | ||
| "pre-commit": "lint-staged", | ||
| "commit-msg": "node scripts/verifyCommit.js" | ||
| }, | ||
| "lint-staged": { | ||
| "*.js": [ | ||
| "prettier --write" | ||
| ], | ||
| "*.ts?(x)": [ | ||
| "prettier --parser=typescript --write" | ||
| ] | ||
| }, | ||
| "repository": { | ||
@@ -67,0 +89,0 @@ "type": "git", |
192
README.md
@@ -1,2 +0,2 @@ | ||
| # Pinia [](https://circleci.com/gh/posva/pinia) [](https://www.npmjs.com/package/pinia) [](https://codecov.io/github/posva/pinia) [](https://github.com/posva/thanks) | ||
| # Pinia [](https://circleci.com/gh/posva/pinia) [](https://www.npmjs.com/package/pinia) [](https://codecov.io/github/posva/pinia) [](https://github.com/posva/thanks) | ||
@@ -7,12 +7,10 @@ > Pronounced like the fruit in Spanish, _Piña_ | ||
| 🍍Automatically Typed, Modular and lightweight (but **Experimental**) Store for Vue based on the composition api with devtools support | ||
| 🍍Automatically Typed, Modular and lightweight (but **Experimental**) Store for Vue 3.x based on the composition api with devtools support | ||
| ## 👉 [Demo](https://vcuiu.csb.app/) | ||
| ## 👉 [Demo](https://github.com/posva/vue-next-pinia) | ||
| ⚠️⚠️⚠️ This project is experimental, it's an exploration of what a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works for Vue 2 by using the [official library](https://github.com/vuejs/composition-api). | ||
| ⚠️⚠️⚠️ This project is experimental, it's an exploration of what a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works both for Vue 2.x and Vue 3.x and you are currently on the branch that supports Vue 3.x. [Go here for the Vue 2.x compatible version](https://github.com/posva/pinia/tree/master). | ||
| **If you are looking for the version compatible with Vue 3.x, check the [`next` branch](https://github.com/posva/pinia/tree/next)** | ||
| What I want is to inspire others to think about ways to improve Vuex and come up with something that works very well with the composition api. Ideally it could also be used without it. | ||
| What I want is to inspire others to think about ways to improve Vuex and come up with something that works very well with the composition api. Ideally it could also be used without it. **@vue/composition-api is necessary**. | ||
| There are the core principles that I try to achieve with this experiment: | ||
@@ -39,15 +37,10 @@ | ||
| <h3 align="center">Bronze Sponsors</h3> | ||
| <p align="center"> | ||
| <a href="https://vuetifyjs.com" target="_blank" title="Vuetify"> | ||
| <img src="https://vuejs.org/images/vuetify.png" alt="Vuetify logo" height="48px"> | ||
| <img src="https://vuejs.org/images/vuetify.png" height="32px"> | ||
| </a> | ||
| </p> | ||
| <h3 align="center">Bronze Sponsors</h3> | ||
| <p align="center"> | ||
| <a href="https://www.storyblok.com" target="_blank" title="Storyblok"> | ||
| <img src="https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png" alt="Storyblok logo" height="32px"> | ||
| </a> | ||
| </p> | ||
| --- | ||
@@ -69,8 +62,5 @@ | ||
| - [ ] List Getters on DevTools | ||
| - [x] Nuxt Module | ||
| - [x] Should the state be merged at the same level as actions and getters? | ||
| - [ ] Flag to remove devtools support (for very light production apps) | ||
| - [ ] Should the state be merged at the same level as actions and getters? | ||
| - [ ] Allow grouping stores together into a similar structure and allow defining new getters (`pinia`) | ||
| - ~~Getter with params that act like computed properties (@ktsn)~~ | ||
| - [ ] Getter with params that act like computed properties (@ktsn) | ||
| - [ ] Passing all getters to a getter (need Typing support) | ||
@@ -81,9 +71,7 @@ | ||
| ```sh | ||
| yarn add pinia @vue/composition-api | ||
| yarn add pinia@next | ||
| # or with npm | ||
| npm install pinia @vue/composition-api | ||
| npm install pinia@next | ||
| ``` | ||
| Note: **The Vue Composition API plugin must be installed for Pinia to work** | ||
| ## Usage | ||
@@ -148,22 +136,9 @@ | ||
| **There is one important rule for this to work**: the `useMainStore` (or any other _useStore_ function) must be called inside of deferred functions. This is to allow the **Vue Composition API plugin to be installed**. **Never, ever call `useStore`** like this: | ||
| Note: the SSR implementation is yet to be decided on Pinia, but if you intend having SSR on your application, you should avoid using `useStore` functions at the root level of a file to make sure the correct store is retrieved for your request. | ||
| ```ts | ||
| import { useMainStore } from '@/stores/main' | ||
| // ❌ Depending on where you do this it will fail | ||
| // so just don't do it | ||
| const main = useMainStore() | ||
| export default defineComponent({ | ||
| setup() { | ||
| return {} | ||
| }, | ||
| }) | ||
| ``` | ||
| Or: | ||
| ```ts | ||
| import Router from 'vue-router' | ||
| const router = new Router({ | ||
| import { createRouter } from 'vue-router' | ||
| const router = createRouter({ | ||
| // ... | ||
@@ -263,3 +238,3 @@ }) | ||
| The main difference here is that `patch` allows you to group multiple changes into one single entry in the devtools. | ||
| The main difference here is that `patch` allows you to group multiple changes into one single entry in the devtools (which are not yet available for Vue 3.x). | ||
@@ -276,112 +251,4 @@ ### Replacing the `state` | ||
| When writing a Single Page Application, there always only one instance of the store, but on the server, each request will create new store instances. For Pinia to track which one should be used, we rely on the _Request_ object (usually named `req`). Pinia makes this automatic in a few places: | ||
| To be decided once SSR is implemented on Vue 3 | ||
| - actions | ||
| - getters | ||
| - `setup` | ||
| - `serverPrefetch` | ||
| Meaning that you can call `useMainStore` at the top of these functions and it will retrieve the correct store. **Calling it anywhere else requires you to pass the current `req` to `useMainStore`**. | ||
| #### Nuxt Plugin | ||
| SSR is much easier with Nuxt, and so is for Pinia: include the Pinia module in your `buildModules` in your `nuxt.config.js`: | ||
| ```js | ||
| export default { | ||
| // ... | ||
| // rest of the nuxt config | ||
| // ... | ||
| buildModules: ['pinia/nuxt'], | ||
| } | ||
| ``` | ||
| By default, it will also disable Vuex so you can directly use the `store` folder for pinia. If you want to keep using Vuex, you need to provide an option in `nuxt.config.js`: | ||
| ```js | ||
| export default { | ||
| disableVuex: false, | ||
| } | ||
| ``` | ||
| If you are dealing with SSR, in order to make sure the correct store is retrieved by `useStore` functions, pass the current `req` to `useStore`. **This is necessary anywhere not in the list above**: | ||
| ```js | ||
| export default { | ||
| async fetch({ req }) { | ||
| const store = useStore(req) | ||
| }, | ||
| } | ||
| ``` | ||
| Note: **This is necessary in middlewares and other asynchronous methods**. | ||
| It may look like things are working even if you don't pass `req` to `useStore` **but multiple concurrent requests to the server could end up sharing state between different users**. | ||
| #### Raw Vue SSR | ||
| In a Raw Vue SSR application you have to modify a few files to enable hydration and to tell requests apart. | ||
| ```js | ||
| // entry-server.js | ||
| import { getRootState, PiniaSsr } from 'pinia' | ||
| // install plugin to automatically use correct context in setup and onServerPrefetch | ||
| Vue.use(PiniaSsr) | ||
| export default context => { | ||
| /* ... */ | ||
| context.rendered = () => { | ||
| // pass state to context | ||
| context.piniaState = getRootState(context.req) | ||
| } | ||
| /* ... */ | ||
| } | ||
| ``` | ||
| ```html | ||
| <!-- index.html --> | ||
| <body> | ||
| <!-- pass state from context to client --> | ||
| {{{ renderState({ contextKey: 'piniaState', windowKey: '__PINIA_STATE__' }) | ||
| }}} | ||
| </body> | ||
| ``` | ||
| ```js | ||
| // entry-client.js | ||
| import { setStateProvider } from 'pinia' | ||
| // inject ssr-state | ||
| setStateProvider(() => window.__PINIA_STATE__) | ||
| ``` | ||
| ### Accessing other Stores | ||
| You can `useOtherStore` inside a store `actions` and `getters`: | ||
| Actions are simply function that contain business logic. As with components, they **must call `useStore`** to retrieve the store: | ||
| ```ts | ||
| createStore({ | ||
| id: 'cart', | ||
| state: () => ({ items: [] }), | ||
| getters: { | ||
| message() { | ||
| const user = useUserStore() | ||
| return `Hi ${user.name}, you have ${this.items.length} items in the cart` | ||
| }, | ||
| }, | ||
| actions: { | ||
| async purchase() { | ||
| const user = useUserStore() | ||
| await apiBuy(user.token, this.items) | ||
| this.items = [] | ||
| }, | ||
| }, | ||
| }) | ||
| ``` | ||
| ### Composing Stores | ||
@@ -482,31 +349,6 @@ | ||
| ## TypeScript | ||
| Pinia is conceived to make typing automatic, benefiting both, JS and, TS users. There are however different ways of handling types when using TS | ||
| ### Using an interface to type the `state` | ||
| If you want to define your own interface to type the _state_, explicitly type the return type of the `state` function: | ||
| ```ts | ||
| interface MainState { | ||
| counter: number | ||
| name: string | ||
| } | ||
| export const useMainStore = createStore({ | ||
| id: 'main', | ||
| state: (): MainState => ({ | ||
| counter: 0, | ||
| name: 'Paimon', | ||
| }), | ||
| }) | ||
| ``` | ||
| ## Related | ||
| - Vuex 5 | ||
| ## License | ||
| [MIT](http://opensource.org/licenses/MIT) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-15.38%
22
Worsened metrics
- Total package byte prevSize
- decreased by-26.82%
52198
- Number of package files
- decreased by-38.89%
11
- Lines of code
- decreased by-10.45%
1054
- Number of lines in readme file
- decreased by-31.29%
347
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes