arqex / freezer Goto Github PK

Good day!

Can I store Freezer object in a Freezer object?

Good day, @arqex ! Thank you for your work!

I want to inherit Freezer in my class (in ECMAScript 6). What do you think about possibility of it?

But Freezer.prototype doesn't have any methods such as get and set. Can this be changed?

I have a need to replace a node entirely, not merge with the existing node. I read through the issues and I see you have commented about it here, I modified the source to get this replace added to mixin.js where I publish a new event and listen to that on frozen.js with the same event name I published on mixin.js.

I got this to work. What I wanted to know is do you plan on implementing this feature yourself or is it already implemented and I just did not search enough? Will be happy to send a PR if it is not implemented already.

I don't want to go about doing node.remove for all the keys to be removed.

Hello and thank you for what seems like a very nice and lean library 👍

I wonder whether it'd be possible and even desirable to have a more generic -more generic in my mind- on.update functionality as described below:

// Browserify/Node style of loading
var Freezer = require('freezer');

// Let's create a freezer store
var store = new Freezer({
    a: {x: 1, y: 2, z: [0, 1, 2] },
    b: 'Hola'
});
// Listen to changes in the store
store.on('update', function(changeList){
    console.log( 'I may only be triggered after data.endTransaction() is invoked' );
    //changeList = [
     // {path:'a.z', newData:['a', 0, 1, 2, 3, 'z'], oldData:[0,1,2]} ,
     //{path:'b', newData:'Hello', oldData:'Hola'} 
   //];
});

var data = store.get();
data.begingTransaction();
data.a.z.push(3).unshift( 'a' );
data.b = 'Hello';
data.a.z.push('z');
data.endTransaction();

Thanks again.

Hi @arqex,

I have been looking through the source code and playing with an immutability API of my own. Mostly to understand how Freezer is created :-)

What I really do not understand is how you made the FrozenArray behave exactly like a normal array. I have been reading lots of documentation on the web and I feel that I have tried everything.

What you basically do is:

// Without the extended/override methods
var FrozenArray = Object.create(Array.prototype);
var array = Object.create(FrozenArray);

But this array will not behave like a normal array. For example if I would do this:

var array = Object.create(FrozenArray);
array = array.concat(['foo']);
array // [Object[0], 'foo']

But in some magic way this works just fine when using it from Freezer.

var store = new Freezer({
  items: []
});
var array = store.get().items.concat(['foo']);
array // ['foo']

There are lots of stackoverflow and blogs on this, but none of them works... except here, and it is really annoying that I can not figure it out :-)

😄

When I am using Freezer with React, and if I am passing a string/number as props, then, I cannot update the prop in the React component, as in Freezer we need a parent component to set the value of the leaf nodes. That would make the code quite complex. Whats the way out

Hi,

The project looks interesting. I think it'd add up if you add an example of how would one use this within React, whether it can be enough to implement the Flux architecture or what else would be needed.

I imagine this in the README and/or an examples folder.

Suppose i have two classes. On the first i set the frozen data...

var dataStore = new Freezer({
data: { 
array_1: [],
int_value: 0,
array_2: [],
bool_value: false
}
});

..and pass the dataStore.get().data as parameter on the constructor of the second one, on variable this.data. Now i want to assign some values to these fields. What's the best way to do it?

this.data = this.data.set({int_value: 5});
this.data = this.data.set({array_2: [1,2 ,3]});
this.data = this.data.array_1.append( [4, ,5 ,6] ); 

This way is working, since i don't have get() available, i have to assign to itself on every set. Is that correct?

thanks

While referring to this article "Switching from immutable.js to seamless-immutable":

http://noredinktech.tumblr.com/post/107617838018/switching-from-immutable-js-to-seamless-immutable

I indeed wondered about two things:

• Could Freezer adapt the argument of "backwards-compatibility with normal Arrays"?
• Does it make sense to combine Freezer with libraries such as Underscore, Lodash or Lazyjs?

While backwards compability could be some sort of selling point for freezer, the combined use with other libs such as Underscore leads to concrete implementation questions on what is possible, what not or what would be the best way to do it?

First off I should say this is an nice library, solves the purpose, easy to get started.
Listening to updates at each node is a nice feature and love it. Very nicely integrates with shouldComponentUpdate

I am using freezer in one of my projects but the GPL license is a deal breaker for me to move forward. Would you consider changing to MIT license?

This is related to #17 -- but it really deserves a fresh discussion. Freezer is a great tool, and it almost replaces the extremely complex mental model of all the fluxes or whatever.

As said in #17, I agree that a general diff support would kill performance, but some support on top of the Freezer object should be possible.

In most cases, the application state object may be very fine-grained (and a mix of temporary (status messages etc.) and permanent state), but the updates will typically be very coarse-grained.

So, given this imaginary state object:

status: 'ready',
searchFilter: {...},
userRoles: [],
user: { 
  profile: {},
  orders: []
}

• status and searchFilter is just temporary view-state
• userRoles are read-only

So for updates I'm only interested in events from:

• user.profile;
• user.orders;

So, if you create some kind of wrapper that keeps a history of state changes, it should be possible to listen for these updates only by diffing only these two objects. And then maybe add undo/redo as an add-on.

The following code actually outputs "undefined" "false". The length of updatedB is actually 4.

console.log( updatedB[4] ); // logs 100
console.log(updatedB.length === 5); // true: We added 2 elements and removed 1

Looks to me like the sample and comments are incorrect because only one new element was added and not 2.

  var freezer = new Freezer({ x: 1 });
  var trans = freezer.get().transact();
  trans.x = 2;
  freezer.get().run();

  freezer.get().getListener().once('update', function(val) {
    console.log("Why does this get called?");
    });

Prints: Why does this get called?

I do a bunch of cleanup and fixing of the object tree after I detect a change, and I don't want that to trigger another update. So I'm trying to not listen to changes during the running of the transaction. However, even if I add the listener after the transaction is run, it still fires the update. Is there any way to avoid this and to not listen to the changes?

Hi @arqex !

Great work on this lib! Since it pretty much uses the same API signature as native it can be used in a lot of different places, even Angular, where I am doing a little experiment now.

I have this one issue though. I want my Freezer instance to be the holder of my application state. This actually does work really great, but doing updates gives some challenges and feels a bit confusing.

var store = new Freezer({
  items: []
});

// The store instance is made available to the app
var storeInstance = store.get();

// Somebody does an unwanted change somewhere in the app
storeInstance.items.push('foo');

// No worries, it is not available to anyone, that is great!
storeInstance.items // []

// But now I really do want to update the store instance. I grab the latest version
storeInstance = store.get();

// Do the change
storeInstance.items.push('bar');

// Update the instance
storeInstance = store.get(); 

// But it shows both changes
storeInstance.items // ['foo', 'bar']

To me it is very hard to reason about this. It seems like the Freezer instance is kind of a global where the first mutation to each branch is available on the next get(). This means than any part of your code actually can mutate the store.

To me it seems that the get() method should be moved, let me explain with an example:

// Returns the instance, as if `get()` is already called
var store = new Freezer({
  items: []
});

// Should create a brand new wrapper store where the change lives
store.items.push('foo');

// So the current store is still the same
store.items // []

// To actually grab the changes from the store you use `get()` on the mutation you did
store = store.items.push('bar').get();
store.items // ['bar']

This gives some advantages:

1. It is easier to reason about that a mutation to a store does not work. Neither with store.foo = 'bar' or store.items.push('foo')
2. It is only the specific mutation that is returned var items = store.items.push('foo').
3. To update the store itself you have to grab it after your mutation is done and update the instance store = store.items.push('foo').get()

This also allows you to completely lock the store inside a module and expose specific methods to do the mutations.

var storeModule = (function () {
  var store = new Freezer({
    list: []
  });

  return {
    addItem: function (item) {
      store = store.items.push(item).get();
    },
    getItems: function () {
      return store.items;
    }
  };
}());

storeModule.addItem('foo');
storeModule.getItems() // ['foo']

I hope this made sense :-)

The docs say you can listen to child nodes but can you trigger an event on child nodes? Do events trickle up and down the tree? Documentation could be more clear about this

Related to issue #48

The new pivot functionality affects the order in which listeners are notified. I've created a new jsbin which shows the listeners being notified out of order.

More importantly though listeners on specific nodes are not notified until the next tick which breaks part of the benefits of using live mode or now where listeners should be notified immediately

http://jsbin.com/miyemodimu/edit?html,js,console

Using #transact() along with store#get and store#set results in the error: Uncaught TypeError: Cannot read property '__' of undefined

This can easily be reproduced using the Undo Redo demo of freezer: http://jsbin.com/hugusi/1/edit?js,output

Find the #handleRemove() function and change the following line:

    this.props.parent.splice( this.props.attrkey, 1 );

to

    var trans = this.props.parent.transact();
    trans.splice( this.props.attrkey, 1 );
    this.props.parent.run();

In the app remove a node and then undo.
Subsequent attempts to remove a node results in the exception.

We have to check if every API method is mentioned in docs.

In the Readme.md file we have under:
https://github.com/arqex/freezer#update-methods

var store = new Freezer({obj: {a:'hola', b:'adios'}, arr: [1,2]});
var updatedObj = store.get().obj.update('a', 'hello');
console.log( updatedObj ); // {a:'hello', b:'adios'}

Which seems to throw an 'undefined' error because there is no method called update.
I guess you meant to write just 'set' instead of 'update' like this:

var store = new Freezer({obj: {a:'hola', b:'adios'}, arr: [1,2]});
var updatedObj = store.get().obj.set('a', 'hello');
console.log( updatedObj ); // {a:'hello', b:'adios'}

?

It looks like if you are manipulating an array with splice(), you might get the wrong result.
Here I'm trying to move one item from position 0 to 1

var store = new Freezer({
    a: [{id: 1}, {id: 2}, {id: 3}],
});

var arrayA = store.get().a;
var firstA = arrayA[0];

arrayA.splice(0, 1);
arrayA.splice(1, 0, firstA);

store.on('update', function(){
  store.get().a; // is [{id: 2}, {id: 3}] 
});

I've also created a demo to replicate the issue.
The code works as expected with native splice().

Hey there. I really like the API of your library.

But I was wondering your recommended way of removing items from arrays?

For nested objects, I've been doing something like (using underscore/lodash):

let remainingElements = _.without(parent.elements, elementToRemove);
parent.set('elements', remainingElements);

It seems to work but is that the best way to do it?

Then we ran into an issue when the array is the top-level object. We tried .reset but it didn't do what we expected.

let remainingElements = _.without(parent, elementToRemove);
parent.reset(remainingElements);
// ????

And we tried just creating a whole new top-level object, our app behaved really strangely since some objects had references to the old top-level object. We're probably doing something wrong.

let remainingElements = _.without(parent, elementToRemove);
parent = new Freezer(remainingElements);
// bad things happen
// maybe it's bad to create a freezer from frozen objects?

If it doesn't, will a pollyfill can help?

hi @arqex

I'm about to test a Baobab structure in Freezer and it seems I get an object, where it should be an array instead.

Given this structure:

mylayouts: {"lg":[{"w":8,"h":2,"x":2,"y":0,"i":"0"},{"w":2,"h":20,"x":0,"y":2,"i":"1"},{"w":8,"h":2,"x":2,"y":5,"i":"2"},{"w":2,"h":2,"x":0,"y":0,"i":"4"},{"w":8,"h":3,"x":2,"y":2,"i":"3"}]}

And setting the cursor in Baobab to:

layoutsCursor: ['mylayouts']
console.log( this.cursors.mylayouts.get() ) // => Object {lg: Array[5]}

In Freezer:

console.log( data.mylayouts ) // => Object {lg: Object[5], __: Object}

As data.mylayouts.lg is indeed an array, Freezer shouldn't make it an object, should it?

Hi!

I noticed the fact that when you update a tree, it automatically updates itself. So for example:

Mutable:

var example = {};

// We can mutate this from anywhere - bad, right?
example.foo = 'bar';

console.log(example.foo); // 'bar'

Freezer:

var example = new Freezer({});

// We can still mutate this from anywhere in the code...
example.get().set('foo', 'bar');

console.log(example.get().foo); // 'bar'

This way the original source can be mutated exactly as before from anywhere in the code, causing the side-effects which immutable data structures are supposed to circumvent.

In my particular use case I wanted to take an existing tree A and create another tree B somewhere else that takes A and adds some additional properties - but now A has my additional properties and fires events.

Is this intended, or can this be turned off somehow?

Thanks!

Hey,

It would be good in some scenarios, like async calls, that we could control when the state should update manually (disabling the auto sync on next tick).

Can't find much in the docs on updated nested data. Would it be something like this?

let store = new Freezer({
  a: {
    b: {
      d: 1
    },
    c: {
      e: 2
    }
  }
});

let data = store.get();
let newData = data.set({
  a: {
    b: {
      d: 3
    }
  }
});

console.log(newData.a.b.d) // 3

I tried this and it returned an object without the updated keys.

https://github.com/arqex/freezer/blob/master/src/frozen.js#L189

Currently there is a bug in freezer when used in react-native.
The error comes from here: https://github.com/arqex/freezer/blob/master/src/utils.js#L63

Error Message: TypeError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': The 2nd argument is neither an array, nor does it have indexed properties.

Is it normal?

var store = new Freezer({ time: 0 });
var data = store.get();

var changes = { time: 1 };
data.set(changes);
console.log(changes); // {}
// changes is empty object now!

Add Travis, Sauce Labs, cover, linting and badges

Does this library work with react-pure-render?

I've tried:

import shouldPureComponentUpdate from 'react-pure-render/function';
export default class App extends React.Component {
    shouldComponentUpdate = shouldPureComponentUpdate;

instead of:

freezer.on('update', () => this.forceUpdate());

But it didn't trigger an update.

Hello,

I have a problem appending values to frozen data array.
Let's say i have the data structure below:

var dataStore = new Freezer({
data: {
array_1: [],
int_value: 0,
array_2: [],
bool_value: false
}
});

// Now we get the data from 'dataStore' and proceed to value assignment.

var newData = dataStore.get().data;
newData.array_1.append( [1, 2, 3] );

// 'bool_value' and 'int_value' also get assigned with [1, 2, 3]. End up having the following structure:
// data: {
// array_1: [1, 2, 3],
// int_value: [1, 2, 3],
// array_2: [],
// bool_value: [1, 2, 3]
// }

Debugging step by step found that on 'frozen.js' line 361 ( if( child == oldChild ) { child = newChild; } ), the '==' should be '===' to check the data type also, so fixed it temporarily.

When a pivoted node's child was not updated because it was the same, pivoting would return this child node instead of the pivoted node.

For example:

var freezer = new Freezer({
  user: {
    ui: {
      loaded: false
    },
    data: {
      name: ''
    }
  }
});

function update(name) {
  var pv = freezer.get().user.pivot()
                .ui.set('loaded', true);
  console.log(pv);
  pv.data.set('name', name);
}

update('Dmitry');
update('arqex');

This will throw "TypeError: Cannot read property 'set' of undefined at update, because the second time we call update, ui.loaded didn't change and setting it returns ui node, not user node.

See example live here: http://jsbin.com/pujeyu/edit?html,js,console,output

My guess is that here in set:

instead of just returning the node:

            // No changes, just return the node
            if( !update )
                return this;

we should find pivot and return it if it exists:

            // No changes, just return the node
            if( !update ) {
                var pivot = Utils.findPivot( this );
                if( pivot ) {
                    return pivot;
                }
                return this;
            }

Hi,

I'm using Freezer and I really like how it simple it gets, thanks for the good work!
I'm writing a small plugin for router5 + freezer. What it does is just to sync the router state into the frozen state.
It's easy to do and there are at least 2 approaches:

1. The plugin (which basically is a set of callbacks for router5), .set() directly in the store.
2. The plugin uses a listener + trigger + reactions.

Knowing that:

1. Is simpler and very straightforward
2. Is more convoluted but works nicely with the redux devtools, since the trigger calls appear with the new state.

What would you recommend?

Backbone.js Models & Collections have a rest interface. Since Freezer is very similar to Backbone Model (but without the REST interface), was wondering if there are recommended adapters or interfaces for REST, and also - for using Freezer along with collections (and REST)

bower.json is including the wrong file for main.

The freezer.js in the root folder uses CommonJS which is not really used in a lot of projects using bower in the first place.

The right file that should be included in the main attribute should be the freezer.js file in the build folder instead.

So I really love this idea. I love the idea of having one source of truth for a page with the "data store" at the top. I love passing down the part of the data to each components that cares about it. Making a change to any part of the data runs the "update" method on the listener at the top no matter how deep the components are nested, amazing!

Here is my question...
If I want to persist changes to a server, the update method gets the "new data" as its argument (all of the data), but how do I know what changed so I can persist that to the server?

It would be great if the params were (completeData, changedData). Then I could either update the item if it had an id or create a new one if id was missing.

Am I missing something? How are other people doing this?

Hopefully this is clear, hard to explain.

1) Tag 1c17fe3 as v0.9.4, please.

2. Propose to use ===/!== instead of ==/!=.

3. Same for tests: strictEqual/notStrictEqual instead of equal/notEqual.

4. Is this assert.deepEqual(data, example); instead?

5. What does remove returns being called with unexistant key(s)? Is it fixed in tests?

6. Listener tests: I don't see tests about triggering callbacks on exact .remove call.

7. Listener tests: I don't see tests about .trigger function.

8. Listener tests: "Listen by several callbacks" test is omitted.

9. Listener tests: Will callback triggered if we try to remove non-existant property?

10. Listener tests: Will callback triggered if we try to update a property but with the same value?

11. Listener tests: ".unsubscribe doesn't touch other callbacks" test is omitted.

12. Listener tests: What's the behavior if we pass non-existant callback to .unsubscribe?

13. Could we merge (some parts of) freezer-spec and hash-spec?

@arqex , thanks! (Note: I've read freezer-spec, hash-spec and listeners-spec only. I use them here.)

Hi, I read this article https://medium.com/outsystems-engineering/javascript-and-immutability-how-fast-is-fast-enough-27790cda4e9e#.igxhzts6g

Basically copy can be faster than using tree structure replacement like immutable, when some conditions met, maybe there can be an option to use copy or tree for even faster speed?

http://jsbin.com/jezoja/2/edit?js,console

When chaining the set() method, is there a way to "go back up the tree".

For example, these 2 behave different...

frozen
.set('a', 'aaaaaa')
.set('b', 'bbbbbb')
.c.set('d', 'dddddd')
;

AND

frozen
.set('a', 'aaaaaa')
.c.set('d', 'dddddd')
.set('b', 'bbbbbb')
;

It looks like this is because the set() returns the node in being acted on, and not the root node. Is there a way in the 2nd scenario above to go back up a node so the set('b') works as expected?

Is analog Immutable.withMutations for atomic data changes?

In this example only first array change will trigger update listener:

var state = new Freezer({arr: [0,1,2,3,4], a: {b: {bb: 1, cc: 2}, c: {cc: 2}}})
var data = state.get();

data.arr.getListener().on('update', (data) => {
    console.log(data)
})

data.arr
    .push( 5 ) // [0,1,2,3,4,5]
    .pop() // [0,1,2,3,4]
    .unshift( 'a' ) // ['a',0,1,2,3,4]
    .shift() // [0,1,2,3,4]
    .splice( 1, 1, 'a', 'b') // [ 0, 'a', 'b', 2, 3, 4]

// outputs { '0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5 }

I have a frozen object called appData where I do the following as a test...

                    appData.set("xxx","XXX");
                    appData.set("yyy","YYY");
                    appData.set("zzz","ZZZ");

Similar to your json editor example

        // We are going to update the props every time the store changes
        listener.on('update', function( updated ){
            me.setProps({ store: updated });
        });

I have a listener where I

            listener.on("update", function (appDataNew) {
                console.log("UPDATE");
                me.setProps({appData: appDataNew});
                console.log(JSON.stringify(me.props.appData, null, "  "));
            });

In the console, I see the following. Only the the LAST of the 3 set items (zzz) is set. It does not matter what I am setting or how many, the last one is the only one to stick.

{
  "route": "",
  "name": "",
  "address": "70.112.68.147",
  "noop": "",
  "zzz": "ZZZ"
}

There has to be something dumb I am doing here.

I've noticed that listeners on parent nodes are not notified immediately when a child is updated; but rather notified on next tick. The listener attached directly to the store is notified immediately.

Using the new #now() functionality. All listeners are triggered in the correct order immediately, but I'm also receiving notifications again on next tick. Now my listeners have processed the same notification twice.

Here's a jsbin that shows the order in which events are received.
http://jsbin.com/mobite/edit?js,console

The check for a matching listener is incorrect. As such a listener cannot be removed.

            for (i = listeners.length - 1; i >= 0; i--) {
                if( listeners[i] === listener )
                    listeners.splice( i, 1 );
            }

The comparison should be against the callback of the listeners object.

            for (i = listeners.length - 1; i >= 0; i--) {
                if( listeners[i].callback === listener )
                    listeners.splice( i, 1 );
            }

Hi arqex, nice job with your Freezer lib ! I have a little problem, to duplicate the 3rd element of an array, I've tried myarray.splice(2,0,myarray[2]) but after that it seems that the 2 nodes (original and duplicated) point to the same element in memory: changes applied to one of the 2 nodes are reflected in the other. How to deeply duplicate a node array in order to have 2 distinct nodes ?

Thanks for your help.

Hey Javi,

Today I stumbled over LokiJS, a leightweight JS database, that can run on a server and the browsers local storage. I think, this can have nice advantages over using just a server-side db, say Mongo for example.

I made up some questions here, maybe you want to check? Would be interested on your thoughts :)

techfort/LokiJS#109

Cheers, Arno

http://jsbin.com/lixota/2/edit?js,console

I have a nested object ...

var json = {
    a: 'aaa',
    b: 'bbb',
    c: {
      d: 'ddd',
      e: 'eee',
      f: {
        h: 'hhh',
        i: 'iii'
      }
    }
};

var freezer = new Freezer( json );
var frozen = freezer.get();

I am using transact() to batch my updates, and have tried the 2 ways shown below ...

// WORKS - transact per node in tree
if (true) {
  var t1 = frozen.transact();
  t1.a = 'aaaaaa';
  t1.b = 'bbbbbb';
  var t2 = frozen.c.transact();
  t2.d = 'dddddd';
  frozen.run();
}

// DOES NOT WORK - single transaction at root node
if (true) {
  var t1 = frozen.transact();
  t1.a = 'aaaaaa';
  t1.b = 'bbbbbb';
  t1.c.d = 'dddddd';
  frozen.run();
}

It looks like I need a transact() per node, wanted to check if this is the way you intended, or if you have any recommendation.

The jsbin at the beginning has a runnable example.

Can support be added for ES2015 Map data structures? Converting it to and from json does not correctly convert Maps.