NPM publishing and Monorepo

.github/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: Publish Widget
+on:
+  push:
+    branches: [main]
+    paths: ["widget/**"]
+  workflow_dispatch:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+          registry-url: "https://registry.npmjs.org"
+      - name: Install PNPM
+        run: npm install -g pnpm
+      - name: Install dependencies
+        run: pnpm install
+      - name: Publish
+        run: ./scripts/publish.sh
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -78,6 +78,25 @@ To configure the demo, create a `.env` file in the `/demo` directory:
 VITE_API_TOKEN=your_api_token_here
 ```
 
+## Publishing
+
+This repository is configured to publish to npmjs.org whenever:
+
+1. There is an update to the main branch.
+2. A new version is created in the `package.json`.
+
+To create a new version, you can use the following command:
+
+```bash
+pnpm version <major|minor|patch>
+```
+
+and then push those changes to the main branch.  Don't forget the tags!
+
+```bash
+git push origin main --tags && git push
+```
+
 ## License
 
 This software is proprietary and confidential. Commercial terms apply. Please see [LICENSE.txt](LICENSE.txt) for details or contact Airbyte, Inc. for licensing information.

demo/index.html

@@ -26,7 +26,7 @@ <h1>Airbyte Widget Demo</h1>
       <div id="error" class="error"></div>
     </div>
     <script type="module">
-      import { EmbeddedWidget } from "../src/index";
+      import { EmbeddedWidget } from "@airbyte-embedded/airbyte-embedded-modal";
 
       const loadingEl = document.getElementById("loading");
       const errorEl = document.getElementById("error");
@@ -42,6 +42,7 @@ <h1>Airbyte Widget Demo</h1>
             client_secret: import.meta.env.VITE_AB_API_CLIENT_SECRET || "",
           });
 
+          // Note: This should be an API call to the customer's backend server, not Airbyte directly
           const response = await fetch(`${import.meta.env.VITE_AB_BASE_URL}/api/v1/applications/token`, {
             method: "POST",
             headers: {

demo/package.json

@@ -7,6 +7,9 @@
     "test:ui": "playwright test --ui"
   },
   "license": "UNLICENSED",
+  "dependencies": {
+    "@airbyte-embedded/airbyte-embedded-modal": "workspace:*"
+  },
   "devDependencies": {
     "@playwright/test": "^1.42.1",
     "@types/node": "^22.13.14",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "airbyte-embedded-widget",
-  "version": "0.0.1",
+  "name": "@airbyte-embedded/airbyte-embedded-modal",
+  "version": "0.1.0",
   "description": "Embedded widget for Airbyte",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,5 +39,10 @@
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }