feat: add beforeMount & beforeUnmount lifecycle and Transition

Author: w-xuefeng

packages/runtime-core/src/core/component/builtin/index.ts

@@ -0,0 +1 @@
+export { default as Transition } from "./transition";

packages/runtime-core/src/core/component/builtin/transition.ts

@@ -0,0 +1,203 @@
+import { KebabToCamel } from "../../../utils/dom";
+import { ref, computed, handleWithFunType } from "../../reactive";
+import { type IDomilyRenderOptions } from "../../render";
+
+const classNames = (value: (string | undefined)[]) => {
+  return value.filter(Boolean).join(" ");
+};
+
+const nextFrame = (callback: FrameRequestCallback) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(callback);
+  });
+};
+
+function getTotalTransitionTime(element: HTMLElement) {
+  if (!(element instanceof HTMLElement)) {
+    return 0;
+  }
+  const style = window.getComputedStyle(element);
+  const durations = style.transitionDuration.split(",").map((d) => d.trim());
+  const delays = style.transitionDelay.split(",").map((d) => d.trim());
+
+  function toMilliseconds(time: string) {
+    if (time.endsWith("ms")) {
+      return parseFloat(time);
+    } else if (time.endsWith("s")) {
+      return parseFloat(time) * 1000;
+    }
+    return 0;
+  }
+
+  const durationArray = durations.map(toMilliseconds);
+  let delayArray = delays.map(toMilliseconds);
+
+  // 如果两个数组长度不同，则重复较短的数组直到匹配较长的数组
+  const maxLength = Math.max(durationArray.length, delayArray.length);
+  if (durationArray.length < maxLength) {
+    // 重复durationArray直到长度等于maxLength
+    durationArray.length = maxLength;
+    for (let i = durationArray.length; i < maxLength; i++) {
+      durationArray[i] = durationArray[i % durationArray.length];
+    }
+  }
+  if (delayArray.length < maxLength) {
+    // 重复delayArray直到长度等于maxLength
+    delayArray.length = maxLength;
+    for (let i = delayArray.length; i < maxLength; i++) {
+      delayArray[i] = delayArray[i % delayArray.length];
+    }
+  }
+
+  // 计算每个属性的总时间（持续时间+延迟时间）
+  const totalTimes = durationArray.map((dur, index) => dur + delayArray[index]);
+  // 取最大值
+  const maxTotalTime = Math.max(...totalTimes);
+  return maxTotalTime;
+}
+
+interface IAnimationClassNames {
+  enterFrom: string;
+  enterActive: string;
+  enterTo: string;
+  leaveFrom: string;
+  leaveActive: string;
+  leaveTo: string;
+}
+
+export default function Transition(props?: {
+  name?: string;
+  duration?: number | { enter?: number; leave?: number };
+  type?: "transition" | "animation";
+  slot?: IDomilyRenderOptions;
+}) {
+  const { name, slot, type = "transition", duration } = props || {};
+
+  if (!name || !slot) {
+    return slot;
+  }
+
+  const animationClassNames = Object.fromEntries(
+    [
+      "enter-from",
+      "enter-active",
+      "enter-to",
+      "leave-from",
+      "leave-active",
+      "leave-to",
+    ].map((e) => [KebabToCamel(e), `${name}-${e}`])
+  ) as unknown as IAnimationClassNames;
+
+  const cls = ref<string>("");
+
+  const enter = (dom: HTMLElement | Node | null) => {
+    let timer: number;
+    nextFrame(() => {
+      if (!dom) {
+        return;
+      }
+      const end = () => {
+        clearTimeout(timer);
+        if (cls.value === "") {
+          return;
+        }
+        cls.value = "";
+      };
+
+      dom?.addEventListener(type + "end", end, { once: true });
+
+      const totalTransitionTime = getTotalTransitionTime(dom as HTMLElement);
+
+      const timeout =
+        typeof duration === "number"
+          ? duration
+          : typeof duration === "object" && typeof duration?.enter === "number"
+          ? duration.enter
+          : totalTransitionTime + 1;
+
+      timer = window.setTimeout(end, timeout);
+
+      cls.value = classNames([
+        animationClassNames.enterActive,
+        animationClassNames.enterTo,
+      ]);
+    });
+  };
+  const leave = (dom: HTMLElement | Node | null) => {
+    const { promise, resolve } = Promise.withResolvers<void>();
+    cls.value = classNames([
+      animationClassNames.leaveFrom,
+      animationClassNames.leaveActive,
+    ]);
+
+    let timer: number;
+
+    nextFrame(() => {
+      if (!dom) {
+        return;
+      }
+      const end = () => {
+        clearTimeout(timer);
+        if (cls.value === "") {
+          resolve();
+          return;
+        }
+        cls.value = "";
+        resolve();
+      };
+
+      dom?.addEventListener(type + "end", end, { once: true });
+
+      const totalTransitionTime = getTotalTransitionTime(dom as HTMLElement);
+
+      const timeout =
+        typeof duration === "number"
+          ? duration
+          : typeof duration === "object" && typeof duration?.leave === "number"
+          ? duration.leave
+          : totalTransitionTime + 1;
+
+      timer = window.setTimeout(end, timeout);
+
+      cls.value = classNames([
+        animationClassNames.leaveActive,
+        animationClassNames.leaveTo,
+      ]);
+    });
+    return promise;
+  };
+
+  const originalBeforeMount = slot.beforeMount;
+  const originalMounted = slot.mounted;
+  const originalBeforeUnmount = slot.beforeUnmount;
+  const originalUnmounted = slot.unmounted;
+  const originalClassName = slot.className;
+
+  slot.beforeMount = (dom: HTMLElement | Node | null) => {
+    typeof originalBeforeMount === "function" && originalBeforeMount(dom);
+    cls.value = classNames([
+      animationClassNames.enterFrom,
+      animationClassNames.enterActive,
+    ]);
+  };
+
+  slot.mounted = (dom: HTMLElement | Node | null) => {
+    typeof originalMounted === "function" && originalMounted(dom);
+    enter(dom);
+  };
+
+  slot.beforeUnmount = (dom: HTMLElement | Node | null) => {
+    typeof originalBeforeUnmount === "function" && originalBeforeUnmount(dom);
+    return leave(dom);
+  };
+
+  slot.unmounted = () => {
+    typeof originalUnmounted === "function" && originalUnmounted();
+  };
+
+  slot.className = computed(() =>
+    classNames([handleWithFunType(originalClassName), cls.value])
+  );
+
+  return slot;
+}

packages/runtime-core/src/core/component/index.ts

@@ -7,6 +7,8 @@ import type {
 import DomilyRenderSchema from "../render/schema";
 import { domilyChildToDOMilyMountableRender } from "../render/shared/parse";
 
+export * from "./builtin";
+
 export interface DOMilyComponent {
   (props?: any):
     | WithFuncType<DomilyRenderSchema>

packages/runtime-core/src/core/reactive/index.ts

@@ -1,6 +1,6 @@
 export * from "alien-signals";
-export { default as ref } from "./ref";
-export { default as reactive } from "./reactive";
+export { default as ref, shallowRef } from "./ref";
+export { default as reactive, shallowReactive } from "./reactive";
 export { computed, signalComputed } from "./computed";
 export * from "./handle-effect";
 export * from "./type";

packages/runtime-core/src/core/reactive/reactive.ts

@@ -52,3 +52,51 @@ export default function reactive<T extends object>(initialValue: T) {
     },
   });
 }
+
+export function shallowReactive<T extends object>(initialValue: T) {
+  const value = signal<T>(initialValue);
+  const setter = (newValue: Partial<T>) => {
+    /**
+     * if newValue is an array, we assume it is a new value for the whole object
+     * otherwise, we merge the newValue with the existing value
+     * this allows us to update a single property or the whole object
+     */
+    const nextValue = (
+      Array.isArray(newValue)
+        ? newValue
+        : {
+            ...value(),
+            ...newValue,
+          }
+    ) as T;
+    value(nextValue);
+  };
+  return new Proxy(value as Reactive<T>, {
+    get(target, p, receiver) {
+      return Reflect.get(target(), p, receiver);
+    },
+    set(_target, p, newValue) {
+      setter({ [p]: newValue } as Partial<T>);
+      return true;
+    },
+    deleteProperty(target, p) {
+      const nextValue = { ...target() };
+      Reflect.deleteProperty(nextValue, p);
+      value(nextValue);
+      return true;
+    },
+    defineProperty(target, p, attributes) {
+      const nextValue = { ...target() };
+      Reflect.defineProperty(nextValue, p, attributes);
+      value(nextValue);
+      return true;
+    },
+    apply(target, thisArg, argArray) {
+      if (argArray.length === 0) {
+        return Reflect.apply(target, thisArg, argArray);
+      }
+      setter(argArray[0]);
+      return;
+    },
+  });
+}

packages/runtime-core/src/core/reactive/ref.ts

@@ -17,3 +17,17 @@ export default function ref<T>(value: T): Ref<T> {
   });
   return signalValue as Ref<T>;
 }
+
+export function shallowRef<T>(value: T): Ref<T> {
+  const signalValue = signal(value);
+  Reflect.defineProperty(signalValue, "value", {
+    get() {
+      const rs = signalValue();
+      return rs;
+    },
+    set(newValue: T) {
+      signalValue(newValue);
+    },
+  });
+  return signalValue as Ref<T>;
+}