I am having trouble finding how shadow-cljs is doing it in its source. Could you point me please?

I don’t know, the sources are too complex for me to understand just by reading them, if I had the project at hand, I would simply break in DevTools and look how shadow-cljs does it

it is probably using just eval

try to put breakpoint here: https://github.com/thheller/shadow-cljs/blob/master/src/main/shadow/boot/browser.js#L125

Ok, thank you!

or better put breakpoint into your reloaded fn and inspect the callstack

I have attempted to make the chromex example/sample (https://github.com/binaryage/chromex/tree/master/examples/sample) work with shadow-cljs :chrome-extension I pretty much have the background page working (modulo some issue with the test-storage function). But the biggest problem is I can't figure out how to configure shadow-cljs to properly hook in the extension popup. I was just guessing it was related to the :browser-action but my guess is clearly not working. I am still pretty unwashed when it comes to cljs / shadow-cljs and chrome extensions. My attempt at this is at https://github.com/omnyway-labs/chromex-sample-shadow. The README details the issues. If anyone has any helpful hints, I would be greatly appreciated. It seems pretty close and once this is made to work, it could be a good template for building chrome extensions with shadow-cljs.

@rberger I will look into this today. Will try to use your project as my start point and try to make it work.

The problem is that the outputs should be specified in manifest.edn, not in shadow-cljs.edn.

Hello, so I'm trying to containerize a basic ClojureScript/shadow-cljs development environment using Lando (https://docs.lando.dev). So far I've got the dev server serving static HTML/JS as it should be, but the HMR server only ever reports {:type :client/stale} . Even when I ssh into the container and curl it directly:

$ curl 'localhost:9630/ws/worker/dev/ac9d0f31-11a6-4c6b-9c75-a6f6a5ed1756/8dcdadc5-c951-4188-9c08-c5881f658fe7/browser' -H 'Accept: */*' --compressed -H 'Sec-WebSocket-Version: 13' -H 'Sec-WebSocket-Extensions: permessage-deflate' -H 'Sec-WebSocket-Key: kC/iKKLLhR2/TcOVtWVO7Q==' -H 'Connection: keep-alive, Upgrade' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' -H 'Upgrade: websocket'
{:type :client/stale}

I should clarify that HMR works perfectly when I run shadow-cljs watch dev directly on my machine. So something about the container environment is keeping it from seeing and/or reporting fresh compilations.

@rberger I made a pull request which should make things work.

@ctamayo :client/state means that the js files you loaded in your HTML were not produced by the watch you started. so I'm guessing you are serving old files or have some cache enabled that serves them

@rberger @posobin I got it working here as well: https://github.com/binaryage/chromex/commit/c73dedb0b0e2b43f2ead0aad8775782ec4016898

had to hack shadow-cljs for now, to get source maps working: https://github.com/binaryage/chromex/commit/c73dedb0b0e2b43f2ead0aad8775782ec4016898#diff-cf6355f4ec475b1cac556fde53d8914aR188-R192

@thheller is that determination made by proc-id? Here in ws.clj?

(not= proc-id (:proc-id worker-proc))
      (send-ws-error :client/stale)

If so, that could mean that the newer watch may not be generating new files at all, correct?

please do not assume that there is a bug in shadow-cljs regarding this

this is for sure a bug in whatever you are doing

watch puts files in a dir

load those files

thats about it

load it with whatever webserver you want but you need to load exactly those files

since you tried it with curl you can see the ID it sends

I presume you got those from the outdated generated files

no no no, this is definitely a bug in my code. I'm just trying to understand how stuff works. 😄

like I said ... watch produces files in a dir, load those files. nothing else to it

if you containerize stuff its easy to mess up paths and stuff

or loading files from the container instead of the actual fs etc

don't know anything about the lando stuff so can't make suggestions on that front

it could just be a bad browser cache

right, so what I'm trying to determine is what "paths and stuff" are likely to get messed up, so I know which direction to go in. So let me rephrase: it's possible that something about the paths and stuff make it so that the watch is not actually producing new files, or not putting them in the right place?

by "bad browser cache" do you mean the browser itself could be erroneously caching the result of a previous request to the WebSocket?

which webserver do you use?

the websocket is not involved in this issue

the issue is that the JS you are loading is outdated. it thus has an outdated websocket URL, which the server is telling you.

all you have to do is look at your :output-dir and make sure that is the actual files you are serving

just delete the entire dir and start the watch

if the file re-appear you have the right folder

if they don't you are not looking at the correct place

ah, I see. Things are starting to make more sense. Thank you!

I just tried to compile the example chromex extension with shadow in release mode, backgropund page and content script work, but popup (browser action) was generated without dependencies This is the compilation output with --pseudo-names: https://gist.github.com/darwin/a2ce8ee9079f78842f62e9e89dfc6615#file-popup-js-L96 $chromex$ext$runtime$connect_STAR_$$ is missing

not sure if this is caused by :chrome-extension :target: https://github.com/binaryage/chromex/tree/master/examples/shadow https://github.com/binaryage/chromex/blob/master/examples/shadow/shadow-cljs.edn#L23

it has been a while since I looked at the chrome-ext target

but one thing to remember is that it defaults to using code-splitting

so you are likely just not loading the shared file

there should be a shared.js in the output-dir

in outs that use a html file you need to load both

ie. shared.js + popup.js

otherwise the :output-type controls how the output is structured

ie. for content-scripts its just one file with no splits

aah, let me try it, btw. interesting is that in dev mode this worked event without shared.js

I would expect both modes to be broken

me too

ok, great this fixed it

so last standing issue is with source maps, devtools does not allow loading .map files from chrome-extension://…/something.map URLs

I had to start dev-server and serve those smaps separately

I'm pretty sure that works absolutely fine for me

are you sure you have the right paths though?

ok, let me try that it again

can't tell which mods you did to the output.clj

https://gist.github.com/darwin/f9e883eef4629d462edc871b6830a4d5

https://github.com/binaryage/chromex/blob/633fb70cd9aee6dcfc4a7e85cadd6a899724f85d/examples/shadow/shadow-cljs.edn#L16

I was able to reproduce the source map issue after removed that custom hack. In current Chrome and also in Chrome Canary. You have to open extension’s background page to get spam of `

like this, source maps don’t work

the urls are accessible when I open them in a separate tab

chrome canary hints on “chrome-extension://” is the issue

why is that a problem?

I get the same error though

look like valid maps to me

DevTools don’t see those source maps, so for example clicking on a link to source code in console does not work, it shows generated .js file , not cljs file as expected

I would not expect anything to work if it tells you that parsing them failed

so I'd first try to figure out WHY it failed to parse

that is just a misleading message from current Chrome - Chrome Canary has it improved and communicates what went wrong

this is how it looks in current chrome canary

the source maps are perfectly ok, just the code responsible for loading sourcemaps for chrome devtools is picky about URL scheme

when I use my prefix-hack to load the same source maps via dev-server it works as expected

but why does it serve the file perfectly fine if you open it?

the files should be served by the chrome-ext

it makes no sense to it to talk to http

we would have to look how source maps download is implemented in Chrome DevTools

maybe they are calling some internal chrome API which has some security hardening and uses different code path than is used when you load page in normal tab

if that makes sense

maybe it needs to be allowed in the CSP in the manifest?

this should not be related because DevTools is not the same context as extension itself

this is the originating place for the error message: https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/sdk/SourceMap.js#L232 I’m digging further

btw. this is long-standing issue, I never found a good solution for it, that is also why I advocated inlined source maps as option in shadow-cljs

I also did https://clojure.atlassian.net/projects/CLJS/issues/CLJS-1902, which is still waiting for merge

I fairly confident that it worked the last time I worked on this

but that was quite a while ago so chrome probably just messed something up

I'd rather not work around chrome bugs

that devtools code finally uses this at the bottom: https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/host/ResourceLoader.js#L172

it clearly has the right url and knows how to serve it

it does serve it with text/plain though. maybe it doesn't like that for some reason?

so it depends on host implementation of that loadNetworkResource fn, and I guess that is picky about that chrome-extension:// URI

that net::ERR_UNKNOWN_URL_SCHEME looks like coming from C++

at least I don’t see any trace of it in DevTools codebase itself

I have a leiningen multimodule build with shadow compiled reagent ui. now, shadow modules are meant for runtime modules and shadow doesn't seem to understand lein-modules. Is there a way to include cljs sources from a different lein-module? part of the ui is supposed to be deployed as a lib and shared between two different applications

don't really know that lein-modules are

as far as shadow-cljs is concerned all it needs is a classpath

> part of the ui is supposed to be deployed as a lib and shared between two different applications

that also makes no sense to me. you mean the sources should be shared right? compiled output can't be shared between builds

@thheller, do you have any suggestions on how to fix this? https://clojurians.slack.com/archives/C6N245JGG/p1581204099310900

(sorry, looks like many questions about extensions today)

thanks @thheller. lein-modules are https://github.com/jcrossley3/lein-modules but perhaps I need Leiningen checkouts instead. Yes, we'll I don't have the share lib/module yet, but yes I figured easiest just to share the source

Tldr: content scripts are hot reloaded when code changes, but on page refresh the old content script is loaded by chrome. How can I make my content script fetch the last script from shadow-cljs and execute it on page load?

I really can't remember much details about chrome ext stuff

but pretty sure that some things can't be worked around since its just how chrome exts work

ie. load things once and then never look at the FS again

I vaguely remember that you can reload the chrome ext via the REPL

which will make it reload things from disk

Yeah, but if that script that is loaded only once says to load the main content script from shadow server, that file on disk doesn't need to be refreshed by chrome. I just had trouble finding where shadow-cljs does hot reloading in its sources.

what does that have to do with anything? you said that works?

That should work, but I don't know how to do that.

you are confusing me 😛

this really isn't all that complicated. shadow-cljs writes files into a folder.

Basically I want to do hot reloading not only on file changes, but also when the browser loads the page and executes the content script.

whether or not chrome will read those files I cannot control

hi guys how to get release-snapshot?

what is a release-snapshot?

https://clojureverse.org/t/help-wanted-release-bundle-size-visualization/871/9

was it ever released?

https://shadow-cljs.github.io/docs/UsersGuide.html#_build_report

thank you

name changed to build report 😉

i'm a bit new to whole JS front thing, kinda confused =)

ad that chrome ext caching problem - I proposed a kind of workaround, where content script code would init with a check for stale source code situation and did one initial hot-reload pass if stale content was detected but I guess this smells like a lot of hairy work

maybe having content script impl setup as a dynamic module and doing intial dynamic module load every time on init could also fix it

i'm not quiet understand what am i asking, but how do i specify js deps while shadow-cljs managed by lein? webjars?

js deps are handled via npm, so package.json. shadow-cljs does not use/support webjars.

so for a fullstack app that will be project.clj for backend deps and project.json for front?

js deps are managed in package.json/npm

CLJS deps are handled by shadow-cljs.edn or project.clj or deps.edn (whatever you chose)

alright, i'll research more on that, thank you Thomas