Improvements to the custom dev formatter

[sylvainpolletvillard]

Goals:

• [x] show undeclared props in the model instance formatter
• [x] show the prototype in the model instance formatter
• [x] distinct color code between model and model instances
• [x] improve formatting of Array, Set and Map models
• [x] show default values in the model formatter
• [x] specific style for private properties
• [x] specific style for constant properties
• [x] specific style for private and constant properties
• [x] specific style for sealed object models
• [x] color palette review
• [x] improve formatting of set,map and array models instances
• [x] bypass proxy to show the original object in logs when possible
• [x] show assertions in the model formatter
• [x] use extendable submodels definitions
• stay clean, non-bloated
• stay accessible and visually intuitive
• stay technically accurate

Current progress:

M = ObjectModel({
    _private: [Number],
    CONSTANT: Number,
    _PRIVATECONSTANT: Boolean,
    property: [String],
    arrayProp: ArrayModel(Number), 
    setProp: SetModel(String),
    mapProp: MapModel(String, Number),
    method: FunctionModel(Event).return(Boolean)   
})
.as("MyModel")
.defaults({
    _private: undefined,
    CONSTANT: 37.5,
    _PRIVATECONSTANT: true,
    property: "default",
    arrayProp: [],
    setProp: new Set(["root"]),
    mapProp: new Map([["root", 0]]),
    method(){ return false }
});
m = new M({
    property: 'test',
    undeclaredProp: 9,
    setProp: new Set(["a","b","c"]),
    method(e){ return !!e }
});
console.log(M, m);

[sylvainpolletvillard]

@gotjoshua what do you think ? I'm happy with the current design

[gotjoshua]

screenshot looks great! Looking forward to test it out (tomorrow morning i'll have time) Will you push it to npm?

[sylvainpolletvillard]

yes I'll publish a new version, probably minor

[gotjoshua]

Mostly perfect... found one thing:

let PlacesOMset=new SetModel([PlaceOM]) let clientSpaceOM = new SpaceOM( { name: 'clientSpacenew', places: new PlacesOMset(normalSet) } ); clientSpaceOM.undecProp='foo' clientSpaceOM.undecArrayWithDups=arrayWithDupObj; clientSpaceOM.undecSetFromArray=normalSet;

i am expecting places to show like your setProp: Set of SpaceOM > but it just shows as places: model and is not expandable:

[sylvainpolletvillard]

Ah, you mean expandable model definitions inline inside another parent model definition. It may be possible, but I'm gonna need to rewrite the whole model formatter (currently relying on the toString() behaviour that expands everything as a String)

[gotjoshua]

ouch. well i don't mean to be demanding, i just thought it would be easy enough because it already works for a normal Set, so why not for an instance of a SetModel...

Also down in the __proto Model - i would expect places: Set of PlaceOM > (that could be expandable or not at that depth)...

But yeah, I meant if a Prop is typed as a SetModel - when I fill that Prop with an instance of a SetModel - i expect that the SetModel will check if all items are instances of the allowed Object Type and i expect to be able to inspect the Set...

And I just notice now that in the __proto, constructor: ought to align to the top with >Model

[sylvainpolletvillard]

I'm afraid alignment is not something I can easily control. The custom formatter API is quite limited and very badly documented by Google.

I reused the toString logic of each model in the formatter to keep the formatter code small and avoid code duplication. But if there is a legitimate reason to customize this logic for the devtools, for example using the expandable structures, I can do that. The code size of the formatter shouldn't be a problem since you are not supposed to ship it in production.

[gotjoshua]

Fully understandable. I consider it a "nice to have" to show the expandable structures - but if I am stuck and need to see it - I can always toggle off the custom formatting for a hot second. So i wouldn't give it high priority.

[sylvainpolletvillard]

Further improvements to instance formatter for named models:

[sylvainpolletvillard]

Showing assertions in the model formatter:

[sylvainpolletvillard]

Expandable submodels, cc @gotjoshua

[sylvainpolletvillard]

Latest improvements have been released in v3.5.2 🚀