mobxjs / mobx-preact Goto Github PK

It would be nice to add a depreciation notice once preact X gets released as it should be possible to just use mobx-react.
Or am I wrong to assume that it is not needed anymore?

Hooks.

Hi, do you need maintainers? I don`t mind to work with this project.
For instance i want provide typescript support, what do you think?

I'm busy trying to move over from React to Preact and aliasing this library. But it seems this is not fully compatible with the latest interface of the mobx-react library, as the new @inject syntax is not working, for injecting stores into a component.

And I just finished actually implementing the inject syntax on all my components because the old way, inside @observer was deprecated...

the sample code to reproduce the issue:
https://codesandbox.io/s/wonderful-edison-147v9

What should I do if I want inject one store and use it by context?

The module on npm is empty. no javascript file defining anything

In my app I use preact (preact-compat) & mobx-preact, in development mode (webpack-dev-server) everything works fine but when yarn build & yarn start my app, I get the following error message.

Anyone any ideas?

Why have the Typescript bindings been omitted from the project as the README says?

Does it still include the typings?

So, I am using preact-router for routing and I have a file routes.js looks like this:

module.exports = [
    {
        path: '/',
        component: () => import('./component').then(module => module.default)
    },
    {
        path: '/route',
        component: () => import('./second_one').then(module => module.default)
    },
]

Then in router.js I have following setup:

import { h, Component } from 'preact'
import PreactRouter from 'preact-router'

import {
	AsyncRoute
} from 'utils'

// the file above
import routes from './routes'

export default class Router extends Component {

	render = () => (
		<PreactRouter>
			{routes.map(route => <AsyncRoute path={route.path} loadFunction={route.component} />)}
		</PreactRouter>
	)
}

and then component.js like this:

import { h } from 'preact'
import { inject, observer } from 'mobx-preact'

export default inject('myStore')(observer(({ myStore }) => (
    <div>{myStore.name}</div>
)))

The problem now is that when I update name in myStore the observer doesn't get fired and component.js doesn't update. It does however update in two cases:

1. I inject the same variable into router.js and cause this component to re-render on change.
2. I remove the routes.map() from router.js and just put the components in there.

So to me it seems like the observer somehow doesn't catch changes when the component was injected by the map() function. Option one is just stupid and option two is rather unpractical because in reality I have many, many more routes in routes.js and this is much cleaner.

Guessing this is an incompatibility with latest version of mobx

Hi,
I've this error and I don't know how to solve it:
Uncaught TypeError: Cannot read property 'get' of undefined mobx.module.js.618

var computedDecorator = createPropDecorator(false, function (instance, propertyName, descriptor, decoratorTarget, decoratorArgs) { HERE -> var get = descriptor.get, set = descriptor.set; // initialValue is the descriptor for get / set props // Optimization: faster on decorator target or instance? Assuming target // Optimization: find out if declaring on instance isn't just faster. (also makes the property descriptor simpler). But, more memory usage.. // Forcing instance now, fixes hot reloadig issues on React Native: var options = decoratorArgs[0] || {}; asObservableObject(instance).addComputedProp(instance, propertyName, __assign({ get: get, set: set, context: instance }, options)); });

I'm using preact with mobx/mobx-preact: my package.json:
{ "name": "React-in-WP", "version": "1.0.0", "license": "MIT", "main": "src/index.js", "scripts": { "dev": "cross-env BABEL_ENV=default webpack --watch", "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack -p" }, "devDependencies": { "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "@wordpress/babel-preset-default": "^1.2.0", "autoprefixer": "^9.6.1", "babel-core": "^6.26.3", "babel-eslint": "^8.2.3", "babel-loader": "^7.1.4", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-react-jsx": "^6.24.1", "classnames": "^2.2.6", "cross-env": "^5.1.5", "css-loader": "^3.1.0", "eslint": "^4.19.1", "extract-text-webpack-plugin": "^3.0.2", "mobx": "^5.13.0", "mobx-preact": "^3.0.0", "node-sass": "^4.9.0", "postcss-loader": "^2.1.5", "preact-places-autocomplete": "0.0.3", "preact-router": "^2.6.1", "raw-loader": "^0.5.1", "react": "^16.8.6", "sass-loader": "^6.0.7", "style-loader": "^0.19.1", "webpack": "^3.0.0", "webpack-cli": "^3.3.6" }, "dependencies": { "preact": "^8.4.2", "run-script": "^0.1.1" } }

and my babel.rc:
{ "plugins": [ ["transform-react-jsx", { "pragma": "h" }], "transform-class-properties" ] }
thanks

sorry for the indent, I don't know why github does not display my indentation. repo https://github.com/zoraneus/preact-mobx-reproduction-err

I have tried to put it in code sandbox but the error does not occur.

Actual preact components uses the following signature.

render (props, state, context){
}

but initialRender and reactiveRender only takes nextProps, nextContext, which leads to pass incorrect arguments to components.

There is a memory leak when using an observer, this appears to be caused by mixinLifecycleEvents not patching componentWillUnmount resulting in the reaction never being disposed.

After adding patch(target, 'componentWillUnmount'); the memory leak went away.

Is there any reason it was omitted, or can it be added in?