Feature/issue 69 jsx transformations

.c8rc.json

@@ -15,7 +15,7 @@
   "checkCoverage": true,
 
   "statements": 90,
-  "branches": 90,
+  "branches": 85,
   "functions": 90,
   "lines": 90,
 

.eslintrc.cjs

@@ -1,7 +1,10 @@
 module.exports = {
   parserOptions: {
     ecmaVersion: 2021,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
   },
   env: {
     browser: false,

.github/workflows/ci-jsx-win.yml

@@ -0,0 +1,31 @@
+name: Continuous Integration Windows JSX
+
+on: [pull_request]
+
+jobs:
+
+  build:
+    runs-on: windows-latest
+
+    strategy:
+      matrix:
+        node: [16]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node }}
+    - name: Installing project dependencies
+      run: |
+        npm ci
+    - name: Lint
+      run: |
+        npm run lint
+    - name: Test
+      run: |
+        npm run test:jsx
+    - name: Build
+      run: |
+        npm run build

.github/workflows/ci-jsx.yml

@@ -0,0 +1,31 @@
+name: Continuous Integration JSX
+
+on: [pull_request]
+
+jobs:
+
+  build:
+    runs-on: ubuntu-18.04
+
+    strategy:
+      matrix:
+        node: [16]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node }}
+    - name: Installing project dependencies
+      run: |
+        npm ci
+    - name: Lint
+      run: |
+        npm run lint
+    - name: Test
+      run: |
+        npm run test:jsx
+    - name: Build
+      run: |
+        npm run build

.github/workflows/ci-win.yml

@@ -25,7 +25,7 @@ jobs:
         npm run lint
     - name: Test
       run: |
-        npm run test
+        npm test
     - name: Build
       run: |
         npm run build

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         npm run lint
     - name: Test
       run: |
-        npm run test
+        npm test
     - name: Build
       run: |
         npm run build

.gitignore

@@ -2,4 +2,5 @@
 .vscode/
 coverage/
 dist/
-node_modules/
+node_modules/
+sandbox/

docs/pages/docs.md

@@ -136,4 +136,55 @@ export async function getData() {
 
 - Make sure to define your custom elements with `customElements.define`
 - Make sure to include a `export default` for your custom element base class
-- Avoid [touching the DOM in `constructor` methods](https://twitter.com/techytacos/status/1514029967981494280)
+- Avoid [touching the DOM in `constructor` methods](https://twitter.com/techytacos/status/1514029967981494280)
+
+
+## JSX
+
+> ⚠️ _Very Experimental!_
+
+Even more experimental than WCC is the option to author a rendering function for native `HTMLElements`, that can compile down to a zero run time, web ready custom element!  It handles resolving event handling and `this` references and can manage some basic re-rendering lifecycles.
+
+### Example
+
+Below is an example of what is possible right now [demonstrated](https://github.com/thescientist13/greenwood-counter-jsx) through a Counter component.
+```jsx
+export default class Counter extends HTMLElement {
+  constructor() {
+    super();
+    this.count = 0;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const { count } = this;
+
+    return (
+      <div>
+        <button onclick={this.count -= 1}> -</button>
+        <span>You have clicked <span class="red">{count}</span> times</span>
+        <button onclick={this.count += 1}> +</button>
+      </div>
+    );
+  }
+}
+
+customElements.define('wcc-counter', Counter);
+```
+
+There is an [active discussion tracking features](https://github.com/ProjectEvergreen/wcc/discussions/84) and [issues in progress](https://github.com/ProjectEvergreen/wcc/issues?q=is%3Aopen+is%3Aissue+label%3AJSX) to continue iterating on this, so please feel free to try it out and give us your feedback!
+
+### Prerequisites
+
+There are of couple things you will need to do to use WCC with JSX:
+1. NodeJS version needs to be `16.x`
+1. You will need to use the _.jsx_ extension
+1. Requires the `--experimental-loaders` flag when invoking NodeJS
+    ```js
+    $ node --experimental-loader ./node_modules/wc-compiler/src/jsx-loader.js server.js
+    ```
+
+> _See our [example's page](/examples#jsx) for some usages of WCC + JSX._  👀

docs/pages/examples.md

@@ -255,4 +255,8 @@ export async function handler() {
     `;
   };
 }
-```
+```
+
+## JSX
+
+A current example of a Todo App can be seen in [this repo](https://github.com/thescientist13/todo-app), which is a fork of [this Greenwood based Todo App which uses LitElement](https://github.com/ProjectEvergreen/todo-app).  It can compile JSX for _**the client or the server**_ using [Greenwood](https://www.greenwoodjs.io/), and can even be used with the same unit testing tools! 💪