npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-object-state

v1.4.3

Published

A library that helps you keep track of changes in your dtos

Downloads

18

Readme

vue-object-state

NPM version Codecov CircleCI

A typescript library that helps you keep track of changes in your dtos

Install

npm i vue-object-state

Basic example

const user = new User({
  firstName: 'Eugene',
  address: new Address({
    street: 'Anchor Way'
  })
})

// Create a  new state object
const state = new ObjectState(user)

// You can read the state of every sub object and property (typed)
state.isDirty // false
state.properties.firstName.isDirty // false
state.properties.firstName.value // Eugene
state.properties.address.isDirty // false
state.properties.address.street.isDirty // false
state.properties.address.street.value // Anchor Way

// Update any of the properties
state.properties.firstName.value = 'Spongebob'

// It's state is updated, including vue binding
state.isDirty // true
state.properties.firstName.isDirty // true
state.properties.firstName.value // Spongebob
state.properties.address.isDirty // false
state.properties.address.street.isDirty // false
state.properties.address.street.value // Anchor Way

// To retrieve back your object, build the state
const result = state.build()
result instanceof User // true
result.firstName // Spongebob
result.address instanceof Address // true
result.address.street // Anchor Way

// Use the `clean()` method to clear dirty flags. This can be useful after a save, all 'original' values will be set to their current values.
state.properties.clean()
state.properties.firstName.clean()
state.clean()

// Use the `reset()` method to reset dirty values. This will revert everything to their original value.
state.properties.reset()
state.properties.firstName.reset()
state.reset()

// You can also store errors
state.properties.errors // []
state.hasErrors // false
state.properties.firstName.hasErrors = false
state.properties.firstName.errors = ['Whoops']
state.hasErrors // true

Collection

const users = [
  new User({ firstName: 'Spongebob' }),
  new User({ firstName: 'Eugene' })
]

// Create a new collection object
const collection = new CollectionState(users) // CollectionState<User>

collection.count // 2
collection.elements // ObjectState<User>[]
collection.dirtyElements // ObjectState<User>[]
collection.get(0) // ObjectState<User>
collection.add(new User({ firstName: 'Patrick' }))
collection.clean() // calls clean on every element
collection.reset() // calls reset on every element
collection.build() // User[]

collection.values // ObjectStateValues<User>[]
collection.filter((obj: StateValues<User>) => obj.firstName === 'Spongebob') // ObjectState<User>[]
collection.find((obj: StateValues<User>) => obj.firstName === 'Spongebob') // ObjectState<User> | undefined
collection.some((obj: StateValues<User>) => obj.firstName === 'Spongebob') // boolean

StateValues

The StateValues is an object which can be navigated the same way as the original object, using magic getters and setters. This can be especially usefull in tables.

const user = new User({
  firstName: 'Eugene',
  address: new Address({
    street: 'Anchor Way'
  })
})

const state = new ObjectState(user)
const values: StateValues<User> = state.values

state.properties.firstName.isDirty // False
state.properties.firstName.value // Eugene

values.firstName // Eugene
values.firstName = 'Spongebob'
state.properties.firstName.isDirty // True
state.properties.firstName.value // Spongebob

value.propertiesState // PropertiesState
value.propertiesState.firstName.value // Spongebob