Rollup works

.gitignore

@@ -8,11 +8,14 @@
 node_modules
 
 # build
-lib/
+types/
 cjs/
 dist/
 esm/
 .rollup.cache/
 
 # typescript
-*.tsbuildinfo
+*.tsbuildinfo
+
+# cache
+.eslintcache

package.json

@@ -6,21 +6,19 @@
     "packages/*"
   ],
   "scripts": {
-    "ci": "yarn prettier && yarn compile && yarn lint",
-    "compile": "tsc --noEmit",
+    "ci": "yarn prettier && yarn compile && yarn lint && yarn build",
+    "compile": "yarn workspace @dolthub/react-hooks compile",
     "build": "yarn workspace @dolthub/react-hooks build",
     "lint": "yarn workspace @dolthub/react-hooks lint",
     "prettier": "yarn workspace @dolthub/react-hooks prettier"
   },
-  "dependencies": {
-    "react": "^18.2.0"
-  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/eslint": "^8",
-    "@types/react": "^18.2.40",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18",
     "@types/rollup-plugin-peer-deps-external": "^2",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
@@ -38,5 +36,9 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^5.3.2"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

packages/hooks/README.md

@@ -1 +1,49 @@
-# @react-library/hooks
+# @dolthub/react-hooks
+
+A library of useful React hooks.
+
+## Installation
+
+```
+% yarn add @dolthub/react-hooks
+```
+
+or
+
+```
+% npm install @dolthub/react-hooks
+```
+
+## Usage
+
+```tsx
+import { useEffectOnMount } from "@dolthub/react-hooks";
+
+function MyComponent() {
+  useEffectOnMount(() => {
+    console.log("do something on component mount");
+  });
+
+  return <div>Home</div>;
+}
+```
+
+## Testing in a local package
+
+If you have a local copy of this package and want to test a change in another local
+package, you can either add `@dolthub/react-hooks` and point it at the file path, or if
+`@dolthub/react-hooks` is already installed add the file path to `resolutions` in your
+`package.json`, like so:
+
+```json
+// ../other-package/package.json
+{
+  ...,
+  "resolutions": {
+    "@dolthub/react-hooks": "file:../../react-library/packages/hooks",
+    "@types/react": "18.2.33"
+  }
+}
+```
+
+Note that you may also need the same `@types/react` version.

packages/hooks/package.json

@@ -1,30 +1,38 @@
 {
   "name": "@dolthub/react-hooks",
   "author": "DoltHub",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "hooks",
+    "react-hooks",
+    "state",
+    "frontend"
+  ],
   "packageManager": "yarn@4.0.2",
-  "type": "module",
   "scripts": {
     "compile": "tsc -b",
     "build": "rollup -c --bundleConfigAsCjs",
+    "build:watch": "rollup -c --bundleConfigAsCjs --watch",
     "lint": "eslint --cache --ext .ts,.js,.tsx,.jsx src",
     "prettier": "prettier --check 'src/**/*.{js,ts}'",
     "prettier-fix": "prettier --write 'src/**/*.{js,ts}'"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@dolthub/react-babel-config": "^0.1.0",
-    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/eslint": "^8",
-    "@types/react": "^18.2.40",
     "@types/rollup-plugin-peer-deps-external": "^2",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",

packages/hooks/rollup.config.js

@@ -4,19 +4,18 @@ import typescript from "@rollup/plugin-typescript";
 import { terser } from "rollup-plugin-terser";
 import external from "rollup-plugin-peer-deps-external";
 import { dts } from "rollup-plugin-dts";
-import babel from "@rollup/plugin-babel";
 
 const packageJson = require("./package.json");
 
 export default [
   {
     input: "src/index.ts",
+    external: ["react", "react-dom"],
     output: [
       {
         file: packageJson.main,
         format: "cjs",
         sourcemap: true,
-        name: "react-ts-lib",
       },
       {
         file: packageJson.module,
@@ -27,19 +26,13 @@ export default [
     plugins: [
       external(),
       resolve(),
-      babel({
-        babelHelpers: "runtime",
-        presets: ["@babel/preset-react"],
-        extensions: [".js", ".jsx"],
-        exclude: "**/node_modules/**",
-      }),
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
       terser(),
     ],
   },
   {
-    input: "dist/esm/lib/index.d.ts",
+    input: "types/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     external: [/\.css$/],
     plugins: [dts()],

packages/hooks/src/useDelay.ts

@@ -18,7 +18,7 @@ export default function useDelay(
 
   useEffect(() => {
     if (active) {
-      const h = setTimeout(stop, length);
+      const h = setTimeout(() => stop(), length);
       handle.current = h;
       return () => clearTimeout(h);
     }
@@ -27,12 +27,14 @@ export default function useDelay(
     }
     return () => {};
   }, [active, length, stop]);
+
   useEffect(() => {
     const thereAreErrors = errors.some(e => !!e);
     if (thereAreErrors) {
       stop();
     }
   }, [errors, stop]);
+
   return useMemo(
     () =>
       Object.freeze({

packages/hooks/src/useReactiveSize.ts

@@ -4,11 +4,10 @@ import useEffectOnMount from "./useEffectOnMount";
 export function useReactiveHeight<E extends HTMLElement>(
   elem?: E | null,
 ): E["clientHeight"] {
-  const [clientHeight, setClientHeight] = useState(
-    elem?.clientHeight ?? window.innerHeight,
-  );
+  const [clientHeight, setClientHeight] = useState(elem?.clientHeight ?? 0);
 
   useEffectOnMount(() => {
+    setClientHeight(elem?.clientHeight ?? window.innerHeight);
     const handleResize = () =>
       setClientHeight(elem?.clientHeight ?? window.innerHeight);
     window.addEventListener("resize", handleResize);
@@ -30,11 +29,10 @@ export function useReactiveWidth<E extends HTMLElement>(
   elem?: E | null,
   mobileBreakpoint = 768,
 ): { clientWidth: E["clientWidth"]; isMobile: boolean } {
-  const [clientWidth, setClientWidth] = useState(
-    elem?.clientWidth ?? window.innerWidth,
-  );
+  const [clientWidth, setClientWidth] = useState(elem?.clientWidth ?? 0);
 
   useEffectOnMount(() => {
+    setClientWidth(elem?.clientWidth ?? window.innerWidth);
     const handleResize = () =>
       setClientWidth(elem?.clientWidth ?? window.innerWidth);
     window.addEventListener("resize", handleResize);

packages/hooks/tsconfig.json

@@ -1,11 +1,12 @@
 {
   "include": ["./src"],
-  "exclude": ["./lib", "./esm", "./cjs"],
+  "exclude": ["./types", "./esm", "./cjs", "node_modules", "dist"],
   "compilerOptions": {
     "rootDir": "src",
     "baseUrl": ".",
     "declaration": true,
-    "declarationDir": "lib",
+    "declarationDir": "types",
+    "outDir": "dist",
     "target": "ES2015",
     "lib": ["DOM", "ESNext"],
     "module": "ESNext",