what is a service worker

It allows you to run JS (with limitations i.e. no DOM) in a separate thread in the browser.

You communicate with the page via message passing

sorry, I mean web workers, service workers are similar but network traffic specific

by "run electric as a web worker" you mean you want to run electric entirely in a thread, so as to be isolated from Nuxt, keeping the Nuxt UI and yet talking to an Electric backend, so as to load data from electric into a clientside datastore for your Nuxt components? What exactly do you want to do?

I would ask you to show me some application code sketches of what your code looks like today (highlighting the problem you want to solve) and also what you would like your code to look like

After reading your documentation I'm not exactly sure what I want to do. I'll go and think about it and come back with something concrete.

fwiw we are just now starting a Fulcro integration, which is of the form of embedding an Electric component inside the Fulcro/React component tree, which can accept props from Fulcro and interact with any services in scope (like routing). In this worldview the electric subtree performs its own IO where desired while also able to receive data from Fulcro

Interesting, I think I need something similar. Is there a good place to look at integration patterns/options

this slack channel indexes everything interesting, i dont recall anyone having worked this out deeply yet

Ok thanks, I think I need to grok electric a bit more, the answer may be out there already. I'll probably implement the basis of what I want to achieve, starting with the xtdb starter app, without the integration and then, at least, I'll know what I need to solve.

edit index.html

if you want to set it dynamically, you'll need a side effect in your router code

I actually wasn't using index.html . That fixed it. I would like to set it dynamically though, could you explain what you mean by a side effect in your router code? I don't quite understand how it gets generated when it's missing.

index.html is not generated, it's a static resource in the starter app, Electric is solely a websocket abstraction

It's up to you how to generate index.html, the only requirement is that you integrate our websocket middleware

https://biffweb.com/p/how-to-use-electric/ may help if you'd like a more framework-y approach

(set! (,-innerText (js/document.querySelector "title")) "hello world") (pseudocode) is what i meant by side effect

Thanks. I was already doing JS interop to include stylesheets! I guess this was more of a CLJS/JS DOM manipulation question more than anything else.

oh, you have your own backend already it seems

Sorry, i dont quite understand your setup but glad you're sorted

Basically instead of using index.html I did something of the sort :

(defn add-tag
  [{:keys [tag id props]}]
  (when-not (.getElementById js/document id)
    (let [element (.createElement js/document tag)]
      (doseq [[attr-key attr-val] (merge props {"id" id})]
        (.setAttribute element attr-key attr-val))
      (.appendChild (.-head js/document) element))))

The rest is a modified version of xtdb-starter-app

what serves the script tag?

(def electric-main
  (hyperfiddle.electric/boot ; Electric macroexpansion - Clojure to signals compiler
   (binding [hyperfiddle.electric-dom2/node js/document.body]
     (set! (.-textContent (js/document.querySelector "title")) "Hello World")
     (mapv add-tag meta-tags)
     (Main.))))

I'm quite new to frontend, JS and CLJS in general, so I'm just experimenting

sorry, not sure what you mean?

someone has to serve the frontend js entrypoint and inject it into the browser so it runs

<script src="app.js">

As I said I'm just using the server code from electric-starter-app so I'm not sure how that's working. https://github.com/hyperfiddle/electric-starter-app/blob/main/src/electric_server_java11_jetty10.clj I can see the script tag in the body

<script type="text/javascript" src="/js/main.js"></script>

ah ok, that starter server does indeed serve index.html from the resources

I think shadow-cljs is doing it?

((requiring-resolve
  'shadow.cljs.devtools.server/start!))
((requiring-resolve
  'shadow.cljs.devtools.api/watch) :dev)
;; Start electric compiler and server
(ring/run-jetty
 (http-middleware "public" "public/js/manifest.edn")
 opts)

Because I'm not using index.html

@U01B1CZQ9PF: the electric starter app contains an index.html in resources/public: https://github.com/hyperfiddle/electric-starter-app/blob/main/resources/public/index.html There always has to be a HTML page, it's not possible to have a website without it. It could be generated "on the fly" instead of being loaded from disk, but the browser needs HTML to load a website, since it is only the HTML that can tell the browser what JS code to load.

Thank you, thats helpful.