Update React to v18 and Replace CRA with Vite

.github/workflows/main.yaml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [18, 20, 22]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -69,7 +69,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 20
+        node-version: 22
         cache: "yarn"
         registry-url: https://registry.npmjs.org/
 

streamlit-component-lib-react-hooks/eslint.config.js

@@ -0,0 +1,22 @@
+import globals from "globals";
+import { defineConfig } from "eslint/config";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import pluginReactJSXRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default defineConfig([
+  { ignores: ["dist"] },
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  { settings: { react: { version: "detect" } } },
+  pluginReact.configs.flat.recommended,
+  reactHooks.configs["recommended-latest"],
+  reactRefresh.configs.recommended,
+  pluginReactJSXRuntime,
+]);

streamlit-component-lib-react-hooks/package.json

@@ -4,7 +4,17 @@
   "keywords": [
     "streamlit"
   ],
-  "main": "dist/index.js",
+  "type": "module",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/cjs/index.d.ts"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/whitphx/streamlit-component-template-react-hooks",
@@ -15,8 +25,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc -w",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:package-json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:package-json": "mkdir -p dist/cjs dist/esm && echo '{\"type\":\"commonjs\"}' > dist/cjs/package.json && echo '{\"type\":\"module\"}' > dist/esm/package.json",
     "fix:eslint": "eslint --fix 'src/**/*.{ts,tsx}'",
     "fix:prettier": "prettier --write .",
     "check:eslint": "eslint --fix 'src/**/*.{ts,tsx}'",
@@ -25,25 +37,24 @@
     "lint-staged:prettier": "prettier --write"
   },
   "devDependencies": {
-    "@types/react": "^17.0.21",
-    "@types/react-dom": "^17.0.9",
+    "@eslint/js": "^9.22.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.25.3",
-    "prettier": "2.6.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "typescript": "^4.4.3"
+    "eslint": "^9.22.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "prettier": "^3.5.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.0"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
     "streamlit-component-lib": "^2.0.0"

streamlit-component-lib-react-hooks/src/StreamlitProvider/StreamlitProvider.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import { Streamlit } from "streamlit-component-lib";
+import { useNullableRenderData } from "../useNullableRenderData";
+import ErrorBoundary from "../ErrorBoundary";
+import { renderDataContext } from "./useRenderData";
+
+/**
+ * Wrapper for React-hooks-based Streamlit components.
+ *
+ * Bootstraps the communication interface between Streamlit and the component.
+ */
+export interface StreamlitProviderProps {
+  children: React.ReactNode;
+}
+export const StreamlitProvider: React.VFC<StreamlitProviderProps> = (props) => {
+  const renderData = useNullableRenderData();
+
+  useEffect(() => {
+    Streamlit.setFrameHeight();
+  });
+
+  // Don't render until we've gotten our first data from Streamlit.
+  if (renderData == null) {
+    return null;
+  }
+
+  return (
+    <ErrorBoundary>
+      <renderDataContext.Provider value={renderData}>
+        {props.children}
+      </renderDataContext.Provider>
+    </ErrorBoundary>
+  );
+};

streamlit-component-lib-react-hooks/src/StreamlitProvider/index.ts

@@ -0,0 +1,2 @@
+export { StreamlitProvider, StreamlitProviderProps } from "./StreamlitProvider";
+export { useRenderData } from "./useRenderData";

streamlit-component-lib-react-hooks/src/StreamlitProvider/useRenderData.ts

@@ -0,0 +1,20 @@
+import React, { useContext } from "react";
+import { RenderData } from "streamlit-component-lib";
+
+export const renderDataContext = React.createContext<RenderData | undefined>(
+  undefined,
+);
+
+/**
+ * Returns `RenderData` received from Streamlit.
+ */
+export const useRenderData = (): RenderData => {
+  const contextValue = useContext(renderDataContext);
+  if (contextValue == null) {
+    throw new Error(
+      "useRenderData() must be used inside <StreamlitProvider />",
+    );
+  }
+
+  return contextValue;
+};

streamlit-component-lib-react-hooks/src/index.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable react-refresh/only-export-components */
 export {
   useRenderData,
-  default as StreamlitProvider,
+  StreamlitProvider,
+  StreamlitProviderProps,
 } from "./StreamlitProvider";
 export { useNullableRenderData } from "./useNullableRenderData";

streamlit-component-lib-react-hooks/src/useNullableRenderData.ts

@@ -21,7 +21,7 @@ export const useNullableRenderData = (): RenderData | undefined => {
     const cleanup = () => {
       Streamlit.events.removeEventListener(
         Streamlit.RENDER_EVENT,
-        onRenderEvent
+        onRenderEvent,
       );
     };
     return cleanup;

streamlit-component-lib-react-hooks/tsconfig.base.json

@@ -0,0 +1,13 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

streamlit-component-lib-react-hooks/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "outDir": "./dist/cjs",
+    "declarationDir": "./dist/cjs"
+  }
+}

streamlit-component-lib-react-hooks/tsconfig.esm.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "./dist/esm",
+    "declarationDir": "./dist/esm"
+  }
+}