Visual Studio Code plugins for creating data models and Mobx dart store.

Introduction

We usually create a data model that matches a server response JSON string. In this article we will look at how we can generate a data model quickly for Dart and Flutter (can also be used to generate models for other languages) from a sample JSON using visual studio code plugins and then convert the model to a Mobx dart Store. Mobx dart is an awesome application state-management library and you can read more about it at Mobx dart page.

Creating a data model from sample JSON.

To generate a data model from a sample JSON you would need to install the quicktype plugin for visual studio code from the following link

https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

Lets use the below JSON for this example

{"first":"string","last":"string","age":20,"address":{"line1":"string","line2":"string","city":"string","state":"string","zip":"string"}}

Create a new person.dart file for you data model on your flutter/dart project, then copy the sample JSON onto you clipboard. To generate the data model select the view > Command Palette > Paste JSON as Code. You will be prompted to enter a name for the model class. Once you enter a class name, (Person) the JSON from you clipboard is converted to a data model for dart. Since you named the file with a .dart extension vscode generated a data model for dart. If you do not have a file name extension you will be prompted to select the language to generate the model.

Generate serialization and deserialization functions.

The model generated earlier does not have the functions to deserialize and serialize the JSON. If you need these functions on you data model go to vscode Preferences > Settings and add the below to the settings.json.

“quicktype.justTypes”: false

with this when you copy a JSON and paste it to a file on vscode using the Command Palette > Paste JSON as Code and give your model a name (Person) it will generate the personToJson and personFromJson functions along with creating the model for you.

There is also an online version of quicktype at https://quicktype.io/.

Converting the data model to a Mobx dart Store

Install the replace rules plugin for vscode from below link

https://marketplace.visualstudio.com/items?itemName=bhughes339.replacerules

Edit your vscode settings.json to add below rules. More information is available on the plugin marketplace link above if you need to edit these rules.

"replacerules.rules": { "add mobx part file": { "find": "\n\\s(.*?)\\s(.*?)FromJson", "replace": "\npart '$2.g.dart';\n\n$1 $2FromJson" }, "import mobx dart": { "find": "import 'dart:convert';", "replace": "import 'dart:convert';\nimport 'package:mobx/mobx.dart';" }, "mobx serializer class name update": { "find": "return (.*?).fromJson", "replace": "return _$1.fromJson" }, "mobx factory class name update": { "find": "factory (.*?).fromJson", "replace": "factory _$1.fromJson" }, "create mobx abstract class": { "find": "class\\s*(.*?)\\s*{", "replace": "class $1 = _$1 with _$$$1;\nabstract class _$1 with Store {" }, "update constructor": { "find": "^\\s*(.*?)\\({", "replace": "_$1({" }, "update list to observable list": { "find": "List<(.*?)>(.*?);", "replace": "ObservableList<$1>$2;" }, "update Set to observable Set": { "find": "Set<(.*?)>(.*?);", "replace": "ObservableSet<$1>$2;" }, "update Map to observable Map": { "find": "Map<(.*?),(.*?)>(.*?);", "replace": "ObservableMap<$1,$2>$3;" } }, "replacerules.rulesets": { "convert to Mobx Store": { "rules": [ "add mobx part file", "import mobx dart", "mobx serializer class name update", "mobx factory class name update", "create mobx abstract class", "update constructor", "update list to observable list", "update Set to observable Set", "update Map to observable Map" ] } }

You can run individual rule or the entire rule set from
view > command pallette > Replace Rules:Run Rule
or
view > command pallette > Replace Rules:Run RuleSet

To make this even better add a keyboard shortcut to run the ruleset by going to code > Preferences > keyboard shortcuts and hit the {} option on the top right.

Edit keybindings.json to add below

{ "key": "ctrl+shift+M", "command": "replacerules.chooseRuleSet", "when": "editorTextFocus && !editorReadonly", "args": { "ruleSet": "convert to Mobx Store" } }

now after you generate model from quicktype convert it to Mobx Store by hitting ctrl+shift+M and enter.

you can then add the observable annotation to the fields you think need to be observable on the Mobx Store.

Hope this article provided some useful information to help speed creating of data model and Mobx Stores.

Cheers !

P.S — Known issue with converting the data model to Mobx Store with the above mentioned replace rules is when the file name has an underscore notation the part file name for the Mobx store is not generated with the underscore notation, rather has the camel case notation. This currently needs to be manually corrected until we can get the replace rules fixed to handle this.