Fork me on GitHub
#shadow-cljs
<
2023-07-27
>
sergey.shvets05:07:15

Hey, I'm playing with Lit components and compile them with shadow-cljs defclass syntax (@thheller huge thanks for building it!). Everything is working relatively smooth except lifecycle callbacks. I have to employ a terrible hack to call super.connectedCallback() method. Am I missing some better way to call it? This is how I define connectedCallback and that long row starting with .call does the trick but looks very ugly. I guess I might add some macro for it, but want to make sure I'm not missing something first.

(connectedCallback
   [this]
   ;; Object.getPrototypeOf(Dog.prototype).speak.call(this);
   (.call (.-connectedCallback (.getPrototypeOf js/Object lit/LitElement.prototype)) this)
   (js/console.log "Hello from Dom" this)))
PS lit works fine on 2.25.0.

thheller05:07:18

hmm does (js/super.connectedCallback) work?

thheller05:07:39

kind of a hack I guess, still need to add the same (super) logic that the constructor has I guess

sergey.shvets05:07:35

No, js/super.connectedCallback doesn't work. It generates super$ symbol and then can't find it. And this one doesn't work either 😞 (.connectedCallback (super))

sergey.shvets05:07:13

Spitting it out with (js* "super.connectedCallback()") doesn't work either, since there are some assignments before super call and javascripts crashes with 'super' keyword unexpected here

thheller06:07:57

I have a bit of time later, I'll look into it

thheller07:07:59

hmm yeah this will not be an easy fix unfortunately

thheller07:07:20

I'm basically just creating the class basic construct with constructor

thheller07:07:44

and then the regular extend-type from cljs core for the protocol and Object methods

thheller07:07:13

but they to TheClass.prototype.whatever = function(...) {}

thheller07:07:18

and super is not available in that context

thheller07:07:35

(.. lit/LitElement -prototype -connectedCallback (call this)) should work I guess but isn't much better thant what you had

sergey.shvets15:07:18

Thank you so much for looking into it. I'll follow the issue and will use the workaround for now.

simon15:07:27

Hi all! I'm building some edge-functions for netlify, and one of them just got a build error because the stripe-lib for deno is not hosted on the CDN anymore. The new import they mention is via npm-specifiers, like import Stripe from "npm:stripe@^11.16"; Any idea how I would use those with shadow-cljs?

thheller16:07:40

how are you building the first place?

thheller16:07:53

I assume :target :esm?

simon17:07:14

yes, :target :esm

simon17:07:05

stripe includes an export target for deno now, but I have no clue if and how I can use this.. not much experience in the js-world yet.

simon17:07:45

this is part of the package.json:

"exports": {
    "types": "./types/index.d.ts",
    "browser": {
      "import": "./esm/stripe.esm.worker.js",
      "require": "./cjs/stripe.cjs.worker.js"
    },
    "deno": {
      "import": "./esm/stripe.esm.worker.js",
      "require": "./cjs/stripe.cjs.worker.js"
    },
    "worker": {
      "import": "./esm/stripe.esm.worker.js",
      "require": "./cjs/stripe.cjs.worker.js"
    },
    "default": {
      "import": "./esm/stripe.esm.node.js",
      "require": "./cjs/stripe.cjs.node.js"
    }
  }

thheller17:07:02

so this is running in deno? ie. it doesn't need packages to be bundled?

thheller17:07:44

then you can just set :js-options {:js-provider :import} in the build config

thheller17:07:23

and just require directly (:require ["npm:stripe@^11.16$default" :as Stripe])

thheller17:07:30

looks a bit weird but should be ok?

thheller17:07:02

(:require ["npm:stripe@^11.16" :default Stripe]) also works but that is "deprecated" and unofficial

thheller17:07:26

or when you need to bundle skip the :js-provider setting and just (:require ["stripe$default" :as Stripe])

thheller17:07:34

with {:js-provider :import} the require strings are just passed through directly to deno, shadow-cljs does nothing to them

thheller17:07:41

so as long as deno can resolve then its fine

simon18:07:25

yeah it‘s running in deno - can I exclude only stripe though and include other npm libs directly?

simon18:07:40

I tried setting :js-options {:js-provider :import} and requiring with (:require ["npm:stripe@^11.16$default" :as Stripe]), but it fails with this error

Closure compilation failed with 1 errors
--- shadow.js.shim.module$npm_stripe$^11_16$default.js:2
Parse error. Semi-colon expected

simon18:07:10

if I bundle it and require it with (:require ["stripe$default" :as Stripe]), is there a way to choose the deno version? (as in the deno-export of the stripe npm package)

thheller18:07:59

ah doh. I guess the ^ is not getting escaped

thheller18:07:37

with the package.json above the browser is exactly the same as deno

thheller18:07:41

so shouldn't matter?

2
thheller19:07:16

you can set :js-options {:export-conditions ["deno" "import" "require" "default"]} to get the deno parts of the exports

simon19:07:48

oooh didn't see that browser and deno point to the same..

simon19:07:44

pheeeeew, it works again, thanks a lot! 😌

thheller19:07:14

Parse error. Semi-colon expected should be fixed in 2.25.1

simon19:07:36

Thanks! I'll update..