TRUE DEV (past months of work, mostly on csuite internals)

.gitignore

@@ -22,9 +22,13 @@ outputs/*
 
 # keep .schema folder
 schema/globa.d.ts
+
 schema/hosts/*
 !schema/hosts/virtual-base
 !schema/hosts/virtual-full
+!schema/hosts/standard
+!schema/hosts/standard/.gitkeep
+!schema/hosts/.gitkeep
 
 cushy.db
 cushy*.db
@@ -106,3 +110,6 @@ eslint.config.debug.json
 
 autotype.summary.txt
 src/theme/twin.css
+
+bunPlugin.cache
+bunPlugin.reload.ts

.prettierignore

@@ -30,10 +30,17 @@ src/manager/model-list/KnownModel_Name.ts
 src/manager/model-list/KnownModel_SavePath.ts
 src/manager/model-list/KnownModel_Type.ts
 
+src/FlexLayout/
+src/FlexLayout/*
+src/FlexLayout/**/*
+
 # files generated by lezer (npm run gen-lezer)
 src/prompt/grammar/grammar.parser.terms.ts
 src/prompt/grammar/grammar.parser.ts
 
 
 # files code-generated
-# schema/global.d.ts
+# schema/global.d.ts
+
+# import order matters here
+src/setup.ts

.vscode/misc.code-snippets

@@ -4,7 +4,7 @@
         "scope": "typescript",
         "prefix": "tst",
         "body": [
-            "import { describe, expect, it } from 'bun:test'",
+            "import { describe, expect, it } from 'vitest'",
             "",
             "describe('$1', () => {",
             "    it('${2:work}', () => {",
@@ -16,7 +16,7 @@
     "create new observable react component": {
         "scope": "typescriptreact",
         "prefix": "ocomp",
-        "body": ["export const $1UI = observer(function $1UI_(p: { $2 }){", "return (<div>", "$3", "</div>)", "})"],
+        "body": ["export const $1UI = obs(function $1UI_(p: { $2 }){", "return (<div>", "$3", "</div>)", "})"],
         "description": "scaffold a new React functional component"
     },
     "app": {
@@ -41,7 +41,7 @@
     "create new observable react component with st": {
         "scope": "typescriptreact",
         "prefix": "ocompst",
-        "body": ["export const $1UI = observer(function $1UI_(p: { $2 }){", "return (<div>", "$3", "</div>)", "})"],
+        "body": ["export const $1UI = obs(function $1UI_(p: { $2 }){", "return (<div>", "$3", "</div>)", "})"],
         "description": "scaffold a new React functional component"
     },
     "uist": {

.vscode/settings.json

@@ -60,11 +60,11 @@
 
     "files.exclude": {
         "**/.git": true,
-        "**/.svn": true,
+        "**/.svn": false,
         "**/.hg": true,
-        "**/CVS": true,
         "**/.DS_Store": true,
-        "**/Thumbs.db": true
+        "**/Thumbs.db": true,
+        "**/CVS": true
     },
 
     "pasteImage.path": "site/assets",
@@ -97,8 +97,9 @@
     // minimap
     "editor.minimap.maxColumn": 60,
     "editor.minimap.scale": 2,
-    "editor.minimap.sectionHeaderFontSize": 13
-    // "typescript.tsserver.nodePath": ".cushy/node/v20.14.0-darwin-arm64/bin/node",
+    "editor.minimap.sectionHeaderFontSize": 13,
+    "explorerExclude.backup": {}
+    // "typescript.tsserver.nodePath": ".cushy/node/v22.14.0-darwin-arm64/bin/node",
     // "editor.inlayHints.enabled": "off"
     // "editor.semanticHighlighting.enabled": false,
 

TODO

@@ -1,5 +1,7 @@
 SHORT TERM TODO:
 
+    ☐ need to build a tree of all selectors
+    ☐ Shell Fluid.
     ☐ give you a way to have multiple built-in perspectives
     ☐ add a stop run button in the steps panel
     ☐ paths: switche to / instead of .
@@ -40,7 +42,7 @@ SHORT TERM TODO:
             ✔ we need to fork select once forall; @done(24-12-10 23:12)
             ✔ I don't want to add those p-input-2, ... classes @done(24-12-10 23:12)
         ✔ need other name in 20241115_144643_gggdomi_d6cd16e_rename-configtostring @done(24-12-10 23:12)
-            ✔ toString  => ❌toString_, but 🟢 toSummary?, toText?, ... @done(24-12-10 23:12)
+            ✔ toString  => ❌toString_, but 🟢 toString_?, toText?, ... @done(24-12-10 23:12)
         ✔ .... @done(24-12-10 23:12)
         ✔ skip: 20241128_000225_gggdomi_d6cfc25_choice-widget-via-type-subfield @done(24-12-10 23:12)
 

_mac-linux-install.sh

@@ -67,7 +67,7 @@ Exec=/usr/bin/bash -c 'cd \"$SCRIPTPATH\" && \"$SCRIPTPATH/_mac-linux-start-dev.
 esac
 echo "Node.js architecture: $NODE_ARCH"
 
-NODE_VERSION="v20.14.0"
+NODE_VERSION="v22.14.0"
 echo "Node.js version: $NODE_VERSION"
 
 # Define the download URL ------------------------------------------------------------
@@ -147,7 +147,7 @@ echo "Node binary path: $NODE_BIN_PATH"
 
 # Install dependencies with npm
 echo "Installing dependencies..."
-$NPM_BIN_PATH install --legacy-peer-deps=false
+$NPM_BIN_PATH install --legacy-peer-deps=false --force
 
 # ensuring binary dependencies are correctly linked across installed
 ./node_modules/.bin/electron-builder install-app-deps

_windows-install.bat

@@ -23,7 +23,7 @@ echo [===================================================]
 echo Ensuring Node version...
 
 rem --------------------------------------------------------------------------------
-set "NODE_VERSION=v20.14.0"
+set "NODE_VERSION=v22.14.0"
 set "NODE_ARCH=win-x64"
 set "CWD=%CD%"
 set "EXTRACT_DIR=%CWD%\.cushy\node\%NODE_VERSION%-%NODE_ARCH%"

_windows-start-dev.bat

@@ -10,7 +10,7 @@ set "errorlevel="
 set "CUSHY_RUN_MODE=dev"
 
 rem --------------------------------------------------------------------------------
-set "NODE_VERSION=v20.14.0"
+set "NODE_VERSION=v22.14.0"
 set "NODE_ARCH=win-x64"
 set "CWD=%CD%"
 set "EXTRACT_DIR=%CWD%\.cushy\node\%NODE_VERSION%-%NODE_ARCH%"

_windows-start.bat

@@ -19,7 +19,7 @@ set "errorlevel="
 set "CUSHY_RUN_MODE=dist"
 
 rem --------------------------------------------------------------------------------
-set "NODE_VERSION=v20.14.0"
+set "NODE_VERSION=v22.14.0"
 set "NODE_ARCH=win-x64"
 set "CWD=%CD%"
 set "EXTRACT_DIR=%CWD%\.cushy\node\%NODE_VERSION%-%NODE_ARCH%"

blog/2024-10-31-embracing-observer-even-for-semingly-simple-components.md

@@ -19,7 +19,7 @@ You may probably want to wrap them in `observer` wrapper:
 ```tsx
 import { observer } from "mobx-react-lite";
 
-export const IconUI = observer(function IconUI_(p: { icon: string }): JSX.Element {
+export const IconUI = obs(function IconUI_(p: { icon: string }): React.JSX.Element {
    return (
       <span>
          {p.icon}
@@ -38,7 +38,7 @@ Why ?
 ```tsx
 import {IconUI} from './IconUI'
 
-const ExpensiveComponent = observer(function ExpensiveComponent() {
+const ExpensiveComponent = obs(function ExpensiveComponent() {
    const store = useStore()
    return (
       <div>

bunPlugin.ts

@@ -0,0 +1,166 @@
+// @ts-nocheck
+import './src/setup'
+
+// todo: add back @bun/types later when bun types do not conflict with node types
+import * as babel from '@babel/core'
+import { plugin } from 'bun'
+import chalk from 'chalk'
+import fs from 'fs'
+import debounce from 'lodash/debounce'
+
+// 0. minor setup
+let totalTimeSpentTranspiling = 0
+const RELOAD_HACK_FILENAME = 'bunPlugin.reload.ts'
+
+const startSetup = Date.now()
+const log = (str: string): void => console.log(chalk.dim(`[bun] ${str}`))
+log(`evaluating plugin module`)
+
+plugin({
+   name: 'typescript-with-native-decorators',
+   setup(build): void {
+      // 1. watch files manually since --watch is broken when using bun plugin 🥲
+      const folderToWatch = import.meta.dir + '/src/'
+      log(`manually watching ${folderToWatch}`)
+      const watchFileSet = new Set<string | null>()
+      fs.watch(folderToWatch, { recursive: true }, (event, filename) => {
+         const needestart = watchFileSet.has(filename)
+         log(`file ${filename} changed (in set: ${watchFileSet.has(filename)})`) // ${[...watchFileSet.values()]}
+         if (needestart) void Bun.file(`./${RELOAD_HACK_FILENAME}`).write(`// '${Math.random()})\n`)
+      })
+
+      // 2. change how .ts and .tsx files are loaded
+      log(`setup took ${Date.now() - startSetup}ms`)
+
+      const filter = /\.(ts|tsx)$/
+      build.onLoad({ filter }, async (args): Promise<{ loader: 'js'; contents: string }> => {
+         try {
+            watchFileSet.add(args.path.replace(folderToWatch, ''))
+            const codeTs = await Bun.file(args.path).text()
+            const startTranspiling = performance.now()
+            let codeJS = await transpileFile(args.path, codeTs)
+
+            const relPathXX = '../'.repeat(args.path.replace(folderToWatch, '').split('/').length)
+            // console.log(`[🤠] `, folderToWatch)
+            // console.log(`[🤠] `, args.path)
+            // console.log(`[🤠] `, relPathXX)
+            // 3. inject a dependency on a file that do NOT go though the plugin
+            if (!args.path.endsWith('bunPlugin.reload.ts'))
+               if (!codeJS.startsWith(`import '${RELOAD_HACK_FILENAME}'`))
+                  codeJS = `import '${relPathXX}${RELOAD_HACK_FILENAME}'\n${codeJS}`
+
+            totalTimeSpentTranspiling += performance.now() - startTranspiling
+            addToCache(codeTs, codeJS)
+            return { loader: 'js', contents: codeJS }
+         } catch (e) {
+            console.log(`[🔴] `, e)
+            return { contents: '', loader: 'js' }
+         }
+      })
+   },
+})
+
+// 4. cache system
+const oldCache: Map<string, string> = (await Bun.file('./bunPlugin.cache').exists())
+   ? new Map(JSON.parse((await Bun.file('./bunPlugin.cache').text()) || '[]'))
+   : new Map()
+
+const cache = new Map<string, string>()
+log(`restoring module with ${oldCache.size} entries`)
+
+export const getFromCache = (content: string): string | undefined => {
+   if (cache.has(content)) return cache.get(content)
+   if (oldCache.has(content)) {
+      const value = oldCache.get(content)
+      if (value) cache.set(content, value)
+      return value
+   }
+   return
+}
+const saveCacheImpl = debounce(() => {
+   log(`saving cache with ${cache.size} entries (spent ${totalTimeSpentTranspiling.toFixed(2)}ms transpiling)`) // prettier-ignore
+   void Bun.file('./bunPlugin.cache').write(JSON.stringify([...cache.entries()]))
+}, 50)
+
+export const addToCache = (codeTS: string, codeJS: string): void => {
+   cache.set(codeTS, codeJS)
+   saveCacheImpl()
+}
+
+const MODE: 'babel' | 'esbuild' | 'typescript' = 'babel'
+
+async function transpileFile(name: string, codeTs: string): Promise<string> {
+   // 1. try to return the cached version
+   const cache = getFromCache(codeTs)
+   if (cache) return cache
+
+   // or transpile a new
+   const codeJs = await transpileFileForReal(name, codeTs)
+   addToCache(codeTs, codeJs)
+   return codeJs
+}
+
+async function transpileFileForReal(name: string, codeTS: string): Promise<string> {
+   if (MODE === 'babel') return transpileFileWithBabel(name, codeTS)
+   if (MODE === 'esbuild') return transpileFileWithEsbuild(name, codeTS)
+   if (MODE === 'typescript') return transpileFileWithTypescript(name, codeTS)
+   throw new Error(`MODE ${MODE} is ont supported`)
+}
+
+// alt 1. babel  -------------------------------------------------------------------------
+async function transpileFileWithBabel(name: string, codeTS: string): Promise<string> {
+   const res = await babel.transformAsync(codeTS, {
+      filename: name,
+      plugins: [
+         ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
+         '@babel/plugin-syntax-import-attributes',
+      ],
+      presets: [
+         ['@babel/preset-typescript', { allowDeclareFields: true }],
+         ['@babel/preset-react', { runtime: 'automatic' }],
+      ],
+   })
+   const codeJS = res?.code ?? ''
+   return name.endsWith('.test.ts') || name.endsWith('.test.tsx')
+      ? autoConvertVitestToBunTest(codeJS)
+      : codeJS
+}
+
+// alt 2. esbuild ------------------------------------------------------------------------
+async function transpileFileWithEsbuild(name: string, file: string): Promise<string> {
+   const esbuild = (await import('esbuild')).default
+   const result = await esbuild.transform(file, {
+      loader: 'ts',
+      target: 'chrome110',
+   })
+   return result.code
+}
+
+// alt 3. esbuild ------------------------------------------------------------------------
+async function transpileFileWithTypescript(name: string, file: string): Promise<string> {
+   const typescript = (await import('typescript')).default
+   const codeJS = typescript.transpileModule(file, {
+      compilerOptions: {
+         module: typescript.ModuleKind.ESNext,
+         target: typescript.ScriptTarget.ESNext,
+         jsx: typescript.JsxEmit.React,
+         decorators: true,
+         importAttributes: true,
+      },
+   })
+   return codeJS.outputText
+}
+
+// bonus for those who use vitest --------------------------------------------------------
+function autoConvertVitestToBunTest(finalCode_: string): string {
+   return (
+      finalCode_
+         .replaceAll(`from 'vitest'`, `from 'bun:test'`)
+         .replaceAll('vitest.spyOn', `require('bun:test').spyOn`)
+         .replaceAll('vitest.mock', `require('bun:test').mock`)
+         .replaceAll('vi.spyOn', `require('bun:test').spyOn`)
+         .replaceAll('vi.mock', `require('bun:test').mock`)
+         // https://bun.sh/docs/test/mocks#restore-all-function-mocks-to-their-original-values-with-mock-restore
+         .replaceAll('vitest.restoreAllMocks()', `require('bun:test').mock.restore()`)
+   )
+}

bunfig.toml

@@ -0,0 +1,3 @@
+preload = ["./bunPlugin.ts"]
+[test]
+preload = ["./bunPlugin.ts"]

docs/going-further/contribution/render.md

@@ -0,0 +1,10 @@
+
+
+Every selector step should be cacheable / mergeable.
+
+```tsx
+<doc.Foo.UI.Header />
+```
+
+
+#

docs/going-further/creating-apps/prefabs.md

@@ -54,10 +54,10 @@ export type UI_Mask = X.XChoice<{
 // and add explit return type to your function
 //                         VVVVV
 export function ui_mask(): UI_Mask {
-    const form: Builder = getCurrentForm()
+    const form: Builder = getBuilder()
     return form.choice({
         appearance: 'tab',
-        icon: 'mdiDominoMask',
+        icon: IKONS.mdiDominoMask,
         label: 'Mask',
         default: 'noMask',
         // box: { base: { hue: 20, chroma: 0.03 } },