How it Works
Single Item example
The above JSON will be converted to a in both es6 format and es5 format. Together with a related collection definition (shown below) you can quickly create models for items and collections for your app.
Notice that the
parent property of the Icon definition points to the
identifier property of the IconSet definition. Also notice the
__primaryKey meta-property indicates the
identifier property is the model's primary key.
npm i --saveDev @atomiclotus/json-to-js-model
json-to-js-model can figure out which properties your class should have, but it needs some help understanding how your classes work together. For this reason, you will need to add some very basic
meta properties to your JSON. Properties that begin with two underscores
__propertyName are private and used by
json-to-js-model to determine how to prepare or link the classes. There are only five (5) pre-defined private properties:
You can use your actual JSON data to create the classes or you can code up schemas that are identical to your JSON data but include only sample data.
Specifies the name of the primary key field such as ID, identifier, GUID, etc. This is not the value of the field, it is the name of the field.
Specifies the name of the parent field. The parent field connects items and sets (collections) via a primary key. The
__parent should be set on the single item and should point to the
__primaryKey of the collection.
Specifies the field on the collection which will contain the array of single items. This is the name of the field, not the value of the field.
__children should be set on the collection definition, not the item unless items can also be collections such as in a multi-level hierarchy.
The type can be either
collection and tells
Specifies the name of the class to be created.
Specifying Data Types
In most cases,
json-to-js-model can figure out what the intended type is, including dates (using
Date.parse()). If you encounter an error in
json-to-js-model's type detection, you can explicitly declare the type by appending it to the field (property) name with double colons
json-to-js-model will honor the declared type over all other considerations. It will also strip the type declaration from the final property name so you won't end up with
firstName::string in your JS class.
DO NOT add type delcarations to meta properties (those with two underscores at the beginning of the name).
NB : On the roadmap I plan to add complex type validations like
test, in particular the
definitions. The markup is very simple and easy-to-understand. It's just JSON with a few extra properties to tell the parser how you intend for your classes to be connected.
Example Type Declaraction
json-to-js-model also supports typed arrays as a property type. If you declare a property type as a typed array, for instance
string (meaning an array of strings), the utility will add the accompanying methods to add, remove, and check to see if an item exists in the array.
Notice that the
host properties specify a
array of strings and
array of objects as the value types. The class generated by
json-to-js-model will include
hasHost in addition to the retular getters and setters. What's more, the methods validate that the input arguments are the correct type. See Plugin.e6.js for a detailed example.
Example command-line usage:
json-to-js-model can only process a single file at a time. The final RC version will include support for multiple input files and directory inputs.
node cli.js ./path/to/item.json ./path/to/collection.json
Example import usage:
const jsonToJsModel = ;console;console;
That is a legitimate question and I wish I could write it all in ES6, but I primarily built this tool for my own needs building Adobe CEP (Common Extensibility Platform) extensions for Adobe Illustrator. Since CEP is an older technology, it does not always support ES6. Each Adobe product has a different extension API. Some use UXP (XD, for example) and others (most) use their own implementation of CEP which is based on CEF (Chromium Extension Framework).
So in order to be able to use the tool for my work building Illustrator and Photoshop extensions, I had to generate ES5 classes instead of ES6. This is, however, alpha code and the plan is to update the package itself to use only ES6 and to generate both ES6 and ES5 output.
- A fair amount of code is duplicated in paired collection and item classes.
- Methods like
generateUUID()do not belong in the resulting class. They were added to avoid dependencies. The solution is to output a utility file with the classes that will allow developers to either use the provided utility file, or roll their own. Another option is to use existing NPM packages for this functionality whenever possible.Everything is a trade-off and for now self-encapsulation is the best, simplest solution.
- Need to remove unnecessary dev files from package.
- Add complex type validations for things like email, url, etc.
- Add unit tests for this package and for resulting classes (some basic testing is in test.js already)
- Add recursive parsing to allow class hierarchies to be defined in a single JSON file.
- Add support for multiple file inputs via cli
- Add support for directories as input for cli