build: add npm publish workflow (#82)

This also updates the README Integration documentation and bumps the package version because a few alpha versions were published as part of testing this workflow. ADTYPE-473
Topsort · Oct 19, 2022 · ba60bd2 · ba60bd2
1 parent bf22462
commit ba60bd2
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 7 deletions.
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -0,0 +1,73 @@
+name: npm-publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  # TODO(christopherbot) Would prefer to use this reusable sanity workflow but
+  # having the checkout/install steps separate from the publish job causes the
+  # publish not to work. Is it a matter of passing "results" of one workflow to
+  # the next?
+
+  # sanity:
+  #   uses: ./.github/workflows/sanity.yml
+
+  npm-publish:
+    runs-on: ubuntu-latest
+
+    environment: production
+
+    env:
+      CENTRAL_SERVICES_BASE_URL: ${{ secrets.CENTRAL_SERVICES_BASE_URL }}
+      STRIPE_PUBLIC_KEY: ${{ secrets.STRIPE_PUBLIC_KEY }}
+      USE_MOCK_SERVER: ${{ secrets.USE_MOCK_SERVER }}
+
+    steps:
+      # START copy of sanity.yml steps
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.14.2
+
+      - name: Cache node modules
+        id: cache-node-modules
+        uses: actions/[email protected]
+        with:
+          path: node_modules
+          key: v1-npm-deps-sanity-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            v1-npm-deps-sanity-
+            v1-npm-deps-
+
+      - name: Cache eslint
+        uses: actions/[email protected]
+        with:
+          path: .eslintcache
+          key: v1-eslint-${{ github.sha }}
+          restore-keys: v1-eslint-
+
+      - name: Install dependencies
+        run: npm ci
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+
+      - name: ESLint
+        run: npm run lint
+
+      - name: Run type checks
+        run: npx tsc
+      # END copy of sanity.yml steps
+
+      - name: Publish to npm
+        id: publish
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: public
+
+      - if: steps.publish.outputs.type != 'none'
+        run: |
+          echo "Version changed: ${{ steps.publish.outputs.old-version }} => ${{ steps.publish.outputs.version }}"
diff --git a/.github/workflows/sanity.yml b/.github/workflows/sanity.yml
@@ -6,13 +6,16 @@ on:
 jobs:
   sanity:
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
+
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
           node-version: 16.14.2
+
       - name: Cache node modules
         id: cache-node-modules
         uses: actions/[email protected]
@@ -22,16 +25,20 @@ jobs:
           restore-keys: |
             v1-npm-deps-sanity-
             v1-npm-deps-
+
       - name: Cache eslint
         uses: actions/[email protected]
         with:
           path: .eslintcache
           key: v1-eslint-${{ github.sha }}
           restore-keys: v1-eslint-
+
       - name: Install dependencies
         run: npm ci
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
+
       - name: ESLint
         run: npm run lint
+
       - name: Run type checks
         run: npx tsc
diff --git a/README.md b/README.md
@@ -12,15 +12,27 @@
 
 ## Integration
 
-1. _TODO script with cdn link_
+1. Insert a script in your site's `<head>` tag to load the Topsort Building Blocks library. Ensure the script has `defer` to load it without affecting your site load times. Replace `x.y.z` with the desired version, or use `@latest` to use the latest version of the library at all times.
 
-1. After the script is loaded, create an instance of the `TopsortBlocks` library and initialize it:
+   ```html
+   <head>
+     <!-- The rest -->
+     <script
+       defer
+       src="https://unpkg.com/@topsort/[email protected]/dist/index.js"
+     ></script>
+   </head>
+   ```
+
+1. After the DOM is loaded, create an instance of the `TopsortBlocks` library and initialize it. For example:
 
    ```js
-   const tsBlocks = new TopsortBlocks();
-   await tsBlocks.init({
-     apiKey: "api-key-123",
-     externalVendorId: "vendor-id-123",
+   document.addEventListener("DOMContentLoaded", async () => {
+     const tsBlocks = new TopsortBlocks();
+     await tsBlocks.init({
+       apiKey: "api-key-123",
+       externalVendorId: "vendor-id-123",
+     });
    });
    ```
 

diff --git a/package.json b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "@topsort/building-blocks",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.3",
   "description": "Topsort's JS library for building individual and easily integratable widgets.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "webpack --config webpack.prod.js",
     "build:demo": "webpack --config webpack.demo.js",
     "lint": "eslint . --cache --cache-strategy content --max-warnings 0",
+    "prepublishOnly": "npm run build",
     "start": "webpack serve --config webpack.dev.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },