Feliz.CompilerPlugins 2.2.0

Feliz

Fable 中 React API 的新鲜重拾，针对快乐进行优化。

看起来是这样的

module App

open Feliz

[<ReactComponent>]
let Counter() =
    let (count, setCount) = React.useState(0)
    Html.div [
        Html.button [
            prop.style [ style.marginRight 5 ]
            prop.onClick (fun _ -> setCount(count + 1))
            prop.text "Increment"
        ]

        Html.button [
            prop.style [ style.marginLeft 5 ]
            prop.onClick (fun _ -> setCount(count - 1))
            prop.text "Decrement"
        ]

        Html.h1 count
    ]

open Browser.Dom

let root = ReactDOM.createRoot(document.getElementById "root")
root.render(Counter())

特点

• 一致的、轻量级 格式化：不再需要两个列表来为每个元素进行尴尬的缩进。
• 易发现 属性，无需更多函数，Html 属性或 CSS 属性全局可用，因此易于查找。
• 良好的 文档：每个属性和 CSS 属性
• 完全 React API 支持：Feliz 致力于支持使用 hooks、上下文等构建组件的 React API。
• 完全 类型安全：没有更多的 Margin of obj，而是利用大量重载函数来处理 CSS 属性的重载性质，覆盖 90%+ 的 CSS 样式、值和属性。
• 在 colors 模块中包含最常用 Html 颜色的 颜色列表。
• 兼容 当前应用于应用程序的 React DSL。
• 兼容 Femto。
• 大约 零 打包体积增加，除非您实际使用这些函数，否则所有函数体都将从生成的javascript中删除。

快速开始

dotnet new -i Feliz.Template
dotnet new feliz -n MyProject
cd MyProject
npm install
npm start

文档

Feliz在https://zaid-ajaj.github.io/Feliz提供了全面的技术文档，其中包含代码示例及实时示例，请查看它们，如果您有任何问题，请告诉我们！