Add JSX section

Author: alfonsogarciacaro

docs/blog/2022/2022-05-31-Snake_Island_alpha.md

@@ -50,8 +50,149 @@ You can track the current progress for Dart compilation [here](https://github.co
 
 ## JSX
 
-...
+Fable JS wasn't supposed to get any new feature with Snake Island, but at the last minute we've implemented support for yet another language or, more exactly, a language-in-a-language. [JSX](https://reactjs.org/docs/introducing-jsx.html) was introduced by the React team as a way to declare HTML-like UIs directly in JavaScript without the need of a template language. Although Fable has supported React from the start, it never used JSX. Instead it directly output the JS code generated by JSX templates. This made sense because for React JSX was only syntax sugar and this way we could save a compilation step.
+
+However, given the popularity gained by JSX, there are now tools that take advantage of this compilation step to perform code analysis or other operations. Like [SolidJS](https://www.solidjs.com/) which uses JSX to analyze the dependency tree in your code and translate the declarative render functions into surgical imperative updates that don't need a Virtual DOM and are smaller and faster than equivalent React apps (while maintaining the same developer experience overall). We have already implemented a [Feliz](https://zaid-ajaj.github.io/Feliz/)-like API to create Solid apps with good results. For example, the following code:
+
+```fsharp
+open Browser
+open Feliz.JSX
+open Fable.Core
+
+[<JSX.Component>]
+let Counter() =
+    let count, setCount = Solid.createSignal(0)
+    let doubled() = count() * 2
+    let quadrupled() = doubled() * 2
+
+    Html.fragment [
+        Html.p $"{count()} * 2 = {doubled()}"
+        Html.p $"{doubled()} * 2 = {quadrupled()}"
+        Html.br []
+        Html.button [
+            Attr.className "button"
+            Ev.onClick(fun _ -> count() + 1 |> setCount)
+            Html.children [
+                Html.text $"Click me!"
+            ]
+        ]
+    ]
+
+Solid.render(Counter, document.getElementById("app-container"))
+```
+
+Which looks like much of the current existing Feliz apps, will be translated by Fable to:
+
+```js
+import { createSignal } from "solid-js";
+import { render } from "solid-js/web";
+
+export function Counter() {
+    const patternInput = createSignal(0);
+    const setCount = patternInput[1];
+    const count = patternInput[0];
+    const doubled = () => (count() * 2);
+    const quadrupled = () => (doubled() * 2);
+    return <>
+        <p>
+            {`${count()} * 2 = ${doubled()}`}
+        </p>
+        <p>
+            {`${doubled()} * 2 = ${quadrupled()}`}
+        </p>
+        <br></br>
+        <button class="button"
+            onClick={(_arg1) => {
+                setCount(count() + 1);
+            }}>
+            Click me!
+        </button>
+    </>;
+}
+
+render(() => <Counter></Counter>, document.getElementById("app-container"));
+```
+
+Which in turn gets translated by Solid into something similar to:
+
+```js
+import { render, createComponent, delegateEvents, insert, template } from 'solid-js/web';
+import { createSignal } from 'solid-js';
+
+const _tmpl$ = /*#__PURE__*/template(`<p></p>`, 2),
+      _tmpl$2 = /*#__PURE__*/template(`<br>`, 1),
+      _tmpl$3 = /*#__PURE__*/template(`<button class="button">Click me!</button>`, 2);
+
+function Counter() {
+  const patternInput = createSignal(0);
+  const setCount = patternInput[1];
+  const count = patternInput[0];
+
+  const doubled = () => count() * 2;
+
+  const quadrupled = () => doubled() * 2;
+
+  return [(() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    insert(_el$, () => `${count()} * 2 = ${doubled()}`);
+
+    return _el$;
+  })(), (() => {
+    const _el$2 = _tmpl$.cloneNode(true);
+
+    insert(_el$2, () => `${doubled()} * 2 = ${quadrupled()}`);
+
+    return _el$2;
+  })(), _tmpl$2.cloneNode(true), (() => {
+    const _el$4 = _tmpl$3.cloneNode(true);
+
+    _el$4.$$click = _arg1 => {
+      setCount(count() + 1);
+    };
+
+    return _el$4;
+  })()];
+}
+
+render(() => createComponent(Counter, {}), document.getElementById("app"));
+
+delegateEvents(["click"]);
+```
+
+Your nice, declarative code has been magically transformed into performant imperative instructions :)
+
+Soon JSX will be available to Fable React apps too! Though as commented above, it won't make a big difference in React (and in fact it can be more limiting as JSX needs to be interpreted statically, so list comprehensions for example can be trickier) but we are also introducing JSX templates which can be particularly helpful when bringing external HTML code to your app. And with the [F# template highlighting VS Code extension](https://marketplace.visualstudio.com/items?itemName=alfonsogarciacaro.vscode-template-fsharp-highlight) you can achieve a very similar experience to [Fable.Lit](https://fable.io/Fable.Lit/).
+
+```fsharp
+let gradient, setGradient = React.useState(5)
+
+Html.fragment [
+    Html.div [
+        Html.input [
+            Attr.typeRange
+            Attr.min 1
+            Attr.max 100
+            Attr.value $"{gradient}"
+            Ev.onTextInput (fun (value: string) -> value |> int |> setGradient)
+        ]
+    ]
+
+    JSX.html $"""
+    <svg height="150" width="300">
+        <defs>
+            <linearGradient id="gr2" x1="0%%" y1="60%%" x2="100%%" y2="0%%">
+            <stop offset={ length.perc gradient } style="stop-color:rgb(52, 235, 82);stop-opacity:1" />
+            <stop offset="100%%" style="stop-color:rgb(52, 150, 235);stop-opacity:1" />
+            </linearGradient>
+        </defs>
+        <ellipse cx="125" cy="75" rx="100" ry="60" fill="url(#gr2)" />
+        Sorry but this browser does not support inline SVG.
+    </svg>
+    """
+```
 
+Basically this means you'll be able to write JSX code directly into your F# app! And you can try it out already with Solid and Snake Island by cloning [this repo](https://github.com/alfonsogarciacaro/Feliz.Solid).
 
 <br />