joyride

pez 2025-10-25T12:52:08.749949Z

Finally got around to try the #scittle #replicant Tic-Tac-Toe with Joyride flares. So, this is with the game cljs sources in my local workspace, not sourced from CDN. (scittle and replicant grabbed from CDN, thuough/of course).

🎉 2
pez 2025-10-25T12:56:11.806009Z

I expect to now run into a limitation with flares where resources may only be loaded from the workspace, which would prevent using flares that need resources from User scripts. Need to test if that is the case and have a think if I can avoid that limitation…

pez 2025-10-25T13:34:02.165819Z

It’s not a fundamental limitations. VS Code allows for connfiguring localResourceRoots, and I get this to work as a User script, with

:webview-options {:enableScripts true
                      :localResourceRoots [(vscode/Uri.file joyride/user-joyride-dir)]}
But right now I also need to hardcode the game cljs paths in the html file. I will need to update Joyride flares to handle this in a way still unclear to me…. I wonder if it makes sense to resolve relative paths to look in both the Joyride User dir and in the workspace… Similar to how we resolve the classpath.

pez 2025-10-25T13:34:57.674359Z

So this is the html, to make my ramblings less cryptic 😃


<html>
  <head>
    <script src="" type="application/javascript"></script>
    <script src="" type="application/javascript"></script>

    <script type="application/x-scittle" src="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/ui.cljs"></script>
    <script type="application/x-scittle" src="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/game.cljs"></script>
    <script type="application/x-scittle" src="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/core.cljs"></script>
    <link rel="stylesheet" href="/Users/pez/.config/joyride/resources/scittle/replicant_tictactoe/style.css">
  </head>
  <body>
    <h1>Scittle tic-tac-toe built with Replicant</h1>
    <h2>What is Scittle?</h2>
    <p>Read <a href="index.html">the main page</a> for more details.</p>
    <h2>The game</h2>
    <div id="app"></div>
    <script type="application/x-scittle">
      (defn set-text [progress-event]
        (let [elt (.getElementById js/document "cljs")]
          (set! (.-innerHTML elt) (.. progress-event -srcElement -responseText))))
      (def oreq (js/XMLHttpRequest.))
      (.addEventListener oreq "load" set-text)
      (.open oreq "GET" "replicant_tictactoe/core.cljs")
      (.send oreq)
    </script>
  </body>
</html>

pez 2025-10-25T16:20:15.299209Z

Latest Joyride solves this by having a default of including the User Joyride directory in localResourceRoots , plus adding a substitution string to be used in hiccup or html content {joyride/user-dir} to make scripts using user dir resources portable.

pez 2025-10-25T16:34:53.967699Z

Now this works:

(defn replicant-ttt []
  (flare/flare!+
   {:html [:html
           [:head
            [:script {:src ""
                      :type "application/javascript"}]
            [:script {:src ""
                      :type "application/javascript"}]
            [:script {:type "application/x-scittle"
                      :src "{joyride/user-dir}/resources/scittle/replicant_tictactoe/ui.cljs"}]
            [:script {:type "application/x-scittle"
                      :src "{joyride/user-dir}/resources/scittle/replicant_tictactoe/game.cljs"}]
            [:script {:type "application/x-scittle"
                      :src "{joyride/user-dir}/resources/scittle/replicant_tictactoe/core.cljs"}]
            [:link {:rel "stylesheet"
                    :href
                    "{joyride/user-dir}/resources/scittle/replicant_tictactoe/style.css"}]]
           [:body
            [:h1 "Scittle tic-tac-toe built with Replicant"]
            [:h2 "What is Scittle?"]
            [:p
             "Read"
             [:a {:href "index.html"}
              "the main page"]
             "for more details."]
            [:h2 "The game"]
            [:div#app]
            [:script {:type "application/x-scittle"}
             (str
              '(defn set-text [progress-event]
                 (let [elt (.getElementById js/document "cljs")]
                   (set! (.-innerHTML elt) (.. progress-event -srcElement -responseText))))
              '(def oreq (js/XMLHttpRequest.))
              '(.addEventListener oreq "load" set-text)
              '(.open oreq "GET" "replicant_tictactoe/core.cljs")
              '(.send oreq))]]]}))
Which makes me think that Joyride could support a :scittles key to the flare options which would make it use all this biolerplate and include. So it would be just:
(flare/flare!+
   {:scittles ["{joyride/user-dir}/resources/scittle/replicant_tictactoe/ui.cljs"
               "{joyride/user-dir}/resources/scittle/replicant_tictactoe/game.cljs"
               "{joyride/user-dir}/resources/scittle/replicant_tictactoe/core.cljs"
               "{joyride/user-dir}/resources/scittle/replicant_tictactoe/style.css"]})
WDYT, @borkdude?

borkdude 2025-10-25T16:44:31.984399Z

sure!

pez 2025-10-25T22:57:10.116779Z

Actually. I have now realized that already with the version of Joyride I released earlier today the example works with just this:

(flare/flare!+
   {:html [:html
           [:head
            [:script {:src ""
                      :type "application/javascript"}]
            [:script {:src ""
                      :type "application/javascript"}]
            [:script {:type "application/x-scittle"
                      :src "assets/scittle/replicant_tictactoe/ui.cljs"}]
            [:script {:type "application/x-scittle"
                      :src "assets/scittle/replicant_tictactoe/game.cljs"}]
            [:script {:type "application/x-scittle"
                      :src "assets/scittle/replicant_tictactoe/core.cljs"}]
            [:link {:rel "stylesheet"
                    :href
                    "assets/scittle/replicant_tictactoe/style.css"}]]
           [:body
            [:div#app]]]})
There is hardly any boilerplate at all.

borkdude 2025-10-25T22:57:48.244529Z

nice!

pez 2025-10-25T16:16:21.463199Z

Dear Joyriders: https://github.com/BetterThanTomorrow/joyride/releases/tag/v0.0.68 joyride • https://github.com/BetterThanTomorrow/joyride/pull/251 See previous thread for some background.

2