Add tooling for code coverage, changelogs, and conventional commits

.github/workflows/main.yml

@@ -24,8 +24,14 @@ jobs:
         with:
           useLockFile: false
 
+      - name: 👕 Lint commit messages
+        uses: wagoid/commitlint-github-action@v4
+
       - name: ▶️ Run flow-typed script
         run: npm run flow-typed
 
       - name: ▶️ Run build script
         run: npm run build
+
+      - name: ⬆️ Upload karma coverage report
+        uses: codecov/codecov-action@v2

.github/workflows/publish.yml

@@ -0,0 +1,32 @@
+name: "publish to npm"
+on: workflow_dispatch
+jobs:
+    main:
+        runs-on: ubuntu-latest
+        steps:
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v2
+              with:
+                  token: ${{ secrets.ACCESS_TOKEN }}
+                  fetch-depth: 0
+
+            - name: ⎔ Setup node
+              # sets up the .npmrc file to publish to npm
+              uses: actions/setup-node@v2
+              with:
+                  node-version: "14"
+                  registry-url: "https://registry.npmjs.org"
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: Configure git user
+              run: |
+                  git config --global user.email ${{ github.actor }}@users.noreply.github.com
+                  git config --global user.name ${{ github.actor }}
+            - name: ▶️ Run release
+              run: npm run release
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"

README.md

@@ -1,8 +1,14 @@
 JSX Pragmatic
 -------------
 
+[![build status][build-badge]][build]
+[![code coverage][coverage-badge]][coverage]
 [![npm version][version-badge]][package]
 
+[build-badge]: https://img.shields.io/github/workflow/status/krakenjs/jsx-pragmatic/build?logo=github&style=flat-square
+[build]: https://github.com/krakenjs/jsx-pragmatic/actions?query=workflow:build
+[coverage-badge]: https://img.shields.io/codecov/c/github/krakenjs/jsx-pragmatic.svg?style=flat-square
+[coverage]: https://codecov.io/github/krakenjs/jsx-pragmatic/
 [version-badge]: https://img.shields.io/npm/v/jsx-pragmatic.svg?style=flat-square
 [package]: https://www.npmjs.com/package/jsx-pragmatic
 

commitlint.config.js

@@ -0,0 +1,6 @@
+/* @flow */
+/* eslint import/no-commonjs: off */
+
+module.exports = {
+    extends: [ '@commitlint/config-conventional' ]
+};

package.json

@@ -14,13 +14,53 @@
     "webpack": "babel-node --plugins=transform-es2015-modules-commonjs ./node_modules/.bin/webpack --progress",
     "test": "npm run lint && npm run flow-typed && npm run flow && npm run karma",
     "build": "npm run test && npm run babel && npm run webpack",
-    "release": "./publish.sh",
-    "release:patch": "./publish.sh patch",
-    "release:minor": "./publish.sh minor",
-    "release:major": "./publish.sh major",
     "clean": "rimraf dist coverage",
     "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install",
-    "debug": "cross-env NODE_ENV=debug"
+    "debug": "cross-env NODE_ENV=debug",
+    "prepare": "husky install",
+    "prerelease": "npm run clean && npm run build && git add dist && git commit -m 'ci: check in dist folder' || echo 'Nothing to distribute'",
+    "release": "standard-version",
+    "postrelease": "git push && git push --follow-tags && npm publish"
+  },
+  "standard-version": {
+    "types": [
+      {
+        "type": "feat",
+        "section": "Features"
+      },
+      {
+        "type": "fix",
+        "section": "Bug Fixes"
+      },
+      {
+        "type": "chore",
+        "hidden": false
+      },
+      {
+        "type": "docs",
+        "hidden": false
+      },
+      {
+        "type": "style",
+        "hidden": false
+      },
+      {
+        "type": "refactor",
+        "hidden": false
+      },
+      {
+        "type": "perf",
+        "hidden": false
+      },
+      {
+        "type": "test",
+        "hidden": false
+      },
+      {
+        "type": "ci",
+        "hidden": true
+      }
+    ]
   },
   "files": [
     "dist/",
@@ -48,8 +88,12 @@
   ],
   "readmeFilename": "README.md",
   "devDependencies": {
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
     "flow-bin": "0.135.0",
-    "grumbler-scripts": "^3",
-    "mocha": "^4.1.0"
+    "grumbler-scripts": "^5.0.3",
+    "husky": "^7.0.4",
+    "mocha": "^4.1.0",
+    "standard-version": "^9.3.2"
   }
 }

src/node.js

@@ -52,12 +52,12 @@ function renderChildren<T>(children : $ReadOnlyArray<ElementNode | TextNode | Co
 }
 
 export class ElementNode {
-    type : (typeof NODE_TYPE.ELEMENT) = NODE_TYPE.ELEMENT
+    type : (typeof NODE_TYPE.ELEMENT) = NODE_TYPE.ELEMENT;
 
-    name : string
-    props : NodePropsType
-    children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>> // eslint-disable-line no-use-before-define
-    onRender : ?<T>(T) => void // eslint-disable-line no-undef
+    name : string;
+    props : NodePropsType;
+    children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>>; // eslint-disable-line no-use-before-define
+    onRender : ?<T>(T) => void; // eslint-disable-line no-undef
 
     constructor(name : string, props : NodePropsType, children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>>) { // eslint-disable-line no-use-before-define
         this.name = name;
@@ -85,9 +85,9 @@ export class ElementNode {
 }
 
 export class FragmentNode {
-    type : (typeof NODE_TYPE.FRAGMENT) = NODE_TYPE.FRAGMENT
+    type : (typeof NODE_TYPE.FRAGMENT) = NODE_TYPE.FRAGMENT;
 
-    children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>> // eslint-disable-line no-use-before-define
+    children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>>; // eslint-disable-line no-use-before-define
 
     constructor(children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>>) { // eslint-disable-line no-use-before-define
         this.children = children;
@@ -99,9 +99,9 @@ export class FragmentNode {
 }
 
 export class TextNode {
-    type : (typeof NODE_TYPE.TEXT) = NODE_TYPE.TEXT
+    type : (typeof NODE_TYPE.TEXT) = NODE_TYPE.TEXT;
 
-    text : string
+    text : string;
 
     constructor(text : string) {
         this.text = text;
@@ -114,11 +114,12 @@ export class TextNode {
 
 // eslint-disable-next-line no-unused-vars
 export class ComponentNode<P = null> {
-    type : (typeof NODE_TYPE.COMPONENT) = NODE_TYPE.COMPONENT
+    type : (typeof NODE_TYPE.COMPONENT) = NODE_TYPE.COMPONENT;
 
-    component : ComponentFunctionType<NodePropsType>
-    props : NodePropsType
-    children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>>
+    component : ComponentFunctionType<NodePropsType>;
+    props : NodePropsType;
+    // eslint-disable-next-line no-use-before-define
+    children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>>;
 
     constructor(component : ComponentFunctionType<NodePropsType>, props : NodePropsType, children : $ReadOnlyArray<ElementNode | TextNode | ComponentNode<*>>) {
         this.component = component;
@@ -185,7 +186,7 @@ export const node : CreateNode = <P>(element, props : P, ...children) => {
         // $FlowFixMe
         return new ElementNode(element, props, children);
     }
-    
+
     if (typeof element === 'function') {
         // $FlowFixMe
         return new ComponentNode<*>(element, props, children);

src/renderers/html.js

@@ -1,4 +1,5 @@
 /* @flow */
+/* eslint unicorn/prefer-spread: off */
 
 import { ComponentNode, TextNode, ElementNode, type NodePropsType, type NodeRenderer } from '../node';
 import { NODE_TYPE } from '../constants';
@@ -69,7 +70,7 @@ export function html() : HTMLRenderer {
         if (node.type === NODE_TYPE.COMPONENT) {
             return [].concat(node.renderComponent(htmlRenderer)).join('');
         }
-        
+
         if (node.type === NODE_TYPE.ELEMENT) {
             const renderedProps = propsToHTML(node.props);
 
@@ -83,7 +84,7 @@ export function html() : HTMLRenderer {
                 return `<${ node.name }${ renderedProps }>${ renderedChildren }</${ node.name }>`;
             }
         }
-        
+
         if (node.type === NODE_TYPE.TEXT) {
             return htmlEncode(node.text);
         }

src/renderers/react.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-// eslint-disable-next-line import/no-unresolved
 import type { Node } from 'react';
 
 import { ComponentNode, TextNode, ElementNode, type NodeRenderer, type NodePropsType } from '../node';
@@ -31,16 +30,16 @@ export function react({ React } : {| React : ReactType |} = {}) : ReactRenderer
     if (!React) {
         throw new Error(`Must pass React library to react renderer`);
     }
-    
+
     const reactRenderer = (node) => {
         if (node.type === NODE_TYPE.COMPONENT) {
             return React.createElement(() => (node.renderComponent(reactRenderer) || null), node.props, ...node.renderChildren(reactRenderer));
         }
-        
+
         if (node.type === NODE_TYPE.ELEMENT) {
             return React.createElement(node.name, mapReactProps(node.props), ...node.renderChildren(reactRenderer));
         }
-        
+
         if (node.type === NODE_TYPE.TEXT) {
             return node.text;
         }

src/renderers/text.js

@@ -1,4 +1,5 @@
 /* @flow */
+/* eslint unicorn/prefer-spread: off */
 
 import { ComponentNode, TextNode, ElementNode, type NodeRenderer } from '../node';
 import { NODE_TYPE } from '../constants';
@@ -11,11 +12,11 @@ export function text() : TextRenderer {
         if (node.type === NODE_TYPE.COMPONENT) {
             return [].concat(node.renderComponent(textRenderer)).join('');
         }
-        
+
         if (node.type === NODE_TYPE.ELEMENT) {
             throw new Error(`Text renderer does not support basic elements`);
         }
-        
+
         if (node.type === NODE_TYPE.TEXT) {
             return node.text;
         }

test/.eslintrc.js

@@ -1,11 +1,12 @@
 /* @flow */
+/* eslint import/no-commonjs: off */
 
 module.exports = {
     'extends': require.resolve('grumbler-scripts/config/.eslintrc-browser-test'),
 
     'rules': {
-        'react/display-name': 'off',
+        'react/display-name':    'off',
         'react/button-has-type': 'off',
-        'react/prop-types': 'off'
+        'react/prop-types':      'off'
     }
-};
+};

test/tests/dom.jsx

@@ -3,7 +3,7 @@
 /** @jsxFrag Fragment */
 /* eslint max-lines: off */
 
-import { node, dom, Fragment } from '../../src';  // eslint-disable-line no-unused-vars
+import { node, dom, Fragment } from '../../src';
 
 type ExpectedNode = {|
     name? : string,
@@ -17,7 +17,7 @@ function validateDOMElement(domNode : HTMLElement | Text, expected : ExpectedNod
     if (domNode.constructor.name === 'HTMLUnknownElement') {
         throw new Error(`Expected dom domNode '${ expected.name || 'undefiined' }' to be a valid element`);
     }
-    
+
     if (typeof expected.element === 'string' && domNode.constructor.name !== expected.element) {
         throw new Error(`Expected dom domNode '${ expected.element || 'undefiined' }', got ${ domNode.constructor.name || 'undefined' }`);
     }
@@ -186,7 +186,7 @@ describe('dom renderer cases', () => {
     it('should render an element with innerHTML and a script tag', () => {
 
         window.scriptTagRun = false;
-        
+
         const jsxNode = (
             <section innerHTML={ `<p id="foo"><script>window.scriptTagRun = true;</script></p>` } />
         );
@@ -266,11 +266,11 @@ describe('dom renderer cases', () => {
             throw new Error(`Expected error to be thrown`);
         }
     });
-    
+
     it('should render an element with a script tag', () => {
 
         window.scriptTagRun = false;
-        
+
         const jsxNode = (
             <section>
                 <p id="foo">
@@ -299,7 +299,7 @@ describe('dom renderer cases', () => {
     it('should render an element with multiple script tags', () => {
 
         window.scriptTagRunCount = 0;
-        
+
         const jsxNode = (
             <section>
                 <p id="foo">
@@ -873,7 +873,7 @@ describe('dom renderer cases', () => {
             d:  'M0 0L12 12',
             id: 'backwardSlash'
         };
-        
+
         const circleProps = {
             id: 'defCircle',
             cx: '0',

test/tests/html.jsx

@@ -3,7 +3,7 @@
 /** @jsxFrag Fragment */
 /* eslint react/jsx-no-useless-fragment: off */
 
-import { node, html, Fragment } from '../../src'; // eslint-disable-line no-unused-vars
+import { node, html, Fragment } from '../../src';
 
 describe('html renderer cases', () => {
 
@@ -44,7 +44,7 @@ describe('html renderer cases', () => {
     });
 
     it('should escape special characters', () => {
-        
+
         const jsxNode = (
             <button foo={ `&"'$%<>` } { ...{ '$"\'': '<><>%$&' } }>${ `a&<<b>c"<d'''/` }</button>
         );
@@ -73,7 +73,7 @@ describe('html renderer cases', () => {
     });
 
     it('should render a basic element as html with innerHTML', () => {
-        
+
         const jsxNode = (
             <section>
                 <p foo="bar" innerHTML={ `<span>hello world</span>` } />