Home

Building the TypeScript Project

September 30

Webpack

Previously I was manually adding a script tag for each compiled TypeScript file.

bundle the ts files nicely so i dont have to manually deal with npm packages

but that doesnt fix it for snappy compression cause save_monger needs the functions available earlier and with different signatures

can add devtool: "eval-source-map" to the webpack.config.js to make the correct line numbers show in the browser debugger.

Improving Nim Code Access

I want to be able to access Nim functions from TypeScript but the compiler needs to know that the function exists. Since i can't edit the code generated by the Nim compiler, I can't add the export keyword to the parse_state function so the compiler won't let me import it. The function does just exist globally once the JavaScript is running but I want webpack's bundling thingy to acknowledge it so it doesn't throw an error.

In a script tag before importing the nim library's JavaScript, i create a window.SaveMonger object. Then from my Nim code, I can access that object and assign functions to it. This also means that if I minify the JavaScript compiled from Nim, it doesn't matter if it mangles the function names because it will still be assigned to the correct field of the object (just running it through terser takes it from 158 kb to 54 kb). I've got a fork of save_monger with these changes. 


import jsffi

var SaveMonger {.importc.}: JsObject

SaveMonger.parse_state = parse_state

SaveMonger.state_to_binary = state_to_binary

Now from my TypeScript code I can access that object and write a typed function header so the compiler knows that I'm allowed to call that function. I have to cast the window object because TypeScript doesn't know that my added field exists. 


function parse_state(data: Uint8Array): Circuit {

    return (window as any).SaveMonger.parse_state(data);

}

The order of the script tags in the HTML really matters here

Build Script

Setup a little script that builds the markdown files in the docs directory into html files. Wrote some simple css that makes it look kinda like github's markdown rendering.

Another script that minifies the JavaScript I depend on and adds license headers in a consistent format to the third party files that will be distributed by the site.

Got everything in a build.sh that i can have CloudFlare Pages run for me when I want to publish the site. It also installs nim and python-markdown if they're missing (which they will be on CloudFlare's fresh image).

base64

When you import a TC Circuit file, its raw data is converted into a base64 string which is saved in the browser's local storage. This means that if you refresh the page, the last circuit you imported will remain available.

I also added buttons for importing or exporting circuits as these base64 strings directly. When you clear the canvas or import a new circuit, the base64 string of your previous circuit is printed to the console so you can get it back if you make a mistake.

Display Settings

setup a class for saving user preferences. ie. wire colours

put that at window.TuringGoesBrrr.settings so it can be accessed from the console dispite the minifier

These preferences can be imported and exported as a json string which can be passed between users. This string is saved in your browser's local storage. When the settings are changed, the circuit is automatically rerendered.


Home