BREAKING CHANGE: rename in/out → mount/unmount

src/_examples/components/to-do/_to-do.ts

@@ -58,14 +58,14 @@ export class Todo extends Component {
         <${TaskItem}
           prop:item=${item}
           prop:removeItem=${() => this.#items.splice(i.value, 1)}
-          destiny:in=${animateIn}
-          destiny:out=${animateOut}
+          destiny:mount=${animateIn}
+          destiny:unmount=${animateOut}
         />
       `)}
       ${this.#items.length.falsy(xml`
         <li
-          destiny:in=${animateIn}
-          destiny:out=${animateOut}
+          destiny:mount=${animateIn}
+          destiny:unmount=${animateOut}
         >
           <i>No items to show</i>
         </li>

src/_examples/components/to-do/task-item.ts

@@ -86,7 +86,7 @@ export class TaskItem extends Component<{
             type="text"
             prop:value=${this.item.title}
             required=""
-            destiny:in=${(e: HTMLInputElement) => e.focus()}
+            destiny:mount=${(e: HTMLInputElement) => e.focus()}
           />
           <input
             type="submit"

src/componentLogic/Component.ts

@@ -84,7 +84,7 @@ export class Component extends HTMLElement {
     }
   }
 
-  out (
+  unmount (
     callback: (element: HTMLElement) => Promise<void> | void,
   ): this {
     deferredElements.set(

src/componentLogic/DestinyFallback.ts

@@ -21,7 +21,7 @@ export class DestinyFallback extends Component {
         xml`
           <${component}
             destiny:ref=${this.forwardProps}
-            destiny:in=${(element: HTMLElement) => element.append(...this.childNodes)}
+            destiny:mount=${(element: HTMLElement) => element.append(...this.childNodes)}
           />
         `.content,
       );

src/parsing/Slot.ts

@@ -106,7 +106,7 @@ export class Slot {
   }
 
   /**
-   * Removes all the associated content from the DOM and destroys the `Slot`. Note: this is an async function and will wait for any exit animations or other tasks to finish before removing anything. Exit tasks for HTML elements are defined by the `destiny:out` attribute; if the callback function given to it returns a `Promise`, that's what's being awaited before removal.
+   * Removes all the associated content from the DOM and destroys the `Slot`. Note: this is an async function and will wait for any exit animations or other tasks to finish before removing anything. Exit tasks for HTML elements are defined by the `destiny:unmount` attribute; if the callback function given to it returns a `Promise`, that's what's being awaited before removal.
    */
   async remove (): Promise<void> {
     await this.#disposeCurrentNodes();

src/parsing/deferredElements.ts

@@ -1,5 +1,5 @@
 /**
- * Lists elements which are to be waited on before removal. See `attributeNamespaces/destiny.js` for details (`destiny:out`).
+ * Lists elements which are to be waited on before removal. See `attributeNamespaces/destiny.js` for details (`destiny:unmount`).
  */
 export const deferredElements = new Map<
   HTMLElement,

src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destiny.ts

@@ -1,5 +1,5 @@
-import { destinyOut } from "./destinyOut.js";
-import { destinyIn } from "./destinyIn.js";
+import { destinyUnmount } from "./destinyUnmount.js";
+import { destinyMount } from "./destinyMount.js";
 import { destinyRef } from "./destinyRef.js";
 import type { TElementData } from "../TElementData.js";
 
@@ -16,12 +16,12 @@ export function destiny (
         destinyRef(value, element);
       break;
 
-      case "in":
-        destinyIn(value, element);
+      case "mount":
+        destinyMount(value, element);
       break;
 
-      case "out":
-        destinyOut(element, value);
+      case "unmount":
+        destinyUnmount(element, value);
       break;
 
       default:

src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyIn.ts → src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyMount.ts

@@ -1,23 +1,23 @@
 /**
- * `destiny:in` takes a callback function, which will be called 
+ * `destiny:mount` takes a callback function, which will be called 
  * once the element has been created.
  * 
  * Example usage: 
  * ```html
- * <div destiny:in=${
+ * <div destiny:mount=${
  *   element => element.animate(
  *     [{opacity: 0}, {height: 1}],
  *     {duration: 300, fill: "forwards"},
  *   ).play()
  * }> This will fade in! </div>
  * ```
  */
-export function destinyIn (
+export function destinyMount (
   value: unknown,
   element: HTMLElement,
 ): void {
   if (!(value instanceof Function)) {
-    throw new TypeError("Value of destiny:in must be a function");
+    throw new TypeError("Value of destiny:mount must be a function");
   }
   queueMicrotask( // wait for stack to clear
     () => queueMicrotask( // let other microtasks run first

src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyOut.ts → src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyUnmount.ts

@@ -1,14 +1,14 @@
 import { deferredElements } from "../../../deferredElements.js";
 
 /**
- * `destiny:out` takes a callback function which will be called
+ * `destiny:unmount` takes a callback function which will be called
  * when the element is about to be removed from DOM. If the 
  * callback returns a promise, that promise will be awaited on
  * and the element is removed once it resolves.
  * 
  * Example usage: 
  * ```html
- * <div destiny:in=${
+ * <div destiny:unmount=${
  *   element => {
  *     const anim = element.animate(
  *       [{opacity: 0}, {height: 1}],
@@ -20,7 +20,7 @@ import { deferredElements } from "../../../deferredElements.js";
  * }> This will fade out! </div>
  * ```
  */
-export function destinyOut (
+export function destinyUnmount (
   element: HTMLElement,
   value: unknown,
 ): void {