altjs / utils

A collection of utils for alt.js

Alt Utils

This package contains the following utils which interface well with the Alt library (a true flux compliant library in a very small size):

• ActionListeners lets you listen to individual actions without having to create a store.
• AltIso addon that uses iso to render your application on both server and client.
• atomic enables your stores for atomic transactions.
• decorators lets you use a collection of useful ES7 decorators when working with alt.
• AltManager allows you to create multiple alt instances in your app.
• AltTestingUtils
• Debugger
• DispatcherDebugger
• DispatchRecorder lets you record all your dispatches and replay them back at a later time.
• Inspector
• ImmutableUtil makes working with immutable-js easy.
• Render
• StoreExplorer
• TimeTravel enhances your stores so they are able to travel through different states in time.
• chromeDebug
• connect
• connectToStores
• fp
• functions
• makeFinalStore is a Store that only emits when all your other stores have received all their data.
• makeFinalStore
• makeHot
• reducers
• statics
• withAltContext

Note: If you are looking for the following utils, these are available in separate npm packages and github repos:

• AltContainer a higher-order container component that is your swiss army knife for React.
• connectToStores a higher-order function that wraps your React components for store listening.

Installation

npm install alt-utils

ES6 import examples

This is how specific utils can be imported to your project files:

import chromeDebug from 'alt-utils/lib/chromeDebug';
import {decorate, datasource, bind} from 'alt-utils/lib/decorators';

License

utils's Issues

Passing undefined functions to ActionListeners causes silent failure

actionListeners. addActionListener(alt.actions.UserActions.LOGIN, somethingUndefined);

If somethingUndefined is undefined, it will cause a silent failure. No error is logged and other listeners for UserActions.LOGIN are not triggered.

`index.js` is missing from distribution version?

package.json seems to point at index.js at the package root using "main": "index.js",. This breaks the package for me at least as it's looking for a non-existent entry point.

ModuleNotFoundError with webpack

I get a ModuleNotFoundError: Module not found: Error: Cannot resolve module 'alt-utils' when I try to use this library.

I'm importing it connectToStores like this:

import connectToStores from 'alt-utils/lib/connectToStores';

And this is my resolver webpack config:

resolve: {
        modulesDirectories: ['./src', './node_modules'],
        extensions: ['','.js', '.jsx', '.json']
    }, 

Any idea how can I get this to work?
All other imports work as expected

EDIT: The import seems not to be a problem, but the webpack entry configuration:

entry: {
        fetch: 'whatwg-fetch',
        app: path.join(__dirname, './src/index.jsx'),
        vendor: [
            'react',
            'react-dom',
            'react-router',
            'react-router-bootstrap',
            'react-bootstrap',
            'react-bootstrap-date-picker',
            'react-select',
            'react-tagsinput',
            'react-lazyload',
            'react-loader',
            'react-dropzone',
            'react-pdf-js',
            'react-waypoint',
            'alt',
            'alt-utils',
            'alt-container',
            'moment',
            'lodash',
            'three',
            'js-cookie'
        ]
    }

When alt-utils is in that list I get the ModuleNotFoundError error

`fixed-data-table` devDependency is missed in package.json

this dependency is used here
https://github.com/altjs/utils/blob/master/src/DispatcherDebugger.js#L3

This configuration issue prevents from using Debugger view

refactoring old references with new alt version

hi @goatslacker,

migrating to your last version, did you move utils all here now ? :)

I am now using it this way

import DispatcherRecorder from 'alt-utils/lib/DispatcherRecorder';

index.js provided in package.json does not exist, is it possible to get something like

import {DispatcherRecorder} from 'alt-utils';

A question over Immutable with connectToStores

Hi there,

I am using a immutable state in the stores as follows:

import alt from '../alt';
import AppActions from '../actions/AppActions';
import Immutable from 'immutable';
import immutable from 'alt-utils/lib/ImmutableUtil';

class AppStore {

  constructor() {
    /*bindActions is a magic Alt method which binds actions to their handlers defined in the store.*/
    this.bindActions(AppActions);
    this.state = Immutable.Map({
        notifications: Immutable.List()
    });
  }

  onDropNotification(notification){
      this.state.notifications = this.state.get('notifications').filter(n => n.id !== notification.id);
  }

  onThrowNotification(notification){
      this.state = this.state.updateIn(['notifications'], arr => arr.push(notification));
  }

}

export default alt.createStore(immutable(AppStore));

The problem I have is that connectToStores passes me an object where the state has no key and I don't know how to access notifications.

App component properties are as follows:

Thanks and Greetings.

chromeDebug not hooking state changes

I am having problems with chromeDebug after upgrading to the newly refactored alt-utils.
i.e. The alt dev tool only displays the initial state and it does not capture any state transitions. Anyone else having the same issue?

decorator with makeHot function

Hi,

I was able to combine immutable and createStore decorators but is it possible to get makeHot utility also ?

I mean this one is fine:

import { createStore } from 'alt-utils/lib/decorators';
import immutable from 'alt-utils/lib/ImmutableUtil';

@createStore(alt)
@immutable
class MyStore

export default MyStore;

But how to do with makeHot wrapper :

import { createStore } from 'alt-utils/lib/decorators';
import immutable from 'alt-utils/lib/ImmutableUtil';
import makeHot  from 'alt-utils/lib/makeHot';

@makeHot
@createStore(alt)
@immutable
class MyStore


export default MyStore;

thanks,

jul

Cannot find module 'immutable'

Hi there,
I always get the following error when using the module ImmutableUtil

[21:12:50] Error: Cannot find module 'immutable' from 'C:\Users\Sergio\lik\node_modules\alt-utils\lib'

I installed successfully dependence and I'm using as follows:

import alt from '../alt';
import AppActions from '../actions/AppActions';
import immutable from 'alt-utils/lib/ImmutableUtil';

export default alt.createStore(immutable(AppStore));

can they help me?
tanks and greetings.

connectToStores not works as expected?

For example:

npm install --save alt alt-utils

import connectToStores from 'alt-utils/lib/connectToStores';
import TodoStore from '../../stores/TodoStore'

class Todo extends Component {
    static getStores() {
      return [TodoStore];
    }

    static getPropsFromStores() {
      return TodoStore.getState();
    }    
}
export default connectToStores(Todo)

Result:

Error: connectToStores() expects the wrapped component to have a static getStores() method
    at /node_modules/alt-utils/lib/connectToStores.js:65:13
    at connectToStores (/node_modules/alt-utils/lib/connectToStores.js:113:5)
    at Object.<anonymous> (/build/webpack:/src/components/Todo/index.jsx:1213:16)
    at __webpack_require__ (/build/webpack:/webpack/bootstrap 1e13b48f6ed5c94ceb23:19:1)
    at Object.module.exports.Object.defineProperty.value (/build/webpack:/src/routes.js:24:63)
    at __webpack_require__ (/build/webpack:/webpack/bootstrap 1e13b48f6ed5c94ceb23:19:1)
    at Object.<anonymous> (/build/webpack:/src/server.js:7:40)
    at __webpack_require__ (/build/webpack:/webpack/bootstrap 1e13b48f6ed5c94ceb23:19:1)
    at module.exports._this2 (/build/webpack:/webpack/bootstrap 1e13b48f6ed5c94ceb23:39:1)
    at Object.<anonymous> (/build/webpack:/webpack/bootstrap 1e13b48f6ed5c94ceb23:39:1)

Lost the original Component instance refs after `connectToStores`

I am trying to get the Component instance through refs but get a connectToStores wrapped instance, which doesnot keep the original refs and instance. In the end, the original instance ref is lost.

decorators and webpack

hi,

I can not figure out how to use decorator with webpack, I mean if I want to use

@createStore
@immutable
class AppStore {

I put this in my webpack config

{ test: /\.js?$/, loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,plugins[]=syntax-decorators'], exclude: /(node_modules|__tests__)/ },

But webpack is not aware of annotation I guess and decorator not interpreted, so I came to old way of doing

// no matter if makeHot not used but only createStore decorator
let appStore = makeHot(alt, immutable(class AppStore {
  constructor() {

thx

Jul

[AltTestingUtils] Add support to send constructor args in makeStoreTestable()

I have a number of Alt-Stores which require dependencies in the form of constructorArgs. When I use AltTestingUtils.makeStoreTestable(myAltInstance, MyUnWrappedStore) it fails for obvious reasons.
As there is no way to send constructor args in AltTestingUtils.makeStoreTestable(). Ideally it should be there because alt.createStore() also supports this (StoreModel: function, iden: ?string, …constructorArgs): AltStore (docs).

I have almost made the changes and will make a pull request in a bit.

Release new version

Hi there!

Was wondering if it was possible if you could release a new version of alt-utils with all the merged pull requests on npm?

Thanks!

connectToStores - createClass is deprecated on react 16

React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Immutable onDeserialize/onSerialize override

Hi,

I think there is missconception while using ImmutableUtil.js. When overriding onSerialize/onDeserialize in store:

import immutable from 'alt-utils/lib/ImmutableUtils'

class MyStore {
  static config = {
     onSerialize: state => {
         ...    
     },
     onDeserialize: data => {
        ... 
    }
 }
  ...
}

and calling immutable(MyStore) it uses default onSerialize and onDeserialize methods defined in
immutable. It's possible to use in right way by calling immutable(MyStore, MyStore.config). Wouldn't it be nice to use the new methods to override defaults?