split into smaller components

Author: hadeeb

.babelrc.js

@@ -1,3 +1,3 @@
 node_modules
 dist
-.rts2*
+types

.gitignore

@@ -4,17 +4,21 @@
   "description": "Lazy Hydration for Server Rendered React Components",
   "source": "src/index.tsx",
   "main": "dist/index.js",
-  "module": "dist/index.m.js",
-  "typings": "dist/index.d.ts",
+  "module": "dist/index.esm.js",
+  "browser": {
+    "dist/index.js": "dist/index.browser.js",
+    "dist/index.esm.js": "dist/index.brower.esm.js"
+  },
+  "typings": "types/index.d.ts",
   "author": {
     "name": "Hadeeb Farhan",
     "email": "hadeebfarhan1@gmail.com"
   },
   "license": "MIT",
   "sideEffects": false,
   "files": [
-    "src",
-    "dist"
+    "dist",
+    "types"
   ],
   "repository": {
     "type": "git",
@@ -31,42 +35,58 @@
     "hydration"
   ],
   "scripts": {
-    "build": "microbundle build --raw -f es,cjs",
+    "prebuild": "rimraf dist types",
+    "build": "rollup -c",
+    "postbuild": "tsc",
     "prepublishOnly": "yarn build",
     "lint": "eslint src/** --fix"
   },
+  "dependencies": {
+    "@babel/runtime": "^7.9.2"
+  },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/react": "^16.9.17",
-    "@typescript-eslint/eslint-plugin": "^2.16.0",
-    "@typescript-eslint/parser": "^2.16.0",
-    "babel-eslint": "^10.0.3",
+    "@babel/core": "^7.9.0",
+    "@babel/helper-module-imports": "^7.8.3",
+    "@babel/plugin-transform-react-jsx": "^7.9.4",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-typescript": "^7.9.0",
+    "@types/react": "^16.9.32",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-macros": "^2.8.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-config-react-app": "^5.1.0",
-    "eslint-plugin-flowtype": "^4.6.0",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "eslint-plugin-simple-import-sort": "^5.0.0",
-    "husky": "^4.0.10",
-    "lint-staged": "^9.5.0",
-    "microbundle": "^0.11.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-simple-import-sort": "^5.0.2",
+    "husky": "^4.2.3",
+    "lint-staged": "^10.1.2",
     "prettier": "^1.19.1",
-    "react": "^16.12.0",
-    "typescript": "^3.7.5"
+    "react": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.4.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "typescript": "^3.8.3"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
-    "*.js": [
+    "*.{js,ts,tsx}": [
       "eslint --fix",
       "git add"
     ]

package.json

@@ -0,0 +1,68 @@
+import babel from "rollup-plugin-babel";
+import nodeResolve from "rollup-plugin-node-resolve";
+import replace from "rollup-plugin-replace";
+
+import pkg from "./package.json";
+
+const extensions = [".tsx", ".ts", ".js"];
+
+const external = [
+  ...Object.keys(pkg.peerDependencies || {}),
+  ...Object.keys(pkg.dependencies || {})
+];
+
+const loose = true;
+
+const createBabelConfig = isESM => {
+  return {
+    presets: [
+      ["@babel/preset-typescript", { loose, modules: false }],
+      ["@babel/preset-env", { loose, modules: false }]
+    ],
+    plugins: [
+      "babel-plugin-macros",
+      ["@babel/plugin-transform-runtime", { useESModules: isESM }],
+      "@babel/plugin-transform-react-jsx"
+    ]
+  };
+};
+
+const createExternalPredicate = externalArr => {
+  if (externalArr.length === 0) {
+    return () => false;
+  }
+  const pattern = new RegExp(`^(${externalArr.join("|")})($|/)`);
+  return id => pattern.test(id);
+};
+
+const createConfig = ({ output, browser = false, isESM = false }) => ({
+  input: "src/index.tsx",
+  output: output.map(format => ({ exports: "named", ...format })),
+  external: createExternalPredicate(external),
+  plugins: [
+    nodeResolve({ extensions }),
+    babel({ extensions, runtimeHelpers: true, ...createBabelConfig(isESM) }),
+    replace({
+      "process.env.BROWSER": JSON.stringify(browser)
+    })
+  ]
+});
+
+export default [
+  createConfig({
+    output: [{ file: pkg.main, format: "cjs" }]
+  }),
+  createConfig({
+    output: [{ file: pkg.module, format: "esm" }],
+    isESM: true
+  }),
+  createConfig({
+    output: [{ file: pkg.browser[pkg.main], format: "cjs" }],
+    browser: true
+  }),
+  createConfig({
+    output: [{ file: pkg.browser[pkg.module], format: "esm" }],
+    browser: true,
+    isESM: true
+  })
+];

rollup.config.js

@@ -0,0 +1,2 @@
+export const isBrowser: boolean;
+export const isDev: boolean;

src/constants.macro.d.ts

@@ -0,0 +1,43 @@
+//@ts-check
+const { createMacro, MacroError } = require("babel-plugin-macros");
+const { addDefault } = require("@babel/helper-module-imports");
+
+module.exports = createMacro(function({ references, babel }) {
+  const templ = babel.template;
+
+  for (let key in references) {
+    const refs = references[key];
+    /**
+     * @type {string}
+     */
+    let str;
+
+    switch (key) {
+      case "isBrowser": {
+        const { name: insertedName } = addDefault(refs[0], "./isBrowser", {
+          nameHint: "isBrowser"
+        });
+        str = `process.env.BROWSER || ${insertedName}`;
+        break;
+      }
+      case "isDev":
+        str = "'production' !== process.env.NODE_ENV";
+        break;
+      default:
+        throw new MacroError(`unknown constant ${key}`);
+    }
+
+    const template = templ(str, {
+      placeholderPattern: false
+    });
+    /**
+     * @type  {babel.types.Expression}
+     */
+    // @ts-ignore
+    const expression = template().expression;
+
+    refs.forEach(ref => {
+      ref.replaceWith(expression);
+    });
+  }
+});

src/constants.macro.js

@@ -1,5 +1,13 @@
 import * as React from "react";
 
+import { isDev } from "./constants.macro";
+import { warnAboutDeprecation } from "./utils";
+
+export * from "./onEvents";
+export * from "./ssrOnly";
+export * from "./whenIdle";
+export * from "./whenVisible";
+
 export type LazyProps = {
   ssrOnly?: boolean;
   whenIdle?: boolean;
@@ -43,13 +51,7 @@ const LazyHydrate: React.FunctionComponent<Props> = function(props) {
 
   const { ssrOnly, whenIdle, whenVisible, on = [], children, ...rest } = props;
 
-  if (
-    process.env.NODE_ENV !== "production" &&
-    !ssrOnly &&
-    !whenIdle &&
-    !whenVisible &&
-    !on.length
-  ) {
+  if (isDev && !ssrOnly && !whenIdle && !whenVisible && !on.length) {
     console.error(
       `LazyHydration: Enable atleast one trigger for hydration.\n` +
         `If you don't want to hydrate, use ssrOnly`
@@ -63,6 +65,11 @@ const LazyHydrate: React.FunctionComponent<Props> = function(props) {
     }
   }, []);
 
+  React.useEffect(() => {
+    warnAboutDeprecation({ on, ssrOnly, whenIdle, whenVisible });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   React.useEffect(() => {
     if (ssrOnly || hydrated) return;
     const cleanupFns: VoidFunction[] = [];

src/index.tsx

@@ -0,0 +1,2 @@
+const isBrowser = typeof document !== "undefined";
+export default isBrowser;

src/isBrowser.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+
+import { defaultStyle, useHydrationState } from "./utils";
+
+type Props = Omit<
+  React.HTMLProps<HTMLDivElement>,
+  "dangerouslySetInnerHTML"
+> & { on?: (keyof HTMLElementEventMap)[] | keyof HTMLElementEventMap };
+
+function HydrateOn({ children, on, ...rest }: Props) {
+  const [childRef, hydrated, hydrate] = useHydrationState();
+
+  React.useEffect(() => {
+    if (hydrated) return;
+
+    const cleanupFns: VoidFunction[] = [];
+
+    function cleanup() {
+      for (let i = 0; i < cleanupFns.length; i++) {
+        cleanupFns[i]();
+      }
+    }
+
+    let events = Array.isArray(on) ? on.slice() : [on];
+
+    events.forEach(event => {
+      childRef.current.addEventListener(event, hydrate, {
+        once: true,
+        capture: true,
+        passive: true
+      });
+      cleanupFns.push(() => {
+        childRef.current.removeEventListener(event, hydrate, { capture: true });
+      });
+    });
+
+    return cleanup;
+  }, [hydrated, hydrate, on, childRef]);
+
+  if (hydrated) {
+    return (
+      <div ref={childRef} style={defaultStyle} {...rest}>
+        {children}
+      </div>
+    );
+  } else {
+    return (
+      <div
+        ref={childRef}
+        style={defaultStyle}
+        suppressHydrationWarning
+        {...rest}
+        dangerouslySetInnerHTML={{ __html: "" }}
+      />
+    );
+  }
+}
+
+export { HydrateOn };

src/onEvents.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { defaultStyle, useHydrationState } from "./utils";
+
+type Props = Omit<React.HTMLProps<HTMLDivElement>, "dangerouslySetInnerHTML">;
+
+function SsrOnly({ children, ...rest }: Props) {
+  const [childRef, hydrated] = useHydrationState();
+
+  if (hydrated) {
+    return (
+      <div ref={childRef} style={defaultStyle} {...rest}>
+        {children}
+      </div>
+    );
+  } else {
+    return (
+      <div
+        ref={childRef}
+        style={defaultStyle}
+        suppressHydrationWarning
+        {...rest}
+        dangerouslySetInnerHTML={{ __html: "" }}
+      />
+    );
+  }
+}
+
+export { SsrOnly };