feat: Enable tree shaking (#53)

.github/workflows/npmpublish.yml

@@ -8,10 +8,10 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://registry.npmjs.org/
 
       - name: Install Depdendencies

.github/workflows/syncSynonyms.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     name: Sync synonym list with Algolia indexes
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://registry.npmjs.org/
       - run: yarn install
       - run: |

README.md

@@ -26,7 +26,7 @@ yarn add @sentry-internal/global-search
 Initialize the search client with one or more site slugs. The order of the slugs determines the order of results.
 
 ```javascript
-import SentryGlobalSearch from '@sentry-internal/global-search';
+import {SentryGlobalSearch} from '@sentry-internal/global-search';
 
 // This will include all sites in the results
 const search = new SentryGlobalSearch([

package.json

@@ -4,7 +4,6 @@
   "version": "0.3.0",
   "author": "Sentry",
   "dependencies": {
-    "@types/dompurify": "^2.0.4",
     "@types/react": ">=16",
     "@types/react-dom": ">=16",
     "algoliasearch": "^4.13.1",
@@ -14,13 +13,16 @@
     "htmlparser2": "^4.1.0",
     "title-case": "^3.0.2"
   },
+  "sideEffects": false,
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
   },
-  "main": "./dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.ts",
   "files": [
-    "dist/"
+    "dist"
   ],
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -29,6 +31,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@types/domhandler": "^2.4.2",
+    "@types/dompurify": "^2.0.4",
     "@types/htmlparser2": "^3.10.3",
     "@types/js-yaml": "^3.12.5",
     "babel-loader": "^8.1.0",
@@ -50,8 +53,8 @@
     "sass-loader": "^9.0.3",
     "stream-browserify": "^3.0.0",
     "style-loader": "^1.2.1",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.2",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0",
@@ -61,7 +64,7 @@
     "gatsby"
   ],
   "scripts": {
-    "build": "webpack --mode production --config ./config/webpack.build.config.js && tsc",
+    "build": "tsc && tsc -p tsconfig.module.json",
     "build-demo": "webpack --mode production --config ./config/webpack.demo.config.js",
     "start": "webpack-dev-server --open --mode development --config ./config/webpack.demo.config.js",
     "test": "jest",

scripts/syncSynonyms.ts

@@ -2,7 +2,7 @@ import algoliasearch from 'algoliasearch';
 import yaml from 'js-yaml';
 import fs from 'fs';
 import path from 'path';
-import crypto from 'crypto';
+import { createHash } from 'crypto';
 
 // Algolia treats synonyms like records, so they cannot be sent as settings
 // when an index is sent, at least via the Gatsby plugin we use. This script
@@ -34,7 +34,7 @@ const yamlFile = path.join(__dirname, '..', 'config/algolia-synonyms.yml');
 const config = yaml.safeLoad(fs.readFileSync(yamlFile, 'utf8')) as Config;
 
 const hash = (input: string) => {
-  return crypto.createHash('sha1').update(input).digest('hex');
+  return createHash('sha1').update(input).digest('hex');
 };
 
 let payload = [

src/html-to-algolia-record/html-to-algolia-record.test.js

@@ -1,5 +1,5 @@
 import sampleDocument from './lib/sample-document';
-import htmlToAlgoliaRecord from './html-to-algolia-record';
+import { parseRecordsFromHTML } from './html-to-algolia-record';
 
 describe('HTML to Algolia record', () => {
   let document = {};
@@ -10,7 +10,7 @@ describe('HTML to Algolia record', () => {
 
   test('meets expectations', async () => {
     const { html, title, url } = document;
-    const records = await htmlToAlgoliaRecord(html, { title, url });
+    const records = await parseRecordsFromHTML(html, { title, url });
     expect(records).toMatchSnapshot();
   });
 });

src/html-to-algolia-record/html-to-algolia-record.ts

@@ -1,7 +1,7 @@
 import { SearchHit } from '../sentry-global-search/lib/types';
-import hashObject from './lib/hash-object';
-import getChildText from './lib/get-child-text';
-import htmlToAST from './lib/html-to-ast';
+import { hashObject } from './lib/hash-object';
+import { getChildText } from './lib/get-child-text';
+import { htmlToAST } from './lib/html-to-ast';
 import { Meta } from './lib/types';
 import { selectOne, selectAll, is } from 'css-select';
 
@@ -26,7 +26,7 @@ const isDescendant = (testNode, highNode) => {
  * @param meta Additional content to be included in the record. At a minimum
  *             must include `title` and `url`
  */
-const parseRecordsFromHTML = async (
+export const parseRecordsFromHTML = async (
   html: string,
   meta: Meta,
   baseSelector?: string
@@ -87,5 +87,3 @@ const parseRecordsFromHTML = async (
 
   return records;
 };
-
-export default parseRecordsFromHTML;

src/html-to-algolia-record/lib/get-child-text.ts

@@ -1,7 +1,7 @@
 /**
  * Recursively traverse an AST, flattening each node into its child text.
  */
-const getChildText = (element): string => {
+export const getChildText = (element): string => {
   return element.children
     .reduce((str, child) => {
       let newStr: string | undefined;
@@ -21,5 +21,3 @@ const getChildText = (element): string => {
     }, '')
     .trim();
 };
-
-export default getChildText;

src/html-to-algolia-record/lib/hash-object.ts

@@ -1,14 +1,12 @@
-import crypto from 'crypto';
+import { createHash } from 'crypto';
 
 /**
  * Convert a value into a md5 string
  *
  * @param input The input value
  * @return The md5 sum of the input string
  */
-const hashObject = (input: any) => {
+export const hashObject = (input: any) => {
   const string = JSON.stringify(input);
-  return crypto.createHash('md5').update(string).digest('hex');
+  return createHash('md5').update(string).digest('hex');
 };
-
-export default hashObject;

src/html-to-algolia-record/lib/html-to-ast.ts

@@ -4,7 +4,7 @@ import { DomHandler } from 'domhandler';
 /**
  * Convert an HTML string into an AST
  */
-const htmlToAST = (html: string): Promise<any> => {
+export const htmlToAST = (html: string): Promise<any> => {
   return new Promise((resolve, reject) => {
     const callback = (error, dom): void => {
       if (error) {
@@ -21,4 +21,3 @@ const htmlToAST = (html: string): Promise<any> => {
   });
 };
 
-export default htmlToAST;

src/index.ts

@@ -1,7 +1,7 @@
 export * from './sentry-global-search/lib/types';
 
-export { default as SentryGlobalSearch } from './sentry-global-search/sentry-global-search';
-export { default as sentryAlgoliaIndexSettings } from './sentry-algolia-index-settings';
-export { default as htmlToAlgoliaRecord } from './html-to-algolia-record/html-to-algolia-record';
-export { default as standardSDKSlug } from './sentry-global-search/lib/standard-sdk-slug';
-export { default as extrapolate } from './sentry-global-search/lib/extrapolate';
+export { SentryGlobalSearch } from './sentry-global-search/sentry-global-search';
+export { settings as sentryAlgoliaIndexSettings } from './sentry-algolia-index-settings';
+export { parseRecordsFromHTML as htmlToAlgoliaRecord } from './html-to-algolia-record/html-to-algolia-record';
+export { standardSDKSlug } from './sentry-global-search/lib/standard-sdk-slug';
+export { extrapolate } from './sentry-global-search/lib/extrapolate';

src/sentry-algolia-index-settings.ts

@@ -5,7 +5,7 @@ import { Settings } from '@algolia/client-search';
  * requires an opinionated record style which can be created using
  * ./helpers/parseRecordsFromHTML
  */
-const settings: Settings = {
+export const settings: Settings = {
   snippetEllipsisText: '…',
   hitsPerPage: 10,
   highlightPreTag: '<mark>',
@@ -33,4 +33,3 @@ const settings: Settings = {
   advancedSyntax: true,
 };
 
-export default settings;

src/sentry-global-search/components/search.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import DOMPurify from 'dompurify';
 
 import { Result } from '../lib/types';
-import SentryGlobalSearch from '../sentry-global-search';
+import { SentryGlobalSearch } from '../sentry-global-search';
 import Logo from './logo';
 
 const MAX_HITS = 10;

src/sentry-global-search/lib/extrapolate.test.js

@@ -1,4 +1,4 @@
-import extrapolate from './extrapolate';
+import { extrapolate } from './extrapolate';
 
 describe('Extrapolate', () => {
   it('works for sdk slugs', () => {

src/sentry-global-search/lib/extrapolate.ts

@@ -1,9 +1,7 @@
-const extrapolate = (str: string, separator: string) => {
+export const extrapolate = (str: string, separator: string) => {
   const segments = str.split(separator).filter(Boolean);
   const fragments = segments.map((_segment, i, array) =>
     array.slice(0, i + 1).join(separator)
   );
   return fragments;
 };
-
-export default extrapolate;

src/sentry-global-search/lib/standard-sdk-slug.test.js

@@ -1,4 +1,4 @@
-import standardSDKSlug from './standard-sdk-slug';
+import { standardSDKSlug } from './standard-sdk-slug';
 
 describe('SDK slug standardizer', () => {
   it('should get the standard slug of an sdk', () => {

src/sentry-global-search/lib/standard-sdk-slug.ts

@@ -45,7 +45,7 @@ const synonyms = {
   android: 'sentry.android',
 } as const;
 
-const standardSDKSlug = (slug: string) => {
+export const standardSDKSlug = (slug: string) => {
   if (typeof slug !== 'string') return;
   const validSlugs: Array<String> = Object.values(synonyms);
   const isValidSlug: Boolean = validSlugs.indexOf(slug) >= 0;
@@ -63,4 +63,3 @@ const standardSDKSlug = (slug: string) => {
   };
 };
 
-export default standardSDKSlug;

src/sentry-global-search/sentry-global-search.test.js

@@ -1,4 +1,4 @@
-import SentryGlobalSearch from './sentry-global-search';
+import { SentryGlobalSearch } from './sentry-global-search';
 import algoliasearch from 'algoliasearch/lite';
 
 const config = ['docs', 'develop', 'blog', 'help-center'];

src/sentry-global-search/sentry-global-search.ts

@@ -17,7 +17,7 @@ type OptionalFilters = Array<string | string[]>;
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 type ConstructorConfig = string | Optional<Config, 'indexes'>;
 
-class SentryGlobalSearch {
+export class SentryGlobalSearch {
   configs: Config[];
   client: SearchClient;
 
@@ -132,4 +132,3 @@ class SentryGlobalSearch {
   }
 }
 
-export default SentryGlobalSearch;

tsconfig.json

@@ -4,7 +4,6 @@
     "checkJs": false,
     "alwaysStrict": false,
     "declaration": true,
-    "emitDeclarationOnly": true,
     "declarationMap": false,
     "downlevelIteration": true,
     "inlineSources": false,
@@ -20,21 +19,14 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "pretty": false,
-    "resolveJsonModule": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es5",
-    "strictBindCallApply": false,
-    "experimentalDecorators": true,
+    "target": "ES2020",
     // Skip type checking of all declaration files
     "skipLibCheck": true,
     "esModuleInterop": true,
     "jsx": "preserve",
-    "baseUrl": "src",
-    "outDir": "dist"
+    "outDir": "dist/cjs"
   },
   "include": ["./src"],
-  "exclude": ["./node_modules"],
-  "types": ["domhandler"]
 }

tsconfig.module.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "declaration": false,
+    "outDir": "dist/esm",
+    "skipLibCheck": true
+  }
+}