[WIP] JSX support

examples/counters/src/index.ts

@@ -12,14 +12,16 @@ import { main1 } from "./version1";
 import { main2 } from "./version2";
 import { main3 } from "./version3";
 import { counterList as main4 } from "./version4";
+import main5 from "./version5";
 
 const { ul, li, p, br, button, h1, div } = elements;
 
 const numberToApp = {
   1: main1,
   2: main2,
   3: main3,
-  4: main4
+  4: main4,
+  5: main5
 };
 
 type AppId = keyof (typeof numberToApp);
@@ -56,10 +58,17 @@ const versionSelector = modelView<FromModel, FromView>(
       selectorButton("1", selected).output({ select1: "select" }),
       selectorButton("2", selected).output({ select2: "select" }),
       selectorButton("3", selected).output({ select3: "select" }),
-      selectorButton("4", selected).output({ select4: "select" })
+      selectorButton("4", selected).output({ select4: "select" }),
+      selectorButton("5", selected).output({ select5: "select" })
     ])
       .map((o) => ({
-        selectVersion: combine(o.select1, o.select2, o.select3, o.select4)
+        selectVersion: combine(
+          o.select1,
+          o.select2,
+          o.select3,
+          o.select4,
+          o.select5
+        )
       }))
       .output({ selectVersion: "selectVersion" })
 );

examples/counters/src/version5.tsx

@@ -0,0 +1,34 @@
+import { fgo, combine, F1 } from "@funkia/jabz";
+import { sample, scan, Stream, Behavior } from "@funkia/hareactive";
+import { createElement, modelView } from "../../../src";
+
+type CounterModelInput = {
+  incrementClick: Stream<any>;
+  decrementClick: Stream<any>;
+};
+
+type CounterViewInput = {
+  count: Behavior<number>;
+};
+
+const model = fgo(function*({
+  incrementClick,
+  decrementClick
+}: CounterModelInput) {
+  const increment = incrementClick.mapTo(1);
+  const decrement = decrementClick.mapTo(-1);
+  const changes = combine(increment, decrement);
+  const count: number = yield sample(scan((n, m) => n + m, 0, changes));
+  return { count };
+});
+
+const view = ({ count }: CounterViewInput) => (
+  <div>
+    Counter {count}
+    <button output={{ incrementClick: "click" }}>+</button>
+    <button output={{ decrementClick: "click" }}>-</button>
+  </div>
+);
+
+const main = modelView<CounterViewInput, CounterModelInput>(model, view)();
+export default main;

examples/counters/tsconfig.json

@@ -1,6 +1,8 @@
 {
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "createElement"
+  },
   "extends": "../tsconfig.json",
-  "include": [
-    "**/*.ts"
-  ]
-}
+  "include": ["**/*.ts", "**/*.tsx"]
+}

karma.conf.js

@@ -1,13 +1,15 @@
-module.exports = function (config) {
+module.exports = function(config) {
   config.set({
     frameworks: ["mocha", "karma-typescript"],
     files: [
       { pattern: "src/**/*.ts" },
-      { pattern: "test/**/*.ts" }
+      { pattern: "test/**/*.ts" },
+      { pattern: "test/**/*.tsx" }
     ],
     preprocessors: {
       "src/**/*.ts": ["karma-typescript"],
-      "test/**/*.ts": ["karma-typescript"]
+      "test/**/*.ts": ["karma-typescript"],
+      "test/**/*.tsx": ["karma-typescript"]
     },
     reporters: ["mocha", "karma-typescript"],
     browsers: ["Chrome"],

src/elements.ts

@@ -1,10 +1,5 @@
-import { Behavior, Stream } from "@funkia/hareactive";
-import { Component, ChildList } from "./component";
 import { element, streamDescription, behaviorDescription } from "./dom-builder";
 
-// Required due to exports using the type
-import { ClassDescriptionArray } from "./dom-builder";
-
 export const input = element("input", {
   actionDefinitions: {
     focus: (elm: HTMLElement): void => elm.focus()

src/index.ts

@@ -3,3 +3,4 @@ export * from "./component";
 export * from "./dom-builder";
 import * as elements from "./elements";
 export { elements };
+export * from "./jsx";

src/jsx.ts

@@ -0,0 +1,34 @@
+import { elements } from ".";
+import { Component } from "./component";
+import { div } from "./elements";
+import { DefaultOutput, Properties, ElementCreator } from "./dom-builder";
+
+export function createElement(
+  node: string,
+  props: Properties<DefaultOutput> | null,
+  ...children: any[]
+): Component<{}, DefaultOutput> {
+  console.log("node", node);
+  console.log("props", props);
+  console.log("children", children);
+
+  const e: ElementCreator<any> = node in elements ? (<any>elements)[node] : div;
+
+  if (props !== null) {
+    let o = undefined;
+    if ("output" in props && typeof props === "object") {
+      o = props.output;
+      delete props.output;
+    }
+    const el = e(props, children);
+    return o !== undefined ? el.output(o) : el;
+  }
+  return e(children);
+}
+
+declare global {
+  namespace JSX {
+    type IntrinsicElements = { [k in keyof typeof elements]: any };
+    type Element = Component<any, any>;
+  }
+}

test/jsx.spec.tsx

@@ -0,0 +1,7 @@
+import { use } from "chai";
+import * as chaiDom from "chai-dom";
+use(chaiDom);
+
+describe.only("jsx", () => {
+  it("basic", () => {});
+});

tsconfig.json

@@ -11,7 +11,9 @@
     "strict": true,
     "strictPropertyInitialization": false,
     "noStrictGenericChecks": true,
-    "lib": ["dom", "es2017"]
+    "lib": ["dom", "es2017"],
+    "jsxFactory": "createElement",
+    "jsx": "react"
   },
   "include": ["src/**/*", "test/**/*", "examples/**/*"],
   "exclude": ["node_modules"]