You are viewing archived messages.
Go here to search the history.

Tom Larkworthy 2025-04-05 14:27:18

I padded my work trip to Portugal with some extra days off so I could concentrate for 2 days and do a V2 of the editor component. A great success! I switched to floaty window style near the cell, attached it to the correct DOM so it follows the scrolling properly. Got add/remove cells properly working again since the multi-module refactor broke them. Managed to remove several reactivity bugs. Removed some hacks that were working around said bugs. Fixed some low level bugs in the visualizer, causing a few other unexpected bugs to fix themselves coz of that problem.

🎥 add_delete_cells.mp4

Kartik Agaram 2025-04-05 15:44:23

How large is the whole thing at this point?

Tom Larkworthy 2025-04-05 15:53:13

1.4Mb

Kartik Agaram 2025-04-05 15:53:38

Like in lines of unminified Javascript?

Tom Larkworthy 2025-04-05 15:54:35

I have a d3, plot and code mirror dependency. Do I count them or not?

Kartik Agaram 2025-04-05 15:56:11

I think a breakdown would be nicest! Helps me visualize concentric circles of what a reader is most concerned with at the start vs might be concerned with in time.

Tom Larkworthy 2025-04-05 16:04:24

When you export, it prints a table of sizes. I guess I care most about mb on the wire as that is the network and storage tax. I AFK but I can show you that breakdown from my phone. Code mirror is a 300kb gzipped filer dependency. Modules are notebook sources, so the exporter itself is biggest at 75kb of unminified JS. The compiler/decompiler is #2 at similar size. That one includes it's test suite. The new editor V2 is quite small at 33kb, but it's what brings in codemirror

Screenshot_2025-04-05-18-00-16-96_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

Tom Larkworthy 2025-04-05 16:05:35

They map to observable notebook names if you are curious observablehq.com/@tomlarkworthy/observablejs-toolchain

📝 Bidirectional Observable JS Runtime Toolchain

Compilation, source to runtime variable(s) Compilation takes notebook source cells written in Observable Javascript and turns them into reactive variables for execution in the Observable Runtime. A cell is usually compiled to one runtime variable, however, mutable variables are more complicated and are represented as three runtime variables. ObservableHQ does the compilation process as part of the hosted notebook experience but in this notebook we provide a way to do it in userspace. Decompilation, Runt

Tom Larkworthy 2025-04-05 16:08:01

I guess all the names are truncated so it's not possible to read, lol.

Kartik Agaram 2025-04-05 16:09:44

Thank you!

Tom Larkworthy 2025-04-05 16:48:00

Oh the static file export itself gives a good estimate, excluding the gzipped dependencies which are single base64 lines. The export is designed to be human readable and unminified. The compilation process adds boilerplate so I think maybe it's 1.5x larger than the real source but it's closely related. The last export is 6300 LoC github.com/tomlarkworthy/lopecode/blob/main/%40tomlarkworthy_lopepage.html