@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/resize-observer/action.ts

@@ -1,80 +0,0 @@
-/**
- * resize — Svelte action 轻量用法，供 `<div use:resize={{ box, onResize }}>`。
- * 复用 @chenzy-design/core 的 createResizeObserver，命令式 observe + destroy disconnect。
- * box / throttle / debounce 变化时重建 observer（先 disconnect 旧的，红线 #3）；
- * 仅 onResize 变化则原地更新（回调在闭包内读最新值，无需重建）。
- */
-import {
-  createResizeObserver,
-  type ResizeBox,
-  type CDResizeEntry,
-} from '@chenzy-design/core';
-import type { Action } from 'svelte/action';
-
-export interface ResizeActionParams {
-  /** 观测盒模型，默认 'content-box'。变化时重建 observer。 */
-  box?: ResizeBox;
-  /** 节流间隔(ms)，leading+trailing，默认 0 即时。与 debounce 互斥。变化时重建 observer。 */
-  throttle?: number;
-  /** 防抖等待(ms)，trailing-only，默认 0 关闭。优先于 throttle。变化时重建 observer。 */
-  debounce?: number;
-  /**
-   * 原生不可用（SSR/老环境）或显式开启时降级监听 window.resize 近似重测。
-   * 变化时重建 observer。默认 false。
-   */
-  fallbackToWindow?: boolean;
-  /** 尺寸变化回调（归一化 entry）。变化时原地更新，不重建。 */
-  onResize?: (entry: CDResizeEntry) => void;
-  /** 一段连续变化的首帧触发。变化时原地更新，不重建。 */
-  onResizeStart?: (entry: CDResizeEntry) => void;
-  /** 连续变化静默结束后触发（最后一帧）。变化时原地更新，不重建。 */
-  onResizeEnd?: (entry: CDResizeEntry) => void;
-}
-
-export const resize: Action<HTMLElement, ResizeActionParams | undefined> = (
-  node,
-  params,
-) => {
-  let current = params;
-  let ro: ReturnType<typeof createResizeObserver>;
-
-  // 命令式创建 + observe；回调在闭包内读 current 最新值（onResize 变化无需重建）。
-  function build() {
-    const wantBoundary = !!current?.onResizeStart || !!current?.onResizeEnd;
-    ro = createResizeObserver({
-      box: current?.box ?? 'content-box',
-      throttle: current?.throttle ?? 0,
-      debounce: current?.debounce ?? 0,
-      fallbackToWindow: current?.fallbackToWindow ?? false,
-      onResize: (e) => current?.onResize?.(e),
-      // 仅在监听时挂 start/end（闭包内读 current 最新回调，无需重建）。
-      onResizeStart: wantBoundary ? (e) => current?.onResizeStart?.(e) : undefined,
-      onResizeEnd: wantBoundary ? (e) => current?.onResizeEnd?.(e) : undefined,
-    });
-    // SSR / 无原生 RO 且未开启 window 降级时 supported=false 不监听；
-    // 降级模式下 observe 内部已挂 window.resize，需放行。
-    if (ro.supported || (current?.fallbackToWindow ?? false)) ro.observe(node);
-  }
-
-  build();
-
-  return {
-    update(next) {
-      const prev = current;
-      current = next;
-      // 仅 box / throttle / debounce / fallbackToWindow 变化才重建（先 disconnect 旧的，红线 #3）。
-      if (
-        (prev?.box ?? 'content-box') !== (next?.box ?? 'content-box') ||
-        (prev?.throttle ?? 0) !== (next?.throttle ?? 0) ||
-        (prev?.debounce ?? 0) !== (next?.debounce ?? 0) ||
-        (prev?.fallbackToWindow ?? false) !== (next?.fallbackToWindow ?? false)
-      ) {
-        ro.disconnect();
-        build();
-      }
-    },
-    destroy() {
-      ro.disconnect();
-    },
-  };
-};

package/src/resize-observer/index.ts

@@ -1,9 +0,0 @@
-export { default as ResizeObserver } from './ResizeObserver.svelte';
-export { resize, type ResizeActionParams } from './action.js';
-export { meta as resizeObserverMeta } from './meta.js';
-export {
-  createResizeObserver,
-  getGlobalResizeObserver,
-  type CDResizeEntry,
-  type ResizeBox,
-} from '@chenzy-design/core';

package/src/resize-observer/meta.ts

@@ -1,102 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * ResizeObserver — see specs/components/other/ResizeObserver.spec.md
- */
-export const meta = {
-  name: 'ResizeObserver',
-  category: 'other',
-  renderless: true,
-  description:
-    '尺寸监听工具组件，封装原生 ResizeObserver（经 @chenzy-design/core 归一化），渲染一个无视觉样式的包裹元素作为观测容器，slot 暴露 width/height/entry，onResize 分发归一化尺寸事件；内置 throttle/debounce 节流去抖与 multiple 多目标观测；SSR/老浏览器静默降级，fallbackToWindow 可降级为 window.resize 近似监听；onResizeStart/onResizeEnd 暴露连续变化的首帧与静默结束边界事件；另导出 resize action 供轻量 use:resize 用法、getGlobalResizeObserver 单例池供大列表共享。盒模型支持 content-box/border-box/device-pixel-content-box，包裹元素标签可经 tag 自定义。',
-  exports: [
-    'ResizeObserver',
-    'resize',
-    'createResizeObserver',
-    'getGlobalResizeObserver',
-  ],
-  props: [
-    {
-      name: 'box',
-      type: "'content-box'|'border-box'|'device-pixel-content-box'",
-      default: "'content-box'",
-      desc: '观测盒模型：content-box 仅内容区，border-box 含 padding+border，device-pixel-content-box 物理像素内容盒（含 DPR；不支持时回退 content-box）',
-    },
-    {
-      name: 'disabled',
-      type: 'boolean',
-      default: 'false',
-      desc: '暂停尺寸分发，observer 仍监听但不向 slot/回调通知',
-    },
-    {
-      name: 'throttle',
-      type: 'number',
-      default: '0',
-      desc: '节流间隔(ms)，leading+trailing，0 即原生即时。与 debounce 互斥（同时 >0 时 debounce 优先）',
-    },
-    {
-      name: 'debounce',
-      type: 'number',
-      default: '0',
-      desc: '防抖等待(ms)，trailing-only，0 关闭。与 throttle 互斥（优先于 throttle）',
-    },
-    {
-      name: 'multiple',
-      type: 'boolean',
-      default: 'false',
-      desc: '多目标：观测包裹元素的所有直接子元素，onResize 逐个抛出，用 entry.target 区分',
-    },
-    {
-      name: 'observeOnMount',
-      type: 'boolean',
-      default: 'true',
-      desc: '挂载后立即测量一次（ResizeObserver 原生在 observe 时即触发首次回调，天然满足）',
-    },
-    {
-      name: 'tag',
-      type: 'string',
-      default: "'div'",
-      desc: '包裹元素标签，经 svelte:element 渲染；须为可生成盒子的元素（勿用 display:contents 类标签）',
-    },
-    {
-      name: 'fallbackToWindow',
-      type: 'boolean',
-      default: 'false',
-      desc: '原生 ResizeObserver 不可用（SSR/老环境）或显式开启时，降级监听 window.resize 并用 getBoundingClientRect 近似重测（精度较低）',
-    },
-  ],
-  events: [
-    { name: 'onResize', desc: '尺寸变化时分发归一化 entry（受控，不回写）' },
-    { name: 'onFirstMeasure', desc: '首次测量完成时分发归一化 entry' },
-    { name: 'onResizeStart', desc: '一段连续尺寸变化的首帧触发（"调整中"态）' },
-    {
-      name: 'onResizeEnd',
-      desc: '连续变化静默结束后触发，payload 为最后一帧（"调整完成"）',
-    },
-  ],
-  slots: [
-    {
-      name: 'children',
-      desc: '作用域参数 { width, height, entry }，entry 首次测量前为 null',
-    },
-  ],
-  a11y: {
-    hasRole: false,
-    note: '包裹元素不设 role/aria，透明容器不进 a11y 树、不可聚焦、不移动焦点。',
-  },
-  tokens: [],
-  responsive: false,
-  examples: [
-    {
-      title: 'slot 测量',
-      code: '<ResizeObserver>{#snippet children({ width, height })}{width} × {height}{/snippet}</ResizeObserver>',
-    },
-    {
-      title: 'use:resize action 轻量用法',
-      code: '<div use:resize={{ onResize: (e) => console.log(e.width, e.height) }}>...</div>',
-    },
-    {
-      title: 'border-box 观测',
-      code: '<ResizeObserver box="border-box" onResize={(e) => (size = e)}>{@render content()}</ResizeObserver>',
-    },
-  ],
-} as const;