From e9ef744c2eef17c683188a8a829093ab6bf352c8 Mon Sep 17 00:00:00 2001 From: jwilliams720 Date: Wed, 22 May 2024 16:49:28 +0100 Subject: [PATCH] update polyfill and add workflow --- .github/workflows/gh-pages.yml | 44 ++++++++++++++++++++++++++++++ .gitignore | 1 + examples/adding-content/index.html | 2 +- examples/table/index.js | 9 ++---- polyfill.ts | 14 +++++----- 5 files changed, 56 insertions(+), 14 deletions(-) create mode 100644 .github/workflows/gh-pages.yml diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml new file mode 100644 index 0000000..be0fc6e --- /dev/null +++ b/.github/workflows/gh-pages.yml @@ -0,0 +1,44 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: [$default-branch] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Install NodeJS + uses: actions/setup-node@v4 + with: + node-version: 21 + - name: Install & build TypeScript + run: npm ci + run: npm run build + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: "." + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index 2833e23..85b90dc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules polyfill.js +polyfill.js.map diff --git a/examples/adding-content/index.html b/examples/adding-content/index.html index 8c09a1f..42b662f 100644 --- a/examples/adding-content/index.html +++ b/examples/adding-content/index.html @@ -25,7 +25,7 @@
- ; +

Some title for the container

diff --git a/examples/table/index.js b/examples/table/index.js index e36e703..edcc4e8 100644 --- a/examples/table/index.js +++ b/examples/table/index.js @@ -1,15 +1,12 @@ window.ctDebug = true; -const observer = new PerformanceObserver((list) => { +const observer = new ContainerPerformanceObserver((list) => { list.getEntries().forEach((entry) => { console.log(entry); }); -}, "newAreaPainted"); - -observer.observe({ - type: "element", - buffered: true, }); +observer.observe({ method: "newAreaPainted" }); + window.setTimeout(() => { document.querySelectorAll(".dynupdate").forEach((elm) => { elm.innerHTML = "dynamic update"; diff --git a/polyfill.ts b/polyfill.ts index 849d632..a14ed4a 100644 --- a/polyfill.ts +++ b/polyfill.ts @@ -287,7 +287,7 @@ class ContainerPerformanceObserver { // Because we've updated a container we should mark it as updated so we can return it with the list containerRootUpdates.add(closestRoot); - lastResolvedData.intersectionRect = newRect; + // lastResolvedData.intersectionRect = newRect; // If nested update any parents this.updateParentIfExists(closestRoot); @@ -423,14 +423,14 @@ class ContainerPerformanceObserver { */ callbackWrapper(list: PerformanceObserverEntryList) { // Reset coordData for each container - containerRootDataMap.forEach((val) => { - val.coordData = null; - }); + // containerRootDataMap.forEach((val) => { + // val.coordData = null; + // }); // Have any containers been updated? containerRootUpdates.clear(); - // Reset last resolved data state + // Reset last resolved data state, we want to re-use coordinate and size if aggregated lastResolvedData = { paintedRects: new Set() }; const processEntries = (entry: PerformanceEntry): void => { @@ -499,10 +499,10 @@ class ContainerPerformanceObserver { ContainerPerformanceObserver.paintDebugOverlay(rects); return; } - if (lastResolvedData.intersectionRect) { + if (resolvedRootData?.intersectionRect) { // debug mode shows the painted rectangles ContainerPerformanceObserver.paintDebugOverlay( - lastResolvedData.intersectionRect, + resolvedRootData.intersectionRect, ); } }