Use squint from ClojureScript (with shadow-cljs)

[harold]

Today I'm trying to use squint from ClojureScript:

harold@freeside:~/src$ npx create-cljs-project shadow-squint
shadow-cljs - creating project: /home/harold/src/shadow-squint
Creating: /home/harold/src/shadow-squint/package.json
Creating: /home/harold/src/shadow-squint/shadow-cljs.edn
Creating: /home/harold/src/shadow-squint/.gitignore
Creating: /home/harold/src/shadow-squint/src/main
Creating: /home/harold/src/shadow-squint/src/test
----
Installing shadow-cljs in project.


added 106 packages, and audited 107 packages in 3s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
----
Done. Actual project initialization will follow soon.
----

Nice.

harold@freeside:~/src$ cd shadow-squint/
harold@freeside:~/src/shadow-squint$ npm i squint-cljs

added 15 packages, and audited 122 packages in 1s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Cool.

harold@freeside:~/src/shadow-squint$ npx shadow-cljs browser-repl
shadow-cljs - config: /home/harold/src/shadow-squint/shadow-cljs.edn
shadow-cljs - updating dependencies
shadow-cljs - dependencies updated
[2023-12-17 16:11:26.165 - WARNING] TCP Port 9630 in use.
shadow-cljs - server version: 2.26.2 running at http://localhost:9631
shadow-cljs - nREPL server started on port 44667
[:browser-repl] Configuring build.
[:browser-repl] Compiling ...
[:browser-repl] Build completed. (119 files, 118 compiled, 0 warnings, 4.82s)
cljs.user=>

Alright.

cljs.user=> (require '["squint-cljs" :as squint])
[2023-12-17 16:11:51.138 - WARNING] :shadow.cljs.devtools.server.worker.impl/cljs-compile-ex - {:input {:code "(require '[\"squint-cljs\" :as squint])", :ns cljs.user, :repl true}}
ExceptionInfo Failed to process REPL command {:eof? false, :ns cljs.user, :form (require (quote ["squint-cljs" :as squint])), :source "(require '[\"squint-cljs\" :as squint])", :tag :shadow.cljs.repl/process-ex}
	shadow.cljs.repl/process-read-result (repl.clj:576)
	shadow.cljs.repl/process-read-result (repl.clj:550)
	shadow.cljs.repl/process-input (repl.clj:713)
	shadow.cljs.repl/process-input (repl.clj:691)
	shadow.cljs.devtools.server.worker.impl/fn--15693 (impl.clj:698)
	shadow.cljs.devtools.server.worker.impl/fn--15693 (impl.clj:688)
	clojure.lang.MultiFn.invoke (MultiFn.java:234)
	shadow.cljs.devtools.server.util/server-thread/fn--15367/fn--15368/fn--15376 (util.clj:283)
	shadow.cljs.devtools.server.util/server-thread/fn--15367/fn--15368 (util.clj:282)
	shadow.cljs.devtools.server.util/server-thread/fn--15367 (util.clj:255)
	java.lang.Thread.run (Thread.java:829)
Caused by:
ExceptionInfo closure errors {:tag :shadow.build.closure/errors, :errors [{:resource-name "node_modules/squint-cljs/lib/compiler.js", :source-name "node_modules/squint-cljs/lib/compiler.js", :line 16, :column 9, :msg "Dynamic import expressions cannot be transpiled."}]}
	shadow.build.closure/throw-errors! (closure.clj:1294)
	shadow.build.closure/throw-errors! (closure.clj:1288)
	shadow.build.closure/convert-sources-simple* (closure.clj:2098)
	shadow.build.closure/convert-sources-simple* (closure.clj:1944)
	shadow.build.closure/convert-sources-simple (closure.clj:2254)
	shadow.build.closure/convert-sources-simple (closure.clj:2204)
	shadow.build.compiler/maybe-closure-convert (compiler.clj:1252)
	shadow.build.compiler/maybe-closure-convert (compiler.clj:1245)
	shadow.build.compiler/compile-all (compiler.clj:1501)
	shadow.build.compiler/compile-all (compiler.clj:1364)
	shadow.build.api/compile-sources (api.clj:261)
	shadow.build.api/compile-sources (api.clj:253)
------ REPL Error while processing ---------------------------------------------
(require '["squint-cljs" :as squint])
Closure compilation failed with 1 errors
--- node_modules/squint-cljs/lib/compiler.js:16
Dynamic import expressions cannot be transpiled.

Now, some searching has lead me to believe that this is a limitation of the google closure compiler.

Does what I'm trying make sense? Did I do something wrong?

It would be neat to use squint in the browser from ClojureScript.

Thanks in advance for your time, consideration, and thoughts.

[borkdude]

With shadow-cljs you must use :target :esm to import ES6 modules (as squint itself is).
Squint itself is such a shadow project so you can have a look at shadow-cljs.edn for an example.

[borkdude]

What exactly are you trying to accomplsih btw @harold ? If you can tell more about your use case, I might be able to offer more guidance.

[borkdude]

If you would like to use the squint compiler from a shadow project, it might be better to load it as a ClojureScript library with:

(require '[squint.compiler])

[harold]

I was able to get this going, ala...

(let [js (-> (::editor @state*) .-state .-doc str
             (squint/compile-string {:elide-imports true
                                     :elide-exports true}))]
  (println js)
  (js/eval js))

I am off and running, thank you for your help.

[borkdude]

That is one option. Another option is to use the :repl output and wrap it in an async IIFE, like done here:

squint/index.html

Lines 156 to 170 in b74131f

	let importSource = url.searchParams.get('jsx.import-source') || 'react';
	let opts = { repl: repl, 'elide-exports': repl, context: repl ? 'return' : 'statement', "jsx-runtime": {"import-source": importSource, development: true} };
	compilerState = compileStringEx(`(do ${code}\n)`, opts, compilerState);
	let js = compilerState.javascript;
	if (dev) {
	js = js.replaceAll("'squint-cljs/", "'http://" + window.location.host + '/');
	}
	document.querySelector('#compiledCode').innerText = js;
	if (!repl) {
	const encodedJs = encodeURIComponent(js);
	const dataUri =
	'data:text/javascript;charset=utf-8;eval=' + Date.now() + ',' + encodedJs;
	let result = await import(dataUri);
	} else {
	let result = await eval(`(async function() { ${js} })()`);

I should probably write some documentation around it, but doing it this way lets you use require as well and also top-level js-await.

[harold]

That makes a lot of sense - an interesting pathway.

I also ended up needing ["squint-cljs/core.js" :as squint_core] in my ns :require ... as well as:

(set! js/window.squint_core squint_core) - but then map and vec and all kinds of fun things started working.

---

I'm thinking now about how to have a sort of 'preamble' of squint code that is compiled to js and run on load before the page becomes interactive.

Right now I have it as a string at the top-level my cljs program, and that's nice because the repl and hot-reloading are working, but it's a little inconvenient because my editor doesn't give me syntax highlighting or paredit or other goodies inside the string.

It's this funny moment of approximate code-as-data, but the data is a string. 😄

I guess I could put the preamble in its own file and start a second watcher to compile it to a separate .js file that the html also loads? Or can you think of a better arrangement that would be convenient for both dev and release for developing the preamble?

Thanks again, as ever, tons of fun and learning a lot over here - happy new year.

[borkdude]

I also ended up needing ...

Not if you use the async way I described where you don't use :elide-imports

[harold]

Using it directly from cljs will be the next thing I try - sorry I didn't realize that was possible (was thinking too hard about js).

What exactly are you trying to accomplsih btw @harold ?

Oops! Sorry again, I'm sure this is confusing to you - I'm actually doing like 3 things at once that all happen to overlap w/ your libraries, possibly.

This one in particular is fun - I run an after school program where I teach kids computational creativity. I've had an idea for a while of a webpage environment where kids could interactively write code and build and learn things. Inspired by squeak/smalltalk, old LOGO systems, &c... I got excited when I saw your playground and the confetti and whatnot, since it's similar-ish to what I had in mind, and started investigating this codemirror + squint pathway.

This one is an after-work-hours/hobby project, so progress will be in fits and starts.

Thanks, as ever, for everything you do, it's genuinely appreciated and I look forward to continuing to consume/contribute. (:

[borkdude]

Cool. This one might also be fun: https://2.maria.cloud/curriculum/clojure-with-shapes. It is powered by SCI, rather than squint or cherry.

[harold]

nice! Hadn't seen that either. Thank you.