Clojurians Log v2

(def my-stack #(let [stack %
                     _ (DockerProvider. stack "default")
                     image (Image. stack "nginxImage" {})
                     container (Container. stack "nginxContainer" {} #_{:ports [{:internal 80
                                                                                 :external 8000}]})]
                 (set! (.-name image) "nginx:latest")
                 (set! (.-keepLocally image) false)
                 (set! (.-image container) (.-latest image))
                 (set! (.-name container) "tutorial")
                 #_(set! (.-ports container) {"internal" 80
                                            "external" 8000})))

(Container. stack "nginxContainer" {:port [{:internal 80 :external 8000}])

I don't seem to be getting any errors, but the values just aren't getting set during runtime

side-note: the actual ports example fails either way (with or without set!) -- the error there is that it can't seem to map over [{,,,}]

first of all. why is this a def with an anonymous function? makes its terribly hard to read.

(Container. stack "nginxContainer" {:port [{:internal 80 :external 8000}]) I assume Container is some JS Object and you are passing a CLJS map as an argument which it very likely won't understand

use (Container. stack "nginxContainer" (clj->js {:port [{:internal 80 :external 8000}]))

the last commented out set! has the same issue. trying to pass a CLJS map to any JS object will either fail directly or fail silently since they all expect plain JS objects

you can also construct JS objects directly via #js {:foo "bar"}

Hi, I'm trying to make a simple chrome extension but I'm having some problems with the initial setup of the project. When I watch the :extension build and then open the url that I'm matching in my shadow-cljs.edn I'm getting the following error multiple times:

browser.cljs:406 WebSocket connection to '<ws://localhost:9630/ws/worker/extension/13b81eb2-ba6f-458a-b497-defe7df73dbb/acea096f-5091-4a70-ab73-10aafb9a60a5/browser>' failed: Unknown reason
shadow$cljs$devtools$client$browser$ws_connect_impl @ browser.cljs:406
shadow$cljs$devtools$client$browser$ws_connect @ browser.cljs:388
browser.cljs:20 🠶 shadow-cljs: websocket error Event {isTrusted: true, type: "error", target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
browser.cljs:20 🠶 shadow-cljs: WebSocket disconnected!

This is how my shadow-cljs.edn file looks like:

{:source-paths ["src/background"
                "src/popup"
                "src/content-script"]

#_#_ :dependencies [[binaryage/chromex "RELEASE"]
                [binaryage/devtools "RELEASE"]]
 
 :builds {:extension

          {:target           :chrome-extension
           :extension-dir    "resources/unpacked"
           :manifest-file    "resources/unpacked/manifest.edn"
           :compiler-options {; <https://github.com/google/closure-compiler/issues/1704>
                              :closure-output-charset "US-ASCII"
                              ; we need to fully inline source maps to avoid devtools security restrictions of loading .map
                              ; files via chrome-extension://&lt;extension-id&gt;/out/cljs-runtime/goog.debug.error.js.map urls
                              :source-map-inline      true}
           :outputs          {:background     {:output-type :chrome/background
                                               :entries     [chromex-sample.background]}
                              :content-script {:output-type    :chrome/content-script
                                               :chrome/options {:matches ["<https://classroom.google.com/u/*/ta/not-reviewed/all>"]
                                                                :run-at  "document_end"}
                                               :entries        [chromex-sample.content-script]}
                              :popup          {:output-type :chrome/shared
                                               :entries     [chromex-sample.popup]}}}}}

This is how my manifest.edn file looks like:

{:name             "Test chrome extension"
 :version          "1.0"
 :description      "Test chrome extension"
 :manifest-version 2

 :permissions      ["http://*/*"
                    "https://*/*"]

 :browser-action   {:default-title "Show the popup"
                    :default-icon  "images/icon48.png"
                    :default-popup "popup.html"}

 :content-security-policy
                   ["default-src 'self';"
                    ;; FIXME: unsafe-eval should be injected for dev, user shouldn't have to write this
                    "script-src 'self' 'unsafe-eval' <http://localhost:9630>;"
                    "connect-src * data: blob: filesystem:;"
                    "style-src 'self' data: chrome-extension-resource: 'unsafe-inline';"
                    "img-src 'self' data: chrome-extension-resource:;"
                    ;; FIXME: localhost only? don't want to allow any origin though
                    "frame-src 'self' <http://localhost>:* data: chrome-extension-resource:;"
                    "font-src 'self' data: chrome-extension-resource:;"
                    "media-src * data: blob: filesystem:;"]}

@thheller: thanks! clj-js worked! #js {,,, did not

ah, if I'm doing #js, I gotta apply it more liberally:

(Container. stack "nginxContainer" #js {:image (.-latest image)
                                              :name "tutorial"
                                              :ports #js [#js {:internal 80
                                                               :external 8000}]})

😆 this should address your first-of-all:

(defn my-stack [app name]
  (let [stack (TerraformStack. app name)
        image (Image. stack "nginxImage" #js {:name "nginx:latest"
                                              :keepLocally false})]
    (DockerProvider. stack "default")
    (Container. stack "nginxContainer" (clj->js {:image (.-latest image)
                                                 :name "tutorial"
                                                 :ports [{:internal 80
                                                          :external 8000}]}))))

thank you again for your help!

> failed: Unknown reason

there must be a reaon. dunno how you find out what 😛

There's probably a reason xD

yeah #js doesn't apply to nested values so clj->js is better for more complex structures where you don't care about performance

and it's probably my fault 😛

config looks ok. does it work if you change the :matches?

I believe the :matches is working as I'm only getting shadow error messages in this site: https://classroom.google.com/u/0/ta/not-reviewed/all

It works if I use :matches ["<http://localhost:9630/*>"]

well yeah it must be allowed to connect to the shadow-cljs server for the REPL and hot-reload stuff

shadow-cljs connects to the websocket and if I eval a println in the content_script.cljs I can see it in the console

(for development builds, ie. watch and compile)

release can and should be stricter

and how do I allow it?

its an array so just add multiple things

what array are you talking about?

:matches ["<https://classroom.google.com/u/*/ta/not-reviewed/all>" "<http://localhost>:*/*"] probably

I tried that

Using this shadow-cljs connects to the websocket in localhost, but I get the websocket error in google classroom

This is the localhost console:

This is google classroom console:

And this is the shadow-cljs.edn file:

{:source-paths ["src/background"
                "src/popup"
                "src/content-script"]

 #_#_:dependencies [[binaryage/chromex "RELEASE"]
                    [binaryage/devtools "RELEASE"]]

 :builds {:extension

          {:target           :chrome-extension
           :extension-dir    "resources/unpacked"
           :manifest-file    "resources/unpacked/manifest.edn"
           :compiler-options {:closure-output-charset "US-ASCII"
                              :source-map-inline      true}
           :outputs          {:background     {:output-type :chrome/background
                                               :entries     [chromex-sample.background]}
                              :content-script {:output-type    :chrome/content-script
                                               :chrome/options {:matches ["<http://localhost:9630/*>" "<https://classroom.google.com/u/*/ta/not-reviewed/all>"]
                                                                :run-at  "document_end"}
                                               :entries        [chromex-sample.content-script]}
                              :popup          {:output-type :chrome/shared
                                               :entries     [chromex-sample.popup]}}}}}

try "<http://localhost>:*/*" instead of "<http://localhost:9630/*>"

not a clue really. been a while since I looked at any of this. maybe chrome got stricter security restrictions these days

do you still have some csp rules in your HTML maybe?

I'm using brave browser I don't know if that's a problem

might be. not a clue, never used it.

As far as I know brave uses the same extensions as chrome.

I will download chrome and try there.

more likely that something in your config doesn't quite match

what about your html?

is there any?

the only html is the popup, just a hello world 😛

ok, does that have some csp rules?

<meta name="Content-Security-Policy" ...>

nope

then I'm out of ideas

okay, no problem! Thanks a lot 🙂 I'll try a bit more and if I fail I'll just use javascript and suffer 😛

well the websocket is only used for hot-reload and REPL. if you don't care about those then you can just set :devtools {:enabled false} and it won't try to connect

good to know , maybe Ill do that

@thheller I've noticed that I'm having this problem with https sites

hmm yeah that might be a reason. might need to setup ssl for shadow-cljs so is all ssl

Has anyone got react-native project going using WSL2? I'm wondering how/where the port from the app (below 50594 and 50612) is being determined so I can forward it properly to my WSL2 instance:

[Sun Feb 28 2021 22:39:55.649]  ERROR    shadow-cljs - remote-error {"isTrusted": false, "message": "failed to connect to /172.25.210.33 (port 9630) from /192.168.0.166 (port 50594) after 10000ms"}
[Sun Feb 28 2021 22:40:10.782]  WARN     The shadow-cljs Websocket was disconnected.
[Sun Feb 28 2021 22:40:10.792]  ERROR    shadow-cljs - remote-error {"isTrusted": false, "message": "failed to connect to /172.25.210.33 (port 9630) from /192.168.0.166 (port 50612) after 10000ms"}
[Sun Feb 28 2021 22:40:10.852]  LOG      giving up trying to connect

that is the port of the react-native app client. you don't need to do anything for that port as it will be random always

you just need to be able to connect from the app to shadow-cljs. looks like that is trying to use the wrong IP

yeah it's using the IP internally from WSL2... I have adb tcpip running from windows then within WSL2 adb connect to connect to the device

shadow-cljs watch app --config-merge '{:local-ip "1.2.3.4"}' lets you set a specific one

that worked 😉

I can't just add the local-ip key within my shadow-cljs.edn ?

I tried that first and didn't seem to do anything

currently needs to go into the build config

still need create a better way to control all this

cool that works too