altjs / utils Goto Github PK
View Code? Open in Web Editor NEWA collection of utils for alt.js
A collection of utils for alt.js
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
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)
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.
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?
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.
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';
this dependency is used here
https://github.com/altjs/utils/blob/master/src/DispatcherDebugger.js#L3
This configuration issue prevents from using Debugger view
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!
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?
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
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.
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.
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.
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.