Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-07-09

Channels

#clojurescript
<
2020-07-09
>
MorongÖa06:07:20

I am trying to use storybook with clojurescript. Bellow is my code deps.edn 

{:deps {org.clojure/clojure {:mvn/version "1.10.1"}
        org.clojure/clojurescript {:mvn/version "1.10.741"}
        }}}
build.edn 
{:main hello-bundler.core
 :output-to "out/index.js"
 :output-dir "out"
 :target :bundle
 :bundle-cmd {:none ["npx" "webpack" "out/index.js" "-o" "out/main.js" "--mode=development"]
              :default ["npx" "webpack" "out/index.js" "-o" "out/main.js"]}
 :closure-defines {cljs.core/*global* "window"}} ;; needed for advanced
Than I have a story-ish button_stories.cljs 
(ns hello-bundler.button_stories
  (:require
    [react]
    ["@storybook/react" :refer (storiesOf)]))

(->
  (storiesOf "Button CLJS" js/module)
  (.add "Normal"))
In my /out/ dir I have a compiled js of button_stories.cljs. And it looks like this: 
// Compiled by ClojureScript 1.10.741 {:target :nodejs}
goog.provide('hello_bundler.button_stories');
goog.require('cljs.core');
goog.require('helix.hooks');
hello_bundler.button_stories.node$module$react = require('react');
hello_bundler.button_stories.node$module$_CIRCA_storybook$react = require('@storybook/react');
hello_bundler.button_stories.node$module$_CIRCA_storybook$react.storiesOf("Button CLJS",module).add("Normal");

//# sourceMappingURL=button_stories.js.map
Now when storybook loads my story I get this error 
ReferenceError: hello_bundler is not defined
    at Object.<anonymous> ()
    at Object../out/hello_bundler/button_stories.js ()
    at __webpack_require__
What is am I missing?

ejelome11:07:12

I think your namespace don't match the :main (the target namespace you want to compile, it complains that it can't find it), i.e. You use hello-bundler.core in build.deps , but your ClojureScript file uses hello-bundler.button_stories , Try: • changing the file tree to: src/hello_bundler/core.cljs • changing ns to: (ns hello-bundler.core

ejelome11:07:05

... and I'm not sure, but I think Clojure in general uses dashes inside the files (e.g. button-stories instead of button_stories) and uses dashes outside (like directories and file names, e.g. src/hello_bundler/button_stories.cljs )

Oliver George13:07:05

That’s my brief effort to use storybook

Oliver George13:07:44

You might find that issue only happens with :none optimizations

Oliver George13:07:16

Please share if your end up with a good setup :-)

ejelome11:07:01

I also have a deps.edn related question (sorry) So I am trying to replicate what I use in the terminal as config options in deps.edn, but it seems that the generated .js file logs some errors which breaks the program. Here's the CLI: 

clj -m cljs.main -o public/js/main.js -O advanced -c hello-world.core
Here's what I expected as equivalent deps.edn version: 
{:deps {org.clojure/clojurescript {:mvn/version "1.10.764"}
        reagent {:mvn/version "1.0.0-alpha2"}}
 :main "hello-world.core"
 :optimizations :advanced
 :output-dir "public/js/out"
 :output-to "public/js/main.js"}
Then I run it with: 
clj -m cljs.main -co deps.edn
The generated .js file from CLI works fine, however, the generated version from deps.edn options gives an error: 
main.js:314 Uncaught TypeError: Cannot read property 'mg' of undefined
    at Mb (main.js:314)
    at Tn (main.js:699)
    at Rn (main.js:698)
    at Nn.h.Me (main.js:718)
    at Function.Wn.A (main.js:710)
    at Nn.h.Le (main.js:718)
    at Function.Wn.j (main.js:710)
    at ep (main.js:761)
    at main.js:761
... and it doesn't seem to exit from the terminal (the terminal becomes unusable) My assumptions are: • I'm missing something (option in deps.edn or extra parameters in CLI or both) • I'm doing it wrong (it shouldn't be -co but something else or wrong keys in deps.edn) • and less likely, a bug from the CLI

jahson14:07:36

Is it working without -O advanced?

ejelome14:07:48

Yes, I think the problem are the temp compile directory and output path combination, I tried removing them and it works correctly, even with the deps.edn version

ejelome15:07:01

Currently, with or without destination path works with CLI version: 

$ clj -m cljs.main -d public/js/compiled -o public/js/main.js -O advanced -c hello-world.core # works
$ clj -m cljs.main -O advanced -c hello-world.core # also works
But with: 
$ clj -m cljs.main -co deps.edn # never works

ejelome15:07:35

This never works, and I have no idea why: build.edn: 

{:main "hello-world.core"
 :optimizations :advanced
 :output-dir "public/js/compiled/"
 :output-to "public/js/main.js"}
CLI: 
clj -m cljs.main -co build.edn

ejelome18:07:39

So @alexmiller (didn't want to disturb him here) helped me to go to the right direction (as I misunderstood deps.edn), so here was the question and the answer(s) about the problem, in case others encounter the same problem, here's the Q&A: https://ask.clojure.org/index.php/9439/proper-deps-edn-config-with-co-option-of-cljs-main?show=9444#a9442 tl,dr; The CLI: 

$ clj -m cljs.main          \
      -d public/js/compiled \
      -o public/js/main.js  \
      -O advanced           \
      -c hello-world.core
Is equivalent to: build.edn 
{:main "quick-start.core"
 :optimizations :advanced
 :output-dir "public/js/compiled"
 :output-to "public/js/main.js"}
... and executed with: 
$ clj -m cljs.main  \
      -co build.edn \
      -c

Kurt Sys19:07:56

I have an application which stores the raw output of draftjs (which is a json object) as transit in a database. Another, non-clj application needs to read the data into json (so, back to json). I have found the transit implementation in js (transit-js) and a edn parser (jsedn), but that doesn't seem to work out fine: For example, this is stored in the db: 

["^ ","blocks",[["^ ","key","9v8g4","text","hier","type","unstyled","depth",0,"inlineStyleRanges",[],"entityRanges",[],"data",["^ "]],["^ ","key","35h7e","^1","","^2","unstyled","^3",0,"^4",[],"^5",[],"^6",["^ "]],["^ ","key","2oeva","^1","","^2","unstyled","^3",0,"^4",[],"^5",[],"^6",["^ "]],["^ ","key","9dr0m","^1","","^2","unstyled","^3",0,"^4",[],"^5",[],"^6",["^ "]]],"entityMap",["^ "]]
and it should translate into something like: 
{
   "entityMap": {...},
   "blocks": [{...}, {...}, ...]
}
When I read the data from tansit to json (`transit.reader("json").read(...)`): 
{
  _entries: [
    'blocks',
    [ [Object], [Object], [Object], [Object] ],
    'entityMap',
    {
      _entries: [],
      backingMap: null,
      hashCode: -1,
      size: 0,
      accesses: 0
    }
  ],
  backingMap: null,
  hashCode: -1,
  size: 2,
  accesses: 0
}
which looks more like a json representation of a clj(s) map When I parse the data with the edn parser: 
Vector {
  val: [
    '^ ',
    'blocks',
    Vector { val: [Array] },
    'entityMap',
    Vector { val: [Array] }
  ]
}
which also gets close, but not really what it should be. I am missing something, but I'm not sure what. (I can't use cljs in this case - in cljs, it looks like (clj->js (t/read (t/reader :json) ...)) , so I seem to miss a good js implementation of clj->js ) Any one knows what I'm missing here?

p-himik08:07:59

Both outcomes are expected. Reading Transit with transit-js - you will get a Transit data structure simply because there's no 1-to-1 mapping of JS data structures to Transit data structures. E.g. you cannot have a meaningful {["a"]: 1} in JS, but in Transit it's a perfectly fine thing. If you know the needed keys in advance, you can just call .get(key) on the object returned by .read(). And reading Transit with EDN just doesn't make sense - those are two completely different formats.

p-himik08:07:24

You can get some examples of using Transit and even experiment with them at http://cognitect.github.io/transit-tour/

Rabie20:07:12

Hello, So I'm trying to learn how to use react with clojure-script. I found how to convert the npm imports statements but I don't know how to create a javascript variables and use them in a function to create rendering. So the javascript is like this 

import {useSpring, animated} from 'react-spring'

function App() {
  const props = useSpring({opacity: 1, from: {opacity: 0}})
  return <animated.div style={props}>I will fade in</animated.div>
}
Does anyone know if it is possible to express it in clojurescript? Thank you very much for your help

MorongÖa02:07:19

Hi. This definitely possible. What library have you chosen for react development?

jamesleonis22:07:44

There are several Clojurescript libraries that wrap React in much nicer interfaces. Here's one that's widely used. https://reagent-project.github.io/

jamesleonis22:07:41

The repo also has several examples, including a TODO MVC implementation https://github.com/reagent-project/reagent/tree/master/examples

adam23:07:44

How can I say $('#select1 option:selected') in CLJS/Google Closure?

noisesmith23:07:19

literally it would be (js/$ "#select1 option:selected") I think, but most people aren't using jquery these days

adam23:07:11

I am not using it either. I meant it as an example of what I am trying to achieve in CLJS/Google Closure

adam23:07:10

But now that you taught me how simple it is to access jQuery… 😄

noisesmith23:07:47

haha - if you had the equivalent goog call the translation would be just as simple, I just don't know that call off the top of my head

lilactown23:07:06

use document.querySelectorAll?

lilactown23:07:19

(js/document.querySelectorAll "#select1 option:checked") since I think :selected is a jQuery-ism

adam00:07:13

It works

adam23:07:55

Thanks, will give it a try