Fork me on GitHub
#helix
<
2020-05-08
>
Aron07:05:06

so, I updated https://github.com/ashnur/sierpinski-cljs-fiber-demo it follows the https://github.com/facebook/react/tree/master/fixtures/fiber-triangle quite closely, simpler at places. the scaling animation applied to the whole app https://github.com/ashnur/sierpinski-cljs-fiber-demo/blob/master/src/sierpinski/experimental.cljs#L75 through its props stops until https://github.com/ashnur/sierpinski-cljs-fiber-demo/blob/master/src/sierpinski/experimental.cljs#L42(`second` ) is updated. I tried to defer and everything, but nothing helps. Could be react bug, but I would suspect bug in my code first

Aron07:05:18

can't even type properly, but I added links with the edits to what I am talking about

Aron07:05:57

tbh, the performance is good enough for most real world applications, if it wouldn't be the point of the whole exercise to not get blocked animation, I wouldn't care : )

Lyn Headley11:05:40

Are there any examples of using helix and shadow-cljs to grab and use a 3rd-party hook from npm?

Aron12:05:36

should just work if you require it, no?

Aron12:05:04

which hook is this?

aiba19:05:01

Yeah in my experience, 3rd party hooks just work out of the box with helix and shadow-cljs

Lyn Headley22:05:43

useMachine from @xstate/react

lilactown22:05:52

@laheadle the only complexity here is understanding how to represent JavaScript objects using ClojureScript syntax

lilactown22:05:55

for instance, to use their example on the quick-start of their docs:

import { useMachine } from '@xstate/react';
import { Machine } from 'xstate';

const toggleMachine = Machine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});
would translate to:
(ns my-app.feature
  (:require
    ["xstate" :refer [Machine]]
    ["@xstate/react" :refer [useMachine]]))

(def toggle-machine
  (Machine
   #js {:id "toggle"
        :initial "inactive"
        :states #js {"inactive" #js {:on #js {"TOGGLE" "active"}}
                     "active" #js {:on #js {"TOGGLE" "inactive"}}}}))

lilactown22:05:40

these differences are extremely mechanical, and it’s a matter of learning how to use ClojureScript; helix doesn’t introduce any new rules

lilactown23:05:29

if you’re new to CLJS, feel free to post here or in #clojurescript when you get stuck and I’ll do my best to help out 🙂