feat(chat): include in UMD build

babel.config.js

@@ -81,6 +81,10 @@ module.exports = (api) => {
             // we require polyfills for this already
             'Array.prototype.includes',
 
+            // Used only in Chat, which expects modern browsers
+            'Object.fromEntries',
+            'Object.entries',
+
             // false positive (babel doesn't know types)
             // this is actually only called on arrays
             'String.prototype.includes',

bundlesize.config.json

@@ -10,11 +10,11 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "100 kB"
+      "maxSize": "122.5 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "210 kB"
+      "maxSize": "242.25 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",

package.json

@@ -136,6 +136,7 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-replace": "2.2.0",
     "rollup-plugin-uglify": "6.0.4",
+    "rollup-plugin-alias": "2.2.0",
     "shelljs": "0.8.5",
     "shipjs": "0.26.0",
     "ts-jest": "27",

packages/instantsearch.js/.storybook/decorators/withHits.ts

@@ -4,24 +4,29 @@ import {
   liteClient as namedConstructor,
   default as defaultConstructor,
 } from 'algoliasearch/lite';
-import instantsearch from '../../src';
+import instantsearch from '../../src/index.es';
 import defaultPlayground from '../playgrounds/default';
 import {
   InstantSearch,
   InstantSearchOptions,
   SearchClient,
 } from '../../src/types';
+import * as widgets from '../../src/widgets/index.umd';
+import * as connectors from '../../src/connectors/index.umd';
+import { createInsightsMiddleware } from '../../src/middlewares';
+import { reverseSnippet } from '../../src/helpers';
 
 const algoliasearch = (namedConstructor || defaultConstructor) as unknown as (
   appId: string,
   apiKey: string
 ) => SearchClient;
 
-type InstantSearchUMDModule = typeof instantsearch;
-
 export type Playground = (options: {
   search: InstantSearch;
-  instantsearch: InstantSearchUMDModule;
+  instantsearch: {
+    widgets: typeof widgets;
+    middlewares: { createInsightsMiddleware: typeof createInsightsMiddleware };
+  };
   leftPanel: HTMLDivElement;
   rightPanel: HTMLDivElement;
 }) => void;
@@ -46,7 +51,11 @@ export const withHits =
       search,
     }: {
       container: HTMLElement;
-      instantsearch: InstantSearchUMDModule;
+      instantsearch: {
+        widgets: typeof widgets;
+        connectors: typeof connectors;
+        reverseSnippet: typeof reverseSnippet;
+      };
       search: InstantSearch;
     }) => void,
     searchOptions?: SearchOptions
@@ -81,7 +90,7 @@ export const withHits =
     });
 
     search.addWidgets([
-      instantsearch.widgets.configure({
+      widgets.configure({
         hitsPerPage: 4,
         attributesToSnippet: ['description:15'],
         snippetEllipsisText: '[…]',
@@ -110,14 +119,18 @@ export const withHits =
 
     playground({
       search,
-      instantsearch,
+      instantsearch: { widgets, middlewares: { createInsightsMiddleware } },
       leftPanel: leftPanelPlaygroundElement,
       rightPanel: rightPanelPlaygroundElement,
     });
 
     storyFn({
       container: previewElement,
-      instantsearch,
+      instantsearch: {
+        widgets,
+        connectors,
+        reverseSnippet,
+      },
       search,
     });
 

packages/instantsearch.js/scripts/rollup/emptyModule.js

@@ -0,0 +1,97 @@
+// Placeholder export for 'zod' module
+export const ZodFirstPartyTypeKind = {};
+export const toJSONSchema = {};
+export const safeParseAsync = {};
+export const z = {
+  string() {
+    return this;
+  },
+  instanceof() {
+    return this;
+  },
+  custom() {
+    return this;
+  },
+  object() {
+    return this;
+  },
+  array() {
+    return this;
+  },
+  union() {
+    return this;
+  },
+  literal() {
+    return this;
+  },
+  lazy() {
+    return this;
+  },
+  null() {
+    return this;
+  },
+  number() {
+    return this;
+  },
+  boolean() {
+    return this;
+  },
+  record() {
+    return this;
+  },
+  optional() {
+    return this;
+  },
+  unknown() {
+    return this;
+  },
+  discriminatedUnion() {
+    return this;
+  },
+  strictObject() {
+    return this;
+  },
+  startsWith() {
+    return this;
+  },
+  looseObject() {
+    return this;
+  },
+  loose() {
+    return this;
+  },
+  base64() {
+    return this;
+  },
+  extend() {
+    return this;
+  },
+  default() {
+    return this;
+  },
+  or() {
+    return this;
+  },
+  int() {
+    return this;
+  },
+  merge() {
+    return this;
+  },
+  strict() {
+    return this;
+  },
+  enum() {
+    return this;
+  },
+  never() {
+    return this;
+  },
+  '~standard': {
+    validate: (value) => Promise.resolve({ issues: null, value }),
+  },
+};
+
+// Placeholder export for 'react' module
+export const cloneElement = {};
+export const createElement = {};

packages/instantsearch.js/scripts/rollup/rollup.config.js

@@ -1,3 +1,6 @@
+import path from 'path';
+
+import alias from 'rollup-plugin-alias';
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
 import filesize from 'rollup-plugin-filesize';
@@ -16,6 +19,25 @@ const link = 'https://github.com/algolia/instantsearch';
 const license = `/*! InstantSearch.js ${version} | ${algolia} | ${link} */`;
 
 const plugins = [
+  alias({
+    entries: [
+      {
+        find: /^zod.*/,
+        replacement: path.join(__dirname, './emptyModule.js'),
+      },
+      {
+        find: /^react.*/,
+        replacement: path.join(__dirname, './emptyModule.js'),
+      },
+      {
+        find: 'eventsource-parser/stream',
+        replacement: path.join(
+          __dirname,
+          '../../../../node_modules/eventsource-parser/dist/stream.js'
+        ),
+      },
+    ],
+  }),
   resolve({
     browser: true,
     preferBuiltins: false,

packages/instantsearch.js/src/index.ts

@@ -1,4 +1,4 @@
-import * as connectors from './connectors/index.umd';
+import * as connectors from './connectors/index';
 import * as helpers from './helpers/index';
 import { createInfiniteHitsSessionStorageCache } from './lib/infiniteHitsCache/index';
 import InstantSearch from './lib/InstantSearch';
@@ -7,7 +7,7 @@ import * as stateMappings from './lib/stateMappings/index';
 import version from './lib/version';
 import * as middlewares from './middlewares/index';
 import * as templates from './templates/index';
-import * as widgets from './widgets/index.umd';
+import * as widgets from './widgets/index';
 
 import type { InstantSearchOptions } from './lib/InstantSearch';
 import type { Expand, UiState } from './types';

tests/umd.test.ts

@@ -14,7 +14,6 @@ describe('UMD bundle', () => {
       name: 'instantsearch.js',
       bundle: 'dist/instantsearch.production.min.js',
       globalName: 'instantsearch',
-      unavailable: ['connectors.connectChat', 'widgets.chat'],
     },
     {
       name: 'react-instantsearch-core',
@@ -124,6 +123,8 @@ async function createEnvironment(
     resources: 'usable',
   });
 
+  window.TransformStream = TransformStream;
+
   const error = jest.fn();
   window.addEventListener('error', error);
 

yarn.lock

@@ -28343,6 +28343,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
+[email protected]:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-alias/-/rollup-plugin-alias-2.2.0.tgz#5004a2bc542a2eebb45b5a0fff8c6f540439decc"
+  integrity sha512-9ZK410qeFed4gGrHoojBpxLsHF74vPgsheGg9JRW5RbALAxqdvJbd357mSqWBqUrBfRVnZnNUXTZdYLxxQEA5A==
+  dependencies:
+    slash "^3.0.0"
+
 [email protected]:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.3.3.tgz#7eb5ac16d9b5831c3fd5d97e8df77ba25c72a2aa"