Force polyfill

.github/workflows/README-deploy-preview.md

@@ -0,0 +1,101 @@
+# GitHub Pages Preview Deployments
+
+This workflow (`deploy-preview.yml`) automatically builds and deploys preview versions of the examples application to GitHub Pages for every branch push and pull request.
+
+## How it works
+
+### Triggering Events
+- **Pull Requests**: Triggers on `opened`, `synchronize`, and `reopened` events
+- **Branch Pushes**: Triggers on pushes to any branch except `main` (which has its own deployment workflow)
+
+### Deployment Paths
+
+The workflow deploys to the `gh-pages` branch using the following path structure:
+
+- **Pull Requests**: `pr/<pr-number>-<short-sha>/`
+  - Example: `pr/42-abc1234/`
+
+- **Branches**: `branch/<safe-branch-name>-<short-sha>/`
+  - Example: `branch/feature_new-ui-a7b8c9d/`
+
+### Base URL Configuration
+
+The workflow automatically:
+1. Fetches the GitHub Pages URL using the `gh` CLI
+2. Falls back to `https://<owner>.github.io/<repo>` if Pages isn't configured
+3. Builds the examples app with the correct base href using Parcel's `--public-url` option
+4. All asset paths are absolute URLs pointing to the correct subdirectory
+
+### Features
+
+- ✅ **Automatic PR Comments**: Posts a comment on PRs with the preview URL
+- ✅ **Branch Sanitization**: Safely handles branch names with special characters
+- ✅ **Incremental Deployments**: Each commit creates a new deployment with a unique SHA
+- ✅ **Job Summaries**: Provides deployment URL in GitHub Actions summary
+- ✅ **gh-pages Auto-Init**: Creates the gh-pages branch if it doesn't exist
+
+## Usage
+
+### For Pull Requests
+1. Open a pull request
+2. Wait for the workflow to complete
+3. Click the preview URL in the automated comment
+4. Each new commit will update the deployment (with a new SHA in the path)
+
+### For Branch Pushes
+1. Push commits to any branch (except `main`)
+2. Check the workflow run for the deployment URL in the summary
+3. Access your preview at: `https://<owner>.github.io/<repo>/branch/<branch-name>-<sha>/`
+
+## Permissions Required
+
+The workflow needs the following permissions:
+- `contents: write` - To push to the gh-pages branch
+- `pull-requests: write` - To comment on pull requests
+- `pages: read` - To fetch the GitHub Pages URL
+
+## Build Process
+
+1. Install root dependencies and build the library
+2. Install example app dependencies
+3. Clean previous builds
+4. Generate API documentation
+5. Build example app with Parcel using custom `--public-url`
+6. Deploy to gh-pages branch in the appropriate subdirectory
+
+## Customization
+
+### Changing the Deployment Path Format
+
+Edit the "Determine deployment path" step in `.github/workflows/deploy-preview.yml`:
+
+```yaml
+- name: Determine deployment path
+  id: deployment-path
+  run: |
+    # Modify DEPLOY_DIR and BASE_HREF variables here
+```
+
+### Changing Build Configuration
+
+The build uses Parcel with the following options:
+- `--no-optimize`: Faster builds, easier debugging
+- `--public-url`: Dynamic base URL for assets
+
+To modify, edit the "Build example with base href" step.
+
+## Troubleshooting
+
+### Preview URL returns 404
+- Ensure GitHub Pages is enabled for the repository
+- Check that the gh-pages branch exists
+- Verify the deployment path in the workflow logs
+
+### Assets not loading
+- Check the browser console for failed requests
+- Verify the base href is correct in the deployed HTML
+- Ensure all asset paths are absolute URLs
+
+### Workflow fails to push
+- Check repository permissions
+- Verify the `GITHUB_TOKEN` has write access to contents

.github/workflows/deploy-preview.yml

@@ -0,0 +1,188 @@
+name: Deploy Preview to GitHub Pages
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pull-requests: write
+  pages: read
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Determine deployment path
+        id: deployment-path
+        run: |
+          # Get the GitHub Pages base URL
+          GH_PAGES_URL=$(gh api repos/${{ github.repository }}/pages --jq '.html_url' 2>/dev/null || echo "")
+
+          if [ -z "$GH_PAGES_URL" ]; then
+            echo "GitHub Pages not configured, using repository name as base"
+            REPO_NAME=$(echo "${{ github.repository }}" | cut -d'/' -f2)
+            GH_PAGES_URL="https://${{ github.repository_owner }}.github.io/${REPO_NAME}"
+          fi
+
+          # Remove trailing slash from base URL
+          GH_PAGES_URL=${GH_PAGES_URL%/}
+
+          # Determine if this is a PR or branch push
+          if [ "${{ github.event_name }}" = "pull_request" ]; then
+            PR_NUMBER="${{ github.event.pull_request.number }}"
+            REF="${{ github.event.pull_request.head.sha }}"
+            SHORT_REF=${REF:0:7}
+            DEPLOY_DIR="pr/${PR_NUMBER}-${SHORT_REF}"
+            BASE_HREF="${GH_PAGES_URL}/pr/${PR_NUMBER}-${SHORT_REF}/"
+          else
+            BRANCH_NAME="${{ github.ref_name }}"
+            # Sanitize branch name for use in paths
+            SAFE_BRANCH=$(echo "$BRANCH_NAME" | sed 's/[^a-zA-Z0-9-]/_/g')
+            REF="${{ github.sha }}"
+            SHORT_REF=${REF:0:7}
+            DEPLOY_DIR="branch/${SAFE_BRANCH}-${SHORT_REF}"
+            BASE_HREF="${GH_PAGES_URL}/branch/${SAFE_BRANCH}-${SHORT_REF}/"
+          fi
+
+          echo "deploy_dir=${DEPLOY_DIR}" >> $GITHUB_OUTPUT
+          echo "base_href=${BASE_HREF}" >> $GITHUB_OUTPUT
+          echo "gh_pages_url=${GH_PAGES_URL}" >> $GITHUB_OUTPUT
+
+          echo "Deployment directory: ${DEPLOY_DIR}"
+          echo "Base HREF: ${BASE_HREF}"
+        env:
+          GH_TOKEN: ${{ github.token }}
+
+      - name: Install root dependencies
+        run: npm install
+
+      - name: Build library
+        run: npm run build
+
+      - name: Install example dependencies
+        run: |
+          cd examples/typescript
+          npm install
+
+      - name: Build example with base href
+        run: |
+          cd examples/typescript
+          # Clean and generate docs first
+          npm run clean
+          npm run genDocs
+          # Build with the dynamic base href using custom script
+          npm run parcel:build:custom -- --public-url "${{ steps.deployment-path.outputs.base_href }}"
+
+      - name: Checkout gh-pages branch
+        id: checkout-gh-pages
+        run: |
+          # Try to checkout gh-pages branch
+          if git ls-remote --heads origin gh-pages | grep -q gh-pages; then
+            echo "gh-pages branch exists"
+            echo "exists=true" >> $GITHUB_OUTPUT
+          else
+            echo "gh-pages branch does not exist"
+            echo "exists=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Setup gh-pages branch
+        if: steps.checkout-gh-pages.outputs.exists == 'false'
+        run: |
+          # Create a temporary directory for gh-pages initialization
+          TEMP_DIR="${{ runner.temp }}/gh-pages-init"
+          mkdir -p "$TEMP_DIR"
+          cd "$TEMP_DIR"
+          git init
+          git checkout -b gh-pages
+          echo "# GitHub Pages - Preview Deployments" > README.md
+          echo "" >> README.md
+          echo "This branch contains preview deployments for pull requests and branches." >> README.md
+          git add README.md
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git commit -m "Initialize gh-pages branch"
+          git remote add origin https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git
+          git push -u origin gh-pages
+
+      - name: Checkout existing gh-pages
+        if: steps.checkout-gh-pages.outputs.exists == 'true'
+        uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+          path: gh-pages-repo
+
+      - name: Setup deployment directory
+        run: |
+          if [ "${{ steps.checkout-gh-pages.outputs.exists }}" = "false" ]; then
+            # Clone the newly created gh-pages branch
+            git clone --single-branch --branch gh-pages https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git gh-pages-repo
+          fi
+
+      - name: Deploy to gh-pages
+        run: |
+          DEPLOY_DIR="${{ steps.deployment-path.outputs.deploy_dir }}"
+
+          # Create deployment directory structure
+          mkdir -p "gh-pages-repo/${DEPLOY_DIR}"
+
+          # Copy built files to deployment directory
+          cp -r examples/typescript/dist/* "gh-pages-repo/${DEPLOY_DIR}/"
+
+          # Configure git
+          cd gh-pages-repo
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          # Commit and push
+          git add .
+          if git diff --staged --quiet; then
+            echo "No changes to deploy"
+          else
+            git commit -m "Deploy preview: ${{ steps.deployment-path.outputs.deploy_dir }}"
+            git push origin gh-pages
+          fi
+
+      - name: Comment on PR with preview URL
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const deployUrl = '${{ steps.deployment-path.outputs.base_href }}';
+            const deployDir = '${{ steps.deployment-path.outputs.deploy_dir }}';
+            const comment = `### 🚀 Preview Deployment Ready!
+
+            Your changes have been deployed to GitHub Pages:
+
+            **Preview URL:** [${deployUrl}](${deployUrl})
+
+            **Deployment Path:** \`${deployDir}\`
+
+            This preview will be updated with each new commit to this PR.`;
+
+            github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body: comment
+            });
+
+      - name: Output deployment summary
+        run: |
+          echo "## Deployment Summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Deployment URL:** [${{ steps.deployment-path.outputs.base_href }}](${{ steps.deployment-path.outputs.base_href }})" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Deployment Directory:** \`${{ steps.deployment-path.outputs.deploy_dir }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Event Type:** ${{ github.event_name }}" >> $GITHUB_STEP_SUMMARY
+

.github/workflows/pages.yml

@@ -39,6 +39,8 @@ jobs:
           cd examples/typescript
           npm install
           npm run build
+          pwd
+          cp ../../oembed.json ./dist/oembed.json
       - name: Setup Pages
         uses: actions/configure-pages@v2
       - name: Upload artifact

examples/typescript/package.json

@@ -5,12 +5,14 @@
   "source": "src/index.html",
   "scripts": {
     "build": "npm-run-all clean genDocs parcel:build",
+    "build:custom-base": "npm-run-all clean genDocs parcel:build:custom",
     "clean": "shx rm -rf dist .parcel-cache",
     "dev": "npm-run-all clean genDocs parcel:dev",
     "genDocs": "npm run genDocs:root && shx mkdir -p dist && shx cp -r ../../docs dist",
     "genDocs:root": "cd ../.. && npm run genDocs",
     "parcel:dev": "cross-env PARCEL_WORKERS=0 parcel src/index.html",
     "parcel:build": "cross-env PARCEL_WORKERS=0 parcel build src/index.html --no-optimize --public-url ./",
+    "parcel:build:custom": "cross-env PARCEL_WORKERS=0 parcel build src/index.html --no-optimize",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "parcelIgnore": [
@@ -20,11 +22,15 @@
   "license": "ISC",
   "devDependencies": {
     "@types/w3c-web-usb": "^1.0.10",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.1",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.8.3",
     "parcel-resolver-ignore": "^2.1.5",
     "shx": "^0.3.4",
+    "stream-browserify": "^3.0.0",
+    "string_decoder": "^1.3.0",
     "typescript": "^4.9.4",
     "web-serial-polyfill": "^1.0.15"
   }