kerosene-ui: Add boundaries for react-query integration (#118)

.eslintrc.js

@@ -25,7 +25,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ["*.js"],
+      files: ["*.js", "*.cjs"],
       rules: {
         "global-require": "off",
         strict: "off",

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 .coverage
 .dist
+dist
 es
 lib
 

babel-register.js

@@ -7,5 +7,4 @@ require("@babel/register")({
   extensions: [".js", ".ts"],
 });
 
-require("core-js/features/array/flat");
-require("core-js/features/array/flat-map");
+require("core-js/features/promise/with-resolvers");

package.json

@@ -40,7 +40,7 @@
     },
     "collectCoverageFrom": [
       "<rootDir>/packages/**/*.(js|jsx|ts|tsx)",
-      "!<rootDir>/packages/*/(.dist|es|lib)/**/*",
+      "!<rootDir>/packages/*/(.dist|dist|es|lib)/**/*",
       "!**/*.(spec|test).*",
       "!**/babel.config.js",
       "!**/rollup.config.js",

packages/kerosene-feature-flags/package.json

@@ -19,6 +19,7 @@
   "homepage": "https://github.com/KablamoOSS/kerosene",
   "private": false,
   "license": "MIT",
+  "type": "module",
   "main": ".dist/index.js",
   "browser": ".dist/index.js",
   "directories": {

packages/kerosene-feature-flags/tsconfig.build.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig",
   "compilerOptions": {
+    "target": "ES2015",
     "declaration": true,
     "outDir": ".dist",
     "noEmit": false

packages/kerosene-test/package.json

@@ -46,7 +46,7 @@
     "utils"
   ],
   "dependencies": {
-    "@kablamo/kerosene": "^0.0.29",
+    "@kablamo/kerosene": "^0.0.35",
     "@types/lodash": "^4.14.202",
     "@types/sinon": "^17.0.2",
     "lodash": "^4.17.21",

packages/kerosene-test/src/react/createStubComponent.tsx

@@ -80,7 +80,7 @@ export default function createStubComponent<
   return class extends React.Component<Props> {
     public static displayName = displayName;
 
-    public render() {
+    public override render() {
       const { children, ...props } = this.props;
 
       return (

packages/kerosene-ui/.npmignore

@@ -1,3 +1,7 @@
 __snapshots__
+config
+babel.config.js
+rollup-config.ts
+rollup.config.js
 **.spec.ts
 **.spec.tsx

packages/kerosene-ui/config/tsconfig.json

@@ -5,7 +5,7 @@
     "noEmit": false,
     "declaration": true,
     "emitDeclarationOnly": true,
-    "declarationDir": "../lib/"
+    "declarationDir": "../dist/"
   },
   "include": ["../src/**/*.ts", "../src/**/*.tsx"],
   "exclude": ["../src/**/*.spec.ts", "../src/**/*.spec.tsx"]

packages/kerosene-ui/package.json

@@ -1,16 +1,30 @@
 {
   "name": "@kablamo/kerosene-ui",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "repository": "https://github.com/KablamoOSS/kerosene/tree/master/packages/kerosene-ui",
   "bugs": {
     "url": "https://github.com/KablamoOSS/kerosene/issues"
   },
   "homepage": "https://github.com/KablamoOSS/kerosene",
   "private": false,
   "license": "MIT",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json",
+    "./react-query": {
+      "import": "./dist/react-query.mjs",
+      "require": "./dist/react-query.cjs",
+      "types": "./dist/react-query.d.ts"
+    }
+  },
+  "types": "dist/index.d.ts",
   "directories": {
     "doc": "readme.md"
   },
@@ -22,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.4",
-    "@kablamo/kerosene": "^0.0.29",
+    "@kablamo/kerosene": "^0.0.35",
     "@types/lodash": "^4.14.202",
     "lodash": "^4.17.21",
     "use-sync-external-store": "^1.2.0"
@@ -31,6 +45,7 @@
     "@kablamo/kerosene-test": "^0.0.13",
     "@rollup/plugin-babel": "^6.0.4",
     "@sinonjs/fake-timers": "^11.2.2",
+    "@tanstack/react-query": "^5.12.2",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -40,17 +55,28 @@
     "jest-when": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "rollup": "^4.5.1",
     "rollup-plugin-node-resolve": "^5.2.0"
   },
   "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0 <6.0.0",
     "react": ">=16.8.6",
-    "react-dom": ">=16.8.6"
+    "react-dom": ">=16.8.6",
+    "react-error-boundary": ">=3.0.0 <5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "react-error-boundary": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "npm-run-all -p build:rollup build:typings",
     "build:rollup": "rollup -c",
     "build:typings": "tsc -p ./config/tsconfig.json",
-    "clean": "rimraf es lib"
+    "clean": "rimraf dist"
   }
 }

packages/kerosene-ui/readme.md

@@ -176,6 +176,36 @@ Returns `{ capture: true, passive: true }` when capture passive event listeners
 
 Returns `{ capture: true }` when capture passive event listeners are supported, otherwise `true`.
 
+## React Query
+
+We also include some useful helpers and components when working with [React Query][https://react-query.tanstack.com/]. These aren't included in the main entrypoint for `@kablamo/kerosene-ui`, and instead must be imported like this:
+
+```ts
+import {} from "@kablamo/kerosene-ui/react-query";
+```
+
+### `isDefinedQueryObserverResult(query)`
+
+Returns whether a given query has a defined result. This includes the success state of the query, as well as the states for refetch in progress, as well as the refetch error state with stale data.
+
+### `isQueryObserverLoadingErrorResult(query)`
+
+Returns whether a given query is in the error state with no defined result. This includes the error state when data is refetching.
+
+### `isQueryObserverLoadingResult(query)`
+
+Returns whether a given query is in the loading state with no defined result. This includes the error state when data is refetching.
+
+### `<QueryBoundary />`
+
+Utility component for managing the loading and error states for a single React Query query. Specifying the query automatically infers the type of the success state of the query in the render prop children (if used).
+
+### `<QueriesBoundary />`
+
+Utility component for managing the loading and error states for multiple React Query queries. Specifying the queries automatically infers the types of the success state of the queries in the render prop children (if used).
+
+### `<SuspenseBoundary />`
+
 ---
 
 kablamo.com.au

packages/kerosene-ui/rollup-config.ts

@@ -1,25 +1,17 @@
 import babel from "@rollup/plugin-babel";
 import path from "path";
-import type {
-  ModuleFormat,
-  RollupOptions,
-  OutputOptions,
-  ExternalOption,
-} from "rollup";
+import type { RollupOptions, ExternalOption } from "rollup";
 import resolve from "rollup-plugin-node-resolve";
 // eslint-disable-next-line import/no-relative-packages
 import generateBabelConfig from "../../config/generateBabelConfig";
 import packageJson from "./package.json";
 
-const input = path.join(__dirname, "src", "index.ts");
+const input = [
+  path.join(__dirname, "src", "index.ts"),
+  path.join(__dirname, "src", "react-query.ts"),
+];
 
-const output = (file: string, format: ModuleFormat): OutputOptions => ({
-  dir: path.dirname(file),
-  format,
-  indent: false,
-  preserveModules: true,
-  sourcemap: true,
-});
+const outputDir = path.dirname(packageJson.main);
 
 const externals = [
   packageJson.dependencies,
@@ -52,10 +44,22 @@ export default [
   {
     input,
     output: [
-      output(packageJson.main, "commonjs"),
-      output(packageJson.module, "esm"),
+      {
+        entryFileNames: "[name].cjs",
+        dir: outputDir,
+        format: "commonjs",
+        preserveModules: true,
+        sourcemap: true,
+      },
+      {
+        entryFileNames: "[name].mjs",
+        dir: outputDir,
+        format: "esm",
+        preserveModules: true,
+        sourcemap: true,
+      },
     ],
     external,
     plugins,
   },
-] as RollupOptions[];
+] satisfies RollupOptions[];