chore: Convert component to web component and update build workflows

.github/workflows/ci.yaml

@@ -29,7 +29,8 @@ jobs:
           cache: "npm"
       - run: npm install
       - run: npm run build
-      - run: npm run buildDocs
+      - run: npm install --prefix docs/
+      - run: npm run buildDocs --prefix docs/
 
   run-unit-tests:
     runs-on: ubuntu-latest

.github/workflows/deploy-pages-site.yml

@@ -4,49 +4,27 @@ on:
     branches: [main]
 
 permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow one concurrent deployment
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
+  contents: write
 jobs:
-  # Build job
-  build:
+  build-and-deploy:
+    concurrency: ci-${{ github.ref }}
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: Checkout 🛎️
         uses: actions/checkout@v3
 
-      - name: Setup Pages
-        uses: actions/configure-pages@v1
-
-      - name: Install Dependencies
-        run: npm install
-
-      - name: Build react-search Package
-        run: npm run build
+      - name: Install and Build 🔧
+        run: |
+          npm ci
+          npm run build
 
       - name: Build Page Script
-        run: npm run buildDocs
+        run: |
+          npm i --prefix docs/
+          npm run buildDocs --prefix docs/
 
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
-          # Everything in this folder will be uploaded as the GitHub page
-          path: "docs/public"
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v1
+          folder: docs/public # The folder the action should deploy.
+          clean-exclude: pr-preview/

.github/workflows/deploy-pr-preview.yml

@@ -0,0 +1,23 @@
+# .github/workflows/preview.yml
+name: Deploy PR preview
+concurrency: preview-${{ github.ref }}
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm i && npm run build && npm i --prefix docs/ && npm run buildDocs --prefix docs/
+        if: github.event.action != 'closed'
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./docs/public
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /lib
+/docs/node_modules/
 /docs/public/script.js
 /docs/public/script.js.map
 /coverage

buildConfigs.js

@@ -8,10 +8,16 @@ const sharedConfig = {
   logLevel: "info",
   treeShaking: true,
   minify: true,
-  sourcemap: true,
+
+  // Removing source maps theoretically shaves around 200kb off the package size.
+  // Initially setting this to false and will verify the npm package size.
+  sourcemap: false,
   external: [...Object.keys(dependencies), ...Object.keys(devDependencies), ...Object.keys(peerDependencies)],
   target: ["es6", "node12.22.0"],
-  plugins: [cssPlugin(), sassPlugin({ type: "style" })],
+
+  // css-text outputs CSS as a string which can be embedded as a stylesheet in a web component
+  // See for more info: https://github.com/glromeo/esbuild-sass-plugin?tab=readme-ov-file#type-css-text
+  plugins: [cssPlugin(), sassPlugin({ type: "css-text" })],
   outdir: "./lib",
   outbase: "./src"
 };

docs/buildConfigs.js

@@ -7,9 +7,9 @@ module.exports = {
     define: {
       "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development")
     },
-    entryPoints: ["docs/src/index.tsx"],
-    outfile: "docs/public/script.js",
-    sourcemap: true,
+    entryPoints: ["src/index.tsx"],
+    outfile: "public/script.js",
+    sourcemap: false,
     plugins: [cssPlugin(), sassPlugin({ type: "style" })]
   }
 };

docs/docsServer.js

@@ -2,24 +2,37 @@ const esbuild = require("esbuild");
 const chokidar = require("chokidar");
 const liveServer = require("live-server");
 const { config: devScriptBuildConfig } = require("./buildConfigs");
+const { esm: packageBuildConfig } = require("../buildConfigs");
+
+const normalizedPackageBuildConfig = {
+  ...packageBuildConfig,
+  entryPoints: ["../src/index.tsx", "../src/useSearch.ts", "../src/ReactSearchNext.tsx"],
+  sourcemap: true,
+  outdir: "../lib",
+  outbase: "../src"
+};
 
 (async () => {
+  // Builder for the component package
+  const packageBuilder = await esbuild.context(normalizedPackageBuildConfig);
+
   // Builder for the development page
   const devPageBuilder = await esbuild.context(devScriptBuildConfig);
 
   chokidar
     // Watch for changes to dev env code or react-search src
-    .watch(["docs/src/*.{ts,tsx,scss}", "docs/src/**/*.{ts,tsx,scss}", "src/**/*.{ts,tsx,scss}"], {
+    .watch(["src/*.{ts,tsx,scss}", "src/**/*.{ts,tsx,scss}", "../src/**/*.{ts,tsx,scss}"], {
       interval: 0 // No delay
     })
-    .on("all", () => {
+    .on("all", async () => {
+      await packageBuilder.rebuild();
       devPageBuilder.rebuild();
     });
 
   // `liveServer` local server for hot reload.
   liveServer.start({
     open: true,
     port: +process.env.PORT || 8080,
-    root: "docs/public"
+    root: "public"
   });
 })();

docs/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "docs",
+  "version": "0.0.1",
+  "description": "\"Docs page for React-Search\"",
+  "main": "build.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs": "node docsServer.js",
+    "buildDocs": "node build.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vectara/react-search": "file:.."
+  }
+}

docs/src/index.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useCallback, useState } from "react";
 import ReactDOM from "react-dom";
 import { BiLogoGithub } from "react-icons/bi";
-import { ReactSearch } from "../../src";
+import { ReactSearch } from "@vectara/react-search";
 import {
   VuiAppContent,
   VuiAppHeader,