Dealing with Puppet’s ignoreAdd removal

August 4, 2017 9:00 am Published by Leave your thoughts

Introduction:

Note: Palindrom is just the new version of PuppetJs. They have exactly the same function.

Starcounter’s view-model has a static predefined schema, usually described in PageName.json. Adding properties that are not present in this schema isn’t allowed in runtime. But this has happened before and slipped through the cracks to production apps. The reason this slipped was that palindrom-client (the component that hands the view-model object to the front-end) ignored any modifications to the schema and kept them on the client side. This means that you could set model.myNewProperty and use myNewProperty around the app without the server even knowing this property ever existed. This behaviour was a side-effect of ignoreAdd property of palindrom-client.

Now, this property and its side-effect are gone, and your additions to the view-model are tracked and sent to the server. And because this isn’t allowed, it causes a righteous exception on the server side.

How to fix that

Starcounter version 2.3.1.6826 is specially made to help you through this process; it has deprecated ignoreAdd and it warns you whenever a faulty patch (view-model modification) slips in your app. And by faulty I mean a patch that adds a property to your view model that isn’t predefined. The warning looks like this:

image

This warning means the app will break in newer Starcounter versions.

If you look at the first line:

/Workspaces/0/Navigator/CurrentPage/Navigator/NavigatorPage/Tree/children/0/children/1/parentId

This means you’ve added a parentId property to:

model.Workspaces[0].Navigator.CurrentPage.Navigator.NavigatorPage.Tree.children[0].children[1]

from the client side in runtime.

There are four ways to fix this; you can:

  • Pre-define them in your schema PageName.json on the server side. Doesn’t need explanation.
  • Localise (keep on the client side) all the properties listed in the warning.
  • Use unenumerable Javascript properties.
  • Use Palindrom patch filtering.

Localise properties

Well, instead of using the model to carry your baggage, create another object and use it for client-side variables.

Eg:
Assume you have:

<div height={{model.divHeight}} />

Instead of

model.divHeight = 500;

Use:

localModel = {};
localModel.divHeight = 500;

And

<div height={{localModel.divHeight}} />

Using unenumerable properties

This solution is particularly useful if you have local properties that you want to be part of remote objects, eg:
Server schema:

person = {
    name: 'Tommy',
    height: 180
}

And on the client side you need to add extra props related to the same object, like:

person.jobTitle = 'accountant'

You can use Javascript unenumarable properties. Like

Object.defineProperty(this.public, this.myPleaseKeepItLocalProp, {
    enumerable: false,
    value: 'This will not reach the server'
});

You can give this property an object value {} and all its children will not be synced with the server.

You can see an example of this in our KitchenSink app.

Using Palindrom patch filtering

If you’re using Starcounter 2.3, you can grab the running Palindrom instance by:

const Palindrom = document.querySelector('puppet-client').puppet;

If you’re using Starcounter 2.4, you can grab the running Palindrom instance by:

const Palindrom = document.querySelector('palindrom-client').palindrom;

Then you can follow the steps documented on Palindrom website to filter out the patches that are related to the properties you’d like to ignore.

If you have any questions, please create an issue in Palindrom repo on GitHub.

Categorised in:

This post was written by Omar Alshaker

Leave a Reply

Your email address will not be published. Required fields are marked *