WIP moving TS compilation to docs.rs

libraries/bezier-rs/.cargo/config.toml

@@ -0,0 +1,2 @@
+[build]
+rustdocflags = ["--html-in-header", "./libraries/bezier-rs/header.html"]

libraries/bezier-rs/Cargo.toml

@@ -24,3 +24,18 @@ dyn-any = { version = "0.3.0", path = "../dyn-any", optional = true }
 kurbo = { workspace = true, optional = true }
 serde = { workspace = true, optional = true }
 log = { workspace = true, optional = true }
+
+[build-dependencies]
+# SWC dependencies for compiling TypeScript to JavaScript
+swc = "0.289.0"
+swc_common = "0.40.0"
+swc_ecma_ast = "0.121.0"
+swc_ecma_parser = { version = "0.152.0", features = ["verify", "typescript"] }
+swc_ecma_transforms_typescript = "0.202.0"
+swc_ecma_visit = "0.107.0"
+
+# Additional dependencies
+anyhow = "1.0" # For error handling in build.rs
+
+# [package.metadata.docs.rs]
+# rustdoc-args = ["--html-in-header", "./header.html"]

libraries/bezier-rs/build.rs

@@ -0,0 +1,80 @@
+use anyhow::Result;
+use std::env;
+use std::fs;
+use std::io;
+use std::path::PathBuf;
+use swc::{config::IsModule, Compiler, PrintArgs};
+use swc_common::{errors::Handler, source_map::SourceMap, sync::Lrc, Mark, GLOBALS};
+use swc_ecma_ast::EsVersion;
+use swc_ecma_parser::Syntax;
+use swc_ecma_transforms_typescript::strip;
+use swc_ecma_visit::FoldWith;
+
+fn main() -> Result<()> {
+	if std::env::var("DOCS_RS").is_ok() {
+		let js = ts_to_js(
+			"hello.ts",
+			r#"
+				interface Args {
+					name: string;
+				}
+
+				function hello(param: Args) {
+					// comment
+					console.log(`Hello ${param.name}!`);
+				}
+				"#,
+		);
+
+		println!("RUNNING THIS CODE, okay?");
+
+		// Wrap JS code in a <script> tag
+		let html_snippet = format!("<style>body {{ background-color: cyan; }}</style><script>{}</script>", js);
+
+		// Write the HTML snippet to a file in OUT_DIR
+		let out_dir = PathBuf::from(env::var("OUT_DIR")?);
+		let html_path = out_dir.join("header.html");
+		fs::write(&html_path, html_snippet)?;
+	}
+
+	Ok(())
+}
+
+/// Transforms typescript to javascript. Returns tuple (js string, source map)
+pub(crate) fn ts_to_js(filename: &str, ts_code: &str) -> String {
+	let cm = Lrc::new(SourceMap::new(swc_common::FilePathMapping::empty()));
+
+	let compiler = Compiler::new(cm.clone());
+
+	let source = cm.new_source_file(Lrc::new(swc_common::FileName::Custom(filename.into())), ts_code.to_string());
+
+	let handler = Handler::with_emitter_writer(Box::new(io::stderr()), Some(compiler.cm.clone()));
+
+	return GLOBALS.set(&Default::default(), || {
+		let program = compiler
+			.parse_js(
+				source,
+				&handler,
+				EsVersion::Es5,
+				Syntax::Typescript(Default::default()),
+				IsModule::Bool(false),
+				Some(compiler.comments()),
+			)
+			.expect("parse_js failed");
+
+		// Add TypeScript type stripping transform
+		let top_level_mark = Mark::new();
+		let unresolved_mark = Mark::new();
+		let program = program.fold_with(&mut strip(unresolved_mark, top_level_mark));
+
+		// https://rustdoc.swc.rs/swc/struct.Compiler.html#method.print
+		let ret = compiler
+			.print(
+				&program, // ast to print
+				PrintArgs::default(),
+			)
+			.expect("print failed");
+
+		ret.code
+	});
+}

libraries/bezier-rs/header.html

@@ -0,0 +1,5 @@
+<style>
+	body {
+		background-color: pink;
+	}
+</style>

website/other/bezier-rs-demos/src/features-subpath.ts

@@ -1,5 +1,16 @@
 import type { SubpathCallback, SubpathInputOption, WasmSubpathInstance } from "@/types";
-import { capOptions, joinOptions, tSliderOptions, subpathTValueVariantOptions, intersectionErrorOptions, minimumSeparationOptions, separationDiskDiameter, SUBPATH_T_VALUE_VARIANTS } from "@/types";
+import {
+	capOptions,
+	joinOptions,
+	tSliderOptions,
+	subpathTValueVariantOptions,
+	intersectionErrorOptions,
+	minimumSeparationOptions,
+	separationDiskDiameter,
+	SUBPATH_T_VALUE_VARIANTS,
+	miterLimitOptions,
+	distanceOptions,
+} from "@/types";
 
 const subpathFeatures = {
 	constructor: {
@@ -160,49 +171,12 @@ const subpathFeatures = {
 	offset: {
 		name: "Offset",
 		callback: (subpath: WasmSubpathInstance, options: Record<string, number>): string => subpath.offset(options.distance, options.join, options.miter_limit),
-		inputOptions: [
+		inputOptions: [distanceOptions, miterLimitOptions],
-			{
-				variable: "distance",
-				inputType: "slider",
-				min: -25,
-				max: 25,
-				step: 1,
-				default: 10,
-			},
-			joinOptions,
-			{
-				variable: "join: Miter - limit",
-				inputType: "slider",
-				min: 1,
-				max: 10,
-				step: 0.25,
-				default: 4,
-			},
-		],
 	},
 	outline: {
 		name: "Outline",
 		callback: (subpath: WasmSubpathInstance, options: Record<string, number>): string => subpath.outline(options.distance, options.join, options.cap, options.miter_limit),
-		inputOptions: [
+		inputOptions: [{ ...distanceOptions, min: 0 }, joinOptions, miterLimitOptions, { ...capOptions, isDisabledForClosed: true }],
-			{
-				variable: "distance",
-				inputType: "slider",
-				min: 0,
-				max: 25,
-				step: 1,
-				default: 10,
-			},
-			joinOptions,
-			{
-				variable: "join: Miter - limit",
-				inputType: "slider",
-				min: 1,
-				max: 10,
-				step: 0.25,
-				default: 4,
-			},
-			{ ...capOptions, isDisabledForClosed: true },
-		],
 	},
 	rotate: {
 		name: "Rotate",

website/other/bezier-rs-demos/src/main.ts

@@ -84,9 +84,8 @@ function bezierDemoGroup(key: BezierFeatureKey, options: BezierFeatureOptions):
 		points: demoOptions[curveType]?.customPoints || getBezierDemoPointDefaults()[curveType],
 		inputOptions: demoOptions[curveType]?.inputOptions || demoOptions.Quadratic?.inputOptions || [],
 	}));
-	return renderDemoGroup(`bezier/${key}`, bezierFeatures[key].name, demos, (demo: BezierDemoArgs) =>
+	const buildDemo = (demo: BezierDemoArgs) => demoBezier(demo.title, demo.points, key, demo.inputOptions, options.triggerOnMouseMove || false);
-		demoBezier(demo.title, demo.points, key, demo.inputOptions, options.triggerOnMouseMove || false),
+	return renderDemoGroup(`bezier/${key}`, bezierFeatures[key].name, demos, buildDemo);
-	);
 }
 
 function subpathDemoGroup(key: SubpathFeatureKey, options: SubpathFeatureOptions): HTMLDivElement {

website/other/bezier-rs-demos/src/types.ts

@@ -226,6 +226,24 @@ export const subpathTValueVariantOptions = {
 	options: SUBPATH_T_VALUE_VARIANTS,
 };
 
+export const distanceOptions = {
+	variable: "distance",
+	inputType: "slider",
+	min: -25,
+	max: 25,
+	step: 1,
+	default: 10,
+};
+
+export const miterLimitOptions = {
+	variable: "join: Miter - limit",
+	inputType: "slider",
+	min: 1,
+	max: 10,
+	step: 0.25,
+	default: 4,
+};
+
 export const joinOptions = {
 	variable: "join",
 	inputType: "dropdown",