Squint

https://github.com/squint-cljs/squint
Admin
Squint is a lightweight dialect of ClojureScript with a compiler and standard library, designed for...
Tokens:13,740
Snippets:76
Trust Score:6.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://github.com/squint-cljs/squint/blob/main/examples/windowjs/README.md

Installs all necessary Node.js packages and project dependencies as specified in the package.json file.

```Shell
npm install
```

--------------------------------

### Start Vite development server with hot-reloading

Source: https://github.com/squint-cljs/squint/blob/main/examples/game-of-life/README.md

Launches the Vite development server, serving content from the specified `public` directory. This command enables hot-reloading, allowing developers to see changes in the browser instantly without manual page refreshes.

```Shell
npx vite public
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://github.com/squint-cljs/squint/blob/main/examples/instantdb/README.md

Execute these commands in your terminal to install all necessary Node.js dependencies and then launch the Vite development server, which will serve the Squint-CLJS application.

```shell
npm install
npm run dev
```

--------------------------------

### Start Development Server

Source: https://github.com/squint-cljs/squint/blob/main/examples/windowjs/README.md

Executes the 'dev' script defined in package.json, which typically starts a development server and handles the compilation of ClojureScript to JavaScript.

```Shell
npm run dev
```

--------------------------------

### Run AJV Example with Squint

Source: https://github.com/squint-cljs/squint/blob/main/examples/ajv/Readme.md

This snippet illustrates how to install dependencies and execute the AJV example using Squint, showcasing the console output for both valid and invalid user data validation.

```sh
nmp i
npx squint run ajv.cljs


[squint] Running ajv.cljs
Valid user: ✅ Valid null
Invalid user: ❌ Invalid [
  {
    instancePath: '',
    schemaPath: '#/required',
    keyword: 'required',
    params: { missingProperty: 'email' },
    message: "must have required property 'email'"
  }
]
```

--------------------------------

### Build production website with Vite

Source: https://github.com/squint-cljs/squint/blob/main/examples/game-of-life/README.md

Compiles and bundles the project for production deployment using Vite. This process optimizes assets, minifies code, and prepares the application for efficient serving in a production environment.

```Shell
npx vite build public
```

--------------------------------

### Install squint-cljs dependency using npm

Source: https://github.com/squint-cljs/squint/blob/main/examples/game-of-life/README.md

Installs the `squint-cljs` package, a ClojureScript to JavaScript compiler, into the project's `node_modules` directory. This is a prerequisite for compiling ClojureScript code.

```Shell
npm install squint-cljs
```

--------------------------------

### Run standalone QuickJS executable

Source: https://github.com/squint-cljs/squint/blob/main/examples/quickjs/README.md

This command executes the standalone application `hello` that was previously created by `qjsc`. It verifies that the compiled executable runs correctly and produces the expected output, demonstrating the successful creation of a self-contained application.

```Shell
$ ./hello
Hello world!
[[1,4,7],[2,5,8],[3,6,9]]
```

--------------------------------

### Compile JavaScript to standalone executable with QuickJS

Source: https://github.com/squint-cljs/squint/blob/main/examples/quickjs/README.md

This command uses `qjsc`, the QuickJS compiler, to create a standalone executable named `hello` from the bundled JavaScript file (`main.min.mjs`). This allows the JavaScript application to be distributed and run without requiring the QuickJS interpreter to be installed separately.

```Shell
$ qjsc -o hello main.min.mjs
```

--------------------------------

### Start Expo Development Server

Source: https://github.com/squint-cljs/squint/blob/main/examples/expo-react-native/README.md

Execute this command to launch the Expo development server. The server enables you to run your application on emulators, simulators, or physical devices for testing and development.

```bash
npx expo start
```

--------------------------------

### Start Development Server with Babashka

Source: https://github.com/squint-cljs/squint/blob/main/examples/vite-react/README.md

This command starts the Squint watch process and the Vite development server. Compiled JavaScript files are generated and served from the `public/js` directory.

```bash
bb dev
```

--------------------------------

### ClojureScript: Setup Animation Loop and Application Initialization

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

This snippet defines the main animation loop using `requestAnimationFrame` and integrates `Stats.js` for performance monitoring. The `init` function sets up Stats.js and starts the animation, which is then immediately invoked upon script loading.

```ClojureScript
(defn animate [s]
      (.begin s)
      (render)
      (.end s)
      (.requestAnimationFrame js/window #(animate s)))
(defn ^:async init []
      (let [s (Stats. [])]
        (js/document.body.prepend (:dom s))
        (animate s)))
(defonce doit (do (init) true))
```

--------------------------------

### Execute bundled JavaScript with QuickJS

Source: https://github.com/squint-cljs/squint/blob/main/examples/quickjs/README.md

This command runs the bundled JavaScript file (`main.min.mjs`) directly using the QuickJS engine. It demonstrates how to execute a prepared JavaScript script within the QuickJS runtime environment.

```Shell
$ qjs main.min.mjs
Hello world!
[[1,4,7],[2,5,8],[3,6,9]]
```

--------------------------------

### Install Project Dependencies with npm

Source: https://github.com/squint-cljs/squint/blob/main/examples/expo-react-native/README.md

This command installs all required Node.js packages listed in the `package.json` file. It's a crucial first step to set up the development environment for the Expo React Native project.

```bash
npm i
```

--------------------------------

### Compile Project for Production

Source: https://github.com/squint-cljs/squint/blob/main/examples/windowjs/README.md

Compiles the project's source code and assets for production deployment using Vite, outputting the compiled files into the 'public' directory.

```Shell
vite build public
```

--------------------------------

### Compile ClojureScript to JavaScript with Squint in watch mode

Source: https://github.com/squint-cljs/squint/blob/main/examples/game-of-life/README.md

Starts the Squint compiler in watch mode, automatically recompiling `.cljs` files to `.js` files whenever changes are detected. This command is crucial for a smooth development workflow, providing real-time updates.

```Shell
npx squint watch
```

--------------------------------

### Start Expo Dev Server and Squint Watcher

Source: https://github.com/squint-cljs/squint/blob/main/examples/expo-react-native/README.md

This command simultaneously starts the Expo development server and the Squint watcher. It enables hot-reloading and allows you to run your application during development.

```bash
bb dev
```

--------------------------------

### Bundle JavaScript module with esbuild for QuickJS

Source: https://github.com/squint-cljs/squint/blob/main/examples/quickjs/README.md

This command uses esbuild to bundle and minify the generated JavaScript module (`main.mjs`) into a single, self-contained file (`main.min.mjs`). This step is crucial because QuickJS does not natively load dependencies from NPM, requiring all code to be bundled into a single file for execution.

```Shell
$ npx esbuild main.mjs --bundle --minify --platform=node --outfile=main.min.mjs --format=esm

  main.min.mjs  842b

⚡ Done in 11ms
```

--------------------------------

### Initialize New Expo React Native Project

Source: https://github.com/squint-cljs/squint/blob/main/examples/expo-react-native/README.md

Use this command to create a fresh Expo application named `expo-react-native`. It sets up the basic project structure and necessary configuration files for an Expo project.

```bash
npx create-expo-app expo-react-native
```

--------------------------------

### Start Test Watcher with Babashka

Source: https://github.com/squint-cljs/squint/blob/main/examples/vite-react/README.md

This command initiates Squint watch specifically for test files and starts the Vitest test watcher. Test-related files are generated in the `public/test` directory.

```bash
bb test:watch
```

--------------------------------

### Compile ClojureScript to JavaScript using ClavaScript

Source: https://github.com/squint-cljs/squint/blob/main/examples/quickjs/README.md

This command compiles a ClojureScript file (`main.cljs`) into a JavaScript module (`main.mjs`) using the `clava` CLI tool. This is the initial step to prepare ClojureScript code for execution or bundling with standard JavaScript tools.

```Shell
$ npx clava main.cljs
[clava] Compiling CLJS file: main.cljs
[clava] Wrote JS file: main.mjs
```

--------------------------------

### Run Squint Watcher for Hot Reloading

Source: https://github.com/squint-cljs/squint/blob/main/examples/expo-react-native/README.md

This command starts the Squint watcher process. It continuously monitors your Squint source files for changes, automatically recompiling them and enabling hot-reloading in your Expo application for a faster development cycle.

```bash
npx squint watch
```

--------------------------------

### JavaScript: Editor Setup and Squint Compilation Integration

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

This JavaScript code handles URL parameters to load boilerplate or source code, initializes a CodeMirror editor (`EditorState`, `EditorView`), and dynamically imports the `squint-cljs` compiler. It exposes `window.compile` to trigger compilation and evaluation of editor content, and `window.share` for future sharing functionality.

```JavaScript
let boilerplate = urlParams.get('boilerplate');
let boilerplateSrc;
if (boilerplate) {
  boilerplateSrc = await fetch(boilerplate).then(p => p.text());
}
let src = urlParams.get('src');
if (src) {
  if (/http(s)?:\\/\\/.*\\*/.test(src)) {
    src = await fetch(src).then(p => p.text());
  } else {
    src = atob(src)
  };
  doc = src;
} else {
  // doc = localStorage.getItem("document") || doc;
}
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;
var dev = JSON.parse(urlParams.get('dev')) ?? location.hostname === 'localhost';
var squintUrl;
if (dev) {
  console.log('Loading development squint.js')
  squintUrl = '/index.js';
} else {
  squintUrl = 'squint-cljs';
}
var squint = await(import(squintUrl));
var compileString = squint.compileString;
window.compile = () => {
  let code = editor.state.doc.toString();
  code = '' + boilerplateSrc + '\n\n' + code;
  evalCode(code);
}
window.share = () =>
```

--------------------------------

### JavaScript Editor Setup and Prettier Formatting

Source: https://github.com/squint-cljs/squint/blob/main/index.html

JavaScript code for initializing compiler state and a JavaScript editor instance. The `JSEditor` asynchronous function formats provided JavaScript code using Prettier with Babel plugins, ensuring consistent code style before it's displayed or processed.

```JavaScript
let compilerState = null;
let jsEditor = null;
async function JSEditor(js) {
  js = await prettier.format(js, {parser: "babel", plugins: [prettierPluginJS, prettierPluginBabel]});
  js = js.trim();
  const elt =
```

--------------------------------

### Initialize Main CodeMirror Editor and Load Content

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Initializes the primary CodeMirror editor instance for the Squint CLJS development environment. It handles loading initial document content from URL parameters (`boilerplate`, `src`) or `localStorage`, falling back to a default ClojureScript example. The editor is then attached to the DOM element `#editor`.

```JavaScript
let boilerplate = urlParams.get('boilerplate');
let boilerplateSrc;
if (boilerplate) {
  boilerplateSrc = await fetch(boilerplate).then((p) => p.text());
}
let src = urlParams.get('src');
if (src) {
  if (/http(s)?:\/\/.*$/.test(src)) {
    src = await fetch(src).then((p) => p.text());
  } else {
    src = atob(src);
  }
  doc = src;
} else {
  doc = localStorage.getItem('document') || doc;
}
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;
```

--------------------------------

### ClojureScript FizzBuzz and Confetti Example

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Provides an example of ClojureScript code demonstrating a `fizz-buzz` function using `condp` and a `require` statement to import an external JavaScript module (`canvas-confetti`). It also shows how to use `js-await` for asynchronous JavaScript interop. This code is used as a default document in the editor.

```ClojureScript
(comment (fizz-buzz 1) (fizz-buzz 3) (fizz-buzz 5) (fizz-buzz 15) (fizz-buzz 17) (fizz-buzz 42))
(defn fizz-buzz [n]
  (condp (fn [a b] (zero? (mod b a))) n
    15 "fizzbuzz"
    3 "fizz"
    5 "buzz"
    n))
(require '["https://esm.sh/canvas-confetti@1.6.0$default" :as confetti])
(do (js-await (confetti)) (+ 1 2 3))
```

--------------------------------

### Define JavaScript Classes with Squint defclass

Source: https://github.com/squint-cljs/squint/blob/main/doc/defclass.md

This example demonstrates how to define JavaScript classes in Squint CLJS using `defclass`. It covers defining instance and static fields, constructors, instance methods, static methods, and class inheritance. It also shows how to call super constructors and methods, and use async methods.

```Clojure
(ns my-class
  (:require [squint.core :refer [defclass]]))

(defclass class-1
  (field -x)
  (field -y :dude) ;; default
  (^:static field a)
  (^:static field b :dude) ;; default
  (constructor [this x] (set! -x x))

  Object
  (get-name-separator [_] (str "-" -x))
  (^:static static-method [_] (str "static field: " a)))

(defclass Class2
  (extends class-1)
  (field -y 1)
  (constructor [_ x y]
               (super (+ x y)))

  Object
  (dude [_]
        (str -y (super.get-name-separator)))
  (^:async fetch [_]
    (js/fetch "https://clojure.org"))

  (toString [this] (str "<<<<" (.dude this) ">>>>") ))

(def c (new Class2 1 2))
```

--------------------------------

### Configure Expo Entry Point in App.js

Source: https://github.com/squint-cljs/squint/blob/main/examples/expo-react-native/README.md

This JavaScript code snippet modifies `App.js` to import the compiled Squint application from `./out-js/App` and export it as the default. This ensures Expo correctly identifies and loads your application's main entry point.

```js
import App from './out-js/App';
export default App;
```

--------------------------------

### Build Production Ready Application with Babashka

Source: https://github.com/squint-cljs/squint/blob/main/examples/vite-react/README.md

This command generates a production-ready build of the application. The final bundled output is placed in `public/dist`, and a bundle status report is created at the project root as `./bundle-visualization.html`.

```bash
bb build
```

--------------------------------

### ClojureScript: Initialize Three.js Scene, Camera, and WebGL Renderer

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

This snippet sets up the fundamental components of a Three.js application: a scene, a perspective camera positioned and looking at the origin, and a WebGL renderer configured for antialiasing, pixel ratio, size, and tone mapping. The renderer's DOM element is prepended to the document body.

```ClojureScript
(def scene (three/Scene.))
(def origin (three/Vector3.))
(def height (/ (.-innerHeight js/window) 2))
(def width (min (* 2 height) (.-innerWidth js/window)))
(def camera (doto (three/PerspectiveCamera. 75 (/ width height) 0.1 1000)
              (-> :position ((fn [pos] (.set pos 0 0 70))))
              (.lookAt origin)))
(def renderer (doto (three/WebGLRenderer. (clj->js {:antialias true}))
                (.setPixelRatio (.-devicePixelRatio js/window))
                (.setSize width height)
                (-> (assoc! :toneMapping three/ReinhardToneMapping :toneMappingExposure (Math/pow 1.4 5.0))
                    (-> :domElement js/document.body.prepend))))
```

--------------------------------

### Run Squint CLJS Development Server

Source: https://github.com/squint-cljs/squint/blob/main/examples/express/README.md

This command initiates the development server for the Squint CLJS application. It includes a Node.js runtime and a Squint watcher, which automatically reloads the application in the browser upon detecting changes in the source files.

```Shell
bb dev
```

--------------------------------

### Configure JavaScript Module Imports

Source: https://github.com/squint-cljs/squint/blob/main/examples/wordle/index.html

This snippet defines an import map for JavaScript modules, mapping 'clavascript/core.js' to a specific CDN URL. This configuration ensures consistent module resolution for the application.

```JavaScript
{ "imports": { "clavascript/core.js": "https://cdn.jsdelivr.net/npm/clavascript@0.0.0-alpha.10/core.js" } }
```

--------------------------------

### Initialize Squint Core and Print Mapped List

Source: https://github.com/squint-cljs/squint/blob/main/index.umd.html

This snippet demonstrates how to initialize the Squint core library globally in a JavaScript environment and then use its `prn` function to print the result of mapping the `inc` function over a list of numbers. It showcases basic functional programming constructs available through Squint's compiled output.

```JavaScript
globalThis._sc = squint.core; _sc.prn(_sc.map(_sc.inc, [1, 2, 3]));
```

--------------------------------

### Dynamically Import Squint CLJS Compiler

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Determines the correct path for importing the Squint CLJS compiler based on whether the application is running in development mode (localhost) or production. It then uses `await import()` to load the `squint` module, making its functions like `compileStringEx` available for code compilation.

```JavaScript
var dev = JSON.parse(urlParams.get('dev')) ?? location.hostname === 'localhost';
var squintUrl;
if (dev) {
  console.log('Loading development squint.js');
  squintUrl = '/index.js';
} else {
  squintUrl = 'squint-cljs';
}
var squint = await import(squintUrl);
var compileStringEx
```

--------------------------------

### ClojureScript: Initialize Global Objects and Load External Libraries

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

This snippet demonstrates how to define global JavaScript objects and asynchronously load external JavaScript libraries (dat.gui and stats.js) into the ClojureScript environment using `js/fetch` and `js/eval.call`.

```ClojureScript
(def BezierEasing js/globalThis.BezierEasing)
(def Math js/globalThis.Math)
(defn ^:async eval-script [url]
  (let [resp (js-await (js/fetch url))
        script (js-await (.text resp))]
    (js/eval.call js/globalThis script)))
(js-await (eval-script "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.js"))
(def dat js/globalThis.dat)
(js-await (eval-script "https://unpkg.com/stats.js@0.17.0/build/stats.min.js"))
(def Stats js/globalThis.Stats)
```

--------------------------------

### Squint CLJS Module Import Map Configuration

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

Defines the import map for Squint CLJS and related libraries, including CodeMirror and Three.js, enabling browser-based module loading without a build step. It specifies direct URLs for various JavaScript modules.

```JSON
{ "imports": { "squint-cljs": "https://unpkg.com/squint-cljs@0.4.67/index.js", "squint-cljs/core.js": "https://unpkg.com/squint-cljs@0.4.67/core.js", "squint-cljs/string.js": "https://unpkg.com/squint-cljs@0.4.67/string.js", "@codemirror/language": "https://ga.jspm.io/npm:@codemirror/language@6.9.2/dist/index.js", "@codemirror/state": "https://ga.jspm.io/npm:@codemirror/state@6.3.1/dist/index.js", "@codemirror/view": "https://ga.jspm.io/npm:@codemirror/view@6.21.4/dist/index.js", "@nextjournal/clojure-mode": "https://ga.jspm.io/npm:@nextjournal/clojure-mode@0.3.0/dist/nextjournal/clojure_mode.mjs", "@nextjournal/clojure-mode/extensions/eval-region": "https://ga.jspm.io/npm:@nextjournal/clojure-mode@0.3.0/dist/nextjournal/clojure_mode/extensions/eval_region.mjs", "three": "https://unpkg.com/three@0.158.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/", "easing": "https://ga.jspm.io/npm:easing@1.2.1/browser-easing.js", "bezier-easing": "https://unpkg.com/bezier-easing@2.1.0/dist/bezier-easing.js" }, "scopes": { "https://ga.jspm.io/": { "@codemirror/commands": "https://ga.jspm.io/npm:@codemirror/commands@6.3.0/dist/index.js", "@lezer/common": "https://ga.jspm.io/npm:@lezer/common@1.1.0/dist/index.js", "@lezer/highlight": "https://ga.jspm.io/npm:@lezer/highlight@1.1.6/dist/index.js", "@lezer/lr": "https://ga.jspm.io/npm:@lezer/lr@1.3.13/dist/index.js", "@lezer/markdown": "https://ga.jspm.io/npm:@lezer/markdown@1.1.0/dist/index.js", "@nextjournal/lezer-clojure": "https://ga.jspm.io/npm:@nextjournal/lezer-clojure@1.0.0/dist/index.es.js", "style-mod": "https://ga.jspm.io/npm:style-mod@4.1.0/src/style-mod.js", "w3c-keyname": "https://ga.jspm.io/npm:w3c-keyname@2.2.8/index.js" } } }
```

--------------------------------

### Set InstantDB Application ID in .env

Source: https://github.com/squint-cljs/squint/blob/main/examples/instantdb/README.md

Before running the application, configure your InstantDB application ID in the project's `.env` file. This environment variable is crucial for the application to connect to your InstantDB instance.

```dotenv
VITE_APP_ID=...
```

--------------------------------

### ClojureScript: Configure dat.GUI Controls for Animation Parameters

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

This code defines a map of animation parameters and initializes a dat.GUI instance. It then adds sliders for each parameter, allowing real-time adjustment of the 3D animation's magnitude, scaling, and sinusoidal effects.

```ClojureScript
(def params {:magnitude 0.1 :x-scale 1.0 :y-scale 0.5 :sin-x-scale 0.0 :cos-y-scale 1.0})
(def gui (doto (dat/GUI.)
           (.add params "magnitude" 0.0 0.5)
           (.add params "x-scale" 0.0 2.0)
           (.add params "y-scale" 0.0 2.0)
           (.add params "sin-x-scale" 0.0 2.0)
           (.add params "cos-y-scale" 0.0 2.0)))
```

--------------------------------

### ClojureScript Advent of Code Boilerplate

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Contains a ClojureScript boilerplate for Advent of Code challenges. It includes helper functions like `fetch-input`, `append`, and `spy`, and provides `part-1` and `part-2` solutions for a specific problem (likely 2022 Day 1) using sequence manipulation. This serves as a template for solving AOC problems within the Squint CLJS environment.

```ClojureScript
;; Helper functions:
;; (fetch-input year day) - get AOC input
;; (append str) - append str to DOM
;; (spy x) - log x to console and return x
;; Remember to update the year and day in the fetch-input call.
(def input (->> (js-await (fetch-input 2022 1)) #_spy str/split-lines (mapv parse-long)))
(defn part-1 []
  (->> input (partition-by nil?) (take-nth 2) (map #(apply + %)) (apply max)))
(defn part-2 []
  (->> input (partition-by nil?) (take-nth 2) (map #(apply + %)) (sort-by -) (take 3) (apply +)))
(time (part-1))
#_(time (part-2))
```

--------------------------------

### ClojureScript: Define Animation Helpers and Initialize Three.js Mesh

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

This snippet sets up variables for animation state (`current-frame`), defines easing functions (`linear`, `bezier`), and provides a utility function `fix-zero`. It also initializes a `three/Points` mesh with a `SphereGeometry` and `PointsMaterial`, adding it to the scene for rendering.

```ClojureScript
(def current-frame (atom 0))
(def linear (easing 76 "linear" {:endToEnd true}))
(def bezier (mapv (BezierEasing. 0.74 -0.01 0.21 0.99) (range 0 1 (/ 1.0 76))))
(defn fix-zero [n] (if (zero? n) 1 n))
(def mesh (let [m (three/Points. (three/SphereGeometry. 11 64 64)
                                     (three/PointsMaterial. {:vertexColors true :size 0.7 :transparent true :alphaTest 0.5 :blending three/AdditiveBlending}))]
                (.add scene m) m))
```

--------------------------------

### Asynchronous Evaluation of Squint CLJS Code

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Defines an asynchronous function `evalCode` that takes ClojureScript code, compiles it to JavaScript using `compileStringEx`, and then executes the resulting JavaScript. It handles import sources, REPL mode, and displays the output in a React component (`Inspector`) or updates the DOM with error messages. This is the core runtime for Squint CLJS.

```JavaScript
let evalCode = async (code) => {
  try {
    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 + '/');
    }
    JSEditor(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} })()`);
      if (result && result?.constructor?.name === 'LazyIterable') {
        let stdlib = (await import("squint-cljs/core.js"));
        let take_fn = stdlib.take;
        let concat_fn = stdlib.concat;
        let end = {};
        result = [...take_fn(10, concat_fn(result, [end]))];
        let isEnd = result[result.length - 1] !== end;
        if (isEnd) result.push('...')
        else result.pop();
        result = new LazyIterable(result);
      }
      reactRoot.render(React.createElement(Inspector, {
        data: result
      }));
      if (docChanged) {
        url.searchParams.delete('src');
        window.history.replaceState(null, null, url);
        localStorage.setItem('document', editor.state.doc.toString());
        docChanged = false;
      }
    }
  } catch (e) {
    document.querySelector('#result').innerText = e.message + '\n\n' + e.stack;
    console.error(e);
  }
};
```

--------------------------------

### Create Blank Advent of Code Playground in JavaScript

Source: https://github.com/squint-cljs/squint/blob/main/index.html

This function initializes a new Advent of Code (AOC) playground. It base64-encodes a predefined AOC document, sets it as the source in the URL, and configures boilerplate and REPL mode, then navigates to the new URL.

```javascript
window.blankAOC = () => { const code = btoa(aocDoc); const url = new URL(window.location); url.searchParams.set('src', code); url.searchParams.set('boilerplate', aocBoilerplateUrl); url.searchParams.set('repl', true); window.location = url; }
```

--------------------------------

### Initialize CodeMirror Editor for Compiled JavaScript Display

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Sets up a CodeMirror `EditorView` to display compiled JavaScript code. It configures extensions like `javascript().language`, `fontSizeTheme`, `foldGutter()`, and `syntaxHighlighting()`, and ensures the editor is not editable. This editor is used to show the output of the Squint CLJS compilation process.

```JavaScript
document.querySelector('#compiledCode'); const fontSizeTheme = EditorView.theme({
  $: {
    fontSize: "5pt"
  }
});
let extensions = [javascript({}).language, fontSizeTheme, foldGutter(), syntaxHighlighting(defaultHighlightStyle), EditorView.editable.of(false)];
let state = EditorState.create({
  doc: js,
  extensions: extensions
});
if (jsEditor) {
  jsEditor.destroy();
}
let editor = new EditorView({
  state: state,
  parent: elt,
  extensions: extensions
});
jsEditor = editor;
```

--------------------------------

### Squint CLJS Editor JavaScript Module Imports

Source: https://github.com/squint-cljs/squint/blob/main/index.html

JavaScript import statements for setting up the CodeMirror-based editor in Squint CLJS. It includes core CodeMirror components, Clojure mode extensions, Prettier for code formatting, and React for UI rendering, providing the necessary dependencies for the editor's functionality.

```JavaScript
import { default_extensions, complete_keymap } from '@nextjournal/clojure-mode';
import { history, historyKeymap } from '@codemirror/commands';
import * as eval_region from '@nextjournal/clojure-mode/extensions/eval-region';
import { EditorView, drawSelection, keymap } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { syntaxHighlighting, defaultHighlightStyle, foldGutter } from '@codemirror/language';
import { javascript } from "@codemirror/lang-javascript";
import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs";
import prettierPluginJS from "https://unpkg.com/prettier@3.1.1/plugins/estree.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.1.1/plugins/babel.mjs";
import React from "react";
import ReactDOM from "react-dom";
import { Inspector } from "react-inspector";
```

--------------------------------

### CodeMirror Editor Extensions Configuration

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

An array defining all active CodeMirror extensions for the editor instance. It includes standard features like theme, folding, syntax highlighting, and selection drawing, along with custom Squint CLJS keymap and evaluation extensions.

```JavaScript
let extensions = [
  theme,
  foldGutter(),
  syntaxHighlighting(defaultHighlightStyle),
  drawSelection(),
  keymap.of(complete_keymap),
  squintExtension({modifier: "Meta"}),
  eval_region.extension({modifier: "Meta"}),
  updateExt,
  ...default_extensions
];
```

--------------------------------

### Squint CLJS Module Imports Configuration

Source: https://github.com/squint-cljs/squint/blob/main/playground/public/index.html

This JavaScript object literal defines the module import map for the Squint CLJS project. It specifies the URLs for various dependencies, including core Squint modules, CodeMirror libraries for editor functionality, React for UI, and Lezer parsers for syntax highlighting.

```JavaScript
{ "imports": { "squint-cljs": "https://unpkg.com/squint-cljs@0.6.88/index.js", "squint-cljs/core.js": "./src/squint/core.js", "squint-cljs/string.js": "./src/squint/string.js", "squint-cljs/src/squint/string.js": "./src/squint/string.js", "squint-cljs/src/squint/set.js": "./src/squint/set.js", "squint-cljs/src/squint/html.js": "./src/squint/html.js", "@codemirror/language": "https://ga.jspm.io/npm:@codemirror/language@6.10.0/dist/index.js", "@codemirror/lang-javascript": "https://ga.jspm.io/npm:@codemirror/lang-javascript@6.2.1/dist/index.js", "@codemirror/state": "https://ga.jspm.io/npm:@codemirror/state@6.4.0/dist/index.js", "@codemirror/view": "https://ga.jspm.io/npm:@codemirror/view@6.23.0/dist/index.js", "@codemirror/commands": "https://ga.jspm.io/npm:@codemirror/commands@6.3.0/dist/index.js", "@codemirror/autocomplete": "https://ga.jspm.io/npm:@codemirror/autocomplete@6.11.1/dist/index.js", "@lezer/highlight": "https://ga.jspm.io/npm:@lezer/highlight@1.1.6/dist/index.js", "@lezer/common": "https://ga.jspm.io/npm:@lezer/common@1.2.0/dist/index.js", "@lezer/javascript": "https://ga.jspm.io/npm:@lezer/javascript@1.4.12/dist/index.js", "@nextjournal/lezer-clojure": "https://ga.jspm.io/npm:@nextjournal/lezer-clojure@1.0.0/dist/index.es.js", "@nextjournal/clojure-mode": "https://unpkg.com/@nextjournal/clojure-mode@0.3.1/dist/nextjournal/clojure_mode.mjs", "@nextjournal/clojure-mode/extensions/eval-region": "https://unpkg.com/@nextjournal/clojure-mode@0.3.1/dist/nextjournal/clojure_mode/extensions/eval_region.mjs", "react": "https://esm.sh/react@18.2.0", "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime", "react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime", "react-dom": "https://esm.sh/react-dom@18.2.0", "@lezer/lr": "https://ga.jspm.io/npm:@lezer/lr@1.3.13/dist/index.js", "@lezer/markdown": "https://ga.jspm.io/npm:@lezer/markdown@1.1.0/dist/index.js", "style-mod": "https://ga.jspm.io/npm:style-mod@4.1.0/src/style-mod.js", "w3c-keyname": "https://ga.jspm.io/npm:w3c-keyname@2.2.8/index.js", "react-inspector": "https://esm.sh/react-inspector" } }
```

--------------------------------

### Configure CodeMirror Extensions for Squint CLJS Editor

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Configures the extensions array for the primary CodeMirror editor used for Squint CLJS code. It includes standard features like `history()`, `foldGutter()`, `syntaxHighlighting()`, and `keymap.of()` for various commands, along with custom `squintExtension` and `eval_region.extension` for Squint-specific functionalities and evaluation regions.

```JavaScript
let updateExt = EditorView.updateListener.of((update) => {
  if (update.docChanged) docChanged = true;
});
const platform = navigator.platform;
const isMac = platform.startsWith('Mac') || platform.startsWith('iP');
let modifier = localStorage.getItem("editor.modifier") || (isMac ? 'Meta' : 'Ctrl');
if (!isMac || modifier === 'Ctrl') document.getElementById('modifierDesc').innerText = 'Ctrl'
let extensions = [
  history(),
  theme,
  foldGutter(),
  syntaxHighlighting(defaultHighlightStyle),
  drawSelection(),
  keymap.of(complete_keymap),
  keymap.of(historyKeymap),
  squintExtension({
    modifier: modifier
  }),
  eval_region.extension({
    modifier: modifier
  }),
  updateExt,
  ...default_extensions,
];
```

--------------------------------

### Squint CLJS Editor Keymap Extension

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

Creates a CodeMirror extension that defines custom keybindings for Squint CLJS code evaluation. It maps 'Alt-Enter' to `evalCell` and a modifier-key-plus-'Enter' (e.g., 'Meta-Enter') to `evalAtCursor` for interactive REPL-like functionality.

```JavaScript
let squintExtension = ( opts ) => {
  return keymap.of([{key: "Alt-Enter", run: evalCell}, {key: opts.modifier + "-Enter", run: evalAtCursor, shift: evalToplevel }])
}
```

--------------------------------

### Initialize REPL Checkbox and Compile

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

This snippet checks the initial state of the `repl` variable. If `repl` is true, it sets the 'replCheckBox' element to checked. Finally, it calls the `compile()` function, likely to process initial code or state upon page load.

```JavaScript
if (repl) { document.getElementById('replCheckBox').checked = true; } compile();
```

--------------------------------

### Initial Squint CLJS Editor Document Content

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

The default ClojureScript code loaded into the editor upon initialization. It demonstrates namespace declaration and requiring various Squint CLJS core functions and Three.js modules, including post-processing effects.

```ClojureScript
(ns user (:require ["squint-cljs/core.js" :as squint] ["three" :as three] ["three/addons/postprocessing/EffectComposer.js" :refer [EffectComposer]] ["three/addons/postprocessing/RenderPass.js" :refer [RenderPass]] ["three/addons/postprocessing/UnrealBloomPass.js" :refer [UnrealBloomPass]] ["three/addons/postprocessing/FilmPass.js"
```

--------------------------------

### CodeMirror Editor Theme Configuration (JavaScript)

Source: https://github.com/squint-cljs/squint/blob/main/index.html

JavaScript code defining the visual theme for the CodeMirror editor within Squint CLJS. It customizes styles for content, line appearance, bracket highlighting, gutter display, and cursor visibility, ensuring a tailored editing experience.

```JavaScript
let theme = EditorView.theme({
  '.cm-content': {
    whitespace: 'pre-wrap',
    passing: '10px 0',
    flex: '1 1 0'
  },
  '&.cm-focused': {
    outline: '0 !important'
  },
  '.cm-line': {
    padding: '0 9px',
    'line-height': '1.6',
    'font-size': '16px',
    'font-family': 'var(--code-font)'
  },
  '.cm-matchingBracket': {
    'border-bottom': '1px solid var(--teal-color)',
    color: 'inherit'
  },
  '.cm-gutters': {
    background: 'transparent',
    border: 'none'
  },
  '.cm-gutterElement': {
    'margin-left': '5px'
  },
  '.cm-cursor': {
    visibility: 'hidden'
  },
  '&.cm-focused .cm-cursor': {
    visibility: 'visible'
  }
});
```

--------------------------------

### Squint CLJS Module Import Map

Source: https://github.com/squint-cljs/squint/blob/main/index.html

Defines the module import map for the Squint CLJS project, specifying the URLs for various external libraries like CodeMirror, React, and internal Squint CLJS modules. This map is crucial for module resolution in the application.

```APIDOC
{
  "imports": {
    "squint-cljs": "https://unpkg.com/squint-cljs@0.6.88/index.js",
    "squint-cljs/core.js": "https://unpkg.com/squint-cljs@0.6.88/core.js",
    "squint-cljs/string.js": "https://unpkg.com/squint-cljs@0.6.88/string.js",
    "squint-cljs/src/squint/string.js": "https://unpkg.com/squint-cljs@0.6.88/src/squint/string.js",
    "squint-cljs/src/squint/set.js": "https://unpkg.com/squint-cljs@0.6.88/src/squint/set.js",
    "@codemirror/language": "https://ga.jspm.io/npm:@codemirror/language@6.10.0/dist/index.js",
    "@codemirror/lang-javascript": "https://ga.jspm.io/npm:@codemirror/lang-javascript@6.2.1/dist/index.js",
    "@codemirror/state": "https://ga.jspm.io/npm:@codemirror/state@6.4.0/dist/index.js",
    "@codemirror/view": "https://ga.jspm.io/npm:@codemirror/view@6.23.0/dist/index.js",
    "@codemirror/commands": "https://ga.jspm.io/npm:@codemirror/commands@6.3.0/dist/index.js",
    "@codemirror/autocomplete": "https://ga.jspm.io/npm:@codemirror/autocomplete@6.11.1/dist/index.js",
    "@lezer/highlight": "https://ga.jspm.io/npm:@lezer/highlight@1.1.6/dist/index.js",
    "@lezer/common": "https://ga.jspm.io/npm:@lezer/common@1.2.0/dist/index.js",
    "@lezer/javascript": "https://ga.jspm.io/npm:@lezer/javascript@1.4.12/dist/index.js",
    "@nextjournal/lezer-clojure": "https://ga.jspm.io/npm:@nextjournal/lezer-clojure@1.0.0/dist/index.es.js",
    "@nextjournal/clojure-mode": "https://unpkg.com/@nextjournal/clojure-mode@0.3.1/dist/nextjournal/clojure_mode.mjs",
    "@nextjournal/clojure-mode/extensions/eval-region": "https://unpkg.com/@nextjournal/clojure-mode@0.3.1/dist/nextjournal/clojure_mode/extensions/eval_region.mjs",
    "react": "https://esm.sh/react@18.2.0",
    "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
    "react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime",
    "react-dom": "https://esm.sh/react-dom@18.2.0",
    "@lezer/lr": "https://ga.jspm.io/npm:@lezer/lr@1.3.13/dist/index.js",
    "@lezer/markdown": "https://ga.jspm.io/npm:@lezer/markdown@1.1.0/dist/index.js",
    "style-mod": "https://ga.jspm.io/npm:style-mod@4.1.0/src/style-mod.js",
    "w3c-keyname": "https://ga.jspm.io/npm:w3c-keyname@2.2.8/index.js",
    "react-inspector": "https://esm.sh/react-inspector"
  }
}
```

--------------------------------

### CodeMirror Editor Theme Definition

Source: https://github.com/squint-cljs/squint/blob/main/examples/threejs/playground.html

Defines CSS styles for the CodeMirror editor view using `EditorView.theme`. It customizes content wrapping, padding, line height, font family, matching bracket highlighting, gutter appearance, and cursor visibility based on focus.

```JavaScript
let theme = EditorView.theme({
  ".cm-content": {whitespace: "pre-wrap", passing: "10px 0", flex: "1 1 0"},
  "&.cm-focused": {outline: "0 !important"},
  ".cm-line": {"padding": "0 9px", "line-height": "1.6", "font-size": "16px", "font-family": "var(--code-font)"},
  ".cm-matchingBracket": {"border-bottom": "1px solid var(--teal-color)", "color": "inherit"},
  ".cm-gutters": {background: "transparent", border: "none"},
  ".cm-gutterElement": {"margin-left": "5px"},
  ".cm-cursor": {visibility: "hidden"},
  "&.cm-focused .cm-cursor": {visibility: "visible"}
});
```
Tokens:
Raw