marvs marvs - 1 month ago 31
React JSX Question

How to access mobx object in webpack bundle(js) from external

I'd like to access an object (i.e. MOBX object) which is declared in a JSX file. I used webpack to bundle all my jsx files in one output file (bundle.js). But I want to access some functions and objects in the bundle file. How we can do this?

My webconfig.config.js

var webpack = require('webpack');
var path = require('path');

var buildDir = path.resolve(__dirname, './wwwroot/scripts');
var scriptsDir = path.resolve(__dirname, './Scripts');

var config = {
entry: {
main: scriptsDir + '/app'
},
output: {
path: buildDir,
filename: 'bundle.js',
libraryTarget: 'var',
library: 'MyLibrary'
},
externals: {
},
debug: true,
// Important! Do not remove ''. If you do, imports without
// an extension won't work anymore!
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
// Enable caching for improved performance during development
// It uses default OS directory by default. If you need
// something more custom, pass a path to it.
// I.e., babel?cacheDirectory=<path>
loaders: ['babel?cacheDirectory'],
exclude: /(node_modules)/
}
]
}
};

module.exports = config;


JSX file

var React = require('react');
var ReactDOM = require('react-dom');
var mobx = require('mobx');
var mobxReact = require('mobx-react');
var mobxDevtools = require('mobx-react-devtools');

mobx.useStrict(true);

var todoFactory = function (title) {
var todo = {
id: Math.random(),
toggleStatus: mobx.action(function toggleStatus() {
todo.finished = !todo.finished;
})
};
mobx.extendObservable(todo,
{
title: title,
finished: false
}
);
return todo;
};

var todoListFactory = function () {
var todoList = {
addTodo: mobx.action(function addTodo(todo) {
todoList.todos.push(todo);
}),
addTodos: mobx.action(function addTodos(todos) {
todoList.todos = todoList.todos.concat(todos);
})
};

mobx.extendObservable(todoList, {
todos: [],
unfinishedTodoCount: function () {
return todoList.todos.filter(function (todo) {
return !todo.finished;
}).length;
}
});

return todoList;
};

var TodoListView = mobxReact.observer(function TodoListView() {
var devtools = mobxDevtools ? React.createElement(mobxDevtools.default) : null;

var listItems = this.props.todoList.todos.map(function (todo) {
return React.createElement(TodoView, { todo: todo, key: todo.id });
});

return React.createElement('div', null,
devtools,
React.createElement('ul', null, listItems),
'Tasks left: ' + this.props.todoList.unfinishedTodoCount
);
}
);

var TodoView = mobxReact.observer(
React.createClass({
displayName: 'TodoView',
render: function () {
var todo = this.props.todo;
return React.createElement('li', null,
React.createElement('input', {
type: 'checkbox',
checked: todo.finished,
onClick: this.selectHandler
}),
todo.title
);
},
selectHandler: function () {
this.props.todo.toggleStatus();
}
})
);

var store = todoListFactory();

store.addTodos([todoFactory('Get Coffee'), todoFactory('Write simpler code')]);
store.todos[0].toggleStatus(true);

var Practice = React.createClass({
render: function () {
return (
<div>
<TodoListView todoList={store} />
</div>
);
}
});

module.exports = Practice;


My goal is to be able to access the store object externally. Something like 'MyLibrary.store'. How could this be possible?

Thanks,
Marvin

Answer

1) if the store object is not defined in an entry point file, then in an entry point you should import and export the store object.

// entry_point.js

...
var store = require('./file_with_store').store;
exports.store = store;

after that, since you have added library: 'MyLibrary' property to the webpack config, you can access MyLibrary.store

2) if the store object allready in entry point file, then just add:

exports.store = store;