initial commit

.github/workflows/github-pages.yml

@@ -0,0 +1,72 @@
+name: Build for Pages
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Configure GitHub Pages
+        if: ${{ !env.ACT }}
+        uses: actions/[email protected]
+
+      - name: Install dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+
+      - name: Build
+        run: "npm run build"
+
+      - name: Upload artifact
+        uses: actions/[email protected]
+        if: ${{ !env.ACT }}
+        with:
+          path: .
+
+  build-demos:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Configure GitHub Pages
+        if: ${{ !env.ACT }}
+        uses: actions/[email protected]
+
+      - name: Install dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+
+      - name: Build
+        run: "npm run build-demos"
+
+      - name: Upload artifact
+        uses: actions/[email protected]
+        if: ${{ !env.ACT }}
+        with:
+          path: .
+
+  deploy:
+    needs: build-demos
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+
+# Builds
+dist
+test/dist
+demos/dist
+
+# Web-platform-tests
+test/wpt
+test/report

.prettierignore

@@ -0,0 +1 @@
+.github

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

LICENSE.txt

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2024 Marco Pizzorusso <[email protected]>
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,61 @@
+# View Transitions API polyfill
+
+A polyfill for the [View Transitions API](https://drafts.csswg.org/css-view-transitions/).
+
+## Usage
+
+Import the module into your site:
+
+```js
+import 'view-transitions-polyfill';
+```
+
+Or:
+
+```html
+<script src="view-transitions-polyfill"></script>
+```
+
+### With Astro View Transitions
+
+You can use the polyfill with [Astro view transitions](https://docs.astro.build/en/guides/view-transitions/) by importing the script in the document as you would normally. For example, within a component:
+
+```html
+<script src="view-transitions-polyfill"></script>
+```
+
+## Development
+
+### Building
+
+Build the polyfill to `dist`:
+
+```
+npm run build
+```
+
+### Testing
+
+To test the polyfill, you can run [Web Platform Tests](https://web-platform-tests.org/index.html).
+You need to [set up your system](https://web-platform-tests.org/running-tests/from-local-system.html) before running tests.
+
+Run the tests with:
+
+```
+npm run test
+```
+
+This will generate report files in `test/report`.
+
+The polyfill only loads its functions into the browser if it does not already natively support the View Transitions API.
+You can run the tests with a version of the polyfill that avoids this check with:
+
+```
+npm run test-always-polyfill
+```
+
+You can view the tests' web pages in your browser with:
+
+```
+npm run test-debug
+```

demos/3d-transition/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>3D transition demo</title>
+    <link rel="stylesheet" href="../demo-styles.css" />
+    <link rel="stylesheet" href="./styles.css" />
+    <script type="module" src="../navigator-script.js"></script>
+  </head>
+  <body>
+    <header>
+      <a href="../../" data-demo-link="">Demo list</a>
+      <a href="./page-2.html">Go to page 2</a>
+      3D transition - Page 1
+    </header>
+    <main>
+      <h1>Page 1</h1>
+      <p>
+        Welcome! <a class="other-page" href="./page-2.html">Go to page 2</a>
+      </p>
+    </main>
+  </body>
+</html>

demos/3d-transition/page-2.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>3D transition demo</title>
+    <link rel="stylesheet" href="../demo-styles.css" />
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="prefetch" as="image" href="batman.svg" />
+    <script type="module" src="../navigator-script.js"></script>
+  </head>
+  <body>
+    <header>
+      <a href="../../" data-demo-link="">Demo list</a>
+      <a href="./index.html">Go to page 1</a>
+      3D transition - Page 2
+    </header>
+    <main class="page-2">
+      <h1>Page 2</h1>
+      <p>Click <a class="other-page" href="./index.html">Go to page 1</a></p>
+      <p>You are currently on page 2.</p>
+    </main>
+  </body>
+</html>

demos/3d-transition/styles.css

@@ -0,0 +1,52 @@
+::view-transition {
+  background: #000;
+  inset: 0;
+}
+
+::view-transition-group(root) {
+  perspective: 1000vw;
+}
+
+::view-transition-group(root),
+::view-transition-image-pair(root) {
+  transform-style: preserve-3d;
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  transform-style: preserve-3d;
+  mix-blend-mode: normal;
+  backface-visibility: hidden;
+  animation: none;
+}
+
+::view-transition-image-pair(root) {
+  animation: rotate 1s ease forwards;
+}
+.to-page-2::view-transition-new(root) {
+  animation-direction: normal;
+}
+.to-page-1::view-transition-image-pair(root) {
+  animation-direction: reverse;
+}
+
+.to-page-2::view-transition-new(root) {
+  transform: rotateY(90deg) translateZ(50vw) translateX(50vw);
+}
+.to-page-1::view-transition-old(root) {
+  transform: rotateY(90deg) translateZ(50vw) translateX(50vw);
+}
+
+@keyframes rotate {
+  from,
+  to {
+    transform-origin: right;
+  }
+  from {
+    transform: rotateY(0);
+  }
+  to {
+    transform: rotateY(-90deg) translateZ(100vw);
+  }
+}

demos/batman-transition/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Batman transition demo</title>
+    <link rel="stylesheet" href="../demo-styles.css" />
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="prefetch" as="image" href="batman.svg" />
+    <script type="module" src="./script.js"></script>
+  </head>
+  <body>
+    <header>
+      <a href="../../" data-demo-link="">Demo list</a>
+      <a href="./page-2.html">Go to page 2</a>
+      Batman transition - Page 1
+    </header>
+    <main>
+      <h1>Page 1</h1>
+      <p>
+        Welcome! <a class="other-page" href="./page-2.html">Go to page 2</a>
+      </p>
+    </main>
+  </body>
+</html>

demos/batman-transition/page-2.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Batman transition demo</title>
+    <link rel="stylesheet" href="../demo-styles.css" />
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="prefetch" as="image" href="batman.svg" />
+    <script type="module" src="./script.js"></script>
+  </head>
+  <body>
+    <header>
+      <a href="../../" data-demo-link="">Demo list</a>
+      <a href="./index.html">Go to page 1</a>
+      Batman transition - Page 2
+    </header>
+    <main class="page-2">
+      <h1>Page 2</h1>
+      <p>Click <a class="other-page" href="./index.html">Go to page 1</a></p>
+      <p>You are currently on page 2.</p>
+    </main>
+  </body>
+</html>

demos/batman-transition/script.js

@@ -0,0 +1,26 @@
+import { getPageContent, onLinkNavigate } from '../utils.js';
+import PolyfillSwitch from '../polyfill-switch-component.js';
+import startViewTransition from '../transition-helper.js';
+
+document.body.appendChild(new PolyfillSwitch());
+
+function decodeBatmanImage() {
+  const img = new Image();
+  img.src = 'batman.svg';
+  return img.decode();
+}
+
+onLinkNavigate(async (toPath) => {
+  const content = await getPageContent(toPath);
+  const div = document.createElement('div');
+  div.style.viewTransitionName = 'batman';
+  div.style.contain = 'paint';
+  document.body.append(div);
+
+  const transition = startViewTransition(async () => {
+    document.body.innerHTML = content;
+    document.body.appendChild(new PolyfillSwitch());
+    await decodeBatmanImage();
+  });
+  await transition.finished;
+});