npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

plasmuh

0.2.2 • Public • Published
Logo

A New State & Memory Management Library

npm npm downloads

NPM

No more memory leaks with lightweight, fast state management.

  • Take control of memory usage and prevent leaks.
  • Includes React & VueJS High Order Components.
  • Runs everywhere javascript does.
  • 1.2KB Gzipped.
  • Typescript FTW.

Wait, memory management... in javascript?

Yes, yes, yes I know. Javascript is a "Garabage Collecting Language".

Except when you Google Search "Javascript Memory Leak" you get 7.3 million results.

The cause is always the same: js objects, arrays and classes sticking around with a random reference keeping them from getting cleaned up by the automatic garbage collecting algorithm.

This library solves that problem, as long as you use this as documented you won't get memory leaks. It's a little more work with an awesome gaurantee if you ask me.

Installation

// Library Only (1.2 KB)
<script src="https://cdn.jsdelivr.net/npm/plasmuh@0.2.2/dist/plasmuh.min.js"></script>
 
// Library + High Order Components (1.6 KB)
<script src="https://cdn.jsdelivr.net/npm/plasmuh@0.2.2/dist/plasmuh-hoc.min.js"></script>

-OR-

npm i plasmuh --save

Usage

// don't include this line if you're using the <script> tag
import { _P } from "plasmuh/lib/p"; 
 
// Set a new object in memory, works with any
// javascript type including classes and components
let ptr = _P.alloc([1, 2, 3]);
 
// mutate object in memory
_P.set(ptr)[0] = 5;
 
// replace object in memory
_P.set(ptr, [5, 2, 3]);
 
// read object in memory
console.log(_P[ptr][0]) // 5;
 
// remove object in memory
_P.free(ptr);
 
// remove all objects in memory
_P.flush();

Events

let ptr = _P.alloc([1, 2, 3]);
 
let listener = _P.subscribe(ptr, (p) => {
    console.log(_P[p]);
})
 
_P.set(ptr)[0] = 5;
// in console: [5, 2, 3]
 
listener.destroy();

Objects

let ptrs = _P.struct({
    foo: "bar",
    arr: [1, 2, 3],
    some: {prop: "here"}
})
 
console.log(ptrs.foo) // 0
console.log(_P[ptrs.foo]) // "bar" 
console.log(_P[ptrs.arr]) // [1, 2, 3]
 
// immutable object.assign
_P.assign(ptrs.some, {prop: "there"});
console.log(_P[ptrs.some]) // {prop: "there"}
 
// listen for changes on any struct property
let listener = _P.subscribe(ptrs, (ptr, key) => {
    console.log(key + " has changed!");
});
 
listener.destroy();
 
// free up all properties of struct
_P.free(ptrs);
 

Vue High Order Component

// if not using with <script> tag
import { _P } from "plasmuh";
import { v_bindP } from "plasmuh/lib/hoc-vue";
 
const ptr = _P.alloc([1, 2, 3]);
 
const App = new Vue({
    el: "#app",
    mixins: [
        v_bindP([ptr]) // pass in array of pointers to listen to
    ],
    // your passed in pointers get transfered to 
    // local "ptrs" variable. Use "ptrs" in your 
    // template to render properties/variables into VueJS
    template: `<p># of Records: {{ _P[ptrs[0]].length }}</p>`,
});
 
setInterval(() => {
    _P.set(ptr).push(_P[ptr].length);
}, 1000);

React High Order Component

// if not using with <script> tag
import { _P } from "plasmuh";
import { bindP } from "plasmuh/lib/hoc-react";
 
const ptr = _P.alloc([1, 2, 3]);
 
class App extends React.Component {
    // array of pointers passed into HOC 
    // becomes this.props.ptrs, use that 
    // to render values/properties
    render() {
        return "# of records: " + _P[this.props.ptrs[0]].length;
    }
}
 
const bindApp = bindP(App, [ptr]); // pass in array of pointers to listen to
 
setInterval(() => {
    _P.set(ptr).push(_P[ptr].length);
}, 1000);
 
ReactDOM.render(<bindApp />, document.getElementById("app"));
 
// Pure components also work perfectly
const bindApp = bindP((ptrs, props) => {
    console.log(props.test) // "hello";
    return "# of records: " + _P[ptrs[0]].length;
}, [ptr]);
 
ReactDOM.render(<bindApp test="hello" />, document.getElementById("app"));

Good Practices

If a variable is created inside a function or method, it will get cleaned up reliably every time.

function doSomething() {
    let num1 = 1;
    let num2 = 3;
    return num1 + num2;
}

In these cases you don't need memory management of any kind. Function arguments are much the same, so you don't need to worry about memory management for those either.

The problem happens when you do something like this:

let imGlobal;
function doSomething() {
    imGlobal = "wee!";
}

The imGlobal variable is never unset, it'll always be there until we explicitly clear the global variable by doing imGlobal = null or something similar.

So generally speaking, write pure functions whenever possible and any variables that exist outside functions/classes should be initialized and cleaned up with plasmuh.

Another good practice is using the pointer provided by plasmuh to pass into functions, instead of passing the values themselves.

let ptr = _P.alloc([1, 2, 3]);
 
const arrayAvg = (arrPtr) => {
    return _P[arrPtr].reduce((prev, cur) => prev + cur) / _P[arrPtr].length;
}
 
console.log(arrayAvg(ptr)) // 2

This will help prevent accidentally creating new references.

Bad Practices

Don't ever create a variable pointing to something in memory , like this:

// Don't do this.
let myVar = _P[myPtr];

That would completely defeat the purpose of the library. Always modify values in place using set or assign and read properties directly out of memory when you need them. Never create new variables pointing to things in memory.

// NO
let myVar = _P[myPtr];
console.log(myVar.property);
 
// YES
console.log(_P[myPtr].property);

The rule is simple, if you find yourself typing _P[] with an equals sign to the left of it, stop what you're doing.

The only exception to this rule would be if you're performing math operations, something like this would be okay:

let sum = _P[ptr1].value + _P[ptr2].length;

MIT License

Copyright (c) 2018 Scott Lott

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

install

npm i plasmuh

Downloadsweekly downloads

0

version

0.2.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability