React with HTM

index.js

import styled from 'reshadow';
import html from './shared';
import { createRoot } from 'react-dom';
import './index.css';

const App = () => styled(null)`
  h1 {
    color: red;
  }
`(html`
  <h1>App</h1>
`);

export default createRoot(document.querySelector('#app')).render(<App />);

package.json

{
  "dependencies": {
    "@babel/core": "^7.8.6",
    "@babel/plugin-transform-react-jsx": "^7.8.3",
    "@babel/preset-modules": "^0.1.3",
    "@babel/preset-react": "^7.8.3",
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "@rollup/plugin-replace": "^2.3.1",
    "babel-plugin-htm": "^3.0.0",
    "babel-plugin-jsx-pragmatic": "^1.0.2",
    "effector": "^20.12.1",
    "effector-react": "^20.6.2",
    "htm": "^3.0.3",
    "prettier": "^1.19.1",
    "react": "^0.0.0-experimental-355970aa4",
    "react-dom": "^0.0.0-experimental-355970aa4",
    "reshadow": "^0.0.1-alpha.74",
    "rollup": "^1.32.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-postcss": "^2.1.1",
    "rollup-plugin-terser": "^5.2.0"
  },
  "scripts": {
    "format": "prettier --write --ignore-path .gitignore **/*.{html,css,js*,md}",
    "start": "rollup -c -w",
    "build": "rollup -c"
  },
  "prettier": {
    "plugins": [
      "reshadow/prettier"
    ],
    "printWidth": 120,
    "singleQuote": true,
    "trailingComma": "all",
    "arrowParens": "always",
    "endOfLine": "lf"
  },
  "browserslist": [
    "last 1 chrome version",
    "last 1 ff version"
  ],
  "babel": {
    "presets": [
      "@babel/react",
      "@babel/modules"
    ],
    "plugins": [
      [
        "babel-plugin-jsx-pragmatic",
        {
          "module": "react",
          "import": "React",
          "pragma": "React"
        }
      ],
      "@babel/transform-react-jsx",
      [
        "htm",
        {
          "pragma": "React.createElement"
        }
      ],
      [
        "reshadow/babel",
        {
          "postcss": true
        }
      ]
    ]
  }
}

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;
const env = production ? 'production' : 'development';

export default {
  input: 'src/index.js',
  output: {
    file: 'public/index.js',
    format: 'es',
    sourcemap: !production,
    preferConst: true,
  },
  treeshake: production,
  plugins: [
    resolve({
      browser: true,
      dedupe: ['react', 'reshadow', 'effector', 'effector-react'],
    }),
    replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
    babel({
      runtimeHelpers: true,
    }),
    postcss({
      extract: 'public/index.css',
      minimize: production,
      sourceMap: !production,
      // modules: true,
      config: { ctx: { production } },
    }),
    commonjs({
      sourceMap: !production,
      namedExports: {
        'react-dom': ['createRoot'],
        react: ['createElement'],
      },
    }),
    production &&
      terser({
        compress: { module: true },
        mangle: { module: true },
      }),
  ],
  watch: {
    clearScreen: false,
  },
};

shared.js

import htm from "htm";
import { createElement } from "react";
import { map } from "@reshadow/core";

function getDisplayName(Component) {
  return (
    Component.displayName ||
    Component.name ||
    (typeof Component === "string" && Component.length > 0
      ? Component
      : "Unknown")
  );
}

const html = htm.bind((type, props, ...children) => {
  let element = type;

  if (typeof type !== "string") {
    element = getDisplayName(type);
  } else if (props && props.as) {
    type = props.as;
    delete props.as;
  }

  return createElement(type, map(element, props), ...children);
});

export default html;