build(headless-react): move to esm (#3194)

* config node support to 18 or 20 https://coveord.atlassian.net/browse/KIT-2661 * vsc workspace: remove obs ref to headless-next, reorder https://coveord.atlassian.net/browse/KIT-2661 * removed redundant build tsconfig https://coveord.atlassian.net/browse/KIT-2661 * move to esm module https://coveord.atlassian.net/browse/KIT-2661 * add esm config for jest https://coveord.atlassian.net/browse/KIT-2661 * reuse base tsconfig for test https://coveord.atlassian.net/browse/KIT-2661 * add release scripts, bump version https://coveord.atlassian.net/browse/KIT-2661 * revert version bump to fix build issues https://coveord.atlassian.net/browse/KIT-2661 * add rimraf dev dep https://coveord.atlassian.net/browse/KIT-2661 * add esm package config linter https://coveord.atlassian.net/browse/KIT-2661 * convert jest config to mjs https://coveord.atlassian.net/browse/KIT-2661 * reexport headless/ssr https://coveord.atlassian.net/browse/KIT-2661 * add ref to ts-jest bug https://coveord.atlassian.net/browse/KIT-2661 * add ssr subpackage https://coveord.atlassian.net/browse/KIT-2661 * change refs in headless-ssr samples to reflect new ssr subpath https://coveord.atlassian.net/browse/KIT-2661
coveo · Sep 20, 2023 · df0ad6b · df0ad6b
1 parent 3cad7b2
commit df0ad6b
Show file tree

Hide file tree

Showing 21 changed files with 179 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/headless-react/.eslintrc.js → packages/headless-react/.eslintrc.cjs b/packages/headless-react/.eslintrc.js → packages/headless-react/.eslintrc.cjs
diff --git a/packages/headless-react/README.md b/packages/headless-react/README.md
@@ -1 +1,4 @@
 # Headless React Utils for SSR
+
+`@coveo/headless-react/ssr` provides react utilities for Server side rendering with headless controllers.
+Refer to [samples/headless-ssr](https://github.com/coveo/ui-kit/tree/master/packages/samples/headless-ssr/src/app/react) for examples.
diff --git a/packages/headless-react/jest.config.js → packages/headless-react/jest.config.mjs b/packages/headless-react/jest.config.js → packages/headless-react/jest.config.mjs
@@ -1,11 +1,14 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
+export default {
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
   transform: {
     '^.+\\.tsx?$': [
       'ts-jest',
       {
-        tsconfig: 'tsconfig.test.json'
+        tsconfig: 'tsconfig.test.json',
       },
     ],
   },

diff --git a/packages/headless-react/package.json b/packages/headless-react/package.json
@@ -15,15 +15,22 @@
     "ssr"
   ],
   "license": "Apache-2.0",
-  "main": "dist/index.js",
+  "type": "module",
+  "exports": {
+    "./ssr": "./dist/ssr/index.js"
+  },
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "nx build",
+    "clean": "rimraf dist",
     "test": "jest",
     "test:watch": "jest --watch --colors --no-cache",
-    "lint": "eslint ."
+    "lint": "eslint .; publint",
+    "release:phase1": "npx -p=@coveo/release bump",
+    "release:phase2": "npx -p=@coveo/release npm-publish",
+    "promote:npm:latest": "node ../../scripts/deploy/update-npm-tag.mjs latest"
   },
   "dependencies": {
     "@coveo/headless": "2.32.0"
@@ -40,6 +47,8 @@
     "gts": "5.0.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "publint": "0.2.2",
+    "rimraf": "5.0.1",
     "ts-jest": "29.1.1",
     "typescript": "5.2.2"
   },
@@ -48,6 +57,6 @@
     "react-dom": "^18"
   },
   "engines": {
-    "node": ">=18"
+    "node": "^18 || ^20"
   }
 }
diff --git a/packages/headless-react/project.json b/packages/headless-react/project.json
@@ -5,7 +5,7 @@
     "cached:build": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "tsc --project ./tsconfig.build.json",
+        "command": "tsc --project ./tsconfig.json",
         "cwd": "packages/headless-react"
       }
     },

diff --git a/packages/headless-react/src/index.ts b/packages/headless-react/src/index.ts
diff --git a/packages/headless-react/src/client-utils.ts → ...es/headless-react/src/ssr/client-utils.ts b/packages/headless-react/src/client-utils.ts → ...es/headless-react/src/ssr/client-utils.ts
diff --git a/packages/headless-react/src/ssr/index.ts b/packages/headless-react/src/ssr/index.ts
@@ -0,0 +1,2 @@
+export {defineSearchEngine} from './search-engine.js';
+export * from '@coveo/headless/ssr';
diff --git a/...headless-react/src/search-engine.test.tsx → ...less-react/src/ssr/search-engine.test.tsx b/...headless-react/src/search-engine.test.tsx → ...less-react/src/ssr/search-engine.test.tsx
@@ -5,7 +5,10 @@ import {
 } from '@coveo/headless/ssr';
 import {render, renderHook, screen} from '@testing-library/react';
 import {PropsWithChildren} from 'react';
-import {MissingEngineProviderError, defineSearchEngine} from './search-engine';
+import {
+  MissingEngineProviderError,
+  defineSearchEngine,
+} from './search-engine.js';
 
 describe('Headless react SSR utils', () => {
   let errorSpy: jest.SpyInstance;

diff --git a/...ages/headless-react/src/search-engine.tsx → .../headless-react/src/ssr/search-engine.tsx b/...ages/headless-react/src/search-engine.tsx → .../headless-react/src/ssr/search-engine.tsx
@@ -10,15 +10,15 @@ import {
 import {useContext, useCallback, useMemo, Context} from 'react';
 // Workaround to prevent Next.js erroring about importing CSR only hooks
 import React from 'react';
-import {useSyncMemoizedStore} from './client-utils';
+import {useSyncMemoizedStore} from './client-utils.js';
 import {
   ContextHydratedState,
   ContextState,
   ControllerHook,
   InferControllerHooksMapFromDefinition,
   ReactSearchEngineDefinition,
-} from './types';
-import {SingletonGetter, capitalize, singleton, mapObject} from './utils';
+} from './types.js';
+import {SingletonGetter, capitalize, singleton, mapObject} from './utils.js';
 
 export class MissingEngineProviderError extends Error {
   static message =

diff --git a/packages/headless-react/src/types.ts → packages/headless-react/src/ssr/types.ts b/packages/headless-react/src/types.ts → packages/headless-react/src/ssr/types.ts
diff --git a/packages/headless-react/src/utils.ts → packages/headless-react/src/ssr/utils.ts b/packages/headless-react/src/utils.ts → packages/headless-react/src/ssr/utils.ts
diff --git a/packages/headless-react/tsconfig.build.json b/packages/headless-react/tsconfig.build.json
diff --git a/packages/headless-react/tsconfig.json b/packages/headless-react/tsconfig.json
@@ -15,12 +15,13 @@
     "sourceMap": true,
     "declaration": true,
     "jsx": "react-jsx",
+    "rootDir": "src/",
     "outDir": "dist/",
-    "moduleResolution": "Node",
-    "module": "ES2022",
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
     "target": "ES2022",
     "lib": ["dom", "ES2022"]
   },
-  "exclude": ["**/*.test.ts", "**/*.test.tsx" ],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"],
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }
diff --git a/packages/headless-react/tsconfig.test.json b/packages/headless-react/tsconfig.test.json
@@ -1,27 +1,8 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
-    "allowUnreachableCode": false,
-    "allowSyntheticDefaultImports": true,
-    "allowJs": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "removeComments": false,
-    "sourceMap": true,
-    "declaration": true,
-    "jsx": "react-jsx",
-    "outDir": "dist/",
+    // TODO: Remove override after bug is fixed https://github.com/kulshekhar/ts-jest/issues/4198
     "moduleResolution": "Node",
-    "module": "ES2022",
-    "target": "ES2022",
-    "lib": ["dom", "ES2022"],
     "types": ["jest", "react", "react-dom"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
-  ,
+  }
 }
diff --git a/packages/samples/headless-ssr/README.md b/packages/samples/headless-ssr/README.md
@@ -1,7 +1,7 @@
 ## About
 
 - This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-- It demonstrates usage of the framework agnostic `@coveo/headless/ssr` and `@coveo/headless-react` utils for Server-Side Rendering with headless.
+- It demonstrates usage of the framework agnostic `@coveo/headless/ssr` and `@coveo/headless-react/ssr` utils for Server-Side Rendering with headless.
 - Although NextJS is used to demonstrate SSR usage for convenience, the utils are not specific to NextJS.
 
 ## Getting Started

diff --git a/packages/samples/headless-ssr/package.json b/packages/samples/headless-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coveo/headless-ssr-samples",
-  "description": "Examples using framework agnostic @coveo/headless/ssr utils and @coveo/headless-react",
+  "description": "Examples using framework agnostic @coveo/headless/ssr utils and @coveo/headless-react/ssr",
   "version": "0.0.0",
   "private": true,
   "scripts": {

diff --git a/packages/samples/headless-ssr/src/app/layout.tsx b/packages/samples/headless-ssr/src/app/layout.tsx
@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Headless SSR examples',
   description:
-    'Examples of using framework agnostic @coveo/headless/ssr utils and @coveo/headless-react',
+    'Examples of using framework agnostic @coveo/headless/ssr utils and @coveo/headless-react/ssr',
 };
 
 export default function RootLayout({children}: {children: React.ReactNode}) {

diff --git a/packages/samples/headless-ssr/src/app/react/common/engine.ts b/packages/samples/headless-ssr/src/app/react/common/engine.ts
@@ -1,4 +1,4 @@
-import {defineSearchEngine} from '@coveo/headless-react';
+import {defineSearchEngine} from '@coveo/headless-react/ssr';
 import {InferStaticState, InferHydratedState} from '@coveo/headless/ssr';
 import {config} from '../../common/search-engine-config';
 

diff --git a/ui-kit.code-workspace b/ui-kit.code-workspace
@@ -40,26 +40,10 @@
       "name": "📦 Atomic Hosted Page",
       "path": "./packages/atomic-hosted-page"
     },
-    {
-      "name": "📄 Atomic Storybook documentation",
-      "path": "./utils/atomic-storybook"
-    },
-    {
-      "name": "🚀 IIFE samples",
-      "path": "./packages/samples/iife"
-    },
-    {
-      "name": "🚀 Stencil samples",
-      "path": "./packages/samples/stencil"
-    },
     {
       "name": "🚀 React samples (Headless)",
       "path": "./packages/samples/headless-react"
     },
-    {
-      "name": "🚀 Next.js samples (Headless)",
-      "path": "./packages/samples/headless-next"
-    },
     {
       "name": "🚀 React samples (Atomic)",
       "path": "./packages/samples/atomic-react"
@@ -80,6 +64,18 @@
       "name": "🚀 Vue.js samples",
       "path": "./packages/samples/vuejs"
     },
+    {
+      "name": "🚀 IIFE samples",
+      "path": "./packages/samples/iife"
+    },
+    {
+      "name": "🚀 Stencil samples",
+      "path": "./packages/samples/stencil"
+    },
+    {
+      "name": "📄 Atomic Storybook documentation",
+      "path": "./utils/atomic-storybook"
+    },
     {
       "name": "⚙️ Release utilities",
       "path": "./utils/release"