I'm trying to use this library https://rete.js.org/#/, but seems like it depends on some webpack magic to work, when I try to require it I get

js.js:133 Uncaught ReferenceError: regeneratorRuntime is not defined
    at rete.common.js:418
    at rete.common.js:415
    at Object.shadow$provide.module$node_modules$rete$build$rete_common (rete.common.js:396)
    at Object.shadow.js.jsRequire (js.js:122)
    at Object.shadow.js.require (js.js:158)
    at com.wsscode.wise.client.ui.rete.core.js:5

is there syntax for specifying a local cljs dependency for a shadow-cljs project similar to lein-install?

@mss not directly, but you can add directly to the source-paths, or use deps.edn, its local deps support works with shadow

will do, appreciate the help

https://github.com/luminus-framework/luminus-template/issues/436

hello, i’ve a question that lein shadow doesn’t read the ~/.shadow-cljs/config.edn ?

@haiyuan.vinurs lein-shadow is a 3rd party project I have no control over and no it does not read that config

I assume you mean for it to pick up the :dependencies listed there?

yes

you'll need to list that in the project.clj

yes, i’ve tried that and it works ok, so i found the problem, so i ask this question

sorry i don’t know this is a 3rd party project, i’ll look at it

https://gitlab.com/nikperic/lein-shadow

I recommend using the regular shadow-cljs cmd. you only lose functionality by moving to lein-shadow and gain absolutely nothing (IMHO)

👌

What would be the right way to do dev dependencies in shadow-cljs without leiningen?

And dev source paths

not supported

If I put them under :dependencies would that bloat my production build?

no, :dependencies have no affect on the build size

the build decides what ends up in it not the classpath

Okay thanks 🙂

@caleb.macdonaldblack when building :browser targets always check the build reports https://shadow-cljs.github.io/docs/UsersGuide.html#_build_report

Does a Build Report compile the app or does the app need to be compiled first?

@kenny it'll do a release build. no need to compile it yourself

Cool. Can it use an existing build to run faster?

no

well. it'll use the cache of release builds yes

so yeah doing a release first will actually make the build report faster

but might actually not

Hmm. Just added it to my CI and it actually takes 1s longer to run than the release build.

what can i pass to (shadow/release) to tell it to use simple/none optimizations?

hmm yeah the build reports do kinda require their own thing since they adjust some settings to get all the necessary info

and those may actually hurt the normal release cache

@lilactown :none is not possible. otherwise just set the usual :compile-options {:optimizations :simple}

so (shadow/release {:compile-options {:optimizations :simple}}) ?

if you want to do it via release options and not in the config itself use (shadow/release :build-id {:config-merge [{:compiler-options ...}]})

ah k

Gotcha. Not a big deal. Was trying to figure out if it should go in it's own build step or just be added to the release step given it'd run fast.

@kenny one setting that must be set is :compiler-options {:source-map true}

Seems like a very useful tool though. Thanks! Will always output one as a build artifact. Great to compare build sizes after adding deps.

so that would invalidate the cache since that isn't true by default for release builds

When would it be useful to have that setting be true for release builds?

if you want source maps 😉

I guess you'd only want them in a release build for debuggery?

that depends .. some people always use them with things like sentry or so

Ah, that's a good idea.

hrm annoying. datascript isn’t working for me in advanced optimizations, but works in simple 😧

datascript requires externs because its written incorrectly

>_<

We use datascript in our released app and it works.

https://github.com/tonsky/datascript/pull/216

I didn't look into why they are required but they are ...

very annoying. wish they had this in the manual.

do I need to create my own externs or can I just list there’s?

well the externs are bundled

just via :foreign-libs which shadow-cljs doesn't support

just include :externs ["datascript/externs.js"] in your :compiler-options

or find out what is getting renamed and fix it 😉

We use FontAwesome's React package in our app. After generating a build report, I see the icons deps take up nearly 30% of the build size. We explicitly import icons which supposedly allows tree shaking to work. I'm guessing that however FontAwesome expects tree shaking to work is not the same way it works in shadow-cljs? Is there way to make it work or no dice?

I don't know the fontawesome package but if you require separate files it should work

if you use :refer (That Icon) then that has no effect

that'll always import all

Is that the same as this?

(:require
  ["@fortawesome/free-solid-svg-icons" :as solid-icons])
solid-icons/faCircle

that imports all

["@fortawesome/free-solid-svg-icons" :as solid-icons] only that matters. there is no DCE for npm packages

but all the icons are in that file so no luck

Ah. Looks like FontAwesome expects you to use Webpack 2.

This might do it: https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking#deep-imports

that isn't supported

can't support babel/webpack specific hacks

oh actually that would work yes

hmm actually I have no clue

the file does exist

To clarify, when I do this

(:require
  ["@fortawesome/free-solid-svg-icons" :as solid-icons])

(:require
  ["@fortawesome/free-solid-svg-icons/faCoffee" :as fa-coffee])

yes

["@fortawesome/free-solid-svg-icons/faCoffee.js" :as fa-coffee] also works if you want to be sure 😉

And when I run a build, it will just throw the code (minified?) into the final JS file?

it'll include just that file yes

as long as you don't include the index anywhere else

the index contains all icons

the faCoffee.js only contains one icon

Gotcha. Curious, given this library supports tree shaking, does that mean it'd be compatible with closure's tree shaking?

no

well given how simple the lib is probably

but webpack tree shaking and closure tree shaking are two very different things

so I wouldn't hold my breath

How are they different?

They use the same terminology - "dead code elimination". A bit annoying how everything is so overloaded.

if you figure it out let me know 😉

the fundamental difference is that closure operates on one global scope

so it can do things webpack can't do

since webpack can't move stuff out of the scope they are declared in

Oh I see. If I know that all the npm deps I use would be compatible with Closure, is there a way to enable it?

https://shadow-cljs.github.io/docs/UsersGuide.html#js-provider switch to :closure

I haven't tested this in a rather long time and wouldn't consider it supported at this time

but if you are lucky 😉

Ha. I'll try it for fun.

you'll probably run into issues with react and react-dom

last time I tried they required manual externs

Oh, yeah - we definitely use those. I assumed it'd "just work" given how popular those are.

they never worked without externs

well .. I'm not actually sure ... it has been years sind I tried

but unless they changed their builds they would probably still be required

I get a bunch of new warnings when compiling 🙃

for example:

------ WARNING #9 --------------------------------------------------------------
 File: node_modules/react-dom/cjs/react-dom.production.min.js:176:316
 unreachable code
--------------------------------------------------------------------------------

I warned you 😉

Yep - no worky 🙂

Does anyone do crazy stuff like run webpack on their build?

that would be crazy indeed

especially if you expect the webpack tree shaking stuff to trigger since that will not

Including the specific fontawesome js files does the trick :thumbsup::skin-tone-2:

@wilkerlucio I saw the ticket regarding class. do you have an actual example where this fails? which class?

gotta be careful with code on npm since its often babel rewritten code which has other semantics than ES6 has

@thheller I was doing in browser, I'm loading strait from script tags, those using native ES6 classes, you can see the discussion I have around it yesterday: https://clojurians.slack.com/archives/C03S1L9DN/p1557803014008100, please let me know if you need more clarifications about it

so the Rete.Control isn't an actual ES6 class if you used the npm version?

@thheller I'm not sure, I wasn't able to use that loading from NPM (that issue we discussed on the polyfill)

what did you use then?

var Control =
/*#__PURE__*/
function () {
  function Control(key) {
    _classCallCheck(this, Control);

    _defineProperty(this, "key", void 0);

    _defineProperty(this, "data", {});

    _defineProperty(this, "parent", null);

    if (this.constructor === Control) throw new TypeError('Can not construct abstract class');
    if (!key) throw new Error('The key parameter is missing in super() of Control ');
    this.key = key;
  }

  _createClass(Control, [{
    key: "getNode",
    value: function getNode() {
      if (this.parent === null) throw new Error('Control isn\'t added to Node/Input');
      if (this.parent instanceof Node) return this.parent;
      if (!this.parent.node) throw new Error('Control hasn\'t be added to Input or Node');
      return this.parent.node;
    }
  }, {
    key: "getData",
    value: function getData(key) {
      return this.getNode().data[key];
    }
  }, {
    key: "putData",
    value: function putData(key, data) {
      this.getNode().data[key] = data;
    }
  }]);

  return Control;
}();

<script src=""></script>
    <script src=""></script>
    <script src=""></script>

this is the "class" in the npm package

right yeah the min is the same there

there is not a single use of class in that package

interesting, still having the problem when trying to call the construct, maybe that generating the native class somehow?

well things are a bit more complicated depending on what you are trying

if you are trying the Reflect way with a rewritten class like that it won't work

the rete package only contains babel-rewritten code

the issue I'm having is how to extend it and call the parent constructor

because its required by the api design

even though the package contains a build/rete.esm.js file but thats still rewritten by babel and not ES6 code

and their docs point to use of native classes, so I'm not sure whats going on inside of it

yes I understand but if you are trying to do this with ES6 ways that won't work

since its not an ES6 class

they probably assume that you'll use babel which would rewrite the code in a compatible way?

they provide docs for the .min usage as well, also suggesting usage of ES6 classeasa

https://rete.js.org/#/docs

that might be but the code does NOT contain ANY es6 classes

you have a guess why/how parent constructor calling is blocked?

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

ha 😛

so they polyfill the check

https://cdn.jsdelivr.net/npm/[email protected]/build/rete.esm.js

thats the non minified version .. a bit more readable but the same code

there is nothing ESM about it ... but lots of packages on npm pretend to be ESM when they are not

well its ESM because of the import/export

but not because of any other language features

yeah, but seems like this is just mimics the ES6 behavior

no it really doesn't

well ... you need to adjust what you are trying

I mean mimics in the sense it blocks direct calls to the constructor fn (using that validator)

in your ticket you mention Reflect.setPrototypeOf(B.prototype, A.prototype) and stuff

this will NOT work if you don't have an actual ES6 class

and you don't (in the case of Rete)

gotcha, but still that wasn't the main problem, sorry to insist in this point, but the real blocker to me is the parent constructor, fixing prototypes is easy, but thanks for pointing it, I'll improve the example there

I'm not super sure how the babel-rewritten stuff expects inheritence to work

yes I understand that you want to do that

and that I fully agree that CLJS should support that

is not that I want, its required by the lib, unless there is some way around that I'm missing

but the issue here is not with actual ES6 classes

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

you probably need to mimic that

thanks, I'll try that

I can't find an actual example of how to use the rete stuff in your discussion in #cljs-dev

only the code to construct the class but not where its actually used?

how would you trigger the error?

that's a bit far in the setup, in the construction of the editor, but you can replicate by simply trying to instantiate the class

raw messy stuff, but this is my setup for init it:

(fp/defsc ReteEditor
  [this {::keys []}]
  {:pre-merge         (fn [{:keys [current-normalized data-tree]}]
                        (merge {::editor-id (random-uuid)} current-normalized data-tree))
   :ident             [::editor-id ::editor-id]
   :query             [::editor-id]
   :componentDidMount (fn []
                        (go-catch
                          (let [container (gobj/get this "editorContainer")
                                editor    (js/Rete.NodeEditor. "[email protected]" container)
                                num-comp  (new NumComponent)
                                _         (do
                                            (.use editor js/ConnectionPlugin.default)
                                            (.use editor js/ReactRenderPlugin.default)
                                            (.register editor num-comp))
                                engine    (js/Rete.Engine. "[email protected]")
                                _         (.register engine num-comp)
                                n1        (<!p (.createNode num-comp #js {:num 3}))
                                n2        (<!p (.createNode num-comp #js {:num 5}))]
                            (.addNode editor n1)
                            (.addNode editor n2)
                            (.on editor "process nodecreated noderemoved connectioncreated connectionremoved"
                              (fn []
                                (js/console.log "EVENT")))

                            (.. editor -view resize)
                            (.trigger editor "process"))))
   :css               [[:.container {:width "500px"}]]}
  (dom/div :.container {:ref #(gobj/set this "editorContainer" %)}))

(def NumControl
    (js-class
      {::extends     js/Rete.Control
       ::constructor (fn [emitter key readonly]
                       (let [this (js-this)]
                         (.call js/Rete.Control this key)
                         (gobj/set this "render" "react")
                         (gobj/set this "component" ReactNumControl)
                         (gobj/set this "props" {:emitter emitter :ikey key :readonly readonly})))}))

I have no clue whats going on there 😛

(defn js-class [{::keys [constructor] :as definition}]
  (let [c     (or constructor (fn []))
        proto (gobj/get c "prototype")]
    (doseq [[k v] (dissoc definition ::constructor)]
      (case k
        ::extends
        (goog/inherits c v)

        (gobj/set proto (name k) v)))
    c))

thats not the part I'm looking for

I know how to do that part ... I need Rete to use the class

somehow

the use is in the Fulcro component, num-comp (new NumComponent)

without fulcro

preferably without react even

just rete

that's not actually possible, hehe, rete depends on some rendering to create some parts of it, but you can ignore the react/fulcro part, its just one container element and using componentDidMount to start

here you can see a full demo from Rete: https://codepen.io/Ni55aN/full/xzgQYq/

I mostly copied from that

@wilkerlucio

(defn NumComponent
  {:jsdoc ["@constructor"]}
  []
  (this-as this
    (.call (js/Object.getPrototypeOf NumComponent) this "Number")
    this))

(set! NumComponent -prototype
  (js/Object.create r/Component.prototype
    #js {:constructor
         #js {:value NumComponent
              :writeable true
              :configurable true}

         :builder
         #js {:value
              (fn [node]
                (this-as this
                  ;; do stuff
                  ))}

         :worker
         #js {:value
              (fn [node inputs outputs]
                ;; do stuff
                )}}))

(js/Object.setPrototypeOf NumComponent r/Component)

with

["regenerator-runtime/runtime"]
    ["rete" :as r]

no clue if it actually works .. can't untangle this OOP crazyness 😛

but new works and the .name seems to get assigned properly

@thheller maybe something is wrong, I got Uncaught TypeError: Object.getPrototypeOf(...).call is not a function

running new ns.NumComponent() on the console

ok, I fixed that line, swiped with: (.call (gobj/get (js/Object.getPrototypeOf NumComponent) "constructor") this "Number")

now it works! 🙂

thanks for looking it up, really helpful

but there is something about that puzzling me, I don't really understand how (.call (gobj/get (js/Object.getPrototypeOf NumComponent) "constructor") this "Number") works, the way I'm seeing it, the constructor in NumComponent is a js value, which contains a value to NumComponent, how does that line figures the parent constructor and call it? its some JS magic going on inside?

I just took what the babel stuff does and didn't question it 😉

I want to write a small library for myself in cljc where I expose apis that work for both clojure and clojurescript. Some of the implementations for these apis will use java/clojure external libraries and npm libraries using reader conditionals so that I can and export it as jar files and use them in both clojure and clojurescript world. Is there a way to achieve this with a shadow-cljs? Is there any template for such kind of library projects?

shadow-cljs currently does not support publishing libraries

you can just use a simple project.clj and use lein though

alright, back to my chrome extension after awhile. I think I ran into this before, but I’m currently getting: [chromex] an error occurred during the call to chromex.ext.tabs/execute-script: Could not load file 'out/content-script.js' for content script. It isn't UTF-8 encoded.

I am a first-time shadow-cljs user. In trying it out today, I hit an INTERNAL COMPILER ERROR 🙁 I created a minimal reproduction in this repository: https://github.com/Dept24c/viz-min The README has instructions on how to reproduce the error. Can anyone help me with this?

@chad.harrington please include the full error you get

my guess is the clojure compiler sees an empty (:require) in your ns form

@lilactown dunno what that means. it should be utf-8

INTERNAL COMPILER ERROR typically is a closure ocmpiler issue

@thheller my googling says I should set the :closure-output-charset to "US-ASCII"

I tried that but it’s still not working. let me try cleaning things out