diff --git a/packages/headless/contributors/adding-a-sub-package.md b/packages/headless/contributors/adding-a-sub-package.md index e24bef78187..53278b43f7e 100644 --- a/packages/headless/contributors/adding-a-sub-package.md +++ b/packages/headless/contributors/adding-a-sub-package.md @@ -4,34 +4,61 @@ Headless provides exports through multiple sub packages. A sub-package groups to ## To add a new sub-package: -1. Create an entry file for your sub-package inside the `src` directory (e.g. case-assist.ts). -2. Configure nodejs and browser bundles inside `esbuild.mjs` for the entry file created in step #1. +1. Create an entry file for your sub-package inside the `src` directory (e.g. `case-assist.index.ts`). +2. Configure nodejs and browser bundles inside `esbuild.mjs` for the entry file created in step #1. Add entries in `useCaseEntries` and `getUmdGlobalName` map for the global name (used to store exports for iife) - - Add entries in `useCaseEntries` and `getUmdGlobalName` map for the global name (used to store exports for iife) + ```javascript + // headless/esbuild.mjs + + // ... + + const useCaseEntries = { + search: 'src/index.ts', + recommendation: 'src/recommendation.index.ts', + 'product-recommendation': 'src/product-recommendation.index.ts', + 'product-listing': 'src/product-listing.index.ts', + 'case-assist': 'src/case-assist.index.ts', + // ... + }; + + function getUmdGlobalName(useCase) { + const map = { + search: 'CoveoHeadless', + recommendation: 'CoveoHeadlessRecommendation', + 'product-recommendation': 'CoveoHeadlessProductRecommendation', + 'product-listing': 'CoveoHeadlessProductListing', + 'case-assist': 'CoveoHeadlessCaseAssist', + // ... + }; + + // ... + } + ``` 3. Create a new directory with the name of your sub-package at the `headless/` root. 4. Inside the new directory, add a `package.json` file. Add the paths to your bundled files and type definitions. Make sure to mark the package as `private` so it doesn't get published individually. -5. Add the directory name to the `files` array in the project root `package.json` file. -```json -pkg/case-assist/package.json - -{ - "private": true, - "name": "case-assist", - "description": "Headless Case Assist Module", - "main": "../dist/case-assist/headless.js", - "module": "../dist/case-assist/headless.esm.js", - "browser": "../dist/browser/case-assist/headless.esm.js", - "types": "../dist/definitions/case-assist.index.d.ts", - "license": "Apache-2.0" -} -``` + ```json + // headless/case-assist/package.json + + { + "private": true, + "name": "case-assist", + "description": "Headless Case Assist Module", + "main": "../dist/case-assist/headless.js", + "module": "../dist/case-assist/headless.esm.js", + "browser": "../dist/browser/case-assist/headless.esm.js", + "types": "../dist/definitions/case-assist.index.d.ts", + "license": "Apache-2.0" + } + ``` + +5. Add the directory name to the `files` array in the project root `package.json` file. ## Testing your sub-package: -1. Build the headless project: `npm run build`. -2. Create a tarball: `npm pack`. +1. Build the headless project: `npx nx run headless:build`. +2. Create a tarball: from the `/packages/headless` directory, run `npm pack`. 3. Install the tarball as a dependency of a different project: `npm i `. 4. Import an export from your sub-package: `import {...} from '@coveo/headless/'`