From 80abbed9e677fdf68452d00adb263ec27d7745f3 Mon Sep 17 00:00:00 2001 From: 0kku <40242277+0kku@users.noreply.github.com> Date: Sat, 8 May 2021 20:04:30 +0300 Subject: [PATCH] =?UTF-8?q?BREAKING=20CHANGE:=20rename=20in/out=20?= =?UTF-8?q?=E2=86=92=20mount/unmount?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_examples/components/to-do/_to-do.ts | 8 ++++---- src/_examples/components/to-do/task-item.ts | 2 +- src/componentLogic/Component.ts | 2 +- src/componentLogic/DestinyFallback.ts | 2 +- src/parsing/Slot.ts | 2 +- src/parsing/deferredElements.ts | 2 +- .../hookAttributeSlotsUp/elementData/destiny.ts | 12 ++++++------ .../elementData/{destinyIn.ts => destinyMount.ts} | 8 ++++---- .../elementData/{destinyOut.ts => destinyUnmount.ts} | 6 +++--- 9 files changed, 22 insertions(+), 22 deletions(-) rename src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/{destinyIn.ts => destinyMount.ts} (71%) rename src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/{destinyOut.ts => destinyUnmount.ts} (84%) diff --git a/src/_examples/components/to-do/_to-do.ts b/src/_examples/components/to-do/_to-do.ts index aa85044..4ac36c2 100644 --- a/src/_examples/components/to-do/_to-do.ts +++ b/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`
  • No items to show
    • diff --git a/src/_examples/components/to-do/task-item.ts b/src/_examples/components/to-do/task-item.ts index e486c68..2efb4ab 100644 --- a/src/_examples/components/to-do/task-item.ts +++ b/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()} /> Promise | void, ): this { deferredElements.set( diff --git a/src/componentLogic/DestinyFallback.ts b/src/componentLogic/DestinyFallback.ts index 019ec67..53ea971 100644 --- a/src/componentLogic/DestinyFallback.ts +++ b/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, ); diff --git a/src/parsing/Slot.ts b/src/parsing/Slot.ts index 8d578b2..8683c09 100644 --- a/src/parsing/Slot.ts +++ b/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 { await this.#disposeCurrentNodes(); diff --git a/src/parsing/deferredElements.ts b/src/parsing/deferredElements.ts index 121f66d..06ba8ed 100644 --- a/src/parsing/deferredElements.ts +++ b/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, diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destiny.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destiny.ts index 9b97d4b..a695952 100644 --- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destiny.ts +++ b/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: diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyIn.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyMount.ts similarity index 71% rename from src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyIn.ts rename to src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyMount.ts index aea0689..0ae7685 100644 --- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyIn.ts +++ b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyMount.ts @@ -1,10 +1,10 @@ /** - * `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 - *
    element.animate( * [{opacity: 0}, {height: 1}], * {duration: 300, fill: "forwards"}, @@ -12,12 +12,12 @@ * }> This will fade in!
    * ``` */ -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 diff --git a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyOut.ts b/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyUnmount.ts similarity index 84% rename from src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyOut.ts rename to src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyUnmount.ts index 5b93860..e00c1c3 100644 --- a/src/parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/destinyOut.ts +++ b/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 - *
    { * const anim = element.animate( * [{opacity: 0}, {height: 1}], @@ -20,7 +20,7 @@ import { deferredElements } from "../../../deferredElements.js"; * }> This will fade out!
    * ``` */ -export function destinyOut ( +export function destinyUnmount ( element: HTMLElement, value: unknown, ): void {