@derivesome/webtools 1.0.0

package/src/element-size-ref.ts

@@ -0,0 +1,74 @@
+import { ref, Reference, unref, type MaybeReference } from "@derivesome/core";
+import {
+  createResizeObserverRef,
+  ResizeObserverRef,
+} from "./resize-observer-ref";
+
+export type ElementSize = { width: number; height: number };
+
+export type CreateElementSizeRefOptions = ResizeObserverOptions & {
+  initialSize?: ElementSize;
+};
+
+export type ElementSizeRef = {
+  size: Reference<ElementSize>;
+  observer: ResizeObserverRef;
+};
+
+export const createElementSizeRef = (
+  element: MaybeReference<Element | null | undefined>,
+  options: CreateElementSizeRefOptions = {},
+): ElementSizeRef => {
+  const { box = "content-box" } = options;
+
+  const initialElement = unref(element);
+  const initialRect = initialElement
+    ? initialElement.getBoundingClientRect()
+    : null;
+  const size = ref<ElementSize>({
+    width: initialRect?.width || options.initialSize?.width || 0,
+    height: initialRect?.height || options.initialSize?.height || 0,
+  });
+
+  const obs = createResizeObserverRef(
+    element,
+    (entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const el = unref(element);
+      if (!el) return;
+      const isSVG = el.namespaceURI?.includes("svg") ?? false;
+      if (isSVG) {
+        const rect = el.getBoundingClientRect();
+        size.set({ width: rect.width, height: rect.height });
+        return;
+      }
+
+      const boxSize =
+        box === "border-box"
+          ? entry.borderBoxSize
+          : box === "content-box"
+            ? entry.contentBoxSize
+            : entry.devicePixelContentBoxSize;
+
+      if (boxSize && boxSize.length > 0) {
+        let width = 0;
+        let height = 0;
+        for (const bs of boxSize) {
+          width += bs.inlineSize;
+          height += bs.blockSize;
+        }
+        size.set({ width, height });
+      } else {
+        // fallback for browsers without boxSize support
+        size.set({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    },
+    options,
+  );
+
+  return { size, observer: obs };
+};

package/src/element-size-ref.ts~

@@ -0,0 +1,65 @@
+import { ref, Reference, unref, type MaybeReference } from '@derivesome/core';
+import { createResizeObserverRef, ResizeObserverRef } from './resize-observer-ref';
+
+export type ElementSize = { width: number, height: number };
+
+export type CreateElementSizeRefOptions  = ResizeObserverOptions & {
+  initialSize?: ElementSize;
+}
+
+export type ElementSizeRef = {
+  size: Reference<ElementSize>;
+  observer: ResizeObserverRef;
+}
+
+export const createElementSizeRef = (
+  element: MaybeReference<Element | null | undefined>,
+  options: CreateElementSizeRefOptions = {}
+): ElementSizeRef => {
+  const { box = "content-box" } = options;
+  
+  const initialElement = unref(element);
+  const initialRect = initialElement ? initialElement.getBoundingClientRect() : null;
+  const size = ref<ElementSize>({
+    width: (initialRect?.width || options.initialSize?.width || 0),
+    height: (initialRect?.height || options.initialSize?.height || 0),
+  });
+
+  const obs = createResizeObserverRef(element, (entries) => {
+    const entry = entries[0];
+    if (!entry) return;
+    const el = unref(element);
+    if (!el) return;
+    const isSVG = el.namespaceURI?.includes("svg") ?? false;
+    if (isSVG) {
+      const rect = el.getBoundingClientRect();
+      size.set({ width: rect.width, height: rect.height });
+      return;
+    }
+
+    const boxSize =
+      box === "border-box"
+        ? entry.borderBoxSize
+        : box === "content-box"
+          ? entry.contentBoxSize
+          : entry.devicePixelContentBoxSize;
+
+    if (boxSize && boxSize.length > 0) {
+      let width = 0;
+      let height = 0;
+      for (const bs of boxSize) {
+        width += bs.inlineSize;
+        height += bs.blockSize;
+      }
+      size.set({ width, height });
+    } else {
+      // fallback for browsers without boxSize support
+      size.set({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      });
+    }
+  }, options);
+
+  return { size, observer: obs }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './resize-observer-ref';
+export * from './element-size-ref';

package/src/index.ts~

@@ -0,0 +1 @@
+export * from './resize-observer-ref';

package/src/resize-observer-ref.ts

@@ -0,0 +1,21 @@
+import { Derived, derived, unref, type MaybeReference } from '@derivesome/core';
+
+export type ResizeObserverRef = Derived<ResizeObserver | null>;
+
+export const createResizeObserverRef = (
+  element: MaybeReference<Element | null | undefined>,
+  callback: ResizeObserverCallback,
+  options: ResizeObserverOptions = {}
+): ResizeObserverRef => {
+  const elref = derived(() => unref(element));
+  return derived<ResizeObserver | null>((prev) => {
+    if (prev) {
+      prev.disconnect();
+    }
+    const el = elref.get();
+    if (!el) return null;
+    const obs = new ResizeObserver(callback);
+    obs.observe(el, options);
+    return obs;
+  });
+}

package/src/resize-observer-ref.ts~

@@ -0,0 +1,19 @@
+import { Derived, derived, unref, type MaybeReference } from '@derivesome/core';
+
+export const createResizeObserverRef = (
+  element: MaybeReference<Element | null | undefined>,
+  callback: ResizeObserverCallback,
+  options: ResizeObserverOptions = {}
+): Derived<ResizeObserver | null> => {
+  const elref = derived(() => unref(element));
+  return derived<ResizeObserver | null>((prev) => {
+    if (prev) {
+      prev.disconnect();
+    }
+    const el = elref.get();
+    if (!el) return null;
+    const obs = new ResizeObserver(callback);
+    obs.observe(el, options);
+    return obs;
+  });
+}

package/src/resize-observer.ts~

@@ -0,0 +1,21 @@
+import { unref, type MaybeReference } from '@derivesome/core';
+
+export type ElementSize = { width: number, height: number };
+
+export type ResizeObserverBox =
+  | "border-box"
+  | "content-box"
+  | "device-pixel-content-box";
+
+export interface CreateResizeObserverOptions {
+  box?: ResizeObserverBox;
+  initialSize?: ElementSize;
+}
+
+export const createResizeObserver = (
+  element: MaybeReference<Element | null | undefined>,
+  options: CreateResizeObserverOptions = {}
+) => {
+
+  const initialElement = unref(element);
+}

package/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "outDir": "./dist/cjs"
+  }
+}

package/tsconfig.cjs.json~

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "outDir": "./dist/cjs"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/esm",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable", "ES2020"],
+    "types": ["node"],
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "strict": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["./src/**/*.test.ts"]
+}

package/tsconfig.json~

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/esm",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable", "ES2020"],
+    "types": ["node"],
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "strict": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["./src/**/*.test.ts"]
+}