Online editor: ability to select the style

api/sixtyfps-wasm-interpreter/src/lib.rs

@@ -49,11 +49,25 @@ pub async fn compile_from_string(
     source: String,
     base_url: String,
     optional_import_callback: Option<js_sys::Function>,
+) -> Result<CompilationResult, JsValue> {
+    compile_from_string_with_style(source, base_url, String::new(), optional_import_callback).await
+}
+
+/// Same as [`compile_from_string`], but also takes a style parameter
+#[wasm_bindgen]
+pub async fn compile_from_string_with_style(
+    source: String,
+    base_url: String,
+    style: String,
+    optional_import_callback: Option<js_sys::Function>,
 ) -> Result<CompilationResult, JsValue> {
     #[cfg(feature = "console_error_panic_hook")]
     console_error_panic_hook::set_once();
 
     let mut compiler = sixtyfps_interpreter::ComponentCompiler::default();
+    if !style.is_empty() {
+        compiler.set_style(style)
+    }
 
     if let Some(load_callback) = optional_import_callback {
         let open_import_fallback = move |file_name: &Path| -> core::pin::Pin<

tools/online_editor/index.html

@@ -20,7 +20,15 @@
     <p><button type="button" id="compile_button">Compile!</button>
         &nbsp; &nbsp;
         <input type="checkbox" id="auto_compile" name="auto_compile" checked>
-        <label for="auto_compile">Automatically compile on change</label></p>
+        <label for="auto_compile">Automatically compile on change</label>
+        &nbsp; &nbsp; &nbsp; &nbsp;
+        <label for="style_combo">Style:</label>
+        <select id="style_combo">
+            <option value="ugly">ulgy</option>
+            <option value="fluent">fluent</option>
+        </select>
+    </p>
+
     <div id="preview" style="max-width: 48%; float: right"></div>
     <div id="editor_area" class="d-block" style="height:600px; width: 48%">
         <ul id="tabs" class="nav nav-tabs">

tools/online_editor/index.ts

@@ -76,6 +76,9 @@ export Demo := Window {
     }
     select.onchange = select_combo_changed;
 
+    let style_combo = (<HTMLInputElement>document.getElementById("style_combo"));
+    style_combo.onchange = update_preview;
+
     let compile_button = (<HTMLButtonElement>document.getElementById("compile_button"));
     compile_button.onclick = function () {
         update_preview();
@@ -184,6 +187,9 @@ export Demo := Window {
     }
 
     async function render_or_error(source: string, base_url: string, div: HTMLDivElement) {
+
+        let style_combo = (<HTMLInputElement>document.getElementById("style_combo"));
+
         let canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9);
         let canvas = document.createElement("canvas");
         canvas.width = 800;
@@ -192,7 +198,7 @@ export Demo := Window {
         div.innerHTML = "";
         div.appendChild(canvas);
         var markers = [];
-        let { component, diagnostics, error_string } = await sixtyfps.compile_from_string(source, base_url, async (url: string): Promise<string> => {
+        let { component, diagnostics, error_string } = await sixtyfps.compile_from_string_with_style(source, base_url, style_combo.value, async (url: string): Promise<string> => {
             let model_and_state = editor_documents.get(url);
             if (model_and_state === undefined) {
                 const response = await fetch(url);

tools/online_editor/preview.ts

@@ -45,7 +45,7 @@ export Demo := Window {
         div.innerHTML = "";
         div.appendChild(canvas);
 
-        let { component, error_string } = await sixtyfps.compile_from_string(source, base_url, async (url: string): Promise<string> => {
+        let { component, error_string } = await sixtyfps.compile_from_string_with_style(source, base_url, style, async (url: string): Promise<string> => {
             let file_source = loaded_documents.get(url);
             if (file_source === undefined) {
                 const response = await fetch(url);
@@ -71,6 +71,7 @@ export Demo := Window {
     const params = new URLSearchParams(window.location.search);
     const code = params.get("snippet");
     const load_url = params.get("load_url");
+    const style = params.get("style") || "";
 
     if (code) {
         main_source = code;