Skip to content

Commit 6e4eede

Browse files
FreymaurerFreymaurer
committed
reverse logic away from JSX
1 parent 823db34 commit 6e4eede

25 files changed

Lines changed: 4210 additions & 4139 deletions

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"scripts": {
44
"publish-docs": "npm run build && node publish.js",
55
"start": "dotnet tool restore && dotnet fable watch docs --noCache --exclude Feliz.CompilerPlugins --run webpack-dev-server",
6-
"build": "dotnet tool restore && dotnet fable docs --noCache --exclude Feliz.CompilerPlugins --run webpack --mode production"
6+
"build": "dotnet tool restore && dotnet fable docs --noCache --exclude Feliz.CompilerPlugins --run webpack --mode production",
7+
"start:play": "cd playground && npm run dev",
8+
"test": "npm run test -ws"
79
},
810
"repository": {
911
"type": "git",

‎playground/src/App.fs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module App
2+
3+
open Feliz
4+
open Browser.Dom
5+
6+
let App() =
7+
Html.div [
8+
prop.children [
9+
Components.Components.Testing()
10+
Html.div "Test"
11+
]
12+
]

‎playground/src/App.fsproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<ItemGroup>
99
<Compile Include="LazyComponent.fs" />
1010
<Compile Include="Components.fs" />
11+
<Compile Include="App.fs" />
1112
<Compile Include="Main.fs" />
1213
</ItemGroup>
1314

‎playground/src/Components.fs‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
module Components
22

33
open Fable.Core
4-
open Fable.Core.JS
54
open Fable.Core.JsInterop
65
open Feliz
76
open Browser.Dom
@@ -75,10 +74,46 @@ open Browser.Dom
7574

7675
// open Bulma
7776

77+
let LazyLoadComponent =
78+
React.lazy'(fun () ->
79+
promise {
80+
do! Promise.sleep 2000
81+
return! Fable.Core.JsInterop.importDynamic "./LazyComponent.jsx"
82+
}
83+
)
84+
7885
[<Erase; Mangle(false)>]
7986
type Components =
8087

8188

89+
[<ReactComponent>]
90+
static member LazyLoadStaticMember() =
91+
let showPreview, setShowPreview = React.useState(false)
92+
let text, setText = React.useState("Component loaded after 2 seconds")
93+
Html.div [
94+
Html.input [
95+
prop.testId "input"
96+
prop.value text
97+
prop.onChange (fun (e: string) -> setText(e))
98+
]
99+
Html.label [
100+
Html.input [
101+
prop.testId "checkbox"
102+
prop.type' "checkbox"
103+
prop.onChange (fun (e: bool) -> setShowPreview(e))
104+
]
105+
Html.text "Load Component"
106+
]
107+
if showPreview then
108+
React.Suspense(
109+
fallback = Html.div [ prop.testId "loading"; prop.text "Loading..." ],
110+
children = [
111+
Html.h1 "Preview"
112+
React.lazyRender(LazyLoadComponent, {|text = text|})
113+
]
114+
)
115+
]
116+
82117
// [<ReactComponent>]
83118
// static member MyButton(color: string) =
84119
// let text, setText = React.useState("Click Me Please!")
@@ -90,12 +125,14 @@ type Components =
90125
// prop.onClick (fun _ -> setText("Button Clicked!"))
91126
// ]
92127

93-
[<JSX.ComponentAttribute>]
94-
static member LazyLoad() =
95-
let text, setText = React.useState("loading finished")
128+
[<ReactComponent>]
129+
static member Testing() =
130+
// let text, setText = React.useState("loading finished")
96131
React.StrictMode [
97-
React.Fragment [
98-
Html.h1 "Bulma Playground"
99-
// Components.MyButton("blue")
100-
]
132+
// React.Fragment [
133+
// Html.h1 "Bulma Playground"
134+
// Components.MyButton("blue")
135+
// Components.LazyLoadStaticMember()
136+
// ]
137+
Components.LazyLoadStaticMember()
101138
]

‎playground/src/LazyComponent.fs‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
module LazyComponent
1+
module CodeSplitting
22

33
open Fable.Core
4+
open Fable.Core.JsInterop
45
open Feliz
56

6-
[<ReactComponentAttribute(true)>]
7-
let Main(text: string) =
8-
React.useEffectOnce(fun () ->
9-
// Simulate a delay to mimic lazy loading
10-
Browser.Dom.console.log("Lazy component loading...")
11-
)
12-
Html.div [
13-
prop.id "lazyComponent"
14-
prop.testId "lazyComponent"
15-
prop.children [
16-
Html.h1 text
7+
[<Erase; Mangle(false)>]
8+
type CodeSplitting =
9+
10+
[<ReactComponent(true)>]
11+
static member MyCodeSplitComponent (?text: string) =
12+
Html.div [
13+
prop.testId "async-load"
14+
prop.text (Option.defaultValue "Loaded" text)
1715
]
18-
]

‎playground/src/Main.fs‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,5 @@
33
open Feliz
44
open Browser.Dom
55

6-
[<Fable.Core.JSX.ComponentAttribute>]
7-
let View() =
8-
Html.div [
9-
Components.Components.LazyLoad()
10-
]
11-
126
let private root = ReactDOM.createRoot(document.getElementById "root")
13-
root.render(View())
14-
15-
7+
root.render(App.App())

‎src/Feliz.Markdown/Markdown.fs‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -60,26 +60,26 @@ module markdown =
6060
[<Erase; System.Obsolete "markdown.renderers is obsolete. Use markdown.components instead">]
6161
type renderers =
6262
static member inline code (render: ICodeProperties -> Fable.React.ReactElement) =
63-
unbox<IMarkdownRenderer> (Interop.mkAttr "code" render)
63+
unbox<IMarkdownRenderer> (PropHelper.mkAttr "code" render)
6464

6565
[<Erase>]
6666
type components =
67-
static member inline p(render: IParagraphProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "p" render)
68-
static member inline linkReference(render: ILinkProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "linkReference" render)
69-
static member inline h1(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "h1" render)
70-
static member inline h2(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "h2" render)
71-
static member inline h3 (render: IHeadingProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "h3" render)
72-
static member inline h4(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "h4" render)
73-
static member inline h5 (render: IHeadingProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "h5" render)
74-
static member inline h6(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "h6" render)
75-
static member inline table(render: ITableProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "table" render)
76-
static member inline thead(render: ITableHeadProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "thead" render)
77-
static member inline tbody(render: ITableBodyProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "tbody" render)
78-
static member inline trow(render: ITableRowProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "trow" render)
79-
static member inline tcell(render: ITableCellProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "tcell" render)
80-
static member inline ol(render: IListProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "ol" render)
81-
static member inline ul(render: IListProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "ul" render)
82-
static member inline li(render: IListProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "li" render)
67+
static member inline p(render: IParagraphProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "p" render)
68+
static member inline linkReference(render: ILinkProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "linkReference" render)
69+
static member inline h1(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "h1" render)
70+
static member inline h2(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "h2" render)
71+
static member inline h3 (render: IHeadingProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "h3" render)
72+
static member inline h4(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "h4" render)
73+
static member inline h5 (render: IHeadingProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "h5" render)
74+
static member inline h6(render: IHeadingProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "h6" render)
75+
static member inline table(render: ITableProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "table" render)
76+
static member inline thead(render: ITableHeadProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "thead" render)
77+
static member inline tbody(render: ITableBodyProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "tbody" render)
78+
static member inline trow(render: ITableRowProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "trow" render)
79+
static member inline tcell(render: ITableCellProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "tcell" render)
80+
static member inline ol(render: IListProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "ol" render)
81+
static member inline ul(render: IListProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "ul" render)
82+
static member inline li(render: IListProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "li" render)
8383
static member inline code(render: ICodeProperties -> ReactElement) =
8484
let renderInternal (props: obj) =
8585
let inputs = createObj [
@@ -88,8 +88,8 @@ module markdown =
8888
"isInline" ==> emitJsExpr<bool> props "$0.inline || false"
8989
]
9090
render (unbox<ICodeProperties> inputs)
91-
unbox<IComponent> (Interop.mkAttr "code" renderInternal)
92-
static member inline pre(render: ICodeProperties -> ReactElement) = unbox<IComponent> (Interop.mkAttr "pre" render)
91+
unbox<IComponent> (PropHelper.mkAttr "code" renderInternal)
92+
static member inline pre(render: ICodeProperties -> ReactElement) = unbox<IComponent> (PropHelper.mkAttr "pre" render)
9393

9494

9595
type INodeType = interface end
@@ -128,37 +128,42 @@ type nodeTypes =
128128
type markdown =
129129
/// The Markdown source to parse
130130
[<System.Obsolete "markdown.source is deprecated. Use markdown.children insteadf">]
131-
static member inline source (value: string) = Interop.mkAttr "children" value
131+
static member inline source (value: string) = PropHelper.mkAttr "children" value
132132
/// The Markdown source to parse
133-
static member inline children (value: string) = Interop.mkAttr "children" value
134-
static member inline components(components: IComponent list) = Interop.mkAttr "components" (createObj !!components)
133+
static member inline children (value: string) = PropHelper.mkAttr "children" value
134+
static member inline components(components: IComponent list) = PropHelper.mkAttr "components" (createObj !!components)
135135
/// Setting to `false` will cause HTML to be rendered (see notes below about proper HTML support). Be aware that setting this to false might cause security issues if the input is user-generated. Use at your own risk. (default: `true`).
136-
static member inline escapeHtml(value: bool) = Interop.mkAttr "escapeHtml" value
136+
static member inline escapeHtml(value: bool) = PropHelper.mkAttr "escapeHtml" value
137137
/// Setting to `true` will skip inlined and blocks of HTML (default: `false`).
138-
static member inline skipHtml(value: bool) = Interop.mkAttr "skipHtml" value
138+
static member inline skipHtml(value: bool) = PropHelper.mkAttr "skipHtml" value
139139
/// Setting to `true` will add `data-sourcepos` attributes to all elements, indicating where in the markdown source they were rendered from (default: `false`).
140-
static member inline sourcePosition(value: bool) = Interop.mkAttr "sourcePos" value
140+
static member inline sourcePosition(value: bool) = PropHelper.mkAttr "sourcePos" value
141141
/// Setting to `true` will pass a sourcePosition property to all renderers with structured source position information (default: `false`).
142-
static member inline rawSourcePosition(value: bool) = Interop.mkAttr "rawSourcePos" value
142+
static member inline rawSourcePosition(value: bool) = PropHelper.mkAttr "rawSourcePos" value
143143
/// Setting to `true` will pass index and parentChildCount props to all renderers (default: `false`).
144-
static member inline includeNodeIndex (value: bool) = Interop.mkAttr "includeNodeIndex" value
144+
static member inline includeNodeIndex (value: bool) = PropHelper.mkAttr "includeNodeIndex" value
145145
/// Defines which types of nodes should be allowed (rendered). (default: all types).
146-
static member inline allowedTypes (types: INodeType list) = Interop.mkAttr "allowedTypes" (Array.ofList types)
146+
static member inline allowedTypes (types: INodeType list) = PropHelper.mkAttr "allowedTypes" (Array.ofList types)
147147
/// Defines which types of nodes should be allowed (rendered). (default: all types).
148-
static member inline allowedTypes (types: INodeType array) = Interop.mkAttr "allowedTypes" types
148+
static member inline allowedTypes (types: INodeType array) = PropHelper.mkAttr "allowedTypes" types
149149
/// Defines which types of nodes should be disallowed (not rendered). (default: none).
150-
static member inline disallowedTypes (types: INodeType list) = Interop.mkAttr "disallowedTypes" (Array.ofList types)
150+
static member inline disallowedTypes (types: INodeType list) = PropHelper.mkAttr "disallowedTypes" (Array.ofList types)
151151
/// Defines which types of nodes should be disallowed (not rendered). (default: none).
152-
static member inline disallowedTypes (types: INodeType array) = Interop.mkAttr "disallowedTypes" types
152+
static member inline disallowedTypes (types: INodeType array) = PropHelper.mkAttr "disallowedTypes" types
153153
[<System.Obsolete "markdown.renderers is obsolete. Use markdown.components instead">]
154154
static member inline renderers (renderers: IMarkdownRenderer list) =
155-
Interop.mkAttr "renderers" (createObj !!renderers)
155+
PropHelper.mkAttr "renderers" (createObj !!renderers)
156156

157157

158158
[<Erase>]
159159
type Markdown =
160-
static member inline markdown (properties: IReactProperty list) =
161-
JSX.create (importDefault "react-markdown") properties
162-
|> unbox<ReactElement>
160+
static member inline markdown (properties: seq<IReactProperty>) =
161+
ReactLegacy.createElement (
162+
``type`` = unbox<ReactNode> (importDefault "react-markdown"),
163+
props = Fable.Core.JsInterop.createObj !!properties
164+
)
163165
static member inline markdown (sourceMarkdown: string) =
164-
JSX.create (importDefault "react-markdown") [ "children" ==> sourceMarkdown ]
166+
ReactLegacy.createElement (
167+
``type`` = unbox<ReactNode> (importDefault "react-markdown"),
168+
children = unbox<ReactElement> sourceMarkdown
169+
)

0 commit comments

Comments
 (0)