This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-05-08
Channels
- # announcements (5)
- # babashka (46)
- # beginners (206)
- # boot (1)
- # bristol-clojurians (1)
- # calva (9)
- # chlorine-clover (27)
- # cider (1)
- # clara (10)
- # clj-kondo (105)
- # cljsrn (2)
- # clojars (1)
- # clojure (104)
- # clojure-europe (6)
- # clojure-nl (2)
- # clojure-uk (18)
- # clojurescript (44)
- # conjure (10)
- # core-async (34)
- # cursive (28)
- # data-science (6)
- # datomic (14)
- # emacs (44)
- # events (1)
- # figwheel-main (1)
- # fulcro (13)
- # graphql (9)
- # helix (12)
- # kaocha (2)
- # meander (4)
- # off-topic (2)
- # pathom (1)
- # quil (1)
- # re-frame (21)
- # shadow-cljs (49)
- # spacemacs (6)
- # xtdb (8)
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
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 : )
Are there any examples of using helix and shadow-cljs to grab and use a 3rd-party hook from npm?
Yeah in my experience, 3rd party hooks just work out of the box with helix and shadow-cljs
useMachine from @xstate/react
@laheadle the only complexity here is understanding how to represent JavaScript objects using ClojureScript syntax
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"}}}}))