curran curran - 3 days ago 5
Javascript Question

Mo.js alternative for object spread syntax

I'm following the mo.js tutorials and am working on the circle click burst portion.

const OPTS = {
fill: 'none',
radius: 25,
strokeWidth: { 50 : 0 },
scale: { 0: 1 },
angle: { 'rand(-35, -70)': 0 },
duration: 500,
left: 0, top: 0,
easing: 'cubic.out'
};

const circle1 = new mojs.Shape({
...OPTS,
stroke: 'cyan',
});

const circle2 = new mojs.Shape({
...OPTS,
radius: { 0 : 15 },
strokeWidth: { 30: 0 },
stroke: 'magenta',
delay: 'rand(75, 150)'
});


I'm using VSCode V 1.7.2 which is having trouble supporting the
...
syntax. I am also getting console errors in Chrome 54.0.2840.99. Is there an equivalent format I can use to get around this problem? I'm imagining something like
options: OPTS
would work, but I haven't seen anything in the documentation or on the internet to help me out.

Obviously I can just replicate the properties in OPTS in the circle declarations, but I want to know how to use the OPTS variable for simplicity.

I would tag mo.js, but I don't have enough reputation to create a new tag.

Thanks!

Answer

You can use Object.assign() instead:

const circle2 = new mojs.Shape(Object.assign({}, OPTS, {
  radius:         { 0 : 15 },
  strokeWidth:    { 30: 0 },
  stroke:         'magenta',
  delay:          'rand(75, 150)'
}));

Object spread is still a proposal, and the linter doesn't recognize the syntax. It doesn't mean it won't work. If you're using babel with stage 3 preset (or 0, 1, 2 presets), for example, it will work, even if vscode shows a warning. I'm not familiar with vscode, but you can probably add support for this feature.

Comments