feat(pie-cookie-banner): DSW-2679 CDN build output

.changeset/tidy-dolls-confess.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-cookie-banner": patch
+---
+
+[Added] - CDN dist output containing all cookie-banner and dependency code for uses where consumers cannot use npm/yarn or build tools.

.github/workflows/changeset-release.yml

@@ -22,6 +22,9 @@ env:
 
 jobs:
   changesets:
+    outputs:
+      published: ${{ steps.changesets-main.outputs.published }}
+      published-packages: ${{ steps.changesets-main.outputs.publishedPackages }}
     runs-on: ${{ inputs.os }}
     if: github.repository == 'justeattakeaway/pie' && ${{ github.event_name != 'pull_request' }} &&
       (contains(github.ref_name, 'main') || contains(github.ref_name, 'beta') || contains(github.ref_name, 'feature'))
@@ -198,3 +201,21 @@ jobs:
           }
       env:
         SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
+
+  publish-cookie-banner-cdn:
+    needs: changesets
+    runs-on: ${{ inputs.os }}
+    if: needs.changesets.outputs.published == 'true' && contains(needs.changesets.outputs.publishedPackages, '@justeattakeaway/pie-cookie-banner')
+    steps:
+      - name: Extract cookie banner version
+        id: extract-version
+        run: |
+          PACKAGES='${{ needs.changesets.outputs.publishedPackages}}'
+          COOKIE_BANNER_VERSION=$(echo $PACKAGES | jq -r '.[] | select(.name == "@justeattakeaway/pie-cookie-banner") | .version')
+          echo "cookie_banner_version=$COOKIE_BANNER_VERSION" >> $GITHUB_OUTPUT
+      - name: Publish Cookie Banner CDN
+        uses: ./.github/workflows/pie-cookie-banner-cdn-publish.yml
+        with:
+          os: ${{ inputs.os }}
+          node-version: ${{ inputs.node-version }}
+          package-version: v${{ steps.extract-version.outputs.cookie_banner_version }}

.github/workflows/ci.yml

@@ -363,4 +363,4 @@ jobs:
         with:
           # "allowed-skips" lists jobs that are optional but should not fail
           allowed-skips: browser-tests-components, deploy-docs, deploy-storybook, browser-tests-docs
-          jobs: ${{ toJSON(needs) }}
+          jobs: ${{ toJSON(needs) }}

.github/workflows/pie-cookie-banner-cdn-publish.yml

@@ -0,0 +1,44 @@
+name: Publish Pie Cookie Banner to CDN
+
+on:
+  workflow_call:
+    inputs:
+      os:
+        required: true
+        type: string
+      node-version:
+        required: true
+        type: string
+      package-version:
+        required: true
+        type: string
+
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
+jobs:
+  publish-cookie-banner-cdn:
+    runs-on: ${{ inputs.os }}
+    steps:
+      # Checkout the Repo
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      # Setup Repo
+      - name: Setup Repo
+        uses: ./.github/actions/setup-repo
+        with:
+          node-version: ${{ inputs.node-version }}
+          os: ${{ inputs.os }}
+      # Build
+      - name: Build Cookie Banner
+        uses: ./.github/actions/run-script
+        with:
+          script-name: "build --filter=pie-cookie-banner"
+
+      - name: Upload to S3
+        run: |
+          aws s3 sync ${{ github.workspace }}/packages/components/pie-cookie-banner/cdn_dist/ s3://${{ vars.PIE_CDN_BUCKET_NAME }}/pie-cookie-banner/${{ inputs.package-version }}/ --region ${{ env.AWS_REGION }} --content-type "text/javascript"
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: eu-west-1

packages/components/pie-cookie-banner/.eslintignore

@@ -1,4 +1,5 @@
 .turbo
+cdn_dist
 dist
 node_modules
 lit-browsers-report

packages/components/pie-cookie-banner/.gitignore

@@ -0,0 +1 @@
+cdn_dist

packages/components/pie-cookie-banner/cdn.vite.config.js

@@ -0,0 +1,49 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+import { deepmerge } from 'deepmerge-ts';
+
+// https://vitejs.dev/config/
+const sharedConfig = ({ build = {}, plugins = [], ...rest }) => defineConfig({
+    build: deepmerge({
+        lib: {
+            entry: {
+                index: 'src/index.ts',
+            },
+            formats: ['es'],
+        },
+        rollupOptions: {
+            external: (id) => {
+                if (['react', '@lit/react'].includes(id)) {
+                    return true;
+                }
+                return false;
+            },
+        },
+        outDir: 'cdn_dist',
+    }, build),
+    test: {
+        dir: '.',
+        environment: 'jsdom',
+        globals: true,
+        include: [
+            './src/__tests__/**/*.{spec,test}.{js,ts}',
+            './test/unit/**/*.{spec,test}.{js,ts}',
+        ],
+        exclude: ['**/node_modules/**'],
+    },
+    plugins: deepmerge([dts({
+        insertTypesEntry: true,
+        outputDir: 'cdn_dist',
+        rollupTypes: true,
+    }),
+    visualizer({
+        gzipSize: true,
+        brotliSize: true,
+    })], plugins),
+
+    ...rest,
+});
+
+export default sharedConfig;

packages/components/pie-cookie-banner/package.json

@@ -16,14 +16,16 @@
     "custom-elements.json",
     "src",
     "dist",
+    "cdn_dist",
     "locales",
     "**/*.d.ts"
   ],
   "pieMetadata": {
     "componentStatus": "stable"
   },
   "scripts": {
-    "build": "run -T vite build",
+    "build": "run -T vite build && yarn build:cdn",
+    "build:cdn": "run -T vite build --config './cdn.vite.config.js'",
     "build:react-wrapper": "npx build-react-wrapper",
     "create:manifest": "yarn cem analyze --litelement",
     "lint:scripts": "run -T eslint .",
@@ -61,6 +63,7 @@
   },
   "customElements": "custom-elements.json",
   "sideEffects": [
-    "dist/*.js"
+    "dist/*.js",
+    "cdn_dist/*.js"
   ]
 }

packages/components/pie-cookie-banner/turbo.json

@@ -1,40 +1,51 @@
 {
-    "$schema": "https://turborepo.org/schema.json",
-    "extends": [
-      "//"
-    ],
-    "pipeline": {
-      "test:browsers": {
-        "cache": true,
-        "dependsOn": [],
-        "inputs": [
-          "$TURBO_DEFAULT$",
-          "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
-        ]
-      },
-      "test:browsers:ci": {
-        "cache": true,
-        "dependsOn": [],
-        "inputs": [
-          "$TURBO_DEFAULT$",
-          "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
-        ]
-      },
+  "$schema": "https://turborepo.org/schema.json",
+  "extends": [
+    "//"
+  ],
+  "pipeline": {
+    "build": {
+      "cache": true,
+      "dependsOn": [
+        "^build",
+        "build:react-wrapper"
+      ],
+      "outputs": [
+        "dist/**",
+        "cdn_dist/**"
+      ]
+    },
+    "test:browsers": {
+      "cache": true,
+      "dependsOn": [],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
+      ]
+    },
+    "test:browsers:ci": {
+      "cache": true,
+      "dependsOn": [],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
+      ]
+    },
     "test:visual": {
-        "cache": false,
-        "dependsOn": [],
-        "inputs": [
-          "$TURBO_DEFAULT$",
-          "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
-        ]
-      },
-      "test:visual:ci": {
-        "cache": false,
-        "dependsOn": [],
-        "inputs": [
-          "$TURBO_DEFAULT$",
-          "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
-        ]
-      }
+      "cache": false,
+      "dependsOn": [],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
+      ]
+    },
+    "test:visual:ci": {
+      "cache": false,
+      "dependsOn": [],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "../../../apps/pie-storybook/stories/testing/pie-cookie-banner.test.stories.ts"
+      ]
     }
-  }
+  }
+}