test hello-react-three-fiber and bun

.gitignore

@@ -28,3 +28,4 @@ trees/refs/references.json
 .singularhistory
 ag/.ipynb_checkpoints/hello_singular-checkpoint.ipynb
 _tmp/*
+bun.lockb

README.md

@@ -54,3 +54,20 @@ brew install --cask mactex
 ```
 
 See https://tex.stackexchange.com/a/676179/75671 for why.
+
+I'm experimenting with authoring `js/ts/jsx/tsx` using `bun`, so I also need to run
+
+```bash
+curl -fsSL https://bun.sh/install | bash
+source ~/.zshrc # or ~/.bashrc
+```
+
+to install `bun`.
+
+Rendering `js/ts/jsx/tsx` are also done by `dev.sh` in development with watch support or `build.sh` in CI. Manually this is:
+
+```bash
+bun build ./bun/<file-name> --outdir output
+```
+
+To use any package, just figure out the package name from the import and run `bun install <package-name>`, `package.json` will be updated by `bun`.

assets/uts-forester.js

@@ -62,7 +62,8 @@ document.addEventListener("DOMContentLoaded", function () {
     // on clicking the button with id theme-toggle, the function toggleTheme is called
     document.getElementById("theme-toggle").onclick = toggleTheme;
     document.getElementById("search").onclick = search;
-    document.getElementById("langblock-toggle").onclick = togglelang;
+    const langblock_toggle = document.getElementById("langblock-toggle");
+    if(langblock_toggle) langblock_toggle.onclick = togglelang;
 
     const content_out_of_sight_observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {

assets/uts-ondemand.js

@@ -1,22 +1,28 @@
+const load_script = (src) => {
+    console.log(`loading ${src}`);
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = src;
+    document.head.appendChild(script);
+}
+
 document.addEventListener('DOMContentLoaded', async () => {
 
     const code_tags = document.querySelectorAll('article code');
 
     if (code_tags.length != 0) {
-        console.log('loading shiki.js');
-        const script = document.createElement('script');
-        script.type = 'module';
-        script.src = 'shiki.js';
-        document.head.appendChild(script);
+        load_script('shiki.js');
     }
 
     const embeded_shaders = document.querySelectorAll('.embeded-shader');
 
     if (embeded_shaders.length != 0) {
-        console.log('loading shader.js');
-        const shaderScript = document.createElement('script');
-        shaderScript.type = 'module';
-        shaderScript.src = 'shader.js';
-        document.head.appendChild(shaderScript);
+        load_script('shader.js');
+    }
+
+    const r3f_root = document.querySelector('#r3f-root');
+
+    if(r3f_root) {
+        load_script('hello-react-three-fiber.js');
     }
 });

build.sh

@@ -35,8 +35,18 @@ function show_lize_result {
   echo "Open output/$1.pdf to see the result."
 }
 
+function bun_build {
+    # for each files in the directory `bun`, run bun build
+    for FILE in $(ls -1 bun); do
+        bun build bun/$FILE --outdir output
+    done
+}
+
 function build {
   mkdir -p build
+  echo "⭐ Rebuilding bun"
+  bun_build
+  echo "⭐ Rebuilding forest"
   opam exec -- forester build # 2>&1 > build/forester.log # --dev
   show_result
   mkdir -p output/shader/
@@ -59,7 +69,6 @@ function lize {
 #   show_lize_result math-0001
 }
 
-echo "⭐ Rebuilding forest"
 time build
 echo
 

build_changed.sh

@@ -4,20 +4,24 @@ while IFS= read -r line; do
     IFS=':' read -ra ADDR <<< "$line"
     EVENT="${ADDR[0]}"
     CHANGED_FILE="${ADDR[1]}"
-    echo "$EVENT: $CHANGED_FILE"
+    # echo emoji for information
+    echo "ℹ️$EVENT: $CHANGED_FILE"
+    CHANGED_FILE_BASENAME=$(basename $CHANGED_FILE)
+    # get the dirname of the changed file
+    CHANGED_FILE_DIRNAME=$(basename $(dirname $CHANGED_FILE))
+    echo "📂$CHANGED_FILE_DIRNAME"
+    echo "🚨removing output/$CHANGED_FILE_BASENAME"
+    rm output/$CHANGED_FILE_BASENAME
+
     if [[ $CHANGED_FILE == *".css" ]] || [[ $CHANGED_FILE == *".js" ]]; then
-        rm -f output/*.css
-        rm -f output/*.js
         ./build.sh
     elif [[ $CHANGED_FILE == *".xsl" ]]; then
-        echo "🛁 Cleaning up build and output"
-        rm -f output/*.xsl
         ./build.sh
     elif [[ $CHANGED_FILE == *".tree" ]] || [[ $CHANGED_FILE == *".tex" ]]; then
         ./build.sh
     elif [[ $CHANGED_FILE == *".glsl" ]]; then
         mkdir -p output/shader/
-        rm -f output/shader/*.glsl
+    elif [[ $CHANGED_FILE_DIRNAME == "bun" ]]; then
         ./build.sh
     else
         echo "🤷 No action for $LINE"

bun/hello-react-three-fiber.tsx

@@ -0,0 +1,35 @@
+// example from https://github.com/pmndrs/react-three-fiber
+// bun install three react-dom react @react-three/fiber
+import * as THREE from 'three'
+import { createRoot } from 'react-dom/client'
+import React, { useRef, useState } from 'react'
+import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
+
+function Box(props: ThreeElements['mesh']) {
+  const ref = useRef<THREE.Mesh>(null!)
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  useFrame((state, delta) => (ref.current.rotation.x += delta))
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={(event) => click(!clicked)}
+      onPointerOver={(event) => hover(true)}
+      onPointerOut={(event) => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+createRoot(document.getElementById('r3f-root') as HTMLElement).render(
+  <Canvas>
+    <ambientLight intensity={Math.PI / 2} />
+    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+    <Box position={[-1.2, 0, 0]} />
+    <Box position={[1.2, 0, 0]} />
+  </Canvas>,
+)

dev.sh

@@ -5,7 +5,7 @@
 # rm -rf output
 ./build.sh
 
-watchexec --quiet --no-vcs-ignore --project-origin . --on-busy-update queue --poll 500ms -e tree,tex,css,js,xsl,glsl -w trees -w assets -w tex --emit-events-to=stdio -- ./build_changed.sh &
+watchexec --quiet --no-vcs-ignore --project-origin . --on-busy-update queue --poll 500ms -e tree,tex,css,js,xsl,glsl,tsx -w trees -w assets -w tex -w bun --emit-events-to=stdio -- ./build_changed.sh &
 
 http-server -p 1314 output &
 

package.json

@@ -0,0 +1 @@
+{ "dependencies": { "@react-three/fiber": "^8.17.5", "react": "^18.3.1", "react-dom": "^18.3.1", "three": "^0.167.1" } }

trees/math-000L.tree

@@ -0,0 +1,18 @@
+\import{macros}
+% clifford hopf spin tt ag math draft
+\tag{math}
+\tag{draft}
+
+% definition theorem lemma construction observation
+% convention corollary axiom example exercise proof
+% discussion remark notation
+% \taxon{}
+% \refcardt{lemma}{}{}{}{
+
+% kostecki2011introduction leinster2016basic nakahira2023diagrammatic rosiak2022sheaf
+
+% cox1997ideals gathmann2013commutative
+
+\note{test hello-react-three-fiber and bun}{
+\<html:div>[id]{r3f-root}{}
+}