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

aleph1-aurelia-utilities

v2.0.0

Published

an Aurelia plugin for Model DirtyTracking, Service AutoState tracking and more.

Downloads

7

Readme

aleph1-aurelia-utilities

an Aurelia plugin for Model DirtyTracking, function BusyState tracking and more.

installation instruction:

npm install aleph1-aurelia-utilities

if you are using aurelia-cli with require.js - add this to your aurelia.json inside the bundles section.

{
	"lodash.clonedeep",
	"lodash.isequalwith",
	{
		"name": "aleph1-aurelia-utilities",
		"main": "dist/amd/index",
		"path": "../node_modules/aleph1-aurelia-utilities"
	},
	{
		"name": "aurelia-validation",
		"path": "../node_modules/aurelia-validation/dist/amd",
		"main": "aurelia-validation"
	}
}

usage - Tracking busy/error state of a function:

you can decorate any function with the stateTrack() decorator. this will set up 2 variables {functionName}_isBusy: will be set to true when the function is running, and revert back to false when the function ends. {functionName}_hasError: will be set to false when the function starts to run, and will hold the Error object if the function threw an error.

this will work for sync/async functions.

import { stateTrack } from  'aleph1-aurelia-utilities';

export class SomeClass
{
	//will create syncFunction_isBusy syncFunction_hasError
	@stateTrack()
	syncFunction(x, y)
	{
		return x + y;
	}

	//will create asyncFunction_isBusy asyncFunction_hasError
	@stateTrack()
	asyncFunction(x, y)
	{
		return Promise.resolve(x + y);
	}

	//will create syncFunctionError_isBusy syncFunctionError_hasError
	@stateTrack()
	syncFunctionError(x, y)
	{
		throw Error('Error');
	}

	//will create asyncFunctionError_isBusy asyncFunctionError_hasError
	@stateTrack()
	asyncFunctionError(x, y)
	{
		return Promise.reject('Error');
	}
}

usage - Dirty Tracking a model:

your model class need to extends the baseClass provided by the plugin. now you can decorate any properties of your model with the @dirtyTrack() decorator.

for babel users: the assignment in the declaration will set the default value for the property. for TS users: you should call the decorator with a parameter @dirtyTrack(7) someInt: number;

this will set up a isDirty variable in your model. this property will be automatically updated to with every change to your tracked properties.

at any point, you can call saveChanges() on your model, to commit the current changes. or discardChanges() to revert back to the last saved point. you can call serialize() to get a pojo object from your model, or deserialize(pojo) to populate your model from a pojo object.

   import { BaseModel, dirtyTrack } from 'aleph1-aurelia-utilities';

   export class SomeModel extends BaseModel
   {
   	@dirtyTrack() someEmptyString = '';
   	@dirtyTrack() someString = 'string';
   	@dirtyTrack() someZero = 0;
   	@dirtyTrack() someInt = 7;
   	@dirtyTrack() someTrue = true;
   	@dirtyTrack() someFalse = false;
   	@dirtyTrack() someEmptyArr = [];
   	@dirtyTrack() someArr = ['val1', 2, null, undefined, true];	//only picking up new array assignment
   	@dirtyTrack() someNull = null;
   	@dirtyTrack() someUndefined = undefined;
   	@dirtyTrack() someUndeclared;
   }

now anywhere else in you code you can:

   import { SomeModel } from 'path/to/some-odel';

   export class VM
   {
   	constructor()
   	{
   		this.model = new SomeModel();
   		
   		//changing any tracked property on the model will set `this.model.isDirty` to true.
   		this.model.discardChanges();
   		this.model.saveChanges();
   		let pojo = this.model.serialize();
   		let somePojo = <your code here>;
   		this.model.deserialize(somePojo);
   	}
   }

usage - Expirable local storage:

you can use it just like he regular localStorage, but you can suplly an additional parameter (expiration time in minutes). when you set an item, it will be stored with his expiration date, and when you try to get the item - the time will be validated. if the time expired (or if the item was never set at all) you will get 'undefined' upon calling 'getItem'.

all items are stored with a keyPrefix, so when you call 'clear' you can be sure that we clear only items that was registered with this utility.

   import { ExpireableLocalstorage } from 'aleph1-aurelia-utilities';

   ExpireableLocalstorage.setItem('key', 'value', 1);
   ExpireableLocalstorage.getItem('key');
   ExpireableLocalstorage.clear();

Building The Code

To build the code, follow these steps.

  1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
  2. From the project folder, execute the following command:
npm install
  1. Ensure that Gulp is installed. If you need to install it, use the following command:
npm install -g gulp
  1. To build the code, you can now run:
gulp build
  1. You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES6.

  2. See gulpfile.js for other tasks related to generating the docs and linting.

Running The Tests

To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with these additional steps:

  1. Ensure that the Karma CLI is installed. If you need to install it, use the following command:
npm install -g karma-cli
  1. Ensure that jspm is installed. If you need to install it, use the following commnand:
npm install -g jspm
  1. Install the client-side dependencies with jspm:
jspm install
  1. You can now run the tests with this command:
karma start