Forem: Muhammad Ridho

Bun, Hono, Vite, TailwindCSS: An amazing combination has just been revealed!

Muhammad Ridho — Sun, 10 Sep 2023 05:54:03 +0000

Bun is great, yes!, Lately everyone is amazed and I was able to play around with it today, and I found it is pretty awesome to use it alongside with Hono, Vite and TailwindCSS.

Without further ado, here I show you the things I have done.

First, create a project with bun, its way way faster than usual.

bun create hono my-hono-app
cd my-hono-app
bun install

For demo purpose, we'll use some popular libs e.g. jose.

bun add jose

Change the tsconfig.json slightly to be like so:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "types": [
      "bun-types"
    ],
  }
}

Let's put some code making use of jose, e.g. create a jwt by ourself, and we place it in src/core.ts:

import * as jose from "jose";

const secret = "🔥🔥🔥🔥🔥🔥🔥🔥🔥";
const algo = "HS512";

const secretBytes = new TextEncoder().encode(secret);
export const secretB64 = btoa(
  Array.from(secretBytes, (x) => String.fromCodePoint(x)).join("")
);

export const createJWT = async () => {
  return await new jose.SignJWT({
    claims: {
      userId: "ridho",
    },
  })
    .setProtectedHeader({ alg: algo })
    .setAudience("urn:audience")
    .setIssuer("urn:issuer")
    .setSubject("urn:subject")
    .setIssuedAt()
    .setExpirationTime("5m")
    .sign(secretBytes);
};

Take note from the above code on how we should create base64 string based on this MDN guide. Later we can validate manually if our jwt and the secretBytes is correct by pasting the token and secret to jwt.io.

Now lets modify the server entry file in src/index.ts.

import { Hono } from "hono";
import { createJWT, secretB64 } from "./core";

const app = new Hono();

app.get("/", async (c) =>
  c.text(`Secret: ${secretB64} JWT: ${await createJWT()}`)
);

export default app;

Yes, its ready. We can now start the development server:

bun run --hot src/index.ts

Great, thats it, very simple and easy! With just very little effort and a few files below, we can serve about 100k request per seconds.

tree -I node_modules 
.
├── bun.lockb
├── package.json
├── README.md
├── src
│   ├── core.ts
│   └── index.ts
└── tsconfig.json

2 directories, 6 files

Ok, lets go further. Instead of simple text response, we want to serve html. Here is how:

import { html } from "hono/html";

app.get("/hello", (c) =>
  c.html(html`<!DOCTYPE html>
    <html>
      <head>
        <title>Simple demo</title>
      </head>
      <body>
        <h1>Ok</h1>
      </body>
    </html>`)
);

I want to write content with jsx you say. Ok, its easy too. First create our jsx file hello.tsx as below:

export function Hello() {
  return (
    <div>
      <h1>Hello there!</h1>
    </div>
  );
}

And use it just like usual, in this simple case, we'll put the jsx into our previous html body:

import { html } from "hono/html";
import { jsx } from "hono/jsx";
import { Hello } from "./hello";

app.get("/hello", (c) => {
  const content = jsx(Hello, {});  // <-- HERE IS our JSX content
  return c.html(html`<!DOCTYPE html>
    <html>
      <head>
        <title>Simple demo</title>
      </head>
      <body>
        ${content}
      </body>
    </html>`);
});

Yeah, that is awesome, and there is more! We can have the great and famous Vite and all it stuffs, e.g. tailwindcss to works too.

There is @hono/vite-dev-server that is being actively developed by the author and for sure it will become great when its ready.

During this time, I've explored how to manually integrate Vite with all of our stuff above so far. It will be just brief steps, i believe you could follow along.

Add the necessary deps:

bun add --dev vite tailwindcss postcss autoprefixer

Init tailwindcss config:

bunx tailwindcss init --esm --postcss

Create vite.config.ts:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    manifest: true,
    rollupOptions: {
      input: "/src/client.tsx",
    },
  },
});

In src/client.tsx is where our client code live and managed by vite. For now, it simply contains import to tailwind css entry file.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Add type=module to package.json:

{
  "type": "module",
  "scripts": {
    "dev": "bun run --hot src/index.ts",
    "vite-dev": "vite",
    "build": "vite build",
    "serve": "NODE_ENV=production bun run src/index.ts"
  },
  "dependencies": {
    "hono": "^3.5.4",
    "jose": "latest"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "bun-types": "^0.6.2",
    "postcss": "^8.4.29",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.9"
  }
}

Add or modify target, module and moduleResolution to tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "types": [
      "bun-types"
    ],
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
  }
}

src/style.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

src/client.tsx:

import "./style.css"

src/hello.tsx:

export function Hello() {
  return (
    <div class="text-2xl text-red-600 grid h-[100dvh] items-center justify-center text-center">
      <div>
        <h1 class="text-4xl font-bold">Hello there!</h1>
        <p class="font-mono">
          Bun, Hono, Vite, TailwindCSS <br />
          🔥🔥🔥🔥🔥🔥🔥🔥🔥
        </p>
      </div>
    </div>
  );
}

src/index.ts:

import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { html, raw } from "hono/html";
import { jsx } from "hono/jsx";

import { createJWT, secretB64 } from "./core";
import { Hello } from "./hello";

const app = new Hono();

app.use("/assets/*", serveStatic({ root: "./dist" }));

app.get("/", async (c) =>
  c.text(`Secret: ${secretB64} JWT: ${await createJWT()}`)
);

const isProd = process.env.NODE_ENV === "production";

const manifestPath = "../dist/manifest.json";
const cssFile = isProd
  ? (await import(manifestPath)).default["src/client.tsx"]?.css?.at(0)
  : null;

app.get("/hello", (c) => {
  const content = jsx(Hello, {});
  return c.html(html`<!DOCTYPE html>
    <html>
      <head>
        <title>Simple demo</title>
        ${cssFile ? raw(`<link rel="stylesheet" href="${cssFile}">`) : null}
      </head>
      <body class="bg-green-200">
        ${content}
        ${isProd
          ? null
          : raw(`<script
                type="module"
                src="http://localhost:5173/@vite/client"
            ></script>
            <script
                type="module"
                src="http://localhost:5173/src/client.tsx"
            ></script>`)}
      </body>
    </html>`);
});

export default app;

To start development, start bun and vite on separate terminal:

bun run vite-dev

bun run dev

For production, do build and run:

bun run build
bun run serve

Thats it.

Thank you for reading, have a good weekend!

Tuntunan Praktis TypeScript - Bagian 1

Muhammad Ridho — Wed, 19 Jul 2023 04:03:00 +0000

Sebuah direktori dikatakan sebagai typescript (ts) project jika ada file konfigurasi tsconfig.json.

Default konfigurasi tsconfig.json (di-generate dengan tsc --init) adalah sbb:

{
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
}

Referensi resmi tsconfig.json lengkap nya ada di https://www.typescriptlang.org/tsconfig atau bisa dilihat dengan tsc --help --all.

Jika kita jalankan compiler tsc (tanpa options atau arguments) maka ia akan mencari file tsconfig.json pada direktori yang aktif saat ini, atau disemua parent direktori yang terdekat, lalu meng-compile sesuai konfigurasi yang diset.

Jika kita jalankan tsc source.ts (dengan argumen input source file), maka dia akan mengabaikan tsconfig.json, lalu meng-compile file source.ts menggunakan konfigurasi bawaan.

Atribut target bisa diisi dengan salah satu dari: es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, atau esnext. Atribut ini untuk menentukan versi JavaScript dari file output yang dihasilkan.

Atribut module untuk menentukan jenis modul yang akan dihasilkan, bisa diisi dengan salah satu dari: none, commonjs, amd, umd, system, es6/es2015, es2020, es2022, esnext, node16, nodenext.

Jika kita set module dengan amd atau system, kita bisa tentukan atribut outFile karena tipe modul ini akan mem-bundle semua source file menjadi 1 file output. Untuk tipe modul yang lain, kita bisa set atribut outDir untuk menentukan di direktori mana hasil kompilasi akan dihasilkan.

Nilai (value) dari atribut module dengan prefix "es" (yaitu es6, es2020, dan seterusnya) akan menghasilkan modul ES (ESM) di outDir, sedangkan commonjs, node16, atau nodenext akan menghasilkan modul CommonJS (CJS).

Catatan: nilai bawaan dari outDir adalah sama dengan direktori project.

Catatan: Jika suatu paket npm (yaitu sebuah direktori dimana ada file package.json) adalah ESM (yaitu jika atribut type di package.json diset dengan "module", bukan "commonjs"), maka file-file modul yang ada didalam nya tidak bisa menggunakan fungsi require(), tapi harus menggunakan deklarasi import.

Terkait kolaborasi antara esm dan cjs, ada atribut esModuleInterop untuk menentukan apakah output modul cjs yang dihasilkan bisa digunakan oleh modul esm.

Perhatikan contoh dibawah ini untuk menguji cjs yang dihasilkan bisa digunakan dalam konteks modul esm:

File sumber ./index.ts:

export function isEven(x: number): boolean {
    return x % 2 === 0
}

Kompilasi menjadi modul cjs dengan:

$ npx tsc --outDir ./dist --module nodenext ./index.ts

./dist/index.js yang dihasilkan adalah sebagai berikut:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isEven = void 0;
function isEven(x) {
    return x % 2 === 0;
}
exports.isEven = isEven;

Test modul cjs yang dihasilkan dengan cjs runtime:

$ node -e 'console.log(require("./dist"))'

Test modul cjs yang dihasilkan dengan esm runtime:

$ node --experimental-modules \
    -e 'import("./dist/index.js").then(console.log)'

Untuk melihat konfigurasi aktual dari suatu ts project yaitu dengan tsc --showConfig, output nya kurang lebih sbb:

{
    "compilerOptions": {
        "target": "es2016",
        "module": "esnext",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    },
    "files": [
        "./index.ts"
    ]
}

Perhatikan atribut files jika tidak kita set di tsconfig.json maka bawaannya adalah mencari semua file .ts yang ada di project direktori dan semua sub-direktori nya secara rekursif.

Kita bisa melihat file-file apa saja yang dibaca pada saat kompilasi dengan tsc --listFilesOnlyshowFiles.

Sebagai penutup bagian 1 ini, tinjau sesi shell berikut ini sebagai referensi singkat terkait hal-hal apa saja yang digunakan dalam artikel ini.

# buat direktori kerja sementara
$ mkdir /tmp/1 && cd /tmp/1

# inisialisasi npm project
$ pnpm init

# install ts 
$ pnpm install --save-dev typescript@latest 

# buat contoh source sederhana
$ cat <<EOF > index.ts
export function isEven(x: number): boolean {
    return x % 2 === 0
}
EOF

# inisialisasi tsconfig.json
$ npx tsc --init

# show aktual config
$ npx tsc --showConfig

# show aktual file-file yang digunakan selama proses kompilasi
$ npx tsc --listFilesOnly

# lakukan proses kompilasi
$ npx tsc --outDir ./dist

# test penggunaan modul hasil kompilasi nya
$ node -e 'console.log(require("./dist").isEven(2))'
$ node -e 'import("./dist/index.js").then(m => console.log(m.isEven(2)))'

# lihat pertolongan
$ npx tsc --help --all

Deploy your ClojureScript App to Cloudflare Workers

Muhammad Ridho — Sun, 16 Apr 2023 07:57:33 +0000

Updated: 19-Jul-2023

Its now easy to deploy ClojureScript compiled output to Cloudflare workers.

Since the recent update with regards to node.js compatibility, no need for clever tricks anymore.

Here is step by step poc:

$ cd /tmp
$ pnpm create cloudflare@latest

In which directory do you want to create your application?
dir ./hello2

What type of application do you want to create?
type "Hello World" Worker

Do you want to use TypeScript?
no

Retrieving current workerd compatibility date
compatibility date 2023-07-17

Do you want to use git for version control?
no

Do you want to deploy your application?
no

$ cd hello2

At this point, check if we're ready to continue.

$ pnpm exec wrangler --version
 ⛅️ wrangler 3.0.0 (update available 3.3.0)

Now add shadow-cljs.

$ pnpm install --save-dev shadow-cljs@latest

Shadow-cljs just need simple configuration, we can generate default config with pnpm exec shadow-cljs init or just create one by ourself.

$ cat <<EOF > shadow-cljs.edn
{:source-paths ["cljs/main"]
 :dependencies []
 :builds {:cf {:target :npm-module
               :output-dir "out"
               :entries [hello]}}}
EOF

Then modify its content to be like below, the important part is that we set :target to :node-module.

Next, verify if shadow-cljs is ready. This will download required clojure/java/maven dependencies if necessary.

$ pnpm exec shadow-cljs info

One more step in cljs part is create our sample source file:

$ mkdir -p cljs/main
$ cat <<EOF > cljs/main/hello.cljs
(ns hello)

(defn ^:export message []
  "Hello from Clojurescript")
EOF

Partly done, take a breath first.

Now, for this demo, we compile the cljs source like so:

$ pnpm exec shadow-cljs release :cf

It will put the compiled output to ./out/ directory. Now lets modify workers entry file in src/worker.js, for this demo, we import the compiled cljs output and use it there somehow, like shown below:

import { message } from '../out/hello';

export default {
    async fetch(request, env, ctx) {
        return new Response(message());
    },
};

Only final important step is to activate the node compatibility in wrangler.toml, set node_compat = true.

Our full wrangler.toml file now would look more or less like this:

name = "hello2"
main = "src/worker.js"
compatibility_date = "2023-07-17"
node_compat = true

Ok, its done now.

We could test it first locally:

$ pnpm exec wrangler dev

On separate terminal, test if dev server ok:

$ curl -v http://127.0.0.1:8787/

No error, right. Okay, so lets ship it.

$ pnpm exec wrangler deploy

It will authorize with your cloudflare account first before deploying, if every thing is ok, you would see message more or less like below:

...
Total Upload: 56.67 KiB / gzip: 11.25 KiB
Uploaded hello2 (4.46 sec)
Published hello2 (8.61 sec)
  https://hello2.datafy.workers.dev
Current Deployment ID: eae28984-581c-4ef2-b821-0932efac5003

Thank you for reading.

Update

As of today, compile cljs to :esm is also works. Below are relevant changes:

shadow-cljs.edn

{:source-paths ["cljs/main"],
 :dependencies [],
 :builds {:cf {:target :node-module,
               :output-dir "out",
               :entries [hello]},
          :cf2 {:target :esm,
                :output-dir "out2",
                :modules {:hello {:exports {message hello/message}}}}}}

src/worker.js

import { message } from '../out2/hello';

export default {
    async fetch(request, env, ctx) {
        return new Response(message());
    },
};

wrangler.toml

name = "hello2"
main = "src/worker.js"
compatibility_date = "2023-07-17"

Cloudflare Workers: Solusi serverless edge function termudah, tercepat, termurah, what else..?

Muhammad Ridho — Sun, 16 Apr 2023 03:00:02 +0000

Build serverless applications and deploy instantly across the globe for exceptional performance, reliability, and scale.

Yaitu dengan Cloudflare Workers.

Berikut ini beberapa tips atau info terkait penggunaan salah satu produk unggulan dari Cloudflare ini.

Untuk mulai menggunakan workers ini kita perlu menginstall aplikasi cli bernama wrangler.

Aplikasi wrangler ini sangat flexible, dimana pada umumnya nodejs tooling diinstall sebagai bagian dari development dependency npm project kita, wrangler bisa juga digunakan sebagai standalone cli untuk berinteraksi dengan produk-produk Cloudflare lainnya, juga bisa digunakan sewaktu-waktu kita ingin membuat temporary prototipe dengan cepat, tanpa project.

Untuk itu, saya merekomendasikan untuk menginstall aplikasi ini secara global.

npm install --location global wrangler

Dan selanjutnya pastikan sudah terinstall dengan benar, --selalu lakukan proses verifikasi yah kalo-kalo abis menginstall sesuatu sebelum melanjutkan ke pekerjaan berikutnya, dari pada ketemu error nya nanti belakangan saat kita sedang melakukan hal lain yang pada akhir nya bisa memberikan indikasi yang salah tentang masalah apa yang sebenarnya terjadi.

npm ls --location global
wrangler --version

Oh ya, satu tips lagi, untuk paket-paket npm yang kita install global sebaiknya kita maintain supaya senantiasa up to date, jadi kalo misal kita temukan hal yang aneh atau tidak biasa, kita bisa langsung bereaksi untuk memperbaiki sekaligus mengupdate pengetahuan dan pengalaman kita.

Cara update nya sama saja seperti kita menginstall pertama kali, yaitu dalam hal ini kita mau mengupdate wrangler, maka command nya adalah:

npm install --location global wrangler

Oh ya lagi, mumpung lagi install paket npm global, saya tambahin satu rekomendasi lagi yaitu untuk menginstall pnpm sebagai package manager pengganti dari npm bawaan instalan nodejs, pnpm ini akan menghemat disk, waktu, dan tentunya bandwidth yang masih mahal di negara kita ini.

Nah selanjutnya, baru ini kita install wrangler nya:

npm install --location global pnpm

Wrangler terbaru (versi 2) secara otomatis mem-bundle source code kita dengan esbuild. Kita bisa mengecek hasil dari aktual bundling nya si wrangler seperti apa dengan cara:

$ wrangler publish --dry-run --outdir /tmp/dist

Nah, kita bisa melihat apa yang nantinya akan di-upload ke Cloudflare workers di file /tmp/dist/index.js.

Terkait dengan proses bundling, berikut beberapa tipe "module" yang disupport:

- .txt
- .html 
- .bin
- .wasm dan .wasm?module

Jadi selain js atau ts, kita bisa meng-import file-file tersebut dalam project yang kita buat.

Sebagai penutup, saya sampaikan rekomendasi langkah-langkah untuk membuat project workers baru dari nol.

Dibanding cara yang lebih singkat yaitu dengan wrangler init, berikut ini adalah langkah-langkah manual yang memberikan kita informasi lebih banyak terkait apa-apa saja yang terinstall pada saat wrangler init.

mkdir -p /tmp/x5 && cd /tmp/x5
pnpm init
pnpm install --save-dev typescript@latest
pnpm install --save-dev vitest@latest
pnpm exec tsc --init

Sampai saat ini, kita belum menambahkan wrangler kedalam project tersebut. Untuk menambahkannya, kita gunakan init sbb:

wrangler init

Dari prompt yang muncul, kita isikan seperti berikut ini:

... use git to manage this Worker?  --> yes
... install wrangler into package.json?  --> yes
... install the type definitions for Workers.. --> yes
... create a Worker at src/index.ts? --> Fetch handler
... write your first test with Vitest? --> yes

Perhatikan ada info yang muncul terkait TypeScript typing yang mesti kita tambahkan manual dalam hal ini yaitu:

✨ Installed wrangler, @cloudflare/workers-types, and vitest into devDependencies
🚨 Please add "@cloudflare/workers-types" to compilerOptions.types in tsconfig.json

Edit file tsconfig.json, hasil dari penambahan informasi typing ini di sekitar baris 35 sbb:

...
...
     "types": ["@cloudflare/workers-types"],
...
...

Nah, sekarang kita verifikasi semua sudah terinstall dengan benar.

pnpm exec vitest run

Jika sukses, maka hasil nya kurang lebih mirip-mirip berikut:

 RUN  v0.30.1 /private/tmp/x5

 ✓ src/index.test.ts (1) 743ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  09:28:31
   Duration  2.18s (transform 83ms, setup 0ms, collect 584ms, tests 743ms, environment 0ms, prepare 159ms)

Selanjutnya kita bisa mulai membuat aplikasi worker kita di src/index.ts. File ini adalah file ES module sebagaimana biasanya, berisi entri point dari aplikasi, silahkan berkreasi sesuka hati, panduan dan contoh resmi nya lengkap dan mudah ada disini.

Untuk memulai proses development, seperti biasa, kita start development server sbb:

pnpm exec wrangler dev

Untuk mendeploy nya, secara umum proses nya cukup mudah, tinggal ikuti saja instruksi yang muncul dari command-command berikut ini:

pnpm exec wrangler login
pnpm exec wrangler publish

Output nya kurang lebih seperti berikut:

 ⛅️ wrangler 2.15.1
--------------------
Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded x5 (2.66 sec)
Published x5 (6.68 sec)
  https://x5.datafy.workers.dev
Current Deployment ID: e8d976fc-8d92-46c0-8d46-6a5338b09c4d

Sekarang aplikasi kita sudah online di url yang disebutkan diatas. Alhamdulillah.

Selamat berkreasi.

Supercharge Your JS/TS Project with ClojureScript REPL

Muhammad Ridho — Sat, 15 Apr 2023 09:27:49 +0000

If not yet, first install the Java SDK on your machine, as well as node and pnpm itself.

You may have existing project that you can supercharge. As an example, here we start by creating brand new Vite project.

$ mkdir -p /tmp/hi && cd /tmp/hi
$ pnpm create vite@latest . --template react-ts

We now have a working project, verify with e.g. pnpm run build && pnpm exec vite preview --open.

Now, add shadow-cljs.

$ pnpm install --save-dev shadow-cljs
$ pnpm exec shadow-cljs init
$ pnpm exec shadow-cljs info

The last command will take some time while grabbing all the required dependencies. Be patient, after this, if all the installation goes right, all the doubts will be paid off.

If your result is looks more or less like below, then congratulations, you have taken the very first step towards enlightenment.

shadow-cljs - config: /private/tmp/x3/shadow-cljs.edn
=== Version
jar:            2.22.10
cli:            2.22.10
deps:           1.3.4
config-version: 2.22.10

=== Paths
cli:     /private/tmp/x3/node_modules/.pnpm/shadow-cljs@2.22.10/node_modules/shadow-cljs/cli/dist.js
config:  /private/tmp/x3/shadow-cljs.edn
project: /private/tmp/x3
cache:   .shadow-cljs

=== Java
openjdk version "19.0.2" 2023-01-17
OpenJDK Runtime Environment Homebrew (build 19.0.2)
OpenJDK 64-Bit Server VM Homebrew (build 19.0.2, mixed mode, sharing)

=== Source Paths
/private/tmp/x3/src/dev
/private/tmp/x3/src/main
/private/tmp/x3/src/test

...
=== Dependencies
shadow-cljs - updating dependencies
Retrieving...

...
...

...
shadow-cljs - dependencies updated
[thheller/shadow-cljs "2.22.10" :classifier "aot"]
[com.bhauman/cljs-test-display "0.1.1"]
[cider/piggieback "0.5.3" :exclusions [[org.clojure/clojure] [org.clojure/clojurescript] [nrepl]]]
[io.methvin/directory-watcher "0.17.1"]
  [net.java.dev.jna/jna "5.12.1"]
  [org.slf4j/slf4j-api "1.7.36"]
[org.clojure/clojure "1.11.1"]
  [org.clojure/core.specs.alpha "0.2.62"]
  [org.clojure/spec.alpha "0.3.218"]
[com.cognitect/transit-cljs "0.8.280"]
  [com.cognitect/transit-js "0.8.874"]
[org.clojure/google-closure-library "0.0-20230227-c7c0a541"]
[thheller/shadow-cljsjs "0.0.22"]
[org.clojure/core.async "1.5.648"]
  [org.clojure/tools.analyzer.jvm "1.2.2"]
    [org.clojure/core.memoize "1.0.253"]
      [org.clojure/core.cache "1.0.225"]
        [org.clojure/data.priority-map "1.1.0"]
    [org.clojure/tools.analyzer "1.1.0"]
    [org.ow2.asm/asm "9.2"]
[com.google.javascript/closure-compiler-unshaded "v20230228"]
  [com.google.code.gson/gson "2.9.1"]
  [com.google.guava/guava "31.0.1-jre"]
    [com.google.code.findbugs/jsr305 "3.0.2"]
    [com.google.guava/listenablefuture "9999.0-empty-to-avoid-conflict-with-guava"]
    [com.google.j2objc/j2objc-annotations "1.3"]
    [org.checkerframework/checker-qual "3.12.0"]
  [com.google.guava/failureaccess "1.0.1"]
  [org.jspecify/jspecify "0.2.0"]
  [com.google.auto.value/auto-value-annotations "1.6"]
  [javax.annotation/jsr250-api "1.0"]
  [args4j "2.33"]
  [com.google.errorprone/error_prone_annotations "2.15.0"]
  [com.google.protobuf/protobuf-java "3.21.12"]
  [org.apache.ant/ant "1.10.11"]
    [org.apache.ant/ant-launcher "1.10.11"]
  [com.google.re2j/re2j "1.3"]
[ring/ring-core "1.9.6" :exclusions [[clj-time]]]
  [commons-fileupload "1.4"]
  [commons-io "2.11.0"]
  [crypto-equality "1.0.1"]
  [crypto-random "1.2.1"]
    [commons-codec "1.15"]
  [ring/ring-codec "1.2.0"]
[hiccup "1.0.5"]
[thheller/shadow-undertow "0.3.1"]
  [io.undertow/undertow-core "2.2.4.Final"]
    [org.jboss.logging/jboss-logging "3.4.1.Final"]
    [org.jboss.threads/jboss-threads "3.1.0.Final" :exclusions [[org.wildfly.common/wildfly-common]]]
    [org.jboss.xnio/xnio-api "3.8.0.Final" :exclusions [[org.jboss.threads/jboss-threads]]]
      [org.wildfly.client/wildfly-client-config "1.0.1.Final"]
      [org.wildfly.common/wildfly-common "1.5.2.Final"]
    [org.jboss.xnio/xnio-nio "3.8.0.Final" :scope "runtime" :exclusions [[org.wildfly.common/wildfly-common]]]
[thheller/shadow-client "1.3.3"]
[fipp "0.6.26"]
  [org.clojure/core.rrb-vector "0.1.2"]
[org.clojure/google-closure-library-third-party "0.0-20230227-c7c0a541"]
[org.clojure/clojurescript "1.11.60" :exclusions [[com.google.javascript/closure-compiler-unshaded] [org.clojure/google-closure-library] [org.clojure/google-closure-library-third-party]]]
[org.clojure/tools.reader "1.3.6"]
[org.clojure/tools.cli "1.0.206"]
[org.clojure/data.json "2.4.0"]
[nrepl "1.0.0"]
[com.cognitect/transit-clj "1.0.329"]
  [com.cognitect/transit-java "1.0.362"]
    [com.fasterxml.jackson.core/jackson-core "2.8.7"]
    [javax.xml.bind/jaxb-api "2.3.0"]
    [org.msgpack/msgpack "0.6.12"]
      [com.googlecode.json-simple/json-simple "1.1.1" :exclusions [[junit]]]
      [org.javassist/javassist "3.18.1-GA"]
[expound "0.9.0"]
[thheller/shadow-util "0.7.0"]

Oh well, please don't feel intimidated. Those Clojure dependencies is much much more simple if you compare with all those in npm node_modules (e.g. pnpm ls --depth 15).

Ok, for now, i assume you already understand and done with the JS or TypeScript part, its the same business as usual.

Now, the supercharge part is, how we can have Clojurescript REPL to begin the enlightenment.

pnpm exec shadow-cljs browser-repl

If all goes well, we'll be welcomed by the cljs repl as well as an open browser window where every evaluation we put on the repl will be executed in this browser window.

shadow-cljs - config: /private/tmp/x3/shadow-cljs.edn
shadow-cljs - server version: 2.22.10 running at http://localhost:9630
shadow-cljs - nREPL server started on port 65047
[:browser-repl] Configuring build.
[:browser-repl] Compiling ...
[:browser-repl] Build completed. (119 files, 118 compiled, 0 warnings, 10.19s)
cljs.user=>

This repl is pretty much has the same purpose like the browser console, where we can type a valid expression to quickly check the result. However, this is more or less of a powerful LISP REPL instead of JavaScript console.

With this repl, we can do anything allowed in real time, interacting with the live runtime, call all available JS apis as well as modifying every aspect of it live, -- without restart, reload or anything like that.

We'll get the best experience interacting with this repl with our own lovely editor, e.g. Emacs or VSCode. If you just starting, i suggest to setup Calva, the get started guide is so newbie friendly.

For this post, we'll simply interact with the command line repl to show some demonstration.

Paste this in the repl:

(ns my.app
  (:require ["react" :as react]))

Now the namespace named my.app has been created and our active namespace has moved from cljs.user to my.app, as shown by the prompt.

my.app=>

This namespace has now have access to react js module via a symbol named react. The process of binding symbol to value within a namespace called as interning.

Lets try install new npm package, e.g. uid. A tiny (130B to 205B) and fast utility to randomize unique IDs of fixed length.

Open new terminal shell and do:

$ pnpm install --save uid

Back to our cljs repl, we now can update the my.app ns to intern this new installed library.

(ns my.app
  (:require ["react" :as react]
            ["uid" :as uid]))

Now that we have access to uid module, we can call the uid function provided by the uid module, like so:

;; call uid function
(uid/uid)

;; call it 100 times, return a list of 100 random uid
(repeatedly 100 #(uid/uid))

Next, we define a function named new-rand-div, it will return new HTMLDivElement with a random uid string inside.

(defn new-rand-div []
  (let [x (. js/document createElement "div")]
    (set! (.-innerText x) (uid/uid))
    x))

And test calling to verify.

(new-rand-div)

Now, lets activate the browser window that is opened during the start of the repl, if you inspect that window, it has div element named "app". We will modify the dom to show how we interact with the runtime to modify the page with ease.

(let [x (. js/document getElementById "app")] 
  (dotimes [i 100]
    (. x append (new-rand-div))))

Verify that the browser window now displays those 100 random uids.

Okay, that is for now. I hope it is enough to convince how we have been supercharged, even if only just by a litle.

Be nice, save some resource, we should now quit the repl to stop it.

:cljs/quit

Thank you for reading, let me know if you need more of this kinds, i'll spare some time to create follow up posts, which should be moar interesting.

Bismillah

Muhammad Ridho — Fri, 17 Mar 2023 00:26:56 +0000

Ini posting pertama saya di dev.to. Berencana untuk bisa menulis lebih banyak dan konsisten kedepannya, semoga istiqomah dan diberi kemudahan. Amiin.

Wassalam.