All RxJS modules are now imported individually, resulting in smaller bundle sizes in your applications.
This also means, the observables returned by FrintJS packages will not have the operators (like map
, filter
, etc) built in any more, and they need to be imported manually too if you need them.
We can take an example from frint-store
:
const todos$ = store.getState$()
.filter(state => state.showTodos === true)
.map(state => state.todos);
todos$.subscribe(todos => console.log(todos));
import { filter } from 'rxjs/operator/filter';
import { map } from 'rxjs/operator/map';
const todos$ = store.getState$()
::filter(state => state.showTodos === true)
::map(state => state.todos);
todos$.subscribe(todos => console.log(todos));
The syntax above is written using the bind-operator.
It could also have been written like this:
import { filter } from 'rxjs/operator/filter';
import { map } from 'rxjs/operator/map';
const todos$ = map.call(
filter.call(
store.getState$(),
state => state.showTodos === true
),
state => state.todos
);
todos$.subscribe(todos => console.log(todos));
All lodash imports have also been updated to import only the modules that are needed.
If you want to take benefit of reduced bundle size in your applications, then you can follow the same approach.
import _ from 'lodash';
_.isPlainObject({});
import isPlainObject from 'lodash/isPlainObject';
isPlainObject({});
If your application is set up in a way like this:
vendors.js
: All third party libraries (RxJS, Lodash, Frint, etc)app.js
: Your custom code for Frint App(s)Or you are loading the vendors directly from CDN via <script>
tags, then you risk loading some RxJS and Lodash modules twice.
To help avoid that, we are shipping a new frint-config
package that has information about the list of external dependencies, that you can map accordingly.
// webpack.config.js
module.exports = {
entry: __dirname + '/src/index.js',
output: {
path: __dirname + '/build'
},
externals: {
'lodash': '_', // window._
'rxjs': 'Rx', // window.Rx
// other libraries
'react': 'React',
'react-dom': 'ReactDOM',
},
}
// webpack.js
// all RxJS and Lodash imports
// are mapped to global `window._` and `window.Rx`
const externals = require('frint-config').externals;
module.exports = {
entry: __dirname + '/src/index.js',
output: {
path: __dirname + '/build'
},
externals: Object.assign(
{},
// RxJS and Lodash
externals,
// other libraries
{
'react': 'React',
'react-dom': 'ReactDOM',
}
),
}
thunkArgument
option has been renamed to deps
.
import { createStore } from 'frint-store';
const Store = createStore({
thunkArgument: {},
});
import { createStore } from 'frint-store';
const Store = createStore({
deps: {},
});
Deprecated and will be completely removed when v4.0 gets released. Use frint-data
instead.
import { createModel } from 'frint-model';
const Todo = createModel({
getTitle() {
return this.get('title');
},
setTitle(newTitle) {
this.set('title', newTitle);
},
});
const todo = new Todo({
title: 'Hello World',
completed: false,
});
const title = todo.getTitle();
todo.setTitle('Updated title');
import { Types, createModel } from 'frint-data';
const Todo = createModel({
schema: {
title: Types.string, // or, Types.string.required
completed: Types.bool, // or, Types.bool.defaults(false),
},
setTitle(newTitle) {
this.title = newTitle;
},
});
const todo = new Todo({
title: 'Hello World',
completed: false,
});
const title = todo.title;
todo.setTitle('Updated title');
Completely emptied, and v0.x
is no longer supported in any way.