@viewfly/platform-browser 2.2.0 → 3.0.0-alpha.0

package/dist/jsx-dom.d.ts

@@ -1,4 +1,4 @@
-import { JSX, ClassNames, JSXNode } from '@viewfly/core';
+import { JSX, ClassNames, JSXNode, DynamicRef, Ref, RefProp } from '@viewfly/core';
 import * as CSS from 'csstype';
 export interface CSSProperties extends CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number> {
     /**
@@ -200,10 +200,14 @@ interface AriaAttributes {
     'aria-valuetext'?: string;
 }
 export type StyleValue = string | CSSProperties | null;
-export interface HTMLAttributes<T> extends AriaAttributes, EventHandlers<Events>, JSX.RefAttributes<T> {
+export interface HTMLAttributes<T> extends AriaAttributes, EventHandlers<Events>, Omit<JSX.IntrinsicAttributes, 'ref'> {
+    ref?: RefProp<T> | RefProp<T>[];
     children?: JSXNode;
     innerHTML?: string;
+    /** 支持 ClassNames / 对象解析，走 `setClass`（不经 `setProperty`）。 */
     class?: ClassNames;
+    /** 原生 `className`；不经 `classToString`。条件/对象类名请用 `class`。 */
+    className?: string;
     style?: StyleValue;
     accesskey?: string;
     contenteditable?: Booleanish | 'inherit';
@@ -621,14 +625,21 @@ export interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> {
     useragent?: string;
     webpreferences?: string;
 }
-export interface SVGAttributes<T> extends AriaAttributes, EventHandlers<Events>, JSX.RefAttributes<T> {
+export interface SVGAttributes<T> extends AriaAttributes, EventHandlers<Events> {
+    ref?: Ref<T | null> | DynamicRef<T | null> | Array<Ref<T | null> | DynamicRef<T | null>>;
     children?: JSXNode;
     innerHTML?: string;
     /**
      * SVG Styling Attributes
      * @see https://www.w3.org/TR/SVG/styling.html#ElementSpecificStyling
      */
+    /**
+     * 支持 `ClassNames` 与对象动态解析；由 core renderer 走 `setClass`，**不经** `setProperty`。
+     * 勿用 `className` 代替：Viewfly 中 `className` 不做 ClassNames 处理，也不映射为 `class`。
+     */
     class?: ClassNames;
+    /** 原生 className 语义（无 ClassNames 解析）；若需条件/对象样式请用 `class`。 */
+    className?: string;
     style?: string | CSSProperties;
     color?: string;
     height?: Numberish;
@@ -644,10 +655,22 @@ export interface SVGAttributes<T> extends AriaAttributes, EventHandlers<Events>,
     width?: Numberish;
     role?: string;
     tabindex?: Numberish;
+    /**
+     * 与 HTML/React 一致的 camelCase；运行时会写成 attribute `tabindex`。
+     */
+    tabIndex?: Numberish;
+    /**
+     * XML / xmlns 声明式属性；运行时用 `setAttribute('xml:lang' | …)` 等（见 `xml-jsx-attr-name`）。
+     */
+    xmlBase?: string;
+    xmlLang?: string;
+    xmlSpace?: 'default' | 'preserve' | (string & {});
+    xmlnsXlink?: string;
     'accent-height'?: Numberish;
     accumulate?: 'none' | 'sum';
     additive?: 'replace' | 'sum';
     'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit';
+    alignmentBaseline?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit';
     allowReorder?: 'no' | 'yes';
     alphabetic?: Numberish;
     amplitude?: Numberish;
@@ -668,6 +691,8 @@ export interface SVGAttributes<T> extends AriaAttributes, EventHandlers<Events>,
     'cap-height'?: Numberish;
     clip?: Numberish;
     'clip-path'?: string;
+    /** 与 `clip-path` 同义（引用 `url(#id)` 等） */
+    clipPath?: string;
     clipPathUnits?: Numberish;
     'clip-rule'?: Numberish;
     'color-interpolation'?: Numberish;
@@ -698,7 +723,9 @@ export interface SVGAttributes<T> extends AriaAttributes, EventHandlers<Events>,
     externalResourcesRequired?: Numberish;
     fill?: string;
     'fill-opacity'?: Numberish;
+    fillOpacity?: Numberish;
     'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit';
+    fillRule?: 'nonzero' | 'evenodd' | 'inherit';
     filter?: string;
     filterRes?: Numberish;
     filterUnits?: Numberish;
@@ -706,7 +733,9 @@ export interface SVGAttributes<T> extends AriaAttributes, EventHandlers<Events>,
     'flood-opacity'?: Numberish;
     focusable?: Numberish;
     'font-family'?: string;
+    fontFamily?: string;
     'font-size'?: Numberish;
+    fontSize?: Numberish;
     'font-size-adjust'?: Numberish;
     'font-stretch'?: Numberish;
     'font-style'?: Numberish;
@@ -819,12 +848,21 @@ export interface SVGAttributes<T> extends AriaAttributes, EventHandlers<Events>,
     'strikethrough-thickness'?: Numberish;
     string?: Numberish;
     stroke?: string;
+    /** 与 `stroke-width` 同义，对标 React camelCase */
+    strokeWidth?: Numberish;
     'stroke-dasharray'?: Numberish;
+    /** 与 `stroke-dasharray` 同义 */
+    strokeDasharray?: Numberish;
     'stroke-dashoffset'?: Numberish;
+    strokeDashoffset?: Numberish;
     'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit';
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
     'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
     'stroke-miterlimit'?: Numberish;
+    strokeMiterlimit?: Numberish;
     'stroke-opacity'?: Numberish;
+    strokeOpacity?: Numberish;
     'stroke-width'?: Numberish;
     surfaceScale?: Numberish;
     systemLanguage?: Numberish;
@@ -1055,11 +1093,20 @@ export interface SVGElements {
     use: SVGAttributes<SVGUseElement>;
     view: SVGAttributes<SVGViewElement>;
 }
-export interface MathMLAttributes extends JSX.RefAttributes<MathMLElement> {
+export interface MathMLAttributes<T> {
+    ref?: Ref<T | null> | DynamicRef<T | null> | Array<Ref<T | null> | DynamicRef<T | null>>;
     children?: JSXNode;
     scriptlevel?: string;
+    /** 同 HTML/SVG：`class` 走 setClass + ClassNames；`className` 仅字符串、不经 classToString。 */
+    class?: ClassNames;
+    className?: string;
+    style?: string | CSSProperties;
+    id?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    tabindex?: Numberish;
+    tabIndex?: Numberish;
 }
-export interface MathMLMoAttributes extends MathMLAttributes {
+export interface MathMLMoAttributes<T> extends MathMLAttributes<T> {
     accent?: Booleanish;
     fence?: Booleanish;
     lspace?: string;
@@ -1071,28 +1118,28 @@ export interface MathMLMoAttributes extends MathMLAttributes {
     stretchy?: Booleanish;
     symmetric?: Booleanish;
 }
-export interface MathMLMathAttributes extends MathMLAttributes {
+export interface MathMLMathAttributes<T> extends MathMLAttributes<T> {
     xmlns?: 'http://www.w3.org/1998/Math/MathML';
     display?: 'block' | 'inline';
 }
-export interface MathMLMfracAttributes extends MathMLAttributes {
+export interface MathMLMfracAttributes<T> extends MathMLAttributes<T> {
     linethickness?: string;
 }
-export interface MathMLMoverAttributes extends MathMLAttributes {
+export interface MathMLMoverAttributes<T> extends MathMLAttributes<T> {
     accent?: Booleanish;
 }
-export interface MathMLMpaddedAttributes extends MathMLAttributes {
+export interface MathMLMpaddedAttributes<T> extends MathMLAttributes<T> {
     depth?: string;
     height?: string;
     lspace?: string;
     voffset?: string;
     width?: string;
 }
-export interface MathMLMspaceAttributes extends MathMLAttributes {
+export interface MathMLMspaceAttributes<T> extends MathMLAttributes<T> {
     width?: string;
     height?: string;
 }
-export interface MathMLMtableAttribute extends MathMLAttributes {
+export interface MathMLMtableAttribute<T> extends MathMLAttributes<T> {
     align?: string;
     columnalign?: string;
     columnlines?: Numberish;
@@ -1104,54 +1151,54 @@ export interface MathMLMtableAttribute extends MathMLAttributes {
     rowspacing?: Numberish;
     width?: string;
 }
-export interface MathMLMtdAttributes extends MathMLAttributes {
+export interface MathMLMtdAttributes<T> extends MathMLAttributes<T> {
     columnalign?: string;
     columnspan?: Numberish;
     rowalign?: string;
     rowspan?: Numberish;
 }
-export interface MathMLMtrAttributes extends MathMLAttributes {
+export interface MathMLMtrAttributes<T> extends MathMLAttributes<T> {
     columnalign?: string;
     rowalign?: string;
 }
-export interface MathMLMunderAttributes extends MathMLAttributes {
+export interface MathMLMunderAttributes<T> extends MathMLAttributes<T> {
     accentunder?: Booleanish;
 }
-export interface MathMLMunderoverAttributes extends MathMLAttributes {
+export interface MathMLMunderoverAttributes<T> extends MathMLAttributes<T> {
     accent?: Booleanish;
     accentunder?: Booleanish;
 }
 export interface MathMLElements {
-    annotation: MathMLAttributes;
-    'annotation-xml': MathMLAttributes;
-    maction: MathMLAttributes;
-    math: MathMLMathAttributes;
-    merror: MathMLAttributes;
-    mfrac: MathMLMfracAttributes;
-    mi: MathMLAttributes;
-    mmultiscripts: MathMLAttributes;
-    mn: MathMLAttributes;
-    mo: MathMLMoAttributes;
-    mover: MathMLMoverAttributes;
-    mpadded: MathMLMpaddedAttributes;
-    mphantom: MathMLAttributes;
-    mprescripts: MathMLAttributes;
-    mroot: MathMLAttributes;
-    mrow: MathMLAttributes;
-    ms: MathMLAttributes;
-    mspace: MathMLMspaceAttributes;
-    msqrt: MathMLAttributes;
-    mstyle: MathMLAttributes;
-    msub: MathMLAttributes;
-    msubsup: MathMLAttributes;
-    msup: MathMLAttributes;
-    mtable: MathMLMtableAttribute;
-    mtd: MathMLMtdAttributes;
-    mtext: MathMLAttributes;
-    mtr: MathMLMtrAttributes;
-    munder: MathMLMunderAttributes;
-    semantics: MathMLAttributes;
-    munderover: MathMLMunderoverAttributes;
+    annotation: MathMLAttributes<MathMLElement>;
+    'annotation-xml': MathMLAttributes<MathMLElement>;
+    maction: MathMLAttributes<MathMLElement>;
+    math: MathMLMathAttributes<MathMLElement>;
+    merror: MathMLAttributes<MathMLElement>;
+    mfrac: MathMLMfracAttributes<MathMLElement>;
+    mi: MathMLAttributes<MathMLElement>;
+    mmultiscripts: MathMLAttributes<MathMLElement>;
+    mn: MathMLAttributes<MathMLElement>;
+    mo: MathMLMoAttributes<MathMLElement>;
+    mover: MathMLMoverAttributes<MathMLElement>;
+    mpadded: MathMLMpaddedAttributes<MathMLElement>;
+    mphantom: MathMLAttributes<MathMLElement>;
+    mprescripts: MathMLAttributes<MathMLElement>;
+    mroot: MathMLAttributes<MathMLElement>;
+    mrow: MathMLAttributes<MathMLElement>;
+    ms: MathMLAttributes<MathMLElement>;
+    mspace: MathMLMspaceAttributes<MathMLElement>;
+    msqrt: MathMLAttributes<MathMLElement>;
+    mstyle: MathMLAttributes<MathMLElement>;
+    msub: MathMLAttributes<MathMLElement>;
+    msubsup: MathMLAttributes<MathMLElement>;
+    msup: MathMLAttributes<MathMLElement>;
+    mtable: MathMLMtableAttribute<MathMLElement>;
+    mtd: MathMLMtdAttributes<MathMLElement>;
+    mtext: MathMLAttributes<MathMLElement>;
+    mtr: MathMLMtrAttributes<MathMLElement>;
+    munder: MathMLMunderAttributes<MathMLElement>;
+    semantics: MathMLAttributes<MathMLElement>;
+    munderover: MathMLMunderoverAttributes<MathMLElement>;
 }
 export interface NativeElements extends DOMElements, SVGElements, MathMLElements {
 }
@@ -1159,85 +1206,85 @@ export interface Events {
     onCopy: ClipboardEvent;
     onCut: ClipboardEvent;
     onPaste: ClipboardEvent;
-    onCompositionend: CompositionEvent;
-    onCompositionstart: CompositionEvent;
-    onCompositionupdate: CompositionEvent;
+    onCompositionEnd: CompositionEvent;
+    onCompositionStart: CompositionEvent;
+    onCompositionUpdate: CompositionEvent;
     onDrag: DragEvent;
-    onDragend: DragEvent;
-    onDragenter: DragEvent;
-    onDragexit: DragEvent;
-    onDragleave: DragEvent;
-    onDragover: DragEvent;
-    onDragstart: DragEvent;
+    onDragEnd: DragEvent;
+    onDragEnter: DragEvent;
+    onDragExit: DragEvent;
+    onDragLeave: DragEvent;
+    onDragOver: DragEvent;
+    onDragStart: DragEvent;
     onDrop: DragEvent;
     onFocus: FocusEvent;
-    onFocusin: FocusEvent;
-    onFocusout: FocusEvent;
+    onFocusIn: FocusEvent;
+    onFocusOut: FocusEvent;
     onBlur: FocusEvent;
     onChange: Event;
-    onBeforeinput: Event;
+    onBeforeInput: Event;
     onInput: Event;
     onReset: Event;
     onSubmit: Event;
     onInvalid: Event;
     onLoad: Event;
     onError: Event;
-    onKeydown: KeyboardEvent;
-    onKeypress: KeyboardEvent;
-    onKeyup: KeyboardEvent;
-    onAuxclick: MouseEvent;
+    onKeyDown: KeyboardEvent;
+    onKeyPress: KeyboardEvent;
+    onKeyUp: KeyboardEvent;
+    onAuxClick: MouseEvent;
     onClick: MouseEvent;
-    onContextmenu: MouseEvent;
-    onDblclick: MouseEvent;
-    onMousedown: MouseEvent;
-    onMouseenter: MouseEvent;
-    onMouseleave: MouseEvent;
-    onMousemove: MouseEvent;
-    onMouseout: MouseEvent;
-    onMouseover: MouseEvent;
-    onMouseup: MouseEvent;
+    onContextMenu: MouseEvent;
+    onDblClick: MouseEvent;
+    onMouseDown: MouseEvent;
+    onMouseEnter: MouseEvent;
+    onMouseLeave: MouseEvent;
+    onMouseMove: MouseEvent;
+    onMouseOut: MouseEvent;
+    onMouseOver: MouseEvent;
+    onMouseUp: MouseEvent;
     onAbort: Event;
-    onCanplay: Event;
-    onCanplaythrough: Event;
-    onDurationchange: Event;
+    onCanPlay: Event;
+    onCanPlayThrough: Event;
+    onDurationChange: Event;
     onEmptied: Event;
     onEncrypted: Event;
     onEnded: Event;
-    onLoadeddata: Event;
-    onLoadedmetadata: Event;
-    onLoadstart: Event;
+    onLoadedData: Event;
+    onLoadedMetadata: Event;
+    onLoadStart: Event;
     onPause: Event;
     onPlay: Event;
     onPlaying: Event;
     onProgress: Event;
-    onRatechange: Event;
+    onRateChange: Event;
     onSeeked: Event;
     onSeeking: Event;
     onStalled: Event;
     onSuspend: Event;
-    onTimeupdate: Event;
-    onVolumechange: Event;
+    onTimeUpdate: Event;
+    onVolumeChange: Event;
     onWaiting: Event;
     onSelect: Event;
     onScroll: UIEvent;
-    onTouchcancel: TouchEvent;
-    onTouchend: TouchEvent;
-    onTouchmove: TouchEvent;
-    onTouchstart: TouchEvent;
-    onPointerdown: PointerEvent;
-    onPointermove: PointerEvent;
-    onPointerup: PointerEvent;
-    onPointercancel: PointerEvent;
-    onPointerenter: PointerEvent;
-    onPointerleave: PointerEvent;
-    onPointerover: PointerEvent;
-    onPointerout: PointerEvent;
+    onTouchCancel: TouchEvent;
+    onTouchEnd: TouchEvent;
+    onTouchMove: TouchEvent;
+    onTouchStart: TouchEvent;
+    onPointerDown: PointerEvent;
+    onPointerMove: PointerEvent;
+    onPointerUp: PointerEvent;
+    onPointerCancel: PointerEvent;
+    onPointerEnter: PointerEvent;
+    onPointerLeave: PointerEvent;
+    onPointerOver: PointerEvent;
+    onPointerOut: PointerEvent;
     onWheel: WheelEvent;
-    onAnimationstart: AnimationEvent;
-    onAnimationend: AnimationEvent;
-    onAnimationiteration: AnimationEvent;
-    onTransitionend: TransitionEvent;
-    onTransitionstart: TransitionEvent;
+    onAnimationStart: AnimationEvent;
+    onAnimationEnd: AnimationEvent;
+    onAnimationIteration: AnimationEvent;
+    onTransitionEnd: TransitionEvent;
+    onTransitionStart: TransitionEvent;
 }
 type EventHandlers<E> = {
     [K in keyof E]?: E[K] extends (...args: any) => any ? E[K] : (payload: E[K]) => void;

package/dist/xml-jsx-attr-name.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 对标 React `possibleStandardNames`：SVG / Math 子树中 JSX 的 camelCase -> 真正写在 DOM 上的 attribute 名。
+ * 易错、不能简单「插横线」的名字放在 XML_JSX_NAME_TO_ATTR；其余走受控的 kebab 回退。
+ * @see https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/possibleStandardNames.js
+ */
+/**
+ * 显式表：JSX 名 -> 属性名（多含 kebab 或需保留大小写如 viewBox）。
+ * 全小写、单字符（x,y,r,cx 等）不必列出，会原样使用。
+ */
+export declare const XML_JSX_NAME_TO_ATTR: Readonly<Record<string, string>>;
+/**
+ * 返回在 SVG / Math 元素上应使用的 content attribute 名（用于 set/removeAttribute，含 `xml:…`、`xmlns:…`）。
+ */
+export declare function getXmlPresentationAttributeName(jsxKey: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/platform-browser",
-  "version": "2.2.0",
+  "version": "3.0.0-alpha.0",
   "description": "This project is used to enable the Viewfly framework to run in a browser.",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -12,18 +12,13 @@
       "require": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build:lib": "rimraf dist && pnpm run build && rimraf dist/platform-browser",
-    "build": "vite build --config vite.config.ts",
-    "publish:lib": "npm run build:lib && npm publish --access=public"
-  },
   "files": [
     "dist/**/*"
   ],
   "license": "MIT",
   "keywords": [],
   "dependencies": {
-    "@viewfly/core": "^2.2.0",
+    "@viewfly/core": "^3.0.0-alpha.0",
     "csstype": "^3.1.3"
   },
   "devDependencies": {
@@ -43,5 +38,10 @@
   },
   "bugs": {
     "url": "https://github.com/viewfly/viewfly/issues"
+  },
+  "scripts": {
+    "build:lib": "rimraf dist && pnpm run build && rimraf dist/platform-browser",
+    "build": "vite build --config vite.config.ts",
+    "publish:lib": "npm run build:lib && npm publish --access=public"
   }
-}
+}

package/dist/create-portal.d.ts

@@ -1,35 +0,0 @@
-import { JSXNode, NativeNode } from '@viewfly/core';
-/**
- * 用于创建脱离当前 DOM 树的子节点，常用于弹窗等
- * @deprecated 即将弃用，请使用 @viewfly/core 模块的 Portal 组件实现
- * @param childRender
- * @param host
- * @example
- * ```tsx
- * function App() {
- *   const number = createSignal(0)
- *
- *   setInterval(() => {
- *     number.set(number() + 1)
- *   }, 1000)
- *
- *   const ModalPortal = function (props) {
- *     return createPortal(() => {
- *       return <div class="modal">parent data is {props.text}</div>
- *     }, document.body)
- *   }
- *   return () => {
- *     return (
- *       <div>
- *         <div>data is {number()}</div>
- *         <ModalPortal text={number()}/>
- *       </div>
- *     )
- *   }
- * }
- * ```
- */
-export declare function createPortal<T extends NativeNode>(childRender: () => JSXNode, host: T): {
-    $portalHost: T;
-    $render: () => JSXNode;
-};