Fork me on GitHub
#fulcro
<
2023-09-22
>
Jakub Holý (HolyJak)23:09:37

@tony.kay I am trying to find out whether it would be possible to make Fulcro compatible with #sci, so that we could have interactive code examples in web pages. The main problem is of course rewriting macros to sci macros. One thing I noticed in the c.f.f.components ns is that there is a bunch of #?(:clj ...) functions, where the :clj-only condition seems unnecessary - such as build-and-validate-initial-state-map and all specs. Why are they clj-only? I believe having them in cljs wouldn’t harm code size b/c the DCE would remove them anyway, no? Thx! (BTW, build-and-validate-initial-state-map creates local bindings kv-pairs, state-map which seem unused?!)

tony.kay04:09:48

In general macros can leverage things that only exist on the JVM, and since I was not trying to support bootstrapped clojurescript running in a brower I didn’t want to fool with it. Specs side effect and cannot be DCE’d. It’s been a while, so there may be other reasons as well. Does sci have its own reader conditionals? Could add a new namespace for sci-specific components.

👍 1
Jakub Holý (HolyJak)19:09:18

I don’t think it does have reader conds. I will check. Keeping specs in clj only makes sense then. But I could make a PR that removes #?(:clj from those fns where it seems unnecessary, if you are ok with it. Then you can check what it would look like…

tony.kay20:09:54

hm. I’d almost rather make a sci-components ns and then use raw.components and components via require, and code anything in that new ns that is needed by sci. I’m concerned about eventually wanting to do bootstrapped clojurescript and the mess that would make if you’re already doing sci-based stuff….because I suspect you’re going to need things like the specs since the macro uses those for syntax parsing.

Jakub Holý (HolyJak)23:09:45

I didn’t believe it would be possible, but it is. With some work, #sci makes it possible to write Fulcro app in a <texarea> and get it rendered next to it 😻 Interactive Fulcro examples are no more an impossible dream! (Though I am sure my impl has a bunch of bugs, and number of limitations.) (https://gist.github.com/holyjak/9f8caa26fdce8b28afe21c08457cc06d)

🎉 8
🤯 1
Jakub Holý (HolyJak)11:09:06

FYI here is the https://github.com/babashka/sci.configs/pull/30. Help needed with fixing the test, checking what works and does not, and exposing more namespaces 🙏

Jakub Holý (HolyJak)11:09:10

My main problem now is that

(defsc Root [this props] (dom/h3 \"Hello from Fulcro!\"))
(dom/render-to-str ((comp/factory Root) {}))
complains about > A Fulcro component was rendered outside of a parent context. This probably means you are using a library that has you pass rendering code to it as a lambda. Use with-parent-context to fix this. See https://book.fulcrologic.com/#err-comp-rendered-outside-parent-ctx which makes sense, but https://book.fulcrologic.com/#_code_splitting_and_server_side_rendering doesn’t seem to do anything about it.

1
Jakub Holý (HolyJak)16:09:20

Ok, the correct way to do this ☝️ is

(comp/with-parent-context (app/fulcro-app)
           (react-dom-server/renderToString ((comp/factory Root) {})))
which works for me in normal cljs, not in SCI, I am still getting the error there. Presumably, my with-parent-context ported to sci is incorrect / uses dyn. vars incorrectly. Though printing comp/*app* inside the with-parent-context’s binding has the expected value… 👀 Update: so inside sci.configs.fulcro.component and the sci-rewritten with-parent-context macro there, the value of comp/*app* is as expected. but inside comp/factory it is nil for some reason, so the two places see different dyn variable [value] …

Jakub Holý (HolyJak)16:09:52

@U04V15CAJ when you have time, I would very much appreciate your advice. It seems to me that I do not know how to change a dyn variable from a sci macro so that the original code sees the changed value - as mentioned in the last paragraph of my prev. message, inside the macro I see the correct value, but nil in the underlying code. https://github.com/babashka/sci.configs/pull/30/files#diff-ca5cee30bf29446e9e4fd1e421a326e0bd8cb6a0207fc7c5a431192eded70333R24-R27 of the :sci/macro I am calling, with (binding [com.fulcrologic.fulcro.components/*app* ...] . The value I set here is not visible in https://github.com/fulcrologic/fulcro/blob/125884ba94f8c0bca7c90ddff0268c607bf70415/src/main/com/fulcrologic/fulcro/components.cljc#L752 I call from the binding’s body 🙏

borkdude16:09:06

Dynamic vars need some extra work. Check out sci/binding etc. Perhaps there is an entry in the Raeadne about this

Jakub Holý (HolyJak)16:09:13

There is but I didn't understand it 😅 sci/binding seem not to be available inside my :sci/macro And I am not sure how normal dyn vars and Sci dyn vars relate to each other. But no hurry! I've other stuff to do now, and you have your travelling

borkdude17:09:13

I’ll set a reminder for Monday in case I forget. You can check out the sci config for Clojure pprint in bb itself which deals with env vars. The issue is basically that host functions don’t see the bindings in Sci itself

🙏 1
Jakub Holý (HolyJak)09:09:04

I have found a workaround 🎉 (making sure the binding is not in code evaluated by sci, but called by sci

Jakub Holý (HolyJak)11:09:32

@U04V15CAJ I have tried to clarify the matter with sci and dyn vars. I am sure it is not perfect, but perhaps better for a newcomer like me https://github.com/babashka/sci/pull/901/files

Jakub Holý (HolyJak)19:09:21

New milestone unlocked: Fulcro app rendered by #sci , this time from a beautiful CodeMirror editor with NextJournal-s clojure-mode: (Blog post with instructions coming eventually :))

🎉 8
tony.kay04:09:51

Cool. Be interested to see it evolve!

thosmos19:10:24

Wow! Good work!

🙏 1