NPM Release (#40)

* adjust for NPM release
* update usage in README and landing page
* add squint build snapshot with import-from-CDN demo

Author: zampino

.github/workflows/main.yml

@@ -29,6 +29,47 @@ jobs:
           yarn squint compile
           node dist/nextjournal/clojure_mode_tests.mjs
 
+  squint:
+    name: Static App / Squint Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛎 Checkout
+        uses: actions/checkout@v2
+
+      - name: 🔐 Google Auth
+        uses: google-github-actions/auth@v0
+        with:
+          credentials_json: ${{ secrets.GCLOUD_SERVICE_KEY }}
+
+      - name: 🔧 Setup Google Cloud SDK
+        uses: google-github-actions/setup-gcloud@v0.3.0
+
+      - name: 🔧 Install java
+        uses: actions/setup-java@v1
+        with:
+          java-version: '11.0.7'
+
+      - name: 🔧 Install clojure
+        uses: DeLaGuardo/setup-clojure@master
+        with:
+          bb: 'latest'
+
+      - name: 🔎 Build Squint static CDN Demo
+        run: bb squint:demo:build
+
+      - name: 📠 Copy static build to bucket under SHA
+        run: gsutil cp -r public gs://nextjournal-snapshots/clojure-mode/squint-build/${{ github.sha }}
+
+      - name: ✅ Add link to Clojure Mode Squint Demo
+        uses: Sibz/github-status-action@v1
+        with:
+          authToken: ${{secrets.GITHUB_TOKEN}}
+          context: 'CI / Static App / Squint'
+          description: 'Ready'
+          state: 'success'
+          sha: ${{github.event.pull_request.head.sha || github.sha}}
+          target_url: https://snapshots.nextjournal.com/clojure-mode/squint-build/${{ github.sha }}/squint-cdn-demo
+
   snapshot:
     name: Static App / Build
     runs-on: ubuntu-latest
@@ -53,18 +94,14 @@ jobs:
         uses: DeLaGuardo/setup-clojure@master
         with:
           cli: '1.10.3.943'
+
       - name: 🧶 Yarn Install
         run: yarn install
 
       - name: 🧶 Yarn Build
         run: |
           yarn build
 
-      - name: 🧶 Squint build
-        run: |
-          yarn squint compile
-          yarn vite:build
-
       - name: 📠 Copy static build to bucket under SHA
         run: gsutil cp -r public gs://nextjournal-snapshots/clojure-mode/build/${{ github.sha }}
 

.gitignore

@@ -5,8 +5,11 @@
 .cpcache
 public/js
 public/livedoc/js
+public/squint-cdn-demo
+squint-demo/node_modules
 node_modules
 public/test
 *.iml
 out
 dist
+**/.DS_Store

README.md

@@ -35,6 +35,25 @@ Enabling a decent Clojure/Script editor experience in the browser. Built for and
 {:deps {io.github.nextjournal/clojure-mode {:git/sha "<SHA>"}}}
 ```
 
+### Use it from [NPM](https://www.npmjs.com/package/@nextjournal/clojure-mode)
+
+```js
+import { default_extensions, complete_keymap } from '@nextjournal/clojure-mode';
+import { EditorView, drawSelection, keymap } from  '@codemirror/view';
+import { EditorState } from  '@codemirror/state';
+
+let extensions = [keymap.of(complete_keymap),
+                  ...default_extensions
+                 ];
+
+let state = EditorState.create({doc: "... some clojure code...",
+                                 extensions: extensions });
+let editorElt = document.querySelector('#editor');
+let editor = new EditorView({state: state,
+                             parent: editorElt,
+                             extensions: extensions });
+```
+
 ## 🛠 Development Setup
 
 * Install JS dependencies: `yarn install`

bb.edn

@@ -36,7 +36,9 @@
              :task (shell {:std :inherit :err :inherit}
                           "yarn build")}
 
-  watch-cljs (shell "yarn run squint watch")
+  watch-cljs (shell "yarn watch")
+
+  squint:watch-cljs (shell "yarn run squint watch")
 
   yarn-install:squint-dev (do
                             (shell "yarn add squint-cljs@link:../squint")
@@ -49,7 +51,19 @@
   vite:build {:depends [yarn-install]
               :task (shell "yarn vite:build")}
 
-  -dev {:depends [vite:dev watch-cljs]}
+  squint:build {:task (shell "yarn squint compile")}
+
+  publish {:depends [squint:build]
+           :doc "Publish to NPM, do `npm login` manually first to authenticate your shell."
+           :task (shell "npm publish")}
+
+  squint:demo:build {:task (do (shell {:dir "squint-demo"} "npm install")
+                               (shell {:dir "squint-demo"} "npx jspm link index.html -o index.html --cache no-cache")
+                               (fs/create-dirs "public/squint-cdn-demo")
+                               (fs/copy "squint-demo/index.mjs" "public/squint-cdn-demo/index.mjs" {:replace-existing true})
+                               (fs/copy "squint-demo/index.html" "public/squint-cdn-demo/index.html" {:replace-existing true}))}
+
+  -dev {:depends [vite:dev squint:watch-cljs watch-cljs]}
 
   dev {:doc "Compiles all cljs to mjs, runs vite in dev and starts a cherry watcher to recompile changed cljs. When run as `bb dev collab` also starts a Y.js collaboration server."
        ;; :depends [compile]

demo/src/deps.cljs

@@ -1,4 +1,5 @@
 {:npm-deps
  {"react" "^17.0.2"
   "react-dom" "^17.0.2"
-  "framer-motion" "^6.2.8"}}
+  "framer-motion" "^6.2.8"
+  "@codemirror/lang-javascript" "^6.0.0"}}

demo/src/nextjournal/clojure_mode/demo.cljs

@@ -1,6 +1,7 @@
 (ns nextjournal.clojure-mode.demo
   (:require ["@codemirror/commands" :refer [history historyKeymap]]
             ["@codemirror/language" :refer [foldGutter syntaxHighlighting defaultHighlightStyle]]
+            ["@codemirror/lang-javascript" :refer [javascript]]
             ["@codemirror/state" :refer [EditorState]]
             ["@codemirror/view" :as view :refer [EditorView]]
             ["react" :as react]
@@ -174,11 +175,33 @@
                          [:td.px-3.py-1.align-top.text-sm]
                          [:td.px-3.py-1.align-top]])]))))])
 
+(defn js-syntax [source]
+  (r/with-let [!view (r/atom nil)
+               mount! (fn [el]
+                        (when el
+                          (reset! !view (new EditorView
+                                             (j/obj :parent el
+                                                    :state (.create EditorState (j/obj :doc source
+                                                                                       :extensions (to-array [(javascript (j/obj))
+                                                                                                              (syntaxHighlighting defaultHighlightStyle)
+                                                                                                              (.. EditorState -readOnly (of true))
+                                                                                                              (foldGutter)
+                                                                                                              theme]))))))))]
+    [:div
+     [:div {:class "rounded-md mb-0 text-sm monospace overflow-auto relative border shadow-lg bg-white" :ref mount! :style {:max-height 410}}]]
+    (finally
+     (j/call @!view :destroy))))
+
 (defn ^:dev/after-load render []
   (rdom/render [samples] (js/document.getElementById "editor"))
   (.. (js/document.querySelectorAll "[clojure-mode]")
       (forEach #(when-not (.-firstElementChild %)
                   (rdom/render [editor (str/trim (.-innerHTML %))] %))))
+
+  (.. (js/document.querySelectorAll "[js-mode]")
+      (forEach #(when-not (.-firstElementChild %)
+                  (rdom/render [js-syntax (str/trim (.-innerHTML %))] %))))
+
   (let [mapping (key-mapping)]
     (.. (js/document.querySelectorAll ".mod,.alt,.ctrl")
         (forEach #(when-let [k (get mapping (.-innerHTML %))]

package.json

@@ -1,6 +1,6 @@
 { "name": "@nextjournal/clojure-mode",
   "files": ["dist"],
-  "version": "0.1.0-rc2",
+  "version": "0.1.0",
   "license": "EPL-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,6 @@
     "@lezer/highlight": "^1.0.0",
     "@lezer/lr": "^1.0.0",
     "@nextjournal/lezer-clojure": "1.0.0",
-    "d3-require": "^1.2.4",
-    "emoji-regex": "^10.0.0",
-    "framer-motion": "^6.2.8",
-    "katex": "^0.12.0",
-    "markdown-it": "12.3.2",
-    "markdown-it-block-image": "0.0.3",
-    "markdown-it-sidenote": "https://github.com/gerwitz/markdown-it-sidenote#aa5de8ce3168b7d41cb33c3aed071a5f41ce0083",
-    "markdown-it-texmath": "0.9.1",
-    "markdown-it-toc-done-right": "4.2.0",
-    "punycode": "2.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "squint-cljs": "0.3.36",
     "w3c-keyname": "^2.2.4"
   },
@@ -47,10 +35,23 @@
     "vite:build": "yarn vite build --config vite.config.js public/squint"
   },
   "devDependencies": {
+    "@codemirror/lang-javascript": "^6.0.0",
     "@nextjournal/clojure-mode": "link:.",
+    "d3-require": "^1.2.4",
+    "emoji-regex": "^10.0.0",
+    "framer-motion": "^6.2.8",
+    "katex": "^0.12.0",
+    "markdown-it": "12.3.2",
+    "markdown-it-block-image": "0.0.3",
+    "markdown-it-sidenote": "https://github.com/gerwitz/markdown-it-sidenote#aa5de8ce3168b7d41cb33c3aed071a5f41ce0083",
+    "markdown-it-texmath": "0.9.1",
+    "markdown-it-toc-done-right": "4.2.0",
+    "punycode": "2.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup-plugin-analyzer": "^4.0.0",
     "shadow-cljs": "2.19.5",
-    "vite": "^4.4.9",
-    "rollup-plugin-analyzer": "^4.0.0"
+    "vite": "^4.4.9"
   },
   "exports": {
     ".": "dist/nextjournal/clojure_mode.mjs"

public/index.html

@@ -208,14 +208,39 @@ <h2 class="text-center text-3xl font-bold mt-0 mb-12">
     <div class="bg-alt py-12 px-6">
       <div id="use-it" class="mx-auto max-w-4xl">
         <h2 class="mt-0 mb-8 text-3xl font-bold text-center">
-          <a href="#use-it" class="near-black">📦 Use it in your project</a>
+          <a href="#use-it" class="near-black">📦 Use it in your clojure project</a>
         </h2>
         <pre clojure-mode="true" class="max-w-4xl mx-auto">
 {:deps {nextjournal/clojure-mode {:git/url "https://github.com/nextjournal/clojure-mode"
                                   :sha "SHA"}}}
         </pre>
       </div>
     </div>
+    <div class="bg-alt py-12 px-6">
+      <div id="npm" class="mx-auto max-w-4xl">
+        <h2 class="mt-0 mb-8 text-3xl font-bold text-center">
+          <a href="#npm" class="near-black">📦 Use it from NPM</a>
+        </h2>
+        <pre js-mode="true" class="max-w-4xl">
+import { default_extensions, complete_keymap } from '@nextjournal/clojure-mode'
+import { EditorView, drawSelection, keymap } from  '@codemirror/view'
+import { EditorState } from  '@codemirror/state'
+
+let extensions = [keymap.of(complete_keymap),
+                  ...default_extensions]
+
+let state = EditorState.create({doc: "... some clojure code...",
+                                extensions: extensions })
+
+let editorElt = document.querySelector('#editor')
+let editor = new EditorView({state: state,
+                             parent: editorElt,
+                             extensions: extensions})
+
+        </pre>
+      </div>
+    </div>
+
     <div id="embed-it" class="bg-alt py-12 px-6">
       <div class="mx-auto max-w-4xl">
         <h2 class="mt-0 mb-8 text-3xl font-bold text-center">