Merge 4358991 into a366878

src/template/helpers/index.js

@@ -0,0 +1,3 @@
+export { default as resolve } from "./resolve.js";
+export { default as set } from "./set.js";
+export { default as transition } from "./transition.js";

src/template/helpers/resolve.js

@@ -0,0 +1,33 @@
+import resolveTemplateValue from "../resolvers/value.js";
+
+const promiseMap = new WeakMap();
+export default function resolve(promise, placeholder, delay = 200) {
+  return function fn(host, target) {
+    const useLayout = fn.useLayout;
+    let timeout;
+
+    if (placeholder) {
+      timeout = setTimeout(() => {
+        timeout = undefined;
+        resolveTemplateValue(host, target, placeholder, undefined, useLayout);
+      }, delay);
+    }
+
+    promiseMap.set(target, promise);
+
+    promise.then((value) => {
+      if (timeout) clearTimeout(timeout);
+
+      if (promiseMap.get(target) === promise) {
+        resolveTemplateValue(
+          host,
+          target,
+          value,
+          placeholder && !timeout ? placeholder : undefined,
+          useLayout,
+        );
+        promiseMap.set(target, null);
+      }
+    });
+  };
+}

src/template/helpers.js → src/template/helpers/set.js

@@ -1,5 +1,4 @@
-import { storePointer } from "../utils.js";
-import resolveTemplateValue from "./resolvers/value.js";
+import { storePointer } from "../../utils.js";
 
 function resolveValue({ target, detail }, setter) {
   let value;
@@ -34,7 +33,7 @@ function getPartialObject(name, value) {
 
 const stringCache = new Map();
 
-export function set(property, valueOrPath) {
+export default function set(property, valueOrPath) {
   if (!property) {
     throw Error(
       `The first argument must be a property name or an object instance: ${property}`,
@@ -87,35 +86,3 @@ export function set(property, valueOrPath) {
 
   return fn;
 }
-
-const promiseMap = new WeakMap();
-export function resolve(promise, placeholder, delay = 200) {
-  return function fn(host, target) {
-    const useLayout = fn.useLayout;
-    let timeout;
-
-    if (placeholder) {
-      timeout = setTimeout(() => {
-        timeout = undefined;
-        resolveTemplateValue(host, target, placeholder, undefined, useLayout);
-      }, delay);
-    }
-
-    promiseMap.set(target, promise);
-
-    promise.then((value) => {
-      if (timeout) clearTimeout(timeout);
-
-      if (promiseMap.get(target) === promise) {
-        resolveTemplateValue(
-          host,
-          target,
-          value,
-          placeholder && !timeout ? placeholder : undefined,
-          useLayout,
-        );
-        promiseMap.set(target, null);
-      }
-    });
-  };
-}

src/template/helpers/transition.js

@@ -0,0 +1,33 @@
+import global from "../../global.js";
+import { deferred, stringifyElement } from "../../utils.js";
+
+const isSupported = global.document.startViewTransition !== undefined;
+
+let instance;
+export default function transition(template) {
+  // istanbul ignore next
+  if (!isSupported) return template;
+
+  return function fn(host, target) {
+    if (instance) {
+      console.warn(
+        `${stringifyElement(
+          host,
+        )}: view transition already started in ${stringifyElement(instance)}`,
+      );
+      template(host, target);
+      return;
+    }
+
+    template.useLayout = fn.useLayout;
+    instance = host;
+
+    global.document.startViewTransition(() => {
+      template(host, target);
+
+      return deferred.then(() => {
+        instance = undefined;
+      });
+    });
+  };
+}

src/template/index.js

@@ -1,6 +1,7 @@
 import { compileTemplate } from "./core.js";
 import { getPlaceholder } from "./utils.js";
-import * as helpers from "./helpers.js";
+
+import * as helpers from "./helpers/index.js";
 
 const PLACEHOLDER = getPlaceholder();
 const PLACEHOLDER_SVG = getPlaceholder("svg");

src/template/layout.js

@@ -159,6 +159,7 @@ const rules = {
       [args[args.length - 2]]: `var(--${args.join("-")})`,
     };
   },
+  view: (props, value) => ({ "view-transition-name": value }),
 };
 
 const dimensions = {

test/spec/html.js

@@ -1084,6 +1084,64 @@ describe("html:", () => {
     });
   });
 
+  describe("transition helper", () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement("div");
+      document.body.appendChild(el);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(el);
+    });
+
+    it("should render component", () => {
+      define({
+        tag: "test-html-transition-deep",
+        content: () => html`<div>Hello</div>`,
+      });
+
+      define({
+        tag: "test-html-transition",
+        value: "test",
+        content: ({ value }) =>
+          html.transition(
+            html`
+              <template layout>
+                <div>${value}</div>
+                <test-html-transition-deep></test-html-transition-deep>
+              </template>
+            `,
+          ),
+      });
+
+      html`<test-html-transition></test-html-transition>`({}, el);
+
+      return resolveTimeout(() => {
+        expect(el.children[0].children[0].innerHTML).toEqual("test");
+        expect(el.children[0].children[1].innerHTML).toEqual(
+          "<div>Hello</div>",
+        );
+      });
+    });
+
+    if (document.startViewTransition) {
+      it("warns if try to start transition while another is in progress", () => {
+        spyOn(console, "warn");
+
+        html`
+          <test-html-transition></test-html-transition>
+          <test-html-transition></test-html-transition>
+        `({}, el);
+
+        return resolveTimeout(() => {
+          expect(console.warn).toHaveBeenCalledTimes(1);
+        });
+      });
+    }
+  });
+
   describe("style method", () => {
     const render = () => html` <div>content</div> `;
 

test/spec/layout.js

@@ -1,7 +1,7 @@
 import { html } from "../../src/template/index.js";
 import { resolveTimeout } from "../helpers.js";
 
-fdescribe("layout:", () => {
+describe("layout:", () => {
   let host;
 
   beforeEach(() => {
@@ -568,4 +568,17 @@ fdescribe("layout:", () => {
     const styles1 = window.getComputedStyle(host.children[1]);
     expect(styles1.font).toBe("24px sans-serif");
   });
+
+  if (document.startViewTransition) {
+    it("supports transition view name", () => {
+      html`
+        <template layout>
+          <div layout="view:test"></div>
+        </template>
+      `(host);
+
+      const styles0 = window.getComputedStyle(host.children[0]);
+      expect(styles0.viewTransitionName).toBe("test");
+    });
+  }
 });

types/index.d.ts

@@ -342,6 +342,8 @@ declare module "hybrids" {
       delay?: number,
     ): UpdateFunction<E>;
 
+    function transition<E>(template: UpdateFunction<E>): UpdateFunction<E>;
+
     function msg(parts: TemplateStringsArray, ...args: unknown[]): string;
   }