Skip to content

Reactive props with SkateJS

Choose a tag to compare

View all tags
@trusktr trusktr released this 23 Oct 06:47

This release updates all props (position, size, rotation, etc) to be reactive by means of SkateJS instead of our own (not very organized) getters/setters. This cleans up the code a bit. For the most part, the changes are not noticeable and everything works the same as before on the outside.

breaking change

The only breaking changes are that camelCased props are now mapped strictly to dash-cased attributes.

This means the mountPoint property of a Node can also be set via the mount-point="" attribute but no longer via the mountpoint="" attribute, and same for sizeMode (use size-mode="", not sizemode="" or sizeMode="").

From now on any new props that are camelCased will map only to dashed-cased attributes.

Example code changes:

The following,

<i-plane id="plane" mountPoint="0.5 0.5"></i-plane>
<i-box id="box" sizemode="proportional literal"></i-box>

changes to

<i-plane id="plane" mount-point="0.5 0.5"></i-plane>
<i-box id="box" size-mode="proportional literal"></i-box>

The JavaScript props remain the same (camelCased):

plane.mountPoint = [0.5, 0.5]
box.sizeMode = ['proportional', 'literal']