@inglorious/web 6.2.0 → 6.3.0

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@inglorious/web",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
-  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "contributors": [
+    {
+      "name": "Luis Cruz",
+      "email": "stackbuilder1228@gmail.com",
+      "url": "https://topstar-ai.github.io/"
+    }
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -38,6 +45,10 @@
       "types": "./types/directives/*.d.ts",
       "import": "./src/directives/*.js"
     },
+    "./element-size": {
+      "types": "./types/element-size.d.ts",
+      "import": "./src/element-size/index.js"
+    },
     "./form": {
       "types": "./types/form.d.ts",
       "import": "./src/form/index.js"

package/src/element-size/handlers.js

@@ -0,0 +1,108 @@
+/**
+ * @typedef {import("../../types/element-size.js").ElementSizeEntity} ElementSizeEntity
+ * @typedef {import("../../types/element-size.js").ElementSizeSize} ElementSizeSize
+ */
+
+// Observers aren't serializable, so they're kept here by id, not on the entity.
+const observers = new Map()
+
+/**
+ * Initializes the entity state and starts observing the target element's size.
+ * @param {ElementSizeEntity} entity - The element size entity.
+ * @param {{ notify: Function }} api - The store API.
+ */
+export function create(entity, _, api) {
+  entity.width ??= null
+  entity.height ??= null
+  entity.isWatching ??= false
+
+  elementSizeWatch(entity, _, api)
+}
+
+/**
+ * Disconnects the observer before the entity is destroyed.
+ * @param {ElementSizeEntity} entity - The element size entity.
+ */
+export function destroy(entity) {
+  elementSizeUnwatch(entity)
+}
+
+/**
+ * Starts observing the target element for size changes.
+ * @param {ElementSizeEntity} entity - The element size entity.
+ * @param {{ notify: Function }} api - The store API.
+ */
+export function elementSizeWatch(entity, _, api) {
+  entity.isSupported = isSupported()
+
+  if (!entity.isSupported || observers.has(entity.id)) {
+    return
+  }
+
+  const element = getElement(entity)
+
+  if (!element) {
+    return
+  }
+
+  // Snapshot the id while the draft proxy is still live: the callback below
+  // runs after this handler returns, when Mutative has revoked the draft.
+  const id = entity.id
+
+  const observer = new globalThis.ResizeObserver((entries) => {
+    api.notify(`#${id}:elementSizeChange`, getSize(entries))
+  })
+  observer.observe(element)
+
+  observers.set(id, observer)
+  entity.isWatching = true
+}
+
+/**
+ * Stores the latest observed dimensions.
+ * @param {ElementSizeEntity} entity - The element size entity.
+ * @param {ElementSizeSize} size - The observed dimensions.
+ */
+export function elementSizeChange(entity, size) {
+  entity.width = size.width
+  entity.height = size.height
+}
+
+/**
+ * Stops observing size changes and drops the observer from the registry.
+ * @param {ElementSizeEntity} entity - The element size entity.
+ */
+export function elementSizeUnwatch(entity) {
+  const observer = observers.get(entity.id)
+
+  if (observer) {
+    observer.disconnect()
+    observers.delete(entity.id)
+  }
+
+  entity.isWatching = false
+}
+
+function getSize(entries) {
+  const [entry] = entries
+  const rect = entry.contentRect
+  return { width: rect.width, height: rect.height }
+}
+
+function getElement(entity) {
+  const doc = globalThis.document
+
+  if (!doc) {
+    return null
+  }
+
+  const selected = entity.selector ? doc.querySelector(entity.selector) : null
+  return selected ?? doc.documentElement
+}
+
+function isSupported() {
+  return (
+    typeof globalThis.ResizeObserver !== "undefined" &&
+    Boolean(globalThis.document?.documentElement)
+  )
+}

package/src/element-size/index.js

@@ -0,0 +1,3 @@
+import * as handlers from "./handlers.js"
+
+export const ElementSize = { ...handlers }

package/types/element-size.d.ts

@@ -0,0 +1,26 @@
+import { Api } from "./mount"
+
+export interface ElementSizeEntity {
+  height: number | null
+  id: string | number
+  isSupported: boolean
+  isWatching: boolean
+  selector?: string | null
+  type?: "ElementSize"
+  width: number | null
+}
+
+export interface ElementSizeSize {
+  height: number
+  width: number
+}
+
+export interface ElementSizeType {
+  create(entity: ElementSizeEntity, payload: unknown, api: Api): void
+  destroy(entity: ElementSizeEntity): void
+  elementSizeChange(entity: ElementSizeEntity, size: ElementSizeSize): void
+  elementSizeWatch(entity: ElementSizeEntity, payload: unknown, api: Api): void
+  elementSizeUnwatch(entity: ElementSizeEntity): void
+}
+
+export declare const ElementSize: ElementSizeType