benvp/live_motion

Adding to project, README instructions

Opened this issue · 3 comments

I'm having trouble following the README to add this to a project.

Example:

import { createLiveMotion } from 'live_motion';
const { hook: motionHook, handleMotionUpdates } = createLiveMotion();

let Hooks = Object.assign({},
  SortableOption.hooks,
  Scrolling.hooks,
  AudioMp3.hooks,
  ...motionHook,
)

Errors on page load with JS console error: "Uncaught TypeError: Found non-callable @@iterator"

When I try expressing it more like how I expect it to be, it works.

let Hooks = Object.assign({},
  SortableOption.hooks,
  Scrolling.hooks,
  AudioMp3.hooks,
  motionHook
)

Just a simple update to README.md?

benvp commented

That's because ...motionHook is the JavaScript spread operator (...). In your example, you are using the Object.assign() function, which expects an object. The spread operator will spread all it's object properties into the current object, where it is spread into.

So basically the following are equivalent.

const Hooks = {
  ...SortableOption.hooks,
  ...Scrolling.hooks,
  ...AudioMp3.hooks,
  ...motionHook
}

const Hooks = Object.assign({},
  SortableOption.hooks,
  Scrolling.hooks,
  AudioMp3.hooks,
  motionHook
)

We can clarify this in the README, I just assumed this was common knowledge. But I may be biased here, as I have a strong JS background.

I used to have a strong JS knowledge... but I'm moving to heavily to LiveView because I don't want to maintain that up to date knowledge with JS. 🙂 Honestly, I've been trying to get out of JS-land for years. It feels like you have to run on a treadmill just to stay in place.

benvp commented

Haha, yeah. JS moved at a slow pace before transpilers started to show up. And now the wheel get's reinvented like twice a day. 😛