update to latest hyperapp and add html adapter for jsx

Author: okwolf

bin/index.js

@@ -1,7 +1,5 @@
 #!/usr/bin/env node
 
-const Module = require("module");
-
 const get = prop => value => value[prop];
 const flatten = (others, next) => others.concat(next);
 const getLoadersFromRules = (rules, path, loaderName) =>
@@ -25,22 +23,20 @@ if (!webpackConfig) {
 }
 const { module: { rules = [] } = {} } = webpackConfig;
 
+// use for unminified prod builds
+// webpackConfig.optimization.minimize = false;
+
 const eslintLoaders = getLoadersFromRules(rules, "use", "eslint");
 if (!eslintLoaders.length) {
   throw new Error(
     `missing ESLint config in webpack config: ${webpackConfigPath}`
   );
 }
 const eslintConfig = eslintLoaders[0].options.baseConfig;
+eslintConfig.settings = { react: { version: "latest" } };
 // override ESLint rules to allow using JSX with Hyperapp
 eslintConfig.rules = Object.assign(eslintConfig.rules || {}, {
-  "react/react-in-jsx-scope": "off",
-  "no-unused-vars": [
-    "warn",
-    {
-      varsIgnorePattern: "^h$"
-    }
-  ]
+  "react/react-in-jsx-scope": "off"
 });
 
 const babelLoaders = getLoadersFromRules(rules, "oneOf", "babel");
@@ -55,10 +51,11 @@ babelOptions.plugins = (babelOptions.plugins || []).concat([
   [
     "@babel/transform-react-jsx",
     {
-      pragma: "h",
+      pragma: "__hyperapp_html",
       useBuiltIns: true
     }
-  ]
+  ],
+  require.resolve("./injectHtmlImportPlugin")
 ]);
 
 // override config in cache
@@ -76,14 +73,5 @@ require.cache[require.resolve(createJestConfigPath)].exports = (...args) => {
   return jestConfig;
 };
 
-// Mock React module with dummy latest version
-require.cache[require.resolve("resolve")].exports.sync = require.resolve;
-const _resolveFilename = Module._resolveFilename;
-Module._resolveFilename = (request, parent) =>
-  request === "react" ? "react" : _resolveFilename(request, parent);
-require.cache["react"] = {
-  exports: { version: "999.999.999" }
-};
-
 // call original react script
 require(`react-scripts/scripts/${script}.js`);

bin/injectHtmlImportPlugin.js

@@ -0,0 +1,19 @@
+module.exports = ({ types: t }) => ({
+  name: "inject-hyperapp-html-import",
+  visitor: {
+    Program(path) {
+      path.unshiftContainer(
+        "body",
+        t.importDeclaration(
+          [
+            t.importSpecifier(
+              t.identifier("__hyperapp_html"),
+              t.identifier("__hyperapp_html")
+            )
+          ],
+          t.stringLiteral("hyperapp-scripts")
+        )
+      );
+    }
+  }
+});

example/src/App.js

@@ -1,4 +1,3 @@
-import { h } from "hyperapp";
 import logo from "./logo.svg";
 import "./App.css";
 

example/src/index.js

@@ -1,5 +1,9 @@
-import { h, app } from "hyperapp";
+import { app } from "hyperapp";
 import "./index.css";
 import App from "./App";
 
-app({ view: () => <App />, node: document.getElementById("app") });
+app({
+  init: {},
+  view: () => <App />,
+  node: document.getElementById("app")
+});

index.js

@@ -0,0 +1,9 @@
+import { h, text } from "hyperapp";
+
+const mapChildren = child =>
+  typeof child === "string" || typeof child === "number" ? text(child) : child;
+
+export const __hyperapp_html = (tag, props, ...children) =>
+  typeof tag === "function"
+    ? tag(props, children)
+    : h(tag, props || {}, children.map(mapChildren));

package.json

@@ -1,26 +1,28 @@
 {
   "name": "hyperapp-scripts",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Hyperapp expansion pack for create-react-app",
   "bin": {
     "hyperapp-scripts": "./bin/index.js"
   },
+  "main": "index.js",
   "scripts": {
-    "clean": "npx rimraf node_modules example/{node_modules,build}",
-    "format": "npx prettier --write bin/*.js example/src/**/*.{css,js}",
-    "format:check": "npx prettier --list-different bin/*.js example/src/**/*.{css,js}",
+    "clean": "npx --ignore-existing --quiet rimraf node_modules example/{node_modules,build}",
+    "format": "npx prettier --write *.js bin/*.js example/src/**/*.{css,js}",
+    "format:check": "npx prettier --list-different *.js bin/*.js example/src/**/*.{css,js}",
     "setup": "npm i && cd example && npm i",
     "start": "npm run setup && cd example && npm start",
-    "test": "npm run clean && npm run setup && cd example && npm run build && cross-env CI=1 npm test",
+    "test": "npm run setup && cd example && npm run build && cross-env CI=1 npm test",
     "check": "npm run format:check && npm test",
-    "release": "node pre-flight-tests && npm run check && git tag $npm_package_version && git push && git push --tags && npm publish"
+    "release:dry": "npm run clean && npm run check",
+    "release": "node release"
   },
   "dependencies": {
     "react-scripts": "=3.0.0"
   },
   "devDependencies": {
     "cross-env": "=7.0.2",
-    "hyperapp": "=2.0.4"
+    "hyperapp": "=2.0.8"
   },
   "peerDependencies": {
     "hyperapp": "*"

pre-flight-tests renamed to release.js

@@ -1,7 +1,5 @@
-#!/usr/bin/env node
-
-// eslint-disable-next-line no-undef
 const { execSync } = require("child_process");
+const { version } = require("./package");
 const exec = command => execSync(command, { encoding: "utf8" }).trim();
 
 const exitWithError = error => {
@@ -18,3 +16,17 @@ const workingCopyChanges = exec("git status --porcelain");
 if (workingCopyChanges) {
   exitWithError("please commit your changes before making a release!");
 }
+
+const tagExists = exec(`git tag -l "${version}"`);
+if (tagExists) {
+  exitWithError(`${version} has already been released!`);
+}
+
+execSync(
+  `npm run release:dry && git tag ${version} && git push && git push --tags && npm publish`,
+  {
+    shell: true,
+    stdio: "inherit",
+    cwd: __dirname
+  }
+);