Support JSX as a pragma

package.json

@@ -29,6 +29,8 @@
     "@types/mocha": "^5.2.7",
     "@types/node": "^10.5.2",
     "@types/react": "16.9.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "mocha": "^6.2.0",
     "react": "16.9.0",
     "react-dom": "16.9.0",
@@ -46,6 +48,6 @@
     "compile": "npm run compile-cjs && npm run compile-es6",
     "compile-cjs": "tsc --module commonjs --outDir ./lib/cjs",
     "compile-es6": "echo 'TODO' : tsc --module es6 --outDir ./lib/es6",
-    "test": "$(npm bin)/mocha test/*.ts --require ts-node/register --recursive"
+    "test": "$(npm bin)/mocha test/*.ts test/*.tsx --require ts-node/register --recursive"
   }
 }

readme.md

@@ -376,6 +376,83 @@ See [`@cycle/react-native`](https://github.com/cyclejs/react-native).
   </p>
 </details>
 
+<details>
+  <summary><strong>JSX support</strong> (click here)</summary>
+
+  <p>
+
+### Babel
+
+Add the following to your webpack config:
+
+```js
+module: {
+  rules: [
+    {
+      test: /\.jsx?$/,
+      loader: 'babel-loader',
+      options: {
+        plugins: [
+          ['transform-react-jsx', { pragma: 'jsxFactory.createElement' }],
+        ]
+      }
+    }
+  ]
+},
+```
+
+If you used `create-cycle-app` you may have to eject to modify the config.
+
+### Automatically providing jsxFactory
+
+You can avoid having to import `jsxFactory` in every jsx file by allowing webpack to provide it:
+
+```js
+plugins: [
+  new webpack.ProvidePlugin({
+    jsxFactory: ['@cycle/react', 'jsxFactory']
+  })
+],
+```
+
+### Typescript
+
+Add the following to your `tsconfig.json`:
+
+```js
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "jsxFactory.createElement"
+  }
+}
+```
+
+If webpack is providing `jsxFactory` you will need to add typings to `custom-typings.d.ts`:
+
+```js
+declare var jsxFactory: any;
+```
+
+
+### Usage
+
+```js
+import { jsxFactory } from '@cycle/react';
+function view(state$: Stream<State>): Stream<ReactElement> {
+    return state$.map(({ count }) => (
+        <div>
+            <h2>Counter: {count}</h2>
+            <button sel="add">Add</button>
+            <button sel="subtract">Subtract</button>
+        </div>
+    ));
+}
+```
+
+  </p>
+</details>
+
 ## License
 
 MIT, Copyright Andre 'Staltz' Medeiros 2018

src/index.ts

@@ -5,3 +5,4 @@ export {ReactSource} from './ReactSource';
 export {h} from './h';
 export {incorporate} from './incorporate';
 export {StreamRenderer} from './StreamRenderer';
+export {default as jsxFactory} from './jsxFactory';

src/jsxFactory.ts

@@ -0,0 +1,36 @@
+import {createElement, ReactElement, ReactType} from 'react';
+import {incorporate} from './incorporate';
+export {Attributes} from 'react';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      sel?: string | symbol;
+    }
+  }
+  namespace React {
+    interface ClassAttributes<T> extends Attributes {
+      sel?: string | symbol;
+    }
+  }
+}
+
+type PropsExtensions = {
+  sel?: string | symbol;
+}
+
+function createIncorporatedElement<P = any>(
+  type: ReactType<P>,
+  props: P & PropsExtensions | null,
+  ...children: Array<string | ReactElement<any>>
+): ReactElement<P> {
+  if (!props || !props.sel) {
+    return createElement(type, props, ...children);
+  } else {
+    return createElement(incorporate(type), props, ...children);
+  }
+}
+
+export default {
+  createElement: createIncorporatedElement
+}

test/jsxFactory.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import * as Adapter from 'enzyme-adapter-react-16';
+import * as Enzyme from 'enzyme';
+const assert = require('assert');
+import {jsxFactory, h, ReactSource, makeCycleReactComponent} from '../src';
+
+Enzyme.configure({adapter: new Adapter()});
+
+const {shallow} = Enzyme;
+
+describe('jsxFactory', function () {
+  it('w/ nothing', () => {
+    const wrapper = shallow(<h1></h1>);
+
+    assert.strictEqual(wrapper.find('h1').length, 1);
+  });
+
+  it('w/ text child', () => {
+    const wrapper = shallow(<h1>heading 1</h1>);
+
+    const h1 = wrapper.find('h1');
+    assert.strictEqual(h1.text(), 'heading 1');
+  });
+
+  it('w/ children array', () => {
+    const wrapper = shallow(
+      <section>
+        <h1>heading 1</h1>
+        <h2>heading 2</h2>
+        <h3>heading 3</h3>
+      </section>
+    );
+
+    const section = wrapper.find('section');
+    assert.strictEqual(section.children().length, 3);
+  });
+
+  it('w/ props', () => {
+    const wrapper = shallow(<section data-foo='bar' />);
+
+    assert(wrapper.exists('[data-foo="bar"]'));
+  });
+
+  it('w/ props and children', () => {
+    const wrapper = shallow(
+      <section data-foo="bar">
+        <h1>heading 1</h1>
+        <h2>heading 2</h2>
+        <h3>heading 3</h3>
+      </section>
+    );
+
+    const section = wrapper.first();
+    assert.strictEqual(section.length, 1);
+    assert(section.exists('[data-foo="bar"]'));
+    assert.deepStrictEqual(section.children().length, 3);
+  });
+
+  it('w/ className', () => {
+    const wrapper = shallow(<section className="foo" />);
+
+    assert(wrapper.hasClass('foo'));
+  });
+
+  it('renders functional component', () => {
+    const Test = () => <h1>Functional</h1>;
+    const wrapper = shallow(<Test />);
+
+    assert.strictEqual(wrapper.first().type(), 'h1');
+  });
+
+  it('renders class component', () => {
+    class Test extends React.Component {
+      render() {
+        return <h1>Class</h1>;
+      }
+    }
+
+    const wrapper = shallow(<Test />);
+
+    assert.strictEqual(wrapper.first().type(), 'h1');
+  });
+});

tsconfig.json

@@ -11,7 +11,9 @@
     "rootDir": "src/",
     "outDir": "lib/cjs/",
     "skipLibCheck": true,
-    "lib": ["dom", "es5", "scripthost", "es2015"]
+    "lib": ["dom", "es5", "scripthost", "es2015"],
+    "jsx": "react",
+    "jsxFactory": "jsxFactory.createElement"
   },
   "files": ["src/index.ts"]
 }