feat: upgrade to React 19; add backwards compatibility test-site script (v1.11.0)

.github/workflows/run-tests.yml

@@ -6,11 +6,33 @@ name: Run Tests
 on: [push, pull_request]
 
 jobs:
+  call_run_tests-react-19:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
+    with:
+      build_script: |
+        npx playwright install
+      node_matrix: '["20.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
+
   call_run_tests-react-18:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
       build_script: |
+        npm i \
+          react@^18.2.0 \
+          react-dom@^18.2.0
+        npm install --save-optional \
+          "@swc/core-linux-arm-gnueabihf" \
+          "@swc/core-linux-arm64-gnu" \
+          "@swc/core-linux-arm64-musl" \
+          "@swc/core-linux-x64-gnu" \
+          "@swc/core-linux-x64-musl" \
+          "@swc/core-win32-arm64-msvc" \
+          "@swc/core-win32-ia32-msvc" \
+          "@swc/core-win32-x64-msvc"
         npx playwright install
+        npm run build
       node_matrix: '["18.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.gitignore

@@ -9,9 +9,12 @@ dist/
 /coverage
 /storybook-static
 
+.npm-cache/
+test-site/yext-search-ui-react-*.tgz
+
 .env
 test-site/.env
 .idea/
 
 # misc
-.DS_Store
+.DS_Store

.storybook/main.ts

@@ -1,27 +1,22 @@
+// .storybook/main.ts
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import React from 'react';
+import path from 'path';
+
+const reactMajorVersion = Number(React.version.split('.')[0]);
+const isLegacyReact = Number.isNaN(reactMajorVersion) ? false : reactMajorVersion < 18;
 
 const config: StorybookConfig = {
   stories: [
     '../tests/**/*.stories.tsx'
   ],
-  features: {
-    storyStoreV7: false,
-  },
   addons: [
     '@etchteam/storybook-addon-status',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    {
-      name: '@storybook/addon-coverage',
-      options: {
-        istanbul: {
-          include: ['src/components/**']
-        }
-      }
-    },
+    // NOTE: not using @storybook/addon-coverage preset (it triggers import.meta.resolve)
   ],
 
   framework: {
@@ -31,18 +26,56 @@ const config: StorybookConfig = {
 
   staticDirs: ['./public'],
 
-  webpackFinal: async (config) => ({
-    ...config,
-    resolve: {
-      ...config.resolve,
-      alias: {
-        ...config.resolve?.alias,
-        './SearchCore': require.resolve('../tests/__fixtures__/core/SearchCore.ts'),
-        '../utils/location-operations': require.resolve('../tests/__fixtures__/utils/location-operations.ts')
+  webpackFinal: async (config) => {
+    const final = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        extensions: [
+          ...(config.resolve?.extensions ?? []),
+          '.ts',
+          '.tsx',
+        ],
+        alias: {
+          ...config.resolve?.alias,
+          './SearchCore': require.resolve('../tests/__fixtures__/core/SearchCore.ts'),
+          '../utils/location-operations': require.resolve('../tests/__fixtures__/utils/location-operations.ts')
+        },
+      },
+      ...(isLegacyReact && { externals: ['react-dom/client'] }),
+      module: {
+        ...config.module,
+        rules: [
+          ...(config.module?.rules ?? []),
+          {
+            test: /\.(ts|tsx)$/,
+            exclude: /node_modules/,
+            use: [
+              {
+                loader: require.resolve('babel-loader'),
+                options: {
+                  cacheDirectory: true,
+                  presets: [
+                    require.resolve('@babel/preset-env'),
+                    require.resolve('@babel/preset-react'),
+                    require.resolve('@babel/preset-typescript'),
+                  ],
+                  // ALWAYS include babel-plugin-istanbul so coverage is available by default.
+                  // This avoids requiring a runtime flag or env var.
+                  plugins: [
+                    require.resolve('babel-plugin-istanbul'),
+                  ],
+                },
+              },
+            ],
+          },
+          // no istanbul-instrumenter-loader here (incompatible with webpack5)
+        ],
       },
-    },
-    ...(!React.version.startsWith('18') && { externals: ["react-dom/client"] })
-  }),
+    };
+
+    return final;
+  },
 
   env: (config) => {
     const mapboxApiKey = process.env.MAPBOX_API_KEY || process.env.REACT_APP_MAPBOX_API_KEY;

.storybook/manager.ts

@@ -1,5 +1,6 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
+import yextTheme from './yextTheme';
 
 addons.setConfig({
-  theme: require('./yextTheme.ts')
+  theme: yextTheme,
 });

.storybook/yextTheme.ts

@@ -1,6 +1,6 @@
 import { create } from '@storybook/theming';
 
-module.exports = create({
+const yextTheme = create({
   base: 'light',
   colorPrimary: '#eeeff0',
   colorSecondary: '#2563eb',
@@ -30,3 +30,5 @@ module.exports = create({
   brandUrl: 'https://github.com/yext/search-ui-react',
   brandImage: './logo.png'
 });
+
+export default yextTheme;

README.md

@@ -82,4 +82,6 @@ import '@yext/search-ui-react/bundle.css'
 
 ## Compatibility Notes
 
-This library and its dependencies use optional chaining and other modern TS syntax that is not inherently supported by Webpack <5 (e.g. via `create-react-app@4`). Additional Babel plugins are needed for transpiling if using legacy versions.
+This library and its dependencies use optional chaining and other modern TS syntax that is not inherently supported by Webpack <5 (e.g. via `create-react-app@4`). Additional Babel plugins are needed for transpiling if using legacy versions.
+
+If you need to verify this package against multiple major React releases while developing locally, follow the workflow in [guides/react-compatibility.md](./guides/react-compatibility.md) to install the library into the `test-site` the same way end users consume it.