farwayer / mobx-decorators Goto Github PK
View Code? Open in Web Editor NEWSeveral helper MobX decorators (setter, observe, save, ...)
Several helper MobX decorators (setter, observe, save, ...)
Hi. Probably you can help. I'm stacking a bit with decorators in mobx
I’m trying to use them inside model like this:
//decorator itsel
function cancelIfError(target, name, descriptor) {
isObservable(target) // true
const originalFn = descriptor.value
return {
...descriptor,
value: function (args) {
if (target.store.state.hasError) return target.store.addNotification({
text: 'Fix error before continue',
type: 'warning'
})
originalFn.call(target, ...args)
}
}
}
but variable target is always initial form (before constructor) and then I try to call action, store is still undefined. Can you suggest any workarounds?
class Model {
constructor(store) {
this.store = store
}
@observable store
@cancelIfError
someAction() {}
}
Maybe it would be useful to add decorator like that to the library? "don't call function if condition"
Thank you for the useful set of helpers. Is there a reason bound
wasn't added to the @setter
decorator? As a simple setter, the bound
option allows for more reduction of boilerplate. Thoughts?
Everything else in my app works. The following breaks my build:
import { observable } from 'mobx'
import { setter } from 'mobx-decorators'
class MyStore {
@setter @observable test = false
}
export default new MyStore()
...with the following error message from Webpack...:
ERROR in ./client/stores/myStore.js
Module build failed: Error: Cannot find module '[path_to_project]/node_modules/mobx-decorators/build/webpack.development.config.js'
build/webpack.development.config.js
is where my dev Webpack config is located... not sure how it's ended up there.
When I build a project using create-react-app tool, I get the following error:
SyntaxError: Unexpected token: punc (.) [./~/mobx-decorators/lib/utils.js:12,0]
Hi, if you can provide guidance on why mobx5(or really 6) is unsported, ill give a shot at updating the lib to work
It appears that version 2.3.0 isn't installable from npm. What I found is that when using it I get errors that require can't resolve all of the implementation files (./setter
, ./toggle
, ./intercept
, etc). Looking at the contents of the tarfile for the 2.3.0 release versus the 2.2.4 release, both releases contains both src
and lib
directories (not sure if that was intentional, if it wasn't you probably want to put src
in your .npmignore
file), but while the 2.2.4 release has a transpiled version of every file in src also found in lib, the 2.3.0 release only has a transpiled version of index.js
and all the other files are missing.
I'm guessing that whoever is publishing the release has upgraded to npm v5. There were a lot of changes to the publish workflow in npm v5, and if I clone your repo and just run npm pack
to build a tarfile the same way publish would, I end up with an empty lib directory too.
If that is the problem, the good news is that it's a simple fix. If you are using npm v5 to publish, you just need to modify your package.json
file and change the publish
script to be named prepack
instead.
Hey @farwayer, my app throws an error about decorators in your source.
ERROR in ./~/mobx-decorators/index.js
Unexpected character '@' (11:6)
Since your module get placed inside my node_modules
when I install it (which babel is/should be excluding), you would have to transpile your source code before publishing your package to npm.
Otherwise, library looks very useful! Looking forward to try it out 😄
I'm trying to use the decorator:
import { allObservable } from "mobx-decorators"
@allObservable
export default class AppState {
public search?: string;
constructor() {
this.search = null as any;
}
}
const appState = new AppState();
I get this error in browser:
TypeError: __WEBPACK_IMPORTED_MODULE_9__core_AppState__.a is not a constructor
but build passes OK
My tsconfig:
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": [ "es6", "dom" ],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"esModuleInterop": true,
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"importHelpers": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"build",
"public",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts",
"src/semantic"
]
}
As per comments in mobxjs/mobx#927 - it would be nice to have a decorator that we could use to mark all class properties observables, rather than specifying one bye one. For compatibility reasons, that decorator should probably be called differently, like @observableClass, or @observableAll as Michel suggested in that issue.
Just updated to 5.0.5 and I now get this error:
Module not found: Error: Can't resolve 'mobx/package' in '/..../node_modules/mobx-decorators/esm/utils'
Any ideas?
Currently, it seems that properties that have default values are still set to null if nothing is loaded from storage. So the following code will throw an error, unless there is an array value already in storage.
....
@save
@obsevable myArray = [];
....
@computed get myMappedArray() {
return myArray.map(....)
}
It would be preferable to leave the default value alone if the storage returns nothing.
For no obvious reason, I'm getting an error with mobx-decorators when I try to build my project: partial error below. I've tried removing my node_modules and reinstalling, but the same error persist. Any ideas?
./node_modules/mobx-decorators/esm/decorators/save/save.js
Module not found: Error: Can't resolve '@babel/runtime/core-js/json/stringify' in '/Users/danielhowells/Sites/nolii/node_modules/mobx-decorators/esm/decorators/save'
resolve '@babel/runtime/core-js/json/stringify' in '/Users/danielhowells/Sites/nolii/node_modules/mobx-decorators/esm/decorators/save'
Parsed request is a module
using description file: /Users/danielhowells/Sites/nolii/node_modules/mobx-decorators/package.json (relative path: ./esm/decorators/save)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/danielhowells/Sites/nolii/node_modules/mobx-decorators/package.json (relative path: ./esm/decorators/save)```
Installing mobx-decorators from npm does not ensure pulling the typings from Github source folder
To add typings in npm build, need
"declaration": true
in tsconfig.json"types": "pathTo/index.d.ts"
in package.jsonI've set callbacks onInitialized
, onSaved
and onLoaded
but none of them was called after app has been hotreloaded so I think that store values were not restored from storage.
Maybe I have to force those values to be loaded somehow?
I see that store constructor is called but nothing else.
I've seen this on two different repos and it's related to the @babel/proposal-export-default-from
proposal that was added in 4.0.0
. Oddly, I added handling to the my webpack config to match your config and its still not working correctly.
webpack config after changes:
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-react',
['@babel/preset-env', { shippedProposals: true, }],
'@babel/preset-stage-1',
],
plugins: [
'react-hot-loader/babel',
'transform-decorators-legacy',
[
'transform-class-properties', { loose: true, },
],
'@babel/proposal-export-default-from',
],
My guess is that babel-loader
is the issue.
First, great set of decorators! Really happy I didn't need to implement @save on my own.
For those of us using ES6 classes, it'd be nice if the @save decorator would try to use target.constructor.name
as storeName if not provided as an option. Probably would be a one-line change, so let me know if you'd accept a PR.
Hi,
the @allObservable export is missing in the Typescript definition file index.d.ts
Something like:
export function allObservable(options?: ({only?: Array<string>, except?: Array<string>})): any;
Me and the current web dev are looking at and discussing different technologies to incorporate into the stack of a new project, so am trying to get an understanding and evaluate different ones. We find MobX with Inferno to be interesting, but are investigating the decorators situation — and also TypeScript — which leads me to wonder what is meant by "Don't work with TypeScript yet (sorry)". For us that have only the birds eye view yet on the techs. Where lies the problem? Irreconcilable syntax? Just an implementation issue?
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.