Improve support for developing squint programs that target the browser

[harold]

squint/examples/threejs/playground.html

Lines 313 to 319 in 435db9c

	let state = EditorState.create({doc: doc,
	extensions: extensions });
	let editorElt = document.querySelector('#editor');
	let editor = new EditorView({state: state,
	parent: editorElt,
	extensions: extensions });
	globalThis.editor = editor;

I have stared (squinted?) at this long enough that I now believe that this part of the program could be written in 'clojurescript' and prepared with squint itself... (!)

(ns app
  (:require ["@nextjournal/clojure-mode" :refer (default_extensions complete_keymap)]
            ["@codemirror/view" :refer (EditorView, drawSelection, keymap)]
            ["@codemirror/state" :refer (EditorState)]))

(def editor
  (let [extensions (seq default_extensions)
        _ (.unshift extensions (.of keymap complete_keymap))
        state (EditorState/create {:doc "(foo)"
                                   :extensions extensions})
        elt (document/getElementById "app")]
    (EditorView. {:state state
                  :parent elt
                  :extensions extensions})))

(println (-> editor .-state .-doc .toString))

Though, in doing, I have found some limitations in local-dev for squint programs targeting the browser.

Related: #224

A squint program located at ./src/app.cljs, with a squint.edn containing {:paths ["src"] ...} has first line import * as squint_core from 'squint-cljs/core.js'; which is a bit tricky (though obviously not impossible) to get to resolve to ./node_modules/squint-cljs/core.js

Some kind of bun/esbuild bundler awareness might be cool here - somehow getting a bundler to watch the output, produce a single js file, and line up all the paths for other installed npm modules would be sweet. I got close with ugly hacks.

I made this a discussion rather than an issue, because I think I'm going to back out here and develop the frontend I'm working on with shadow-cljs - though, amusingly, there I still plan to consume squint through npm to transform user-entered code into js. 🤭

---

Thanks again for all this fun, really enjoying myself and learning A LOT.

🙇

[borkdude]

Hi @harold - I suggest using a tool like vite for this.

An example:
https://github.com/squint-cljs/squint/tree/main/examples/vite-react

If you don't use any tooling at all, you can solve this using import-maps. Check out the source of the squint playground index.html for this:

https://squint-cljs.github.io/squint/

[borkdude]

@harold

Some kind of bun/esbuild bundler awareness might be cool here - somehow getting a bundler to watch the output, produce a single js file, and line up all the paths for other installed npm modules would be sweet.

This is exactly what vite is doing (although in development mode it doesn't produce a single file, it does rewrite all the imports to work with node_modules). When doing vite build it produces a single minified file.

[harold]

Wild. Got it - thanks for the pointers - I imagine future searchers will also benefit from this information. 👍

[borkdude]

Vite is quite an awesome tool and I should probably emphasize adopting vite in the README of squint

[harold]

Yeah, that's neat - I can imagine the playground itself being done that way (maybe it already is?)

[borkdude]

It is not strictly necessary for the playground, since the index.html uses import-maps to resolve squint-cljs/core.js to a CDN. I think it's nice illustration of how to build without any tools, I just edit the index.html and it works after a refresh.

[harold]

👍 👍