From 355c762a3844c5ef962cf109022e827da0dcb9f7 Mon Sep 17 00:00:00 2001 From: Vladimir Shchur Date: Tue, 17 Dec 2024 09:11:45 -0800 Subject: [PATCH] Added a note about ref usage in Oxpecker.Solid --- src/Oxpecker.Solid/README.md | 3 ++- tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.expected | 2 +- tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.fs | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Oxpecker.Solid/README.md b/src/Oxpecker.Solid/README.md index 767062d..e383bb7 100644 --- a/src/Oxpecker.Solid/README.md +++ b/src/Oxpecker.Solid/README.md @@ -73,6 +73,8 @@ This library doesn't provide support for React-like context. I strongly believe Note that `attr:`, `on:`, `bool:`, `ref` attributes are exposed as F# methods in the API: `elem.on(...)`, `elem.attr(...)` etc. Also, `style` and `class'` are attributes when accepting `string`, while `style'` and `classList` are methods when accepting `object` (to be used with [createObj](https://fable.io/docs/javascript/features.html#createobj)). +_Note_: when using `ref(nativeElem)` make sure that `nativeElem` is mutable (e.g. `let mutable nativeElem = Unchecked.defaultof`). + ### Store Similar to the original implementation in `Fable.Solid` , store has a special helper for updating its fields: @@ -88,7 +90,6 @@ setStore // store setter Again, just as in the original implementation in `Fable.Solid`, resource is a special object, so instead of JS `resource()` call, you'll need to use `resource.current` in F#. - ### Router Router namespace is `Oxpecker.Solid.Router`. It contains router related components and functions. To render a router you still need to decorate router function with `SolidComponent` attribute: diff --git a/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.expected b/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.expected index cf4ee1a..3b84a52 100644 --- a/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.expected +++ b/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.expected @@ -3,7 +3,7 @@ import { onMount } from "solid-js"; import { some } from "./fable_modules/fable-library-js.4.23.0/Option.js"; export function Test() { - const htmlCanvas = defaultOf(); + let htmlCanvas = defaultOf(); onMount(() => { console.log(some(htmlCanvas.height + htmlCanvas.width)); }); diff --git a/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.fs b/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.fs index dedc4c0..85830e8 100644 --- a/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.fs +++ b/tests/Oxpecker.Solid.Tests/SolidCases/Refs/Refs.fs @@ -7,9 +7,9 @@ open Fable.Core.JS [] let Test () = - let htmlCanvas: HTMLCanvasElement = Unchecked.defaultof<_> + let mutable htmlCanvas: HTMLCanvasElement = Unchecked.defaultof<_> onMount(fun () -> console.log(htmlCanvas.height + htmlCanvas.width)) - div().ref(fun _ -> console.log("before mounted")) { + div().ref(fun _ -> console.log("before mounted")) { canvas(width=256, height=256).ref(htmlCanvas) }