[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"]