diff --git a/gleam.toml b/gleam.toml index 59ffeec..c380f1a 100644 --- a/gleam.toml +++ b/gleam.toml @@ -2,7 +2,7 @@ # https://gleam.run/writing-gleam/gleam-toml/. name = "tardis" target = "javascript" -version = "0.1.0" +version = "0.2.0" description = "Time traveller debugger, tailor-made for Lustre" internal_modules = ["tardis/internals", "tardis/internals/*"] @@ -11,10 +11,11 @@ links = [{title = "Sponsor", href = "https://github.com/sponsors/ghivert"}] repository = {type = "github", user = "ghivert", repo = "tardis"} [dependencies] -gleam_stdlib = ">= 0.36.0 and < 1.0.0" -lustre = ">= 4.2.0 and < 5.0.0" -plinth = ">= 0.2.0 and < 1.0.0" -sketch = ">= 2.0.0 and < 3.0.0" +gleam_stdlib = ">= 0.40.0 and < 1.0.0" +lustre = ">= 4.3.1 and < 5.0.0" +plinth = ">= 0.4.14 and < 1.0.0" +sketch = ">= 3.1.0 and < 4.0.0" +sketch_lustre = ">= 1.0.1 and < 2.0.0" [dev-dependencies] gleeunit = ">= 1.1.2 and < 2.0.0" diff --git a/manifest.toml b/manifest.toml index 6ee982f..b68f94a 100644 --- a/manifest.toml +++ b/manifest.toml @@ -2,21 +2,25 @@ # You typically do not need to edit this file packages = [ - { name = "gleam_erlang", version = "0.25.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "054D571A7092D2A9727B3E5D183B7507DAB0DA41556EC9133606F09C15497373" }, - { name = "gleam_javascript", version = "0.8.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "14D5B7E1A70681E0776BF0A0357F575B822167960C844D3D3FA114D3A75F05A8" }, + { name = "conversation", version = "1.4.3", build_tools = ["gleam"], requirements = ["gleam_http", "gleam_javascript", "gleam_stdlib"], otp_app = "conversation", source = "hex", outer_checksum = "908B46F60444442785A495197D482558AD8B849C3714A38FAA1940358CC8CCCD" }, + { name = "gleam_erlang", version = "0.27.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "DE468F676D71B313C6C8C5334425CFCF827837333F8AB47B64D8A6D7AA40185D" }, + { name = "gleam_http", version = "3.7.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "EA66440C2269F7CED0F6845E5BD0DB68095775D627FA709A841CA78A398D6D56" }, + { name = "gleam_javascript", version = "0.13.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "F98328FCF573DA6F3A35D7F6CB3F9FF19FD5224CCBA9151FCBEAA0B983AF2F58" }, { name = "gleam_json", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "thoas"], otp_app = "gleam_json", source = "hex", outer_checksum = "9063D14D25406326C0255BDA0021541E797D8A7A12573D849462CAFED459F6EB" }, - { name = "gleam_otp", version = "0.10.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "0B04FE915ACECE539B317F9652CAADBBC0F000184D586AAAF2D94C100945D72B" }, - { name = "gleam_stdlib", version = "0.37.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "5398BD6C2ABA17338F676F42F404B9B7BABE1C8DC7380031ACB05BBE1BCF3742" }, - { name = "gleeunit", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "72CDC3D3F719478F26C4E2C5FED3E657AC81EC14A47D2D2DEBB8693CA3220C3B" }, - { name = "lustre", version = "4.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "258F876CD7AB12C2C773F1A30F76DFC0A0ED989B720070DF32FC0717A6A0E60C" }, - { name = "plinth", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "83211E672D83F3CE14681D0ECD3AD883EE7588E423E7C9DDDB460014AD60AC24" }, - { name = "sketch", version = "2.1.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "47175BD019A00CFEAAF2851830825544E24ABA58168083A1D219FA8E06EF6713" }, - { name = "thoas", version = "1.2.0", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "540C8CB7D9257F2AD0A14145DC23560F91ACDCA995F0CCBA779EB33AF5D859D1" }, + { name = "gleam_otp", version = "0.12.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "BFACC1513410DF5A1617169A9CD7EA334973AC71D860A17574BA7B2EADD89A6F" }, + { name = "gleam_stdlib", version = "0.40.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "86606B75A600BBD05E539EB59FABC6E307EEEA7B1E5865AFB6D980A93BCB2181" }, + { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" }, + { name = "lustre", version = "4.5.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "15C0597E97FBC4D095B6DDFAB849740EB9062828D55A071990A957C6564ADEF3" }, + { name = "plinth", version = "0.4.14", build_tools = ["gleam"], requirements = ["conversation", "gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "1954376A2E19735B251F73B33C5D119AEB838BD589475884710B224E402F1546" }, + { name = "sketch", version = "3.1.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "F162070BCCF8BEF28C9520E80501565403E681D9E3F80844EC5ED307A2E4ADDF" }, + { name = "sketch_lustre", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], otp_app = "sketch_lustre", source = "hex", outer_checksum = "9F3952F3574EE3D3269287D010AC9B131E48C8F2933AA6179D58851A866FEA3D" }, + { name = "thoas", version = "1.2.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "E38697EDFFD6E91BD12CEA41B155115282630075C2A727E7A6B2947F5408B86A" }, ] [requirements] -gleam_stdlib = { version = ">= 0.36.0 and < 1.0.0" } +gleam_stdlib = { version = ">= 0.40.0 and < 1.0.0" } gleeunit = { version = ">= 1.1.2 and < 2.0.0" } -lustre = { version = ">= 4.2.0 and < 5.0.0" } -plinth = { version = ">= 0.2.0 and < 1.0.0" } -sketch = { version = ">= 2.0.0 and < 3.0.0" } +lustre = { version = ">= 4.3.1 and < 5.0.0" } +plinth = { version = ">= 0.4.14 and < 1.0.0" } +sketch = { version = ">= 3.1.0 and < 4.0.0" } +sketch_lustre = { version = ">= 1.0.1 and < 2.0.0" } diff --git a/src/tardis.ffi.mjs b/src/tardis.ffi.mjs index 4dab8f5..d5c42bb 100644 --- a/src/tardis.ffi.mjs +++ b/src/tardis.ffi.mjs @@ -73,7 +73,7 @@ function inspectCustomType(record) { return isNaN(parseInt(label)) ? [new Some(label + ': '), value] : [new None(), value] - }) + }), ) return new DataCustomType(record.constructor.name, props) } @@ -88,7 +88,7 @@ export function inspectBitArray(bits) { export function inspectUtfCodepoint(codepoint) { return new DataUtfCodepoint( - `//utfcodepoint(${String.fromCodePoint(codepoint.value)})` + `//utfcodepoint(${String.fromCodePoint(codepoint.value)})`, ) } @@ -200,3 +200,7 @@ export function updateLustre(application, initMapper, updateMapper) { init: initMapper(application.init), }) } + +export function coerce(a) { + return a +} diff --git a/src/tardis.gleam b/src/tardis.gleam index 880bbe7..1a9d1a6 100644 --- a/src/tardis.gleam +++ b/src/tardis.gleam @@ -39,7 +39,6 @@ //// ``` import gleam/dynamic.{type Dynamic} -import gleam/function import gleam/int import gleam/io import gleam/list @@ -49,11 +48,11 @@ import gleam/result import lustre.{type Action, type App} import lustre/attribute as a import lustre/effect -import lustre/element as el -import lustre/element/html as h import lustre/event -import sketch/lustre as sketch -import sketch/options as sketch_options +import sketch +import sketch/lustre as sl +import sketch/lustre/element as el +import sketch/lustre/element/html as h import tardis/error import tardis/internals/data/colors import tardis/internals/data/debugger as debugger_ @@ -124,21 +123,13 @@ fn start_lustre(lustre_root, application) { |> result.map_error(error.LustreError) } -fn start_sketch(root) { - // Attach the StyleSheet to the Shadow DOM. - let setup = sketch.setup(sketch_options.shadow(root)) - use error <- result.map_error(setup) - io.debug("Unable to start sketch. Check your configuration.") - io.debug(error) - error.SketchError(error) -} - /// Creates the tardis. Should be run once, at the start of the application. /// It can be skipped when using [`single`](#single). pub fn setup() { let #(shadow_root, lustre_root) = setup.mount_shadow_node() - start_sketch(shadow_root) - |> result.map(sketch.compose(view, _)) + + sketch.cache(strategy: sketch.Ephemeral) + |> result.map(sl.compose(sl.shadow(shadow_root), view, _)) |> result.map(lustre.application(init, update, _)) |> result.try(start_lustre(lustre_root, _)) |> result.map(fn(dispatch) { Tardis(dispatch) }) @@ -184,7 +175,7 @@ fn update(model: Model, msg: Msg) { let fst_step = list.first(d.steps) use step <- result.try(fst_step) d.dispatcher - |> option.map(function.apply1(_, step.model)) + |> option.map(fn(d) { d(step.model) }) |> option.to_result(Nil) }) |> effect.batch() @@ -212,7 +203,7 @@ fn update(model: Model, msg: Msg) { |> debugger_.get(debugger_) |> result.try(fn(d) { d.dispatcher - |> option.map(function.apply1(_, item.model)) + |> option.map(fn(d) { d(item.model) }) |> option.to_result(Nil) }) |> result.unwrap(effect.none()) @@ -262,11 +253,11 @@ fn color_scheme_selector(model: Model) { case model.opened { False -> el.none() True -> - h.select([event.on_input(on_cs_input), s.select_cs()], { + h.select(s.select_cs(), [event.on_input(on_cs_input)], { use item <- list.map(colors.themes()) let as_s = colors.cs_to_string(item) let selected = model.color_scheme == item - h.option([a.value(as_s), a.selected(selected)], as_s) + h.option_([a.value(as_s), a.selected(selected)], [h.text(as_s)]) }) } } @@ -274,7 +265,7 @@ fn color_scheme_selector(model: Model) { fn restart_button(model: Model) { case model.frozen, model.selected_debugger { True, Some(debugger_) -> - h.button([s.select_cs(), event.on_click(msg.Restart(debugger_))], [ + h.button(s.select_cs(), [event.on_click(msg.Restart(debugger_))], [ h.text("Restart"), ]) _, _ -> el.none() @@ -286,31 +277,41 @@ fn view(model: Model) { let #(panel, header, button_txt) = select_panel_options(model.opened) let frozen_panel = case model.frozen { True -> s.frozen_panel() - False -> a.none() + False -> sketch.class([]) } let debugger_ = model.selected_debugger |> option.unwrap("") |> debugger_.get(model.debuggers, _) - h.div([a.class("debugger_"), color_scheme_class, frozen_panel], [ - h.div([panel], [ - h.div([header], [ - h.div([s.flex(), s.debugger_title()], [ - h.div([], [h.text("Debugger")]), + let panel_class = + [color_scheme_class, frozen_panel] + |> list.map(sketch.compose) + |> sketch.class + let title_class = + [s.flex(), s.debugger_title()] + |> list.map(sketch.compose) + |> sketch.class + h.div(panel_class, [a.class("debugger_")], [ + h.div(panel, [], [ + h.div(header, [], [ + h.div(title_class, [], [ + h.div_([], [h.text("Debugger")]), color_scheme_selector(model), restart_button(model), ]), case debugger_ { Error(_) -> el.none() Ok(debugger_) -> - h.div([s.actions_section()], [ - h.select([event.on_input(on_debugger_input), s.select_cs()], { + h.div(s.actions_section(), [], [ + h.select(s.select_cs(), [event.on_input(on_debugger_input)], { use #(item, _) <- list.map(model.keep_active_debuggers(model)) let selected = model.selected_debugger == Some(item) - h.option([a.value(item), a.selected(selected)], item) + h.option_([a.value(item), a.selected(selected)], [h.text(item)]) }), - h.div([], [h.text(int.to_string(debugger_.count - 1) <> " Steps")]), - h.button([s.toggle_button(), event.on_click(msg.ToggleOpen)], [ + h.div_([], [ + h.text(int.to_string(debugger_.count - 1) <> " Steps"), + ]), + h.button(s.toggle_button(), [event.on_click(msg.ToggleOpen)], [ h.text(button_txt), ]), ]) diff --git a/src/tardis/internals/data/colors.gleam b/src/tardis/internals/data/colors.gleam index 253932e..5755a01 100644 --- a/src/tardis/internals/data/colors.gleam +++ b/src/tardis/internals/data/colors.gleam @@ -194,7 +194,6 @@ pub fn ayu_dark_class() { sketch.property("--regex", ayu_dark.regex), sketch.property("--date", ayu_dark.date), ]) - |> sketch.to_lustre() } pub fn ayu_light_class() { @@ -219,7 +218,6 @@ pub fn ayu_light_class() { sketch.property("--regex", ayu_light.regex), sketch.property("--date", ayu_light.date), ]) - |> sketch.to_lustre() } pub fn catpuccin_light_class() { @@ -244,7 +242,6 @@ pub fn catpuccin_light_class() { sketch.property("--regex", catpuccin_light.regex), sketch.property("--date", catpuccin_light.date), ]) - |> sketch.to_lustre() } pub fn catpuccin_frappe_class() { @@ -269,7 +266,6 @@ pub fn catpuccin_frappe_class() { sketch.property("--regex", catpuccin_frappe.regex), sketch.property("--date", catpuccin_frappe.date), ]) - |> sketch.to_lustre() } pub fn gleam_class() { @@ -294,7 +290,6 @@ pub fn gleam_class() { sketch.property("--regex", gleam.regex), sketch.property("--date", gleam.date), ]) - |> sketch.to_lustre() } pub fn choose_color_scheme() { diff --git a/src/tardis/internals/setup.gleam b/src/tardis/internals/setup.gleam index 6e6256b..b6f8d18 100644 --- a/src/tardis/internals/setup.gleam +++ b/src/tardis/internals/setup.gleam @@ -15,6 +15,9 @@ pub type Middleware = @external(javascript, "../../tardis.ffi.mjs", "addCustomStyles") fn add_custom_styles(content: String) -> Nil +@external(javascript, "../../tardis.ffi.mjs", "coerce") +fn coerce(content: Dynamic) -> a + pub fn instanciate_shadow_root(element: Element) { // Instanciate the Shadow DOM wrapper. let div = document.create_element("div") @@ -39,7 +42,7 @@ pub fn mount_shadow_node() { let shadow_root = instanciate_shadow_root(lustre_root_) // Trick to fool lustre application. // Please children, don't do this at home. - let lustre_root: String = dynamic.unsafe_coerce(dynamic.from(lustre_root_)) + let lustre_root: String = coerce(dynamic.from(lustre_root_)) #(shadow_root, lustre_root) } @@ -84,17 +87,14 @@ pub fn create_model_updater( ) { fn(dispatcher: Dynamic) { fn(model: Dynamic) -> Effect(Msg) { - effect.from(fn(_) { - model - |> dynamic.from() - |> runtime.ForceModel() - |> runtime.Debug() - |> dynamic.unsafe_coerce(dispatcher) - }) + use _ <- effect.from + let model = dynamic.from(model) + let msg = runtime.Debug(runtime.ForceModel(model)) + coerce(dispatcher)(msg) } |> msg.AddApplication(application, _) - |> lustre.dispatch() - |> dispatch() + |> lustre.dispatch + |> dispatch } } @@ -103,8 +103,7 @@ pub fn step_adder( name: String, ) { fn(model, msg) { - model - |> msg.AddStep(name, _, msg) + msg.AddStep(name, model, msg) |> lustre.dispatch() |> dispatch() } diff --git a/src/tardis/internals/styles.gleam b/src/tardis/internals/styles.gleam index 4dd82c9..569c951 100644 --- a/src/tardis/internals/styles.gleam +++ b/src/tardis/internals/styles.gleam @@ -23,18 +23,15 @@ fn panel_() { pub fn panel() { panel_() - |> sketch.to_lustre() } pub fn panel_closed() { - [ + sketch.class([ sketch.compose(panel_()), sketch.width(px(400)), // sketch.min_height(px(60)), sketch.justify_content("center"), - ] - |> sketch.class() - |> sketch.to_lustre() + ]) } fn grid_header_() { @@ -49,7 +46,6 @@ fn grid_header_() { pub fn grid_header() { grid_header_() - |> sketch.to_lustre() } pub fn bordered_grid_header() { @@ -57,7 +53,6 @@ pub fn bordered_grid_header() { sketch.compose(grid_header_()), sketch.border_bottom("2px solid var(--primary)"), ]) - |> sketch.to_lustre() } fn header_() { @@ -73,13 +68,10 @@ fn header_() { pub fn header() { header_() - |> sketch.to_lustre() } pub fn bordered_header() { - [sketch.compose(header_())] - |> sketch.class() - |> sketch.to_lustre() + sketch.class([sketch.compose(header_())]) } pub fn body() { @@ -92,7 +84,6 @@ pub fn body() { sketch.white_space("pre-wrap"), sketch.font_size(px(10)), ]) - |> sketch.to_lustre() } fn details_() { @@ -108,13 +99,10 @@ fn details_() { pub fn details() { details_() - |> sketch.to_lustre() } pub fn selected_details() { - [sketch.compose(details_()), sketch.background("var(--shadow)")] - |> sketch.class() - |> sketch.to_lustre() + sketch.class([sketch.compose(details_()), sketch.background("var(--shadow)")]) } pub fn step_index() { @@ -125,7 +113,6 @@ pub fn step_index() { sketch.font_family("Lexend"), sketch.color("var(--syntax-comment)"), ]) - |> sketch.to_lustre() } pub fn step_msg() { @@ -135,7 +122,6 @@ pub fn step_msg() { sketch.padding(px(9)), sketch.border_right("1px solid var(--gutter)"), ]) - |> sketch.to_lustre() } pub fn step_model() { @@ -144,7 +130,6 @@ pub fn step_model() { sketch.word_break("break-all"), sketch.padding(px(6)), ]) - |> sketch.to_lustre() } pub fn actions_section() { @@ -154,7 +139,6 @@ pub fn actions_section() { sketch.align_items("center"), sketch.white_space("nowrap"), ]) - |> sketch.to_lustre() } pub fn toggle_button() { @@ -166,19 +150,16 @@ pub fn toggle_button() { sketch.property("cursor", "pointer"), sketch.color("var(--button)"), ]) - |> sketch.to_lustre() } pub fn keyword_color() { [sketch.color("var(--bool)"), sketch.white_space("pre")] |> sketch.class() - |> sketch.to_lustre() } pub fn flex() { [sketch.display("flex")] |> sketch.class() - |> sketch.to_lustre() } pub fn debugger_title() { @@ -187,13 +168,10 @@ pub fn debugger_title() { sketch.align_items("center"), sketch.gap(px(18)), ]) - |> sketch.to_lustre() } pub fn text_color(color: String) { - { "syntax-" <> color } - |> sketch.dynamic([sketch.color(color)]) - |> sketch.to_lustre + sketch.class([sketch.color(color)]) } pub fn subgrid_header() { @@ -203,7 +181,6 @@ pub fn subgrid_header() { sketch.background("var(--background)"), sketch.padding(px(9)), ]) - |> sketch.to_lustre() } pub fn select_cs() { @@ -221,7 +198,6 @@ pub fn select_cs() { sketch.border_radius(px(5)), sketch.outline("none"), ]) - |> sketch.to_lustre() } pub fn frozen_panel() { @@ -234,5 +210,4 @@ pub fn frozen_panel() { sketch.z_index(1_000_000), // sketch.background("rgba(255, 255, 255, 0.1)"), ]) - |> sketch.to_lustre() } diff --git a/src/tardis/internals/view.gleam b/src/tardis/internals/view.gleam index 9129d04..b9aea33 100644 --- a/src/tardis/internals/view.gleam +++ b/src/tardis/internals/view.gleam @@ -2,9 +2,9 @@ import gleam/list import gleam/option.{type Option} import gleam/pair import gleam/string -import lustre/element.{type Element} -import lustre/element/html as h import lustre/event +import sketch/lustre/element.{type Element} +import sketch/lustre/element/html as h import tardis/internals/data.{type Data} import tardis/internals/data/debugger.{type Debugger} import tardis/internals/data/msg.{type Msg} @@ -16,7 +16,7 @@ pub fn view_model(opened: Bool, debugger_: String, model: Debugger) { case opened { False -> element.none() True -> - element.keyed(h.div([s.body()], _), { + element.keyed(h.div(s.body(), [], _), { model.steps |> list.take(100) |> list.map(fn(i) { #(i.index, view_step(debugger_, selected, i)) }) @@ -31,10 +31,10 @@ fn view_step(debugger_: String, selected_step: Option(String), item: Step) { True -> s.selected_details() False -> s.details() } - h.div([class, event.on_click(msg.BackToStep(debugger_, item))], [ - h.div([s.step_index()], [h.text(index)]), - h.div([s.step_msg()], view_data(data.inspect(msg), 0, "")), - h.div([s.step_model()], view_data(data.inspect(model), 0, "")), + h.div(class, [event.on_click(msg.BackToStep(debugger_, item))], [ + h.div(s.step_index(), [], [h.text(index)]), + h.div(s.step_msg(), [], view_data(data.inspect(msg), 0, "")), + h.div(s.step_model(), [], view_data(data.inspect(model), 0, "")), ]) } @@ -42,11 +42,11 @@ fn view_data_line(indent: Int, prefix: String, text: String, color: String) { let idt = string.repeat(" ", times: indent) let text_color = s.text_color(color) case string.length(prefix) { - 0 -> h.div([text_color], [h.text(idt <> text)]) + 0 -> h.div(text_color, [], [h.text(idt <> text)]) _ -> - h.div([s.flex()], [ - h.div([s.keyword_color()], [h.text(idt <> prefix)]), - h.div([text_color], [h.text(text)]), + h.div(s.flex(), [], [ + h.div(s.keyword_color(), [], [h.text(idt <> prefix)]), + h.div(text_color, [], [h.text(text)]), ]) } } @@ -59,10 +59,10 @@ fn select_grid_header_class(opened: Bool, model: Debugger) { } fn view_grid_header(opened: Bool, model: Debugger) { - h.div([select_grid_header_class(opened, model)], [ - h.div([s.subgrid_header()], [h.text("Step")]), - h.div([s.subgrid_header()], [h.text("Msg")]), - h.div([s.subgrid_header()], [h.text("Model")]), + h.div(select_grid_header_class(opened, model), [], [ + h.div(s.subgrid_header(), [], [h.text("Step")]), + h.div(s.subgrid_header(), [], [h.text("Msg")]), + h.div(s.subgrid_header(), [], [h.text("Model")]), ]) } @@ -132,7 +132,7 @@ fn view_data_list(values: List(Data), prefix p: String, indent i: Int) { let open_list = view_data_line(i, p, "[", "var(--editor-fg)") let close_list = fn(idt) { view_data_line(idt, "", "]", "var(--editor-fg)") } case list.is_empty(values) { - True -> [h.div([s.flex()], [open_list, close_list(0)])] + True -> [h.div(s.flex(), [], [open_list, close_list(0)])] False -> list.concat([ [open_list], @@ -192,10 +192,10 @@ fn view_data_custom_type( }) case v > 2 { True -> body_type(True) - False -> [h.div([s.flex()], body_type(False))] + False -> [h.div(s.flex(), [], body_type(False))] } } - [] -> [h.div([s.flex()], [open_type(False), close_type(0, False)])] + [] -> [h.div(s.flex(), [], [open_type(False), close_type(0, False)])] } } @@ -204,15 +204,14 @@ fn view_data_dict(values: List(#(Data, Data)), prefix p: String, indent i: Int) [view_data_line(i, p, "//js dict.from_list([", "var(--editor-fg)")], list.flat_map(values, fn(data) { [ - h.div( - [s.flex()], + h.div(s.flex(), [], { list.concat([ view_data(pair.first(data), i + 2, "#("), view_data(pair.second(data), 0, ", "), - [h.div([s.text_color("var(--bool)")], [h.text(")")])], + [h.div(s.text_color("var(--bool)"), [], [h.text(")")])], [h.text(",")], - ]), - ), + ]) + }), ] }), [view_data_line(i, "", "])", "var(--editor-fg)")],