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

viewmodeljs

v0.5.2-alpha1.0.1

Published

Typed view model objects for your api results

Downloads

6

Readme

viewmodeljs

npm NPM npm bundle size

Transform your api results to typed model objects

Intall

npm i viewmodeljs

Usage

import { Model, Record } from 'viewmodeljs'

export const Transaction = Model(
  class Transaction {
    // scalar values
    id = String
    transaction_id = String
    account_id = String
    user_id = String
    category = String
    subcategory = String
    name = String
    label = String
    keywords = String
    merchant_name = String
    amount = Number
    goal_id = String
    pending = Boolean
    hidden = Number
    istransfer = Number
    isrecurring = Number

    // complex types use Record
    account = Record({
      account_id: String,
      mask: String,
      name: String,
      official_name: String,
      type: String,
      subtype: String,
    })

    // custom parsers too
    date = (s) => new Date(s.replace('Z', ''))

    // other business logic
    isIncome() {
      return this.amount < 0
    }

    isExpense() {
      return this.amount > 0
    }

    toString() {
      return this.label || this.merchant_name
    }
  }
)

In the example, the Transaction class is wrapped with Model, which will add mixin methods for loading and transforming.

Later on, when you want to apply this model to some data:

let data = [...items]
// Convert the data to a Lazy.Sequence
let transactions = Transaction._lazy(data)
  .pluck('merchant_name')
  .filter((name) => name.startsWith('Amazon'))
  .take(5)
// Get a regular JS array
let arr = transactions.toArray()

Under the hood, when you load some data using the _lazy method, a new Lazy.js Sequence is created which chains together transform operations and only evaluates them when iterating, without creating intermediate representations. To learn more about Lazy.js, check out the docs.

When the data is iterated over (or converted to JS array) every object is converted to an instance of the model class with the corresponding field types.

TypeScript support

Sorry, no typescript support just native js types but if you are working on a typescript project you may create a *.d.ts file to export your typedefs for the model classes.