Using Squint from JS

• The squint library is available precompiled from NPM and is importable as squint_core.
• This is the CLJS standard library but using vanilla JS objects.
• You can use JavaScript's eval to

import * as squint_core from 'npm:squint-cljs/core.js';
// this works
eval(`squint_core.println("I'm sittin' on the dock of the bay ....");`)
// or you can invoke larger code blocks within functions
eval(
  `(async function() {
      squint_core.println(
        "I'm sittin' on the dock of the bay ....")})()
`)

Compiling CLJ-> JS with Squint

• The squint COMPILER is what converts CLJS into JS.
• To execute the compiled JS you will need the squint_core library.
• this example just shows using CLJS syntax and yielding a JS Object.

import * as squint from 'npm:squint-cljs';
import * as squint_core from 'npm:squint-cljs/core.js';

// Showing Arrows and Assoc work as per CLJS
const code = `
  (-> {}
    (assoc :greatline "... I'm sittin' on the dock of the bay ....")
    (assoc :another "... Watching the tide roll away ..."))`;

// compiler action is there
// note: I am getting rid of imports (first line).
// Leave this if you are in Node.
const compilerState = squint.compileStringEx(
  `(do ${code})`, {repl: false, context: 'return', "elide-exports": true}, null);
const js = compilerState.javascript;
const import_index = js.indexOf('\n');
const newString2 = js.substring(import_index + 1);
const result = {value: eval(`(async function() { ${newString2} })()`)};
view(await (result).value);

Squint + Text Box

• Since we are in Observable Framework, let's try a TextArea
• To execute the compiled JS you will need the squint_core library.
• this example just shows using CLJS syntax and yielding a JS Object.
• Type some CLJS code and hit submit to view the output.
• Try the code I've provided below.

import * as squint from 'npm:squint-cljs';
import * as squint_core from 'npm:squint-cljs/core.js';

function compile(code) {
  let compilerState = squint.compileStringEx(
    `(do ${code})`, {repl: false, context: 'return', "elide-exports": true}, null);
  let js = compilerState.javascript;
  let import_index = js.indexOf('\n');
  let newString2 = js.substring(import_index + 1);
  let result = {value: eval(`(async function() { ${newString2} })()`)};
  console.log(result.value);
  return result.value
}

const essay = view(Inputs.textarea({label: "Squint CLJS Eval", rows: 3, submit: true, placeholder: "(+ 1 10 100)"}));
view(compile(essay))

Compiled Code Here

Example Code

;; cut/paste this above
(defn nodize
  "Transforms a hiccup-like vector [:name props children] into a node map."
  [form]
  (let [[name-val props-val children-val] form]
    (cond-> {"kind" name-val}
      (not (empty? props-val)) (assoc "params" props-val)
      (seq children-val) (assoc "children" (mapv nodize children-val)))))

(nodize
  [:root {:meta nil} [
    [:child1 {:awesome "yes"} nil ]
    [:child2 {:awesome "less_so"} nil]]])

CodeMirror + Mol*

• This takes the same principle as above but extends it to use the output JSON as input to another component.
• We are using the Mol* Viewer, a browser viewer for molecular structures.
• We are targetting the MolViewSpec, a Mol* extension and declarative visualization standard.
• The standard uses node trees in JSON.
• Here we are going to use a single cljs FN to compress the node tree.
• Hit ALT+Enter To evaluate the code.
• try changing blue to green and reevaluating.