update polyfill and add workflow

bloomberg · May 22, 2024 · e9ef744 · e9ef744
1 parent 5bb474a
commit e9ef744
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 14 deletions.
diff --git a/.github/workflows/gh-pages.yml 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
@@ -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
@@ -25,7 +25,7 @@
   </head>
   <body>
     <div containertiming="wrapper" class="container">
-      <img src="./bookshelf.jpg" style="height: 40vh" />;
+      <img src="./bookshelf.jpg" style="height: 40vh" />
       <div>
         <h2>Some title for the container</h2>
         <p>

diff --git 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
@@ -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,
             );
           }
         }