snail.view 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025-present, Snai <snail_dev@163.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/dist/snail.view.d.ts

@@ -0,0 +1,427 @@
+import { IScope, IVersionManager } from 'snail.core';
+
+/**
+ * 动画管理器
+ */
+interface IAnimationManager {
+    /**
+     * 【卷起】动画
+     * - 水平方向 卷动 时，设置target的宽度
+     * - 垂直方向 卷动 时，设置target的高度
+     * @param target 要执行动画的目标元素
+     * @param direction 卷起方法：水平、垂直
+     * @param options 动画效果配置
+     * @returns 动画作用域
+     */
+    roll(target: HTMLElement, direction: "horizontal" | "vertical", options: TransitionEffectOptions): IScope;
+}
+/**
+ * 过渡动画效果配置选项
+ * - 约束动画过程中样式值：样式名随着动画类型自动适配，如roll动画则为 height
+ */
+type TransitionEffectOptions = {
+    /**
+     * 样式过渡的初始值
+     * - 如 roll 动画时，设置过渡动画的初始高度值
+     */
+    start: string;
+    /**
+     * 样式过渡到的目标值
+     * - 如 roll 动画时，设置过渡动画的最终高度值
+     */
+    target: string;
+    /**
+     * 动画时间，单位ms
+     * - 默认 200ms
+     */
+    time?: number;
+    /**
+     * 动画结束后，是否清理过渡动画的target值
+     */
+    clear?: boolean;
+};
+
+/**
+ * 动画管理器
+ *  1、对一些常用动画做封装，结合IScope作用域实现生命周期管理
+ *  2、【后续支持】配置一些常用动画属性，如动画时长
+ *  3、【后续支持】全新作用域，隔离配置
+ * 注意事项：
+ *  1、不提供全局【观察者】对象；这个涉到不少子scope的销毁，在全局挂着始终不好
+ */
+
+/**
+ * 使用【动画管理器】
+ * @returns 全新的【动画管理器】+作用域
+ */
+declare function useAnimation(): IAnimationManager & IScope;
+
+/**
+ * 接口：link标签管理器
+ */
+interface ILinkManager {
+    /**
+     * 注册link文件
+     * - 基于配置origin组装link文件全路径；未配置origin则使用location.origin
+     * - 自动基于version追加版本到querystring中
+     * @param files link文件；可通过theme指定link，不指定则是公共link
+     * @returns link句柄，支持切换主题，销毁link等操作
+     */
+    register(...files: Array<LinkFile | string>): IScope;
+    /**
+     * 切换主题；自动将非当前主题的link禁用掉(公共link除外)
+     * @param code 主题编码字符串
+     * @returns 管理器自身
+     */
+    theme(code: string): ILinkManager;
+}
+/**
+ * link配置选项
+ */
+type LinkOptions = {
+    /**
+     * 默认主题；未指定或不支持指定主题时，以此主题为准
+     */
+    theme: string;
+    /**
+     * link注入的容器元素
+     * - 不传入则采用默认的
+     * - 传入则需外部确保存在性，且在元素销毁时执行link的destroy方法同步销毁管理器
+     */
+    container: HTMLElement;
+    /**
+     * link文件的所在的服务器
+     * - 优先级： scope -> global-> location
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL#base
+     */
+    origin: string;
+    /**
+     * link版本管理器
+     * - 用于注册link时，格式化link文件url地址
+     */
+    version: IVersionManager;
+};
+/**
+ * link文件
+ */
+type LinkFile = {
+    /**
+     * link文件路径
+     */
+    file: string;
+    /**
+     * 匹配的主题code，若为undefined表示为公共link
+     */
+    theme: string | undefined;
+};
+/**
+ * link标签元素对象
+ */
+type LinkElement = LinkFile & {
+    /**
+     * 此元素的引用次数：为0时强制禁用掉
+     */
+    ref: number;
+    /**
+     * link元素信息
+     */
+    element?: HTMLLinkElement;
+};
+
+/**
+ * link 标签管理
+ *  1、csslink标签管理，自动追加版本号，维护生命周期
+ */
+
+/**
+ * 使用【link标签管理器】
+ * - 全新作用域，和其他【link标签管理器】实例隔离
+ * @param options
+ * @returns 新的管理器+作用域
+ */
+declare function useLink(options?: Partial<LinkOptions>): ILinkManager & IScope;
+/** 全局的link映射表
+ * - 将指定的link文件映射为新的link文件
+ * - key为源link文件地址，value为新的link文件地址
+ * - 注意：key区分大小写，外部使用时做好控制
+ */
+declare const linkMap: Map<string, string>;
+/**
+ * 全局【link管理器】
+ */
+declare const link: ILinkManager;
+/**
+ * Link标签 全局配置
+ * @param options 配置选项
+ * @returns 全局link管理器
+ */
+declare function configLink(options: Partial<LinkOptions>): ILinkManager;
+
+/**
+ * 接口
+ */
+interface IObserver {
+    /**
+     * 监听指定事件
+     * - scope销毁时自动移除监听
+     * - 内部使用addEventListener 方法监听事件，销毁时自动执行removeEventListener
+     * @param target 监听元素
+     * @param name 事件名称
+     * @param fn 事件处理方法
+     * @returns 作用域，可销毁监听
+     */
+    onEvent(target: Element | Window, name: string, fn: EventListenerOrEventListenerObject): IScope;
+    /**
+     * 监听元素尺寸变化
+     * - scope销毁时自动移除监听
+     * @param el 监听元素
+     * @param fn 变化时的回调方法
+     * @returns 作用域，可销毁监听
+     */
+    onSize(el: Element, fn: (size: Readonly<ElementSize>) => void): IScope;
+    /**
+     * 监听元素客户端位置、大小变化
+     * - 位置计算规则：相对window屏幕
+     * - scope销毁时自动移除监听
+     * @param el 监听元素
+     * @param fn 变化时的回调方法
+     * @returns 作用域，可销毁监听
+     */
+    onClient(el: Element, fn: (rect: DOMRectReadOnly) => void): IScope;
+}
+/**
+ * 元素尺寸
+ */
+type ElementSize = {
+    /**
+     * 宽度
+     */
+    width: number;
+    /**
+     * 高度
+     */
+    height: number;
+};
+
+/**
+ * css样式数据结构
+ *  1、高度、宽度、边框、内外边距样式
+ *  2、文本、布局对齐方式
+ */
+/**
+ * 样式管理器
+ */
+interface IStyleManager {
+    /**
+     * 构建样式
+     * @param options 样式配置
+     * @param isFlex 是否是flex布局
+     * @returns 计算出来的组件样式信息
+     */
+    build(options: AllStyle | undefined, isFlex?: boolean): Partial<CSSStyleDeclaration>;
+    /**
+     * 获取元素样式
+     * - 仅限style属性中获取
+     * @param target 目标元素
+     * @param keys 需要获取样式信息
+     * @returns 样式信息
+     */
+    getStyle(target: HTMLElement, ...keys: Extract<keyof CSSStyleDeclaration, string>[]): Record<string, string>;
+    /**
+     * 为元素设置样式
+     * @param target 目标元素
+     * @param options 样式配置
+     */
+    setStyle(target: HTMLElement, options: AllStyle): void;
+}
+/**
+ * 所有的样式属性
+ * - 尺寸、对齐、边框、内边距等合集
+ * - 对齐方式、、、
+ */
+type AllStyle = AlignStyle & SizeStyle & MarginStyle & BorderStyle & PaddingStyle & TransitionStyle;
+/**
+ * 组件对齐样式
+ * - flex布局时约束 align-items和 justify-content
+ * - 非flex布局时约束 text-align和 vertical-align
+ */
+type AlignStyle = {
+    /**
+     * 对齐方式
+     * - left: 左对齐
+     * - center: 居中对齐
+     * - right: 右对齐
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * 垂直对齐方式
+     * - top: 顶部对齐
+     * - middle: 居中对齐
+     * - bottom: 底部对齐
+     */
+    valign?: "top" | "middle" | "bottom";
+};
+/**
+ * 尺寸配置选项
+ */
+type SizeOptions = {
+    /**
+     * 弹性尺寸
+     * - 在flex布局时生效
+     * - 存在时，size属性无效
+     */
+    flex?: number;
+    /**
+     * 固定尺寸大小
+     * -对应 width 或者 height 属性
+     */
+    size?: string;
+    /**
+     * 最小值
+     * - 对应 min-width 或者 min-height 属性
+     * - size 属性未指定、或者无效时生效；
+     */
+    min?: string;
+    /**
+     * 最大值
+     * - 对应 max-width 或者 max-height 属性
+     * - size 属性未指定、或者无效时生效；
+     */
+    max?: string;
+};
+/**
+ * 尺寸样式：宽度+高度
+ */
+type SizeStyle = {
+    /**
+     * 宽度样式
+     */
+    width?: SizeOptions;
+    /**
+     * 高度样式
+     */
+    height?: SizeOptions;
+};
+/**
+ * 组件外边距样式
+ * - margin < marginXXX
+ */
+type MarginStyle = {
+    /**
+     * 外边距样式
+     */
+    margin?: string;
+    /**
+     * 上外边距样式
+     */
+    marginTop?: string;
+    /**
+     * 右外边距样式
+     */
+    marginRight?: string;
+    /**
+     * 下外边距样式
+     */
+    marginBottom?: string;
+    /**
+     * 左外边距样式
+     */
+    marginLeft?: string;
+};
+/**
+ * 组件边框样式
+ * - border < borderXXX
+ */
+type BorderStyle = {
+    /**
+     * 边框圆角
+     */
+    borderRadius?: string;
+    /**
+     * 边框样式
+     */
+    border?: string;
+    /**
+     * 上边框样式
+     */
+    borderTop?: string;
+    /**
+     * 右边框样式
+     */
+    borderRight?: string;
+    /**
+     * 下边框样式
+     */
+    borderBottom?: string;
+    /**
+     * 左边框样式
+     */
+    borderLeft?: string;
+};
+/**
+ * 内边距样式
+ * - 优先级：padding < paddingXXX
+ */
+type PaddingStyle = {
+    /**
+     * 内边距
+     */
+    padding?: string;
+    /**
+     * 上内边距
+     */
+    paddingTop?: string;
+    /**
+     * 右内边距
+     */
+    paddingRight?: string;
+    /**
+     * 下内边距
+     */
+    paddingBottom?: string;
+    /**
+     * 左内边距
+     */
+    paddingLeft?: string;
+};
+/**
+ * 过渡效果 样式
+ */
+type TransitionStyle = {
+    /**
+     * 过渡效果
+     */
+    transition?: string;
+    /**
+     * 过渡效果属性
+     * - 如height、width、left、、、
+     */
+    transitionProperty?: string;
+    /**
+     * 过渡效果持续时间
+     */
+    transitionDuration?: string;
+    /**
+     * 过渡效果延迟时间
+     */
+    transitionDelay?: string;
+    /**
+     * 过渡效果函数
+     * - 暂时固定效果，后期支持自定义
+     */
+    transitionTimingFunction?: ("ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end");
+};
+
+/**
+ * 样式管理模块
+ *  1、基于配置构建css样式数据
+ *  2、【后续支持】构建style标签，并生成css样式插入到页面
+ */
+
+/**
+ * 全局的【样式管理器】
+ */
+declare const style: IStyleManager;
+
+export { configLink, link, linkMap, style, useAnimation, useLink };
+export type { AlignStyle, AllStyle, BorderStyle, ElementSize, IAnimationManager, ILinkManager, IObserver, IStyleManager, LinkElement, LinkFile, LinkOptions, MarginStyle, PaddingStyle, SizeOptions, SizeStyle, TransitionEffectOptions, TransitionStyle };

package/dist/snail.view.js

@@ -0,0 +1,281 @@
+//@ sourceURL=/snail.view.js
+import { throwIfFalse, checkScope, throwIfNullOrUndefined, throwIfTrue, useScope, useScopes, mountScope, extract, hasOwnProperty, tidyString, event, mustString, isArrayNotEmpty, isStringNotEmpty, version } from 'snail.core';
+
+function buildAlign(style, align, isFlex) {
+  if (isFlex == true) {
+    const map = {
+      "left": "start",
+      "center": "center",
+      "right": "end",
+      "top": "start",
+      "middle": "center",
+      "bottom": "end"
+    };
+    const aV = map[align.align],
+      vaV = map[align.valign];
+    aV && (style.justifyContent = aV);
+    vaV && (style.alignItems = vaV);
+  } else {
+    align.align && (style.textAlign = align.align);
+    align.valign && (style.verticalAlign = align.valign);
+  }
+}
+function buildSize(style, size, styleName, isFlex) {
+  if (size) {
+    var fixed = size.size;
+    if (isFlex && size.flex != void 0) {
+      fixed = void 0;
+      style.flex = String(size.flex);
+    }
+    if (fixed != void 0) {
+      style[styleName] = fixed;
+    } else {
+      size.min != void 0 && (style[`min-${styleName}`] = size.min);
+      size.max != void 0 && (style[`max-${styleName}`] = size.max);
+    }
+  }
+}
+function buildMargin(style, margin) {
+  if (margin) {
+    margin.margin && (style.margin = margin.margin);
+    margin.marginTop && (style.marginTop = margin.marginTop);
+    margin.marginRight && (style.marginRight = margin.marginRight);
+    margin.marginBottom && (style.marginBottom = margin.marginBottom);
+    margin.marginLeft && (style.marginLeft = margin.marginLeft);
+  }
+}
+function buildBorder(style, border) {
+  if (border) {
+    border.borderRadius && (style.borderRadius = border.borderRadius);
+    border.border && (style.border = border.border);
+    border.borderTop && (style.borderTop = border.borderTop);
+    border.borderRight && (style.borderRight = border.borderRight);
+    border.borderBottom && (style.borderBottom = border.borderBottom);
+    border.borderLeft && (style.borderLeft = border.borderLeft);
+  }
+}
+function buildPadding(style, padding) {
+  if (padding) {
+    padding.padding && (style.padding = padding.padding);
+    padding.paddingTop && (style.paddingTop = padding.paddingTop);
+    padding.paddingRight && (style.paddingRight = padding.paddingRight);
+    padding.paddingBottom && (style.paddingBottom = padding.paddingBottom);
+    padding.paddingLeft && (style.paddingLeft = padding.paddingLeft);
+  }
+}
+function buildTransition(style, transition) {
+  if (transition) {
+    transition.transition && (style.transition = transition.transition);
+    transition.transitionProperty && (style.transitionProperty = transition.transitionProperty);
+    transition.transitionDuration && (style.transitionDuration = transition.transitionDuration);
+    transition.transitionDelay && (style.transitionDelay = transition.transitionDelay);
+    transition.transitionTimingFunction && (style.transitionTimingFunction = transition.transitionTimingFunction);
+  }
+}
+
+function useStyle() {
+  function build(options, isFlex) {
+    const style2 = Object.create(null);
+    if (options) {
+      buildAlign(style2, options, isFlex);
+      buildSize(style2, options.width, "width", isFlex);
+      buildSize(style2, options.height, "height", isFlex);
+      buildMargin(style2, options);
+      buildBorder(style2, options);
+      buildPadding(style2, options);
+      buildTransition(style2, options);
+    }
+    return style2;
+  }
+  function getStyle(target) {
+    throwIfFalse(target instanceof HTMLElement, "getStyle: target must be an HTMLElement.");
+    const ret = Object.create(null);
+    for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      keys[_key - 1] = arguments[_key];
+    }
+    keys.forEach(key => ret[key] = target.style[key]);
+    return Object.freeze(ret);
+  }
+  function setStyle(target, options) {
+    throwIfFalse(target instanceof HTMLElement, "setStyle: target must be an HTMLElement.");
+    const style2 = build(options);
+    Object.assign(target.style, style2);
+  }
+  return Object.freeze({
+    build,
+    getStyle,
+    setStyle
+  });
+}
+const style = useStyle();
+
+const ERROR_SAMEVALUE = "value cannot be the same";
+function checkTransition(scope, target, options) {
+  checkScope(scope, "checkTransition: scope destroyed.");
+  throwIfFalse(target instanceof HTMLElement, "checkTransition: target must be an HTMLElement.");
+  throwIfNullOrUndefined(options, "checkTransition: options must be an Object.");
+  throwIfTrue(options.start == options.target, `checkTransition: options.start and end ${ERROR_SAMEVALUE}. value: ${options.start}`);
+  options.time = options.time > 0 ? options.time : 200;
+  options.start = options.start || "";
+  options.target = options.target || "";
+}
+function startTransition(target, init, styleName, options) {
+  const backStyle = style.getStyle(target, ...Object.keys(init), styleName);
+  const scope = useScope();
+  const setTarget = () => target.style[styleName] = options.target;
+  Object.assign(target.style, init, {
+    [styleName]: options.start
+  });
+  setTimeout(setTarget, 1);
+  setTimeout(scope.destroy, options.time);
+  return scope.onDestroy(() => {
+    Object.assign(target.style, backStyle);
+    options.clear != true && setTarget();
+  });
+}
+
+function useAnimation() {
+  const scopes = useScopes();
+  function roll(target, direction, options) {
+    checkTransition(manager, target, options);
+    const styleName = direction === "horizontal" ? "width" : "height";
+    const scope = startTransition(target, {
+      overflow: "hidden !important",
+      transition: `${styleName} ${options.time || 200}ms ease !important`
+    }, styleName, options);
+    return scopes.add(scope);
+  }
+  const manager = mountScope({
+    roll
+  });
+  manager.onDestroy(scopes.destroy);
+  return Object.freeze(manager);
+}
+
+const LINK_CONFIG = {
+  theme: void 0,
+  container: void 0,
+  origin: void 0,
+  version: void 0
+};
+const EVENT_ChangeTheme = "Snail.ChangeTheme";
+const LINK_CONTAINER_ID = "snail_link_container";
+function checkLinkOptions(options) {
+  options = extract(Object.keys(LINK_CONFIG), options);
+  hasOwnProperty(options, "theme") && (options.theme = tidyString(options.theme));
+  hasOwnProperty(options, "origin") && (options.origin = tidyString(options.origin));
+  return options;
+}
+function getLinkDefaultContainer() {
+  var container = document.getElementById(LINK_CONTAINER_ID);
+  if (!container) {
+    container = document.createElement("div");
+    container.id = LINK_CONTAINER_ID;
+    container.style.display = "none !important";
+    container.style.height = "0px";
+    container.style.width = "0px";
+    document.body.appendChild(container);
+  }
+  return container;
+}
+function setlinkByTheme(links, code, options) {
+  let hasMatchTheme = false;
+  links.forEach(link => {
+    code && link.theme == code && (hasMatchTheme = true);
+    link.element.disabled = link.ref == 0 || link.theme != void 0 && link.theme != code;
+  });
+  let defaultTheme = hasMatchTheme ? void 0 : options.theme || LINK_CONFIG.theme;
+  defaultTheme && links.forEach(link => {
+    link.theme == defaultTheme && (link.element.disabled = link.ref == 0);
+  });
+}
+function destroylink(links, isDel) {
+  links.forEach(link => {
+    link.ref = isDel ? 0 : Math.max(0, link.ref - 1);
+    link.element.setAttribute("data-ref", link.ref.toString());
+    link.element.disabled = link.ref == 0;
+    if (isDel == true) {
+      link.element.parentNode && link.element.parentNode.removeChild(link.element);
+      link.element = void 0;
+    }
+  });
+  links.splice(0);
+}
+
+function useLink(options) {
+  options = Object.freeze(checkLinkOptions(options));
+  var scopeTheme = void 0;
+  const scopeLinks = [];
+  function register() {
+    const funclinks = [];
+    for (var _len = arguments.length, files = new Array(_len), _key = 0; _key < _len; _key++) {
+      files[_key] = arguments[_key];
+    }
+    isArrayNotEmpty(files) && files.forEach(file => {
+      const link2 = typeof file == "string" ? {
+        file,
+        theme: void 0
+      } : file;
+      let href = linkMap.get(link2.file);
+      href && console.log(`map to new link file. link: ${link2.file}, new link: ${href}`);
+      href = href || link2.file;
+      mustString(href, "href");
+      let tmpStr = options.origin || LINK_CONFIG.origin;
+      isStringNotEmpty(tmpStr) && (href = new URL(href, tmpStr).toString());
+      tmpStr = href.toLowerCase();
+      let linkEle = scopeLinks.find(s => s.theme == link2.theme && s.file.toLowerCase() == tmpStr);
+      if (!linkEle) {
+        linkEle = {
+          file: href,
+          theme: link2.theme,
+          ref: 0
+        };
+        scopeLinks.push(linkEle);
+      }
+      linkEle.ref += 1;
+      funclinks.push(linkEle);
+      if (!linkEle.element) {
+        linkEle.element = document.createElement("link");
+        linkEle.element.href = (options.version || LINK_CONFIG.version || version).formart(linkEle.file);
+        linkEle.element.rel = "linksheet";
+        linkEle.element.disabled = true;
+        link2.theme && linkEle.element.setAttribute("data-theme", link2.theme);
+        const container = options.container || LINK_CONFIG.container || getLinkDefaultContainer();
+        container.appendChild(linkEle.element);
+      }
+      linkEle.element.setAttribute("data-ref", linkEle.ref.toString());
+    });
+    funclinks.length > 0 && setlinkByTheme(funclinks, scopeTheme, options);
+    return useScope().onDestroy(() => destroylink(funclinks, false));
+  }
+  function theme(code) {
+    mustString(code, "code");
+    if (scopeTheme != code) {
+      setlinkByTheme(scopeLinks, scopeTheme = code, options);
+      manager === link && event.trigger(EVENT_ChangeTheme, code, true);
+    }
+    return manager;
+  }
+  const manager = mountScope({
+    register,
+    theme
+  });
+  {
+    manager.onDestroy(() => {
+      event.off(EVENT_ChangeTheme, theme);
+      destroylink(scopeLinks, true);
+    });
+    event.on(EVENT_ChangeTheme, theme);
+  }
+  return Object.freeze(manager);
+}
+const linkMap = new Map();
+const link = useLink();
+event.off(EVENT_ChangeTheme, link.theme);
+function configLink(options) {
+  options = checkLinkOptions(options);
+  Object.assign(LINK_CONFIG, options);
+  return link;
+}
+
+export { configLink, link, linkMap, style, useAnimation, useLink };

package/dist/styles/base-mixins.less

@@ -0,0 +1,10 @@
+//  基础样式 混入集
+//  命名规则: .样式信息（如w代表width）-属性（如fill表示填充）()
+//  混入集中的样式统一采用（）结尾，避免直接输出；仅作为【定义混入】，不直接参与less样式编译输出
+
+// *****************************************   👉  盒子模型    *****************************************
+//  高度、宽度填充满，全100%
+.wh-fill() {
+    width: 100%;
+    height: 100%;
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "snail.view",
+    "description": "对视图界面做的一些封装。如样式计算助手方法，常用样式less混入、变量等；dom相关助手类",
+    "author": "snail_dev@163.com",
+    "license": "MIT",
+    "version": "1.0.0",
+    "type": "module",
+    "main": "dist/snail.view.js",
+    "module": "dist/snail.view.js",
+    "types": "dist/snail.view.d.ts",
+    "private": false,
+    "scripts": {
+        "build": "rollup -c ./rollup.config.js",
+        "types": "tsc -p ./tsconfig.dts.json --declarationDir ./dist/_types"
+    },
+    "dependencies": {
+        "snail.core": ">=2.0.3"
+    },
+    "devDependencies": {
+        "rollup": ">=4.39.0",
+        "snail.rollup": ">=1.2.8",
+        "snail.rollup-asset": ">=1.2.1",
+        "snail.rollup-script": ">=1.2.4"
+    }
+}