zalmoxisus / mobx-remotedev Goto Github PK
View Code? Open in Web Editor NEWMobX DevTools extension
License: MIT License
MobX DevTools extension
License: MIT License
I encountered following error, using mobx-remotedev.
after removing mobx-remotedev from my module, no error was triggered. Here is my store (module)
// @flow
import remotedev from 'mobx-remotedev'
import {observable} from 'mobx'
class UI {
@observable preloading :boolean
constructor() {
this.preloading = false
}
startPreloading() {
this.preloading = true // <- line 30, thus error comes from here
}
}
export default remotedev(UI)
I also created StackOverflow question, regarding this topic, so if it isn't mistake on my part, it'd be appreciated, if you'd elaborate on how to resolve this gracefully.
In non-development enviornment, importing this library will have this line imported.
Line 6 in 2d9ea51
This breaks IE 11 because arrow syntax is not supported.
Similar to #29, I can't make it capture anything at all, even when I set enforceActions: 'never'
. I also need to import remotedev
using import remotedev from 'mobx-remotedev/lib/dev';
, it won't work using the normal import, even though process.env.NODE_ENV === 'development'
.
"mobx": "5.6.0",
"mobx-react": "5.4.2",
"mobx-react-form": "1.35.1",
"mobx-react-router": "3.1.2",
"mobx-remotedev": "^0.3.6",
๐ PR
Not sure if this is an issue in mobx, in RN or just in my code but here goes:
Basically I have a huge array of objects (with multiple properties) that I made observable in my Store. I do a single asynchronous fetch call which basically populates the variable.
When I plug mobx-remotedev in, the inspector logs multiple (seemingly infinite) "โ add" action types for each property in each object of the array. This causes the remote debugger to hang and if i plug locally to "react-native-debugger", the app also hangs.
Is this normal behavior for mobx? If so how do I prevent the debugger from crashing?
Thanks!
It uses jsan packages which shows warning like this.
require.js:122 Require cycle: node_modules/jsan/lib/index.js -> node_modules/jsan/lib/cycle.js -> node_modules/jsan/lib/utils.js -> node_modules/jsan/lib/index.js
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
is there anyway to get rid of such warning
class Test {
items = [];
@computed get filtered() {
return this.items.filter(() => true);
}
}
const test = new (remoteDev(Test));
Cannot read property 'filter' of undefined
I have seen some discussion that mobx-remotedev implements the "Redux DevTools Extension" API. So I'm curious whether the serialize
option can be passed in.
This doesn't seem to work:
const DevRootStore: typeof RootStore = remotedev(RootStore, {
remote: false,
global: true,
onlyActions: true,
serialize: {
replacer: (key, val) => key === 'root' ? 'root' : val;
},
});
Hello,
I'm trying to use mobx-remotedev with React Native and MobX-State-Tree but I don't know how to do.
I tried with export default remotedev(AppStore, { global: true, remote: true })
in my rootStore but I get an error Unhandled JS Exception: Cannot read property 'create' of undefined
cause I create the tree with const appStore = AppStore.create({ users: {} }, { logger: logger })
Can you orient me?
Thanks for readding
Are there any plans on supporting Mobx 4?
This is happening with the latest extensions of chrome 2.14.2
But this was working very good before two versions ago, How can I downgrade to other versions to see which one was working good?
When import remotedev from 'mobx-remotedev', I have error: "export 'isStrictModeEnabled' (imported as 'mobx') was not found in 'mobx'"
mobx: 5.9.0,
mobx-remotedev: 0.3.4
Thanks for your repo!
I tried RN today(react-native run-ios
). Have a question to ask:
Should skip button works when use mobx?
HaveF/mobx-react-native-template-remotedev: A react-native template using advanced react-native Architecture with mobx
RN 0.40, mobx 3
Thanks!
I use tsyringe
for dependency injection but as soon as I add the remotedev, it stops compiling.
@remotedev()
@injectable()
class MyStore {
}
Also try but no luck
@injectable()
@remotedev()
class MyStore {
}
I've recently updated some of the dependencies in my project (an Ionic / TypeScript app) and am now receiving compilation errors from mobx-remotedev.
[18:07:14] Error: ./node_modules/mobx-remotedev/src/spy.js Module parse failed: Unexpected token (79:30) You may need
an appropriate loader to handle this file type. | if (change.arguments && change.arguments.length)
action.arguments = change.arguments; | if (!onlyActions[objName]) { | schedule(objName, { ...action, type:
`โ ${action.type}` }); | send(); | schedule(objName, { ...action, type: `โ ${action.type}` }); @
./node_modules/mobx-remotedev/src/dev.js 2:0-24 @ ./node_modules/mobx-remotedev/src/index.js @
./src/stores/content-director-store.ts @ ./src/app/app.module.ts @ ./src/app/main.ts
Error: ./node_modules/mobx-remotedev/src/spy.js
Module parse failed: Unexpected token (79:30)
You may need an appropriate loader to handle this file type.
| if (change.arguments && change.arguments.length) action.arguments = change.arguments;
| if (!onlyActions[objName]) {
| schedule(objName, { ...action, type: `โ ${action.type}` });
| send();
| schedule(objName, { ...action, type: `โ ${action.type}` });
@ ./node_modules/mobx-remotedev/src/dev.js 2:0-24
@ ./node_modules/mobx-remotedev/src/index.js
@ ./src/stores/content-director-store.ts
@ ./src/app/app.module.ts
@ ./src/app/main.ts
at new BuildError (node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at callback (node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
at emitRecords.err (node_modules/webpack/lib/Compiler.js:265:13)
at Compiler.emitRecords (node_modules/webpack/lib/Compiler.js:371:38)
at emitAssets.err (node_modules/webpack/lib/Compiler.js:258:10)
at applyPluginsAsyncSeries1.err (node_modules/webpack/lib/Compiler.js:364:12)
at next (node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (node_modules/webpack/lib/Compiler.js:361:9)
[ERROR] An error occurred while running subprocess ionic-app-scripts.
I presume I need to update my webpack loader, but I'm not sure what is required in order to get version 0.3.6 building.
Here is the associated package.json
{
"name": "MyApp",
"version": "1.0.5",
"buildNumber": "69",
"author": "Me",
"homepage": "http://mysite.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@capacitor/android": "^1.2.1",
"@capacitor/cli": "^1.2.1",
"@capacitor/core": "^1.2.1",
"@capacitor/ios": "^1.2.1",
"@ionic-native/core": "~4.20.0",
"@ionic-native/native-audio": "^4.20.0",
"@ionic-native/screen-orientation": "^4.20.0",
"@ionic-native/splash-screen": "~4.20.0",
"@ionic-native/sqlite": "^4.20.0",
"@ionic-native/status-bar": "~4.20.0",
"@ionic/storage": "2.2.0",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-sqlite-storage": "^2.4.0",
"date-fns": "^1.29.0",
"es6-promise-plugin": "^4.2.2",
"gsap": "^2.0.2",
"hammerjs": "^2.0.8",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"mobx": "^5.6.0",
"mobx-angular": "^3.0.1",
"mobx-remotedev": "^0.3.6",
"ngx-date-fns": "^2.0.2",
"rxjs": "5.5.11",
"sharp": "^0.22.1",
"sw-toolbox": "3.6.0",
"three": "^0.99.0",
"web-animations-js": "^2.3.1",
"zone.js": "0.8.29"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.2",
"@types/hammerjs": "^2.0.36",
"@types/lodash": "^4.14.117",
"archiver": "^3.0.0",
"cheerio": "^1.0.0-rc.3",
"colors": "^1.3.2",
"mac-open": "^0.1.3",
"source-map-explorer": "^1.6.0",
"stats.js": "^0.17.0",
"typescript": "2.9.0-rc",
"yargs": "^12.0.2"
},
"description": "Ny app"
}
and webpack.config.js
/*
* The webpack config exports an object that has a valid webpack configuration
* For each environment name. By default, there are two Ionic environments:
* "dev" and "prod". As such, the webpack.config.js exports a dictionary object
* with "keys" for "dev" and "prod", where the value is a valid webpack configuration
* For details on configuring webpack, see their documentation here
* https://webpack.js.org/configuration/
*/
var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
const Dotenv = require('dotenv-webpack');
var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
var optimizedProdLoaders = [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: [
{
loader: process.env.IONIC_CACHE_LOADER
},
{
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.ts$/,
loader: [
{
loader: process.env.IONIC_CACHE_LOADER
},
{
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: {
sourceMap: true
}
},
{
loader: process.env.IONIC_WEBPACK_LOADER
}
]
}
];
function getProdLoaders() {
if (process.env.IONIC_OPTIMIZE_JS === 'true') {
return optimizedProdLoaders;
}
return devConfig.module.loaders;
}
var devConfig = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: '[name].js',
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [path.resolve('node_modules')]
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.ts$/,
loader: process.env.IONIC_WEBPACK_LOADER
}
]
},
plugins: [
new Dotenv({
path: '.env.dev', // load this now instead of the ones in '.env'
systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
silent: true // hide any errors
}),
ionicWebpackFactory.getIonicEnvironmentPlugin(),
ionicWebpackFactory.getCommonChunksPlugin()
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
var prodConfig = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: '[name].js',
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [path.resolve('node_modules')]
},
module: {
loaders: getProdLoaders()
},
plugins: [
new Dotenv({
path: '.env.prod', // load this now instead of the ones in '.env'
systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
silent: true // hide any errors
}),
ionicWebpackFactory.getIonicEnvironmentPlugin(),
ionicWebpackFactory.getCommonChunksPlugin(),
new ModuleConcatPlugin(),
new PurifyPlugin()
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
module.exports = {
dev: devConfig,
prod: prodConfig
}
hi,
I use global store as described in https://mobx.js.org/best/store.html#combining-multiple-stores
so I'm decorating class with @RemoteDev(/{ config }/) like this:
import ProjectsStore from './projects'
import OperatorsStore from './operators'
import StepsStore from './steps'
import remotedev from 'mobx-remotedev'
@remotedev(/*{ config }*/)
export class RootStore {
constructor() {
this.projectsStore = new ProjectsStore(this)
this.operatorsStore = new OperatorsStore(this)
this.stepsStore = new StepsStore(this)
}
}
export default new RootStore()
and creating instance of it that is provided to Provider which lead to error:
TypeError: _dec is not a function
Module../src/store/rootStore.js
src/store/rootStore.js:6
3 | import StepsStore from './steps'
4 | import remotedev from 'mobx-remotedev'
5 | @remotedev(/*{ config }*/)
> 6 | export class RootStore {
7 | constructor() {
8 | this.projectsStore = new ProjectsStore(this)
9 | this.operatorsStore = new OperatorsStore(this)
working application (without remotedev) is here https://github.com/lipt0n/state-POC/tree/master/mobxtest
Install chrome extension
use examples/counter, not works
update examples/counter/package.json
- "mobx-remotedev": "^0.0.1",
+ "mobx-remotedev": "^0.2.2",
- "jsdom": "^5.6.1",
- "mocha": "^2.2.5",
- "node-libs-browser": "^0.5.2",
+ "jsdom": "^9.5.0",
+ "mocha": "^3.1.0",
+ "node-libs-browser": "^1.0.0",
still not works. The browser is blank.
No error at terminal:
โ counter git:(master) โ npm start
> [email protected] start /Users/HaveF/Desktop/mobx/mobx-remotedev/examples/counter
> node server.js
==> ๐ Listening on port 4001. Open up http://localhost:4001/ in your browser.
webpack built d6f57debc790c97f8f46 in 3999ms
error at browser console:
Uncaught Error: [mobx] Invariant failed: Cannot obtain atom from [object Object]
Hi @zalmoxisus . @mweststrate mentioned the project.
I'm a fan :)
Just a few questions regarding handling mobx. In Mobx, stores are usually nested. I see the todo example in which remotedev()
is called on each nested store instance. Do you think this is optimal?
In my opinion, a useful option forremotedev
, one that covers most of the cases, will be to enable spying on all mobx observables or all nested ones at least without the need to wrap the nested stores.
Why? - because right now, I need to switch from a parent store to a child store to see a change which affects both. Correct me if I'm wrong here.
I have an app that works fine if I do not use/ reference mobx-remotedev
. I can even use "react-native Debugger" to connect in debug mode and have access to the console.
However, when I add mobx-remotedev
to a store, I get the error Cannot read property 'getDebugName' of undefined
// @flow
import remotedev from 'mobx-remotedev' // <-- new
import { observable, action } from 'mobx'
import Orientation from 'react-native-orientation'
import { Keyboard, NetInfo, AppState, BackHandler } from 'react-native'
@remotedev({ // <-- new decorator
name: 'AppStateStore',
remote: true,
global: true,
})
export default class AppStateStore {
@observable keyboard: any
@observable isConnected: boolean = true
...
}
error:
Cannot read property 'getDebugName' of undefined
handleException | @ | ExceptionsManager.js:63
-- | -- | --
ย | handleError | @ | InitializeCore.js:69
ย | reportFatalError | @ | error-guard.js:42
ย | guardedLoadModule | @ | require.js:143
ย | _require | @ | require.js:132
ย | (anonymous) | @ | format.js:27
ย | executeApplicationScript | @ | RNDebuggerWorker.js:1
ย | t | @ | RNDebuggerWorker.js:1
"dependencies": {
...
"react": "16.3.1",
"react-native": "0.55.3",
"mobx": "^5.0.3",
"mobx-react": "^5.2.3",
"mobx-remotedev": "^0.2.8",
},
Doesn't work with MobX 6:
[MobX] Cannot obtain atom from undefined
I'm getting this error on my webapp
Uncaught TypeError: Cannot read property 'action' of undefined
at Object.../node_modules/mobx-remotedev/lib/utils.js (bundle.js:38997)
at __webpack_require__ (bundle.js:660)
at fn (bundle.js:86)
at Object.../node_modules/mobx-remotedev/lib/spy.js (bundle.js:38814)
at __webpack_require__ (bundle.js:660)
at fn (bundle.js:86)
at Object.../node_modules/mobx-remotedev/lib/dev.js (bundle.js:38577)
at __webpack_require__ (bundle.js:660)
at fn (bundle.js:86)
at Object../store/EmployeeStore.js (bundle.js:109226)
using:
"mobx": "^3.1.9",
"mobx-remotedev": "^0.2.7",
I have the same packages in a react-native app and that seems to work fine
Any ideas?
Registering one store with remotedev works great:
import remotedev from 'mobx-remotedev/lib/dev'
class Store {
constructor() {
autorun(() => this.addAccountFB())
}
@observable currentAccountId = ''
@action addAccount(vals: Object): void {
const accountKey = this.refs.accounts.push().key
this.refs.base.update({
[`/accounts/${accountKey}`]: vals,
[`/currentAccount`]: accountKey
})
}
}
let store = new Store()
export default remotedev(store)
When I create another store and pass it into remotedev
, it doesn't show up in remotedev UI:
import remotedev from 'mobx-remotedev/lib/dev'
class FormStore {
@observable accountCreated = false
@action disableAccountCreationForm(): void {
this.accountCreated = true
}
}
let formStore = new FormStore()
export default remotedev(formStore)
Ideally I would like to be able to view the state of these two stores. But I think this is an even a more basic problem. When I unregister the first store (by not passing in the store instance to remotedev
), no store shows up as an option in the remotedev UI. In other words, I can't get that second store showing up in the remotedev UI and the remotedev chrome extension doesn't light up green.
I've restarted webpack, restarted the browser and I still can't get that second store to show up. Part of me thinks this is something silly I'm overlooking. But these two stores seem to be set up the same but one works in remotedev and one doesn't. Is there possible there is a config issue?
Thanks
I hope am doing this correctly:
const contactConfig = {
name:'Contact Store',
global:true,
filters: {
blacklist: ['add','splice']
}
};
The above blacklist array doesn't work at all. But if I do blacklist:['add'] or blacklist:['splice'] it works, but not with multiple values. I've also tried blacklist: [/add/,/splice/] and it still doesn't work. The same case applies with whitelist.
@zalmoxisus is it still alive?
Is it possible to use remotedev on observable Map? I tried remotedev(observable(new Map())
, it is visible in the Redux DevTools, but no actions or state is shown there.
Hi all,
I'm using the remote-redux devtools (electron) and I'm able to connect to my mobx store remotely (localhost:9000).
All observables are getting displayed in state, and the actions are getting listed. But, my state doesn't include "computed" get properties.
Just wanted to know if this is a bug, or if this is a limitation of this package? Can anyone see their computed properties in their redux devtools? Thank you!
Sad that this package is unmaintained, esp when the official Mobx one (https://github.com/mobxjs/mobx-devtools) is also unmaintained
I'm using https://github.com/500tech/ng2-mobx
How can I use this with angular 2?
Some code snippet please?
I just install this to React Native Debugger and I got
bundle.js:9 Uncaught RangeError: Maximum call stack size exceeded
was in this chuck of code
function i(e, t) {
var n = null;
return o(e, function(e) { // here
e.name === t && (n = e)
}, function(e) {
return e.children
}),
n
}
from this function
, function(e, t, n) {
"use strict";
function r(e) {
return e && e.__esModule ? e : {
default: e
}
}
function o(e, t, n) {
if (e) {
t(e);
var r = n(e);
if (r)
for (var i = r.length, a = 0; a < i; a++)
o(r[a], t, n)
}
}
function i(e, t) {
var n = null;
return o(e, function(e) {
e.name === t && (n = e)
}, function(e) {
return e.children
}),
n
}
function a(e) {
var t = arguments.length <= 1 || void 0 === arguments[1] ? {} : arguments[1]
, n = arguments.length <= 2 || void 0 === arguments[2] ? {
name: t.key || "state",
children: []
} : arguments[2];
if (!(0,
c.default)(e) && e && !e.toJS)
return {};
var r = t.key
, o = void 0 === r ? "state" : r
, u = t.pushMethod
, p = void 0 === u ? "push" : u
, f = i(n, o);
return null === f ? {} : ((0,
l.default)(e && e.toJS ? e.toJS() : e, function(e, t) {
var r = e && e.toJS ? e.toJS() : e
, o = {
name: t
};
if ((0,
s.default)(r)) {
o.children = [];
for (var i = 0; i < r.length; i++) {
var l;
o.children[p]((l = {
name: t + "[" + i + "]"
},
l[(0,
c.default)(r[i]) ? "object" : "value"] = r[i],
l))
}
} else
(0,
c.default)(r) ? o.children = [] : o.value = r;
f.children[p](o),
a(r, {
key: t,
pushMethod: p
}, n)
}),
n)
}
t.__esModule = !0,
t.default = a;
var s = r(n(147))
, c = r(n(758))
, l = r(n(760))
}
I have a weird problem. remotedev won't show any activity in the Chrome extension window if I enable MobX's useStrict
. It will correctly show the stores, but only with default values, and will never react to actions or changed observables. The app is working fine, and mobx-react-devtools
works fine as well. As soon as I remove useStrict(true)
it works perfectly.
My setup:
react-scripts-ts @ 2.6.0
(using TypeScript)Example store
// circle-chart.moby.ts
import remotedev from 'mobx-remotedev/lib/dev';
import { action, observable, runInAction } from 'mobx';
@remotedev
export class CircleChartStore {
@observable circleChartValue = 0;
@action
async fetchValue() {
const percentage = /* does async stuff here*/
runInAction('Update fetched Circle Chart data', () => {
this.circleChartValue = percentage;
});
}
}
Example React app
// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid } from './grid/';
import { Provider } from 'mobx-react';
import DevTools from 'mobx-react-devtools';
import { CircleChartStore } from './circle-chart.moby';
import { useStrict } from 'mobx';
useStrict(true);
function initStores(): AllStores {
const circleChartStore = new CircleChartStore();
/** more stores here **/
return { circleChartStore, /** more stores **/ };
}
const mobxStores = initStores();
ReactDOM.render(
<Provider {...mobxStores} >
<div>
<DevTools />
/** App here **/
</div>
</Provider>
,
document.getElementById('root') as HTMLElement,
);
I am running Redux as well, but haven't enabled the DevTools extension for my Redux store.
I HAVE to import remotedev using import remotedev from 'mobx-remotedev/lib/dev';
, it won't work using the normal import, even though I KNOW that process.env.NODE_ENV === 'development'
because I use that elsewhere in the app without failure. I don't know if this is related or not, but I thought that it might be nice to know.
Anyone have a working example?
I have an electron app using this boilerplate https://github.com/iRath96/electron-react-typescript-boilerplate, which already has redux configured in it. I am leaving it in just for connected-react-router. All my other state is using MobX. I am not using MST, currently.
This is my code:
import { observable } from 'mobx';
import remotedev from '@hlhr202/mobx-remotedev';
import { wallets, WalletKey } from './wallets';
import BaseWallet from './wallets/coins/BaseWallet';
const _applicationState = observable({
walletsLoaded: false,
currentWalletKey: Object.keys(wallets)[0] as WalletKey,
get currentWallet(): BaseWallet {
return wallets[this.currentWalletKey];
},
});
const applicationState: typeof _applicationState = remotedev(_applicationState, {
name: 'applicationState',
remote: false,
global: true,
});
export default applicationState;
When I open the redux devtools in electron, the only instance I see is the main window one which contains the redux state. Not seeing any other instances.
Given this base code:
export class CounterStore {
@observable counter: number = 0;
}
export class AppStore {
@observable readonly counter: CounterStore = new CounterStore();
}
I tried:
const appStore: AppStore = new remotedev(AppStore)();
export default appStore;
But it gives:
Uncaught TypeError: Cannot call a class as a function
So then I tried decorating the AppStore class itself as:
@remotedev
export class AppStore {
@observable readonly counter: CounterStore = new CounterStore();
}
const appStore: = new AppStore();
export default appStore;
And then it gives
Uncaught TypeError: Class constructor AppStore cannot be invoked without 'new' at new store (C:\VSProjects\SkirmishJs\server\node_modules\mobx-remotedev\lib\dev.js:48:67)
Is there a way to make it work using typescript classes?
PS: typescript types for the library would be cool too :)
I think it will be cleaner if we have decorator support:
@remotedev({ /* config */ })
export default class Counter {
@observable counter = 0
...
}
@zalmoxisus, if you agreed I'll make a PR. :)
remotedev
)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.