feathers-pinia

• The old useFind has been renamed to useFindWatched.
• A new useFind is now available with built-in pagination and fall-through cacheing.

New useFind API 🎁

The useFind API has been completely rewritten from scratch. A couple of its best features include

• Intelligent Fall-Through Caching - Like SWR, but way smarter.
• Pagination Support - Built in, sharing the same logic with usePagination.

Client Paging, Manual Fetch

Let's look at the two most-common use cases. This example shows client-side pagination with manual fetch:

import usePosts from '../stores/posts'

const postStore = usePosts()

const { data, next, prev, find } = postStore.useFind({ query: {} })

// fetch data
await find()

// move to the next page
await next()

// move to the previous page
await prev()

Server Paging, Auto Fetch

Another common use case is server-side pagination. Enable it by passing paginateOnServer in the params. You can also pull out isPending to show a status indicator when a request is pending. That's it!

import usePosts from '../stores/posts'

const postStore = usePosts()

const { data, next, prev, isPending } = postStore.useFind({ 
  query: {}, 
  paginateOnServer: true 
})

// move to the next page
await next()

// move to the previous page
await prev()

useFindWatched API ⚠️

To make migration to the new useFind API easier, the old useFind API has been renamed and is now called useFindWatched.

🎉🎉🎉 As of [email protected], we now have support for SQL operators 🎉🎉🎉

This means you can use the following query operators like native operators. No configuration is necessary!

• $like
• $ilike
• $iLike
• $notLike
• $notILike

Read more details, here: https://v1.feathers-pinia.pages.dev/guide/whats-new.html#support-sql-like-operators-%F0%9F%8E%81

Or try it out by running npm i feathers-pinia@pre.

The overall bundle size has been reduced from around 20kb to 12kb, gzipped. This was done through

• Replacing hefty dependencies, like lodash.debounce, with smaller equivalents, like just-debounce.
• Optimizing the Vite build to externalize modules.

All of the modules highlighted, below, were able to be removed from the package, resulting in a much leaner build.

🎉 Use Default Values on the Class Definition

[Small breaking change] Defaults for values can now be specified directly on the Model interface, as shown below. Custom constructors have been made much cleaner due to the new instance.init() BaseModel method. After calling super(data, options) to initialize the BaseModel, the init method can be called from this:

// Minimum required constructor
constructor(data: Partial<Message> = {}, options: Record<string, any> = {}) {
  super(data, options)
  this.init(data)
}

Here are the technical details of how the new Model behavior works. For the TLDR version, just make your Model classes look like the example, below.

• BaseModel no longer calls setupInstance, internally. If you use a custom constructor together with instanceDefaults and setupInstance, the two methods are run twice, wasting cycles.
• BaseModel still calls instanceDefaults internally, which means it runs twice. If you are using instanceDefaults only for default values, as documented, then the performance impact will be negligible, even when ingesting large amounts of data from the API server. No complex logic should run in instanceDefaults. It has two purposes. Any use outside of these two purposes should be refactored into setupInstance:
  • Allow specifying default values with low boilerplate.
  • Allow conditional defaults values to be assigned based on incoming data.
• Calling new User(data) without a custom BaseModel results in Model interface defaults always overwriting data.
• Having a custom constructor allows Model instance default values to initialize as one would expect: not overwriting any other values.
• Calling this.init(data) runs the instanceDefaults again and also runs setupInstance.

// Define the interface and defaults directly on the Model instead of `instanceDefaults`.
export class Message extends BaseModel {
  _id: number
  text = ''
  userId: null | number = null
  createdAt: Date | null = null

  // This is the minimum required constructor
  constructor(data: Partial<Message> = {}, options: Record<string, any> = {}) {
    super(data, options)
    this.init(data)
  }

  static setupInstance(message: Partial<Message>) {
    // access `store` and `models` from this
    const { store, models } = this
  }
}

🎁 New associateFind and associateGet Utilities

TODO: Finish docs then update this section.

Several imports were still coming from 'vue' instead of vue-demi. The update makes no difference for Vue 3 apps, but apps using Vue 2 will be able to use the new features from the previous pre-release.

Now that we auto-generate the types, this release uses the generated types from dist/ rather than src/.

This patch release puts the types property back in the package.json. They are set to src/.

This bug addresses an issue where Vite's library mode's file output extension changed from feathers-pinia.es.js to feathers-pinia.mjs. The package.json has been updated to address the issue.

The build also now exports TypeScript types adjacent to the bundled files. The original TypeScript-based src is also published to npm.

The returned error from useGet now resets properly on its own when a record is found.

When you call instance.create() on a model instance that hasn't been added to the store, the instance will now update with the latest data from the server. This same behavior does not apply to .patch or .update. For those methods you'll need to call .addToStore() to make the item reactive.

Bugs Fixed

• Fixes a bug where instance.__isTemp was the opposite of what it should have been. Includes test.
• Fixes a bug where clone.save() would not return a clone. Includes tests Closes #52 Thanks to @emmanuelgeoffray for reporting this bug! 🎉
• Fixes a bug where a clone would lose its prototype (associated with its Model class) after running through a save_handler in useClones.
• Fixes a bug where in-memory, related data would be lost after an API call.

TypeScript Class Properties

Adds documentation for working with strictPropertyInitialization in tsconfig.json, so we don't have to put ! after every property in a class.

Other Changes

• Updates prettier's printWidth to 120 to prevent unnecessary formatting.

New Documentation

The documentation has been updated to use the latest and greatest Vitepress pre-release. The updated design is lovely, more mobile friendly and includes dark mode!

See the before/after screenshots at the bottom of these release notes.

handleClones is now useClones

The handleClones utility has been renamed to useClones. We now have more consistent naming between the utilities:

• useFind
• useGet
• usePagination
• useClones

useClones Docs

There is now a handle-clones placeholder page for old links to still work. The new docs page for useClones is found here.

To make this a non-breaking change, the handleClones export still works in this release. It is deprecated and will be removed in version 1.0.

New Docs Screenshots

New Home Page:

Old Home Page:

Many thanks to @luke3butler for reviewing and fixing Vue 2 support!

• https://github.com/marshallswain/feathers-pinia/commit/ed368a9a303645a053203b9827ab237e6d2c5d10
• https://github.com/marshallswain/feathers-pinia/commit/728023c50cac47b288d5337f540ac96719599b9d

The following computed properties have been added to the useFind context:

• isPending
• haveBeenRequested
• haveLoaded
• error

They are the same as the internal useFind state.

Just what the label says. uses a computed internally to make sure the props are reactive.

handle-clones

Sometimes the passed-in data was an instance but had lost its reactivity for whatever reason. This updates the handle-clones saveHandlers to always compare the clone against the original item in the store. Without this change, it was impossible to set an item back to its original value, since the item passed in the props was non-reactive and always retained its original value instead of updating as it should.

Restore Build

The build runs through typescript again because it produces more readable output, even if the sourcemaps seem to be off when running with Vite.

Testing the dev experience with a vite build

A new action has been added to the service stores. addToStore does the same thing as add. but the name is more consistent with other methods that modify the store.

You can now get access to the underlying Model class by referencing the Model getter on each service store.