farwayer / mobx-decorators Goto Github PK

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"
  ]
}

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;

webpack build result:

⤵️ mobx-decorators/esm/utils/decorate.js

export function decorate(withArgs, args, decorator) {
  return withArgs ? decorator : decorator(...args);
                                          ^ Unexpected token: punc (.)
}
// ...

We can do:

Hi, if you can provide guidance on why mobx5(or really 6) is unsported, ill give a shot at updating the lib to work

• is there a way to support mobx 5 too?

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. 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"

I'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.

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.

Installing mobx-decorators from npm does not ensure pulling the typings from Github source folder
To add typings in npm build, need

1. set "declaration": true in tsconfig.json
2. set "types": "pathTo/index.d.ts" in package.json

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 😄

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?

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.

Error:

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.

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.

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?

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.

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.

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)```

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?