RAN023 Invalid content parts on an element

error RAN023: This element has two content parts (Unsafe.html and Hooks.widget), which fails when the definition is created.

Cause. TemplateParts.element raises ArgumentException when an element has two content parts (Unsafe.html, Hooks.widget), a content part and template children, or raw HTML on a void, raw-text, template, textarea or title element. The exception fires when the definition is created, on every target. The rule reads literal parts and children: the arrays of t.tag parts children, or the parts and body of a sugar tag.

Fix. Give each content part its own element, and move template children into another element.

Triggers

module Example

open Ranvier
open Ranvier.View
open Ranvier.View.HtmlTemplate
open Ranvier.View.Sugar

let markup = UnsafeHtml.Trust "<b>x</b>"
let attach (_: unit) (_: 'native) = fun () -> ()

let panel =
    Component.define (fun _ () -> ()) (fun t -> t.div [| t.Unsafe.html markup; t.Hooks.widget attach |] [||])

Fixed

module Example

open Ranvier
open Ranvier.View
open Ranvier.View.HtmlTemplate
open Ranvier.View.Sugar

let markup = UnsafeHtml.Trust "<b>x</b>"
let attach (_: unit) (_: 'native) = fun () -> ()

let panel =
    Component.define (fun _ () -> ()) (fun t ->
        t.div [||] [| t.div [| t.Unsafe.html markup |] [||]; t.div [| t.Hooks.widget attach |] [||] |])

Suppression. // fsharpanalyzer: ignore-line RAN023, with the reason on the line before.