From 17298658623d2a57ccba3a9d59c2559150e3f2eb Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Fri, 16 Jul 2021 13:51:21 +0800 Subject: [PATCH] feat(app): add style --- .../uni-app-plus/dist/uni-app-service.es.js | 7 +- .../uni-app-plus/dist/uni-app-view.umd.js | 13 +- .../src/service/framework/dom/Page.ts | 12 +- .../view/framework/dom/elements/UniElement.ts | 13 +- .../uni-app-vue/dist/service.runtime.esm.js | 134 ++++-------------- packages/uni-shared/dist/uni-shared.cjs.js | 113 ++++----------- packages/uni-shared/dist/uni-shared.d.ts | 18 +-- packages/uni-shared/dist/uni-shared.es.js | 113 ++++----------- packages/uni-shared/src/vdom/Node.ts | 38 +++-- packages/uni-shared/src/vdom/index.ts | 2 + 10 files changed, 140 insertions(+), 323 deletions(-) diff --git a/packages/uni-app-plus/dist/uni-app-service.es.js b/packages/uni-app-plus/dist/uni-app-service.es.js index a2253ebe2..cb0ab3e8b 100644 --- a/packages/uni-app-plus/dist/uni-app-service.es.js +++ b/packages/uni-app-plus/dist/uni-app-service.es.js @@ -9310,12 +9310,17 @@ var serviceContext = (function (vue) { function pushRemoveEventAction(pageNode, nodeId, name) { pageNode.push([ACTION_TYPE_REMOVE_EVENT, nodeId, pageNode.addDict(name)]); } + function normalizeAttrValue(pageNode, name, value) { + return name === 'style' && isPlainObject(value) + ? pageNode.normalizeDict(value) + : pageNode.addDict(value); + } function pushSetAttributeAction(pageNode, nodeId, name, value) { pageNode.push([ ACTION_TYPE_SET_ATTRIBUTE, nodeId, pageNode.addDict(name), - pageNode.addDict(value), + normalizeAttrValue(pageNode, name, value), ]); } function pushRemoveAttributeAction(pageNode, nodeId, name) { diff --git a/packages/uni-app-plus/dist/uni-app-view.umd.js b/packages/uni-app-plus/dist/uni-app-view.umd.js index fd51a1655..9600b987c 100644 --- a/packages/uni-app-plus/dist/uni-app-view.umd.js +++ b/packages/uni-app-plus/dist/uni-app-view.umd.js @@ -211,6 +211,8 @@ prevent: 1 << 1, self: 1 << 2 }; + const ATTR_CLASS = "class"; + const ATTR_STYLE = "style"; const ACTION_TYPE_PAGE_CREATE = 1; const ACTION_TYPE_PAGE_CREATED = 2; const ACTION_TYPE_CREATE = 3; @@ -5980,6 +5982,9 @@ if (hasOwn$1(nodeJson, "a")) { this.setAttrs(nodeJson.a); } + if (hasOwn$1(nodeJson, "s")) { + this.setAttr("style", nodeJson.s); + } if (hasOwn$1(nodeJson, "e")) { this.addEvents(nodeJson.e); } @@ -6006,18 +6011,18 @@ patchEvent(this.$, name, -1); } setAttr(name, value) { - if (name === ".c") { + if (name === ATTR_CLASS) { patchClass(this.$, value); - } else if (name === ".s") { + } else if (name === ATTR_STYLE) { patchStyle(this.$, value); } else { this.setAttribute(name, value); } } removeAttr(name) { - if (name === ".c") { + if (name === ATTR_CLASS) { patchClass(this.$, ""); - } else if (name === ".s") { + } else if (name === ATTR_STYLE) { patchStyle(this.$, ""); } else { this.removeAttribute(name); diff --git a/packages/uni-app-plus/src/service/framework/dom/Page.ts b/packages/uni-app-plus/src/service/framework/dom/Page.ts index 89dcb0dbc..3280a2579 100644 --- a/packages/uni-app-plus/src/service/framework/dom/Page.ts +++ b/packages/uni-app-plus/src/service/framework/dom/Page.ts @@ -295,6 +295,16 @@ function pushRemoveEventAction( pageNode.push([ACTION_TYPE_REMOVE_EVENT, nodeId, pageNode.addDict(name)]) } +function normalizeAttrValue( + pageNode: UniPageNode, + name: string, + value: unknown +) { + return name === 'style' && isPlainObject(value) + ? pageNode.normalizeDict(value) + : pageNode.addDict(value as Value) +} + function pushSetAttributeAction( pageNode: UniPageNode, nodeId: number, @@ -305,7 +315,7 @@ function pushSetAttributeAction( ACTION_TYPE_SET_ATTRIBUTE, nodeId, pageNode.addDict(name), - pageNode.addDict(value as Value), + normalizeAttrValue(pageNode, name, value), ]) } diff --git a/packages/uni-app-plus/src/view/framework/dom/elements/UniElement.ts b/packages/uni-app-plus/src/view/framework/dom/elements/UniElement.ts index e3c199a86..81dca3eef 100644 --- a/packages/uni-app-plus/src/view/framework/dom/elements/UniElement.ts +++ b/packages/uni-app-plus/src/view/framework/dom/elements/UniElement.ts @@ -1,5 +1,5 @@ import { hasOwn } from '@vue/shared' -import { UniNodeJSON } from '@dcloudio/uni-shared' +import { ATTR_CLASS, ATTR_STYLE, UniNodeJSON } from '@dcloudio/uni-shared' import { reactive, watch } from 'vue' import { UniNode } from './UniNode' import { patchClass } from '../modules/class' @@ -31,6 +31,9 @@ export class UniElement extends UniNode { if (hasOwn(nodeJson, 'a')) { this.setAttrs(nodeJson.a!) } + if (hasOwn(nodeJson, 's')) { + this.setAttr('style', nodeJson.s) + } if (hasOwn(nodeJson, 'e')) { this.addEvents(nodeJson.e!) } @@ -61,18 +64,18 @@ export class UniElement extends UniNode { patchEvent(this.$, name, -1) } setAttr(name: string, value: unknown) { - if (name === '.c') { + if (name === ATTR_CLASS) { patchClass(this.$, value as string) - } else if (name === '.s') { + } else if (name === ATTR_STYLE) { patchStyle(this.$, value as string | Record) } else { this.setAttribute(name, value as string) } } removeAttr(name: string) { - if (name === '.c') { + if (name === ATTR_CLASS) { patchClass(this.$, '') - } else if (name === '.s') { + } else if (name === ATTR_STYLE) { patchStyle(this.$, '') } else { this.removeAttribute(name) diff --git a/packages/uni-app-vue/dist/service.runtime.esm.js b/packages/uni-app-vue/dist/service.runtime.esm.js index 86c5081f4..a5442f9bb 100644 --- a/packages/uni-app-vue/dist/service.runtime.esm.js +++ b/packages/uni-app-vue/dist/service.runtime.esm.js @@ -269,104 +269,6 @@ export default function vueFactory(exports) { return [hyphenate$1(name.slice(2)), options]; } - var UniCSSStyleDeclaration = /*#__PURE__*/function () { - function UniCSSStyleDeclaration() { - _classCallCheck(this, UniCSSStyleDeclaration); - - this._cssText = null; - this._value = null; - } - - _createClass(UniCSSStyleDeclaration, [{ - key: "setProperty", - value: function setProperty(property, value) { - if (value === null || value === '') { - this.removeProperty(property); - } else { - if (!this._value) { - this._value = {}; - } - - this._value[property] = value; - } - } - }, { - key: "getPropertyValue", - value: function getPropertyValue(property) { - if (!this._value) { - return ''; - } - - return this._value[property] || ''; - } - }, { - key: "removeProperty", - value: function removeProperty(property) { - if (!this._value) { - return ''; - } - - var value = this._value[property]; - delete this._value[property]; - return value; - } - }, { - key: "cssText", - get: function get() { - return this._cssText || ''; - }, - set: function set(cssText) { - this._cssText = cssText; - } - }, { - key: "toJSON", - value: function toJSON() { - var _cssText = this._cssText, - _value = this._value; - var hasCssText = _cssText !== null; - var hasValue = _value !== null; - - if (hasCssText && hasValue) { - return [_cssText, _value]; - } - - if (hasCssText) { - return _cssText; - } - - if (hasValue) { - return _value; - } - } - }]); - - return UniCSSStyleDeclaration; - }(); - - var STYLE_PROPS = ['_value', '_cssText', 'cssText', 'getPropertyValue', 'setProperty', 'removeProperty', 'toJSON']; - - function proxyStyle(uniCssStyle) { - return new Proxy(uniCssStyle, { - get(target, key, receiver) { - if (STYLE_PROPS.indexOf(key) === -1) { - return target.getPropertyValue(key); - } - - return Reflect.get(target, key, receiver); - }, - - set(target, key, value, receiver) { - if (STYLE_PROPS.indexOf(key) === -1) { - target.setProperty(key, value); - return true; - } - - return Reflect.set(target, key, value, receiver); - } - - }); - } - var EventModifierFlags = { stop: 1, prevent: 1 << 1, @@ -568,6 +470,9 @@ export default function vueFactory(exports) { return UniNode; }(UniEventTarget); + var ATTR_CLASS = 'class'; + var ATTR_STYLE = 'style'; + var UniBaseNode = /*#__PURE__*/function (_UniNode) { _inherits(UniBaseNode, _UniNode); @@ -580,18 +485,19 @@ export default function vueFactory(exports) { _this3 = _super3.call(this, nodeType, nodeName, container); _this3.attributes = Object.create(null); - _this3._html = null; - _this3.style = proxyStyle(new UniCSSStyleDeclaration()); + _this3.style = null; + _this3._html = null; // this.style = proxyStyle(new UniCSSStyleDeclaration()) + return _this3; } _createClass(UniBaseNode, [{ key: "className", get: function get() { - return this.attributes['class'] || ''; + return this.attributes[ATTR_CLASS] || ''; }, set: function set(val) { - this.setAttribute('class', val); + this.setAttribute(ATTR_CLASS, val); } }, { key: "innerHTML", @@ -622,12 +528,20 @@ export default function vueFactory(exports) { }, { key: "getAttribute", value: function getAttribute(qualifiedName) { + if (qualifiedName === ATTR_STYLE) { + return this.style; + } + return this.attributes[qualifiedName]; } }, { key: "removeAttribute", value: function removeAttribute(qualifiedName) { - delete this.attributes[qualifiedName]; + if (qualifiedName == ATTR_STYLE) { + this.style = null; + } else { + delete this.attributes[qualifiedName]; + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onRemoveAttribute(this, qualifiedName); @@ -636,7 +550,11 @@ export default function vueFactory(exports) { }, { key: "setAttribute", value: function setAttribute(qualifiedName, value) { - this.attributes[qualifiedName] = value; + if (qualifiedName === ATTR_STYLE) { + this.style = value; + } else { + this.attributes[qualifiedName] = value; + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onSetAttribute(this, qualifiedName, value); @@ -650,8 +568,8 @@ export default function vueFactory(exports) { normalize = _ref.normalize; var attributes = this.attributes, - listeners = this.listeners, style = this.style, + listeners = this.listeners, _text = this._text; var res = {}; @@ -674,10 +592,8 @@ export default function vueFactory(exports) { res.e = normalize ? normalize(e, false) : e; } - var cssStyle = style.toJSON(); - - if (cssStyle) { - res.s = normalize ? normalize(cssStyle) : cssStyle; + if (style !== null) { + res.s = normalize ? normalize(style) : style; } if (!attr) { diff --git a/packages/uni-shared/dist/uni-shared.cjs.js b/packages/uni-shared/dist/uni-shared.cjs.js index ff86f6f71..a0dd6110e 100644 --- a/packages/uni-shared/dist/uni-shared.cjs.js +++ b/packages/uni-shared/dist/uni-shared.cjs.js @@ -424,84 +424,6 @@ function parseEventName(name) { return [shared.hyphenate(name.slice(2)), options]; } -class UniCSSStyleDeclaration { - constructor() { - this._cssText = null; - this._value = null; - } - setProperty(property, value) { - if (value === null || value === '') { - this.removeProperty(property); - } - else { - if (!this._value) { - this._value = {}; - } - this._value[property] = value; - } - } - getPropertyValue(property) { - if (!this._value) { - return ''; - } - return this._value[property] || ''; - } - removeProperty(property) { - if (!this._value) { - return ''; - } - const value = this._value[property]; - delete this._value[property]; - return value; - } - get cssText() { - return this._cssText || ''; - } - set cssText(cssText) { - this._cssText = cssText; - } - toJSON() { - const { _cssText, _value } = this; - const hasCssText = _cssText !== null; - const hasValue = _value !== null; - if (hasCssText && hasValue) { - return [_cssText, _value]; - } - if (hasCssText) { - return _cssText; - } - if (hasValue) { - return _value; - } - } -} -const STYLE_PROPS = [ - '_value', - '_cssText', - 'cssText', - 'getPropertyValue', - 'setProperty', - 'removeProperty', - 'toJSON', -]; -function proxyStyle(uniCssStyle) { - return new Proxy(uniCssStyle, { - get(target, key, receiver) { - if (STYLE_PROPS.indexOf(key) === -1) { - return target.getPropertyValue(key); - } - return Reflect.get(target, key, receiver); - }, - set(target, key, value, receiver) { - if (STYLE_PROPS.indexOf(key) === -1) { - target.setProperty(key, value); - return true; - } - return Reflect.set(target, key, value, receiver); - }, - }); -} - const EventModifierFlags = { stop: 1, prevent: 1 << 1, @@ -644,18 +566,21 @@ class UniNode extends UniEventTarget { : oldChild; } } +const ATTR_CLASS = 'class'; +const ATTR_STYLE = 'style'; class UniBaseNode extends UniNode { constructor(nodeType, nodeName, container) { super(nodeType, nodeName, container); this.attributes = Object.create(null); + this.style = null; this._html = null; - this.style = proxyStyle(new UniCSSStyleDeclaration()); + // this.style = proxyStyle(new UniCSSStyleDeclaration()) } get className() { - return (this.attributes['class'] || ''); + return (this.attributes[ATTR_CLASS] || ''); } set className(val) { - this.setAttribute('class', val); + this.setAttribute(ATTR_CLASS, val); } get innerHTML() { return ''; @@ -676,22 +601,35 @@ class UniBaseNode extends UniNode { } } getAttribute(qualifiedName) { + if (qualifiedName === ATTR_STYLE) { + return this.style; + } return this.attributes[qualifiedName]; } removeAttribute(qualifiedName) { - delete this.attributes[qualifiedName]; + if (qualifiedName == ATTR_STYLE) { + this.style = null; + } + else { + delete this.attributes[qualifiedName]; + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onRemoveAttribute(this, qualifiedName); } } setAttribute(qualifiedName, value) { - this.attributes[qualifiedName] = value; + if (qualifiedName === ATTR_STYLE) { + this.style = value; + } + else { + this.attributes[qualifiedName] = value; + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onSetAttribute(this, qualifiedName, value); } } toJSON({ attr, normalize, } = {}) { - const { attributes, listeners, style, _text } = this; + const { attributes, style, listeners, _text } = this; const res = {}; if (Object.keys(attributes).length) { res.a = normalize ? normalize(attributes) : attributes; @@ -708,9 +646,8 @@ class UniBaseNode extends UniNode { }); res.e = normalize ? normalize(e, false) : e; } - const cssStyle = style.toJSON(); - if (cssStyle) { - res.s = normalize ? normalize(cssStyle) : cssStyle; + if (style !== null) { + res.s = normalize ? normalize(style) : style; } if (!attr) { res.i = this.nodeId; @@ -910,6 +847,8 @@ exports.ACTION_TYPE_REMOVE_ATTRIBUTE = ACTION_TYPE_REMOVE_ATTRIBUTE; exports.ACTION_TYPE_REMOVE_EVENT = ACTION_TYPE_REMOVE_EVENT; exports.ACTION_TYPE_SET_ATTRIBUTE = ACTION_TYPE_SET_ATTRIBUTE; exports.ACTION_TYPE_SET_TEXT = ACTION_TYPE_SET_TEXT; +exports.ATTR_CLASS = ATTR_CLASS; +exports.ATTR_STYLE = ATTR_STYLE; exports.BACKGROUND_COLOR = BACKGROUND_COLOR; exports.BUILT_IN_TAGS = BUILT_IN_TAGS; exports.COMPONENT_NAME_PREFIX = COMPONENT_NAME_PREFIX; diff --git a/packages/uni-shared/dist/uni-shared.d.ts b/packages/uni-shared/dist/uni-shared.d.ts index 8f2b9573d..351cd0ffb 100644 --- a/packages/uni-shared/dist/uni-shared.d.ts +++ b/packages/uni-shared/dist/uni-shared.d.ts @@ -36,6 +36,10 @@ number export declare function addFont(family: string, source: string, desc?: FontFaceDescriptors): Promise; +export declare const ATTR_CLASS = "class"; + +export declare const ATTR_STYLE = "style"; + export declare const BACKGROUND_COLOR = "#f7f7f7"; export declare const BUILT_IN_TAGS: string[]; @@ -325,7 +329,7 @@ export declare const UNI_SSR_TITLE = "title"; export declare class UniBaseNode extends UniNode { attributes: Record; - style: UniCSSStyleDeclaration; + style: null | string | Record; protected _html: string | null; constructor(nodeType: UniNodeType, nodeName: string, container: UniElement | IUniPageNode); get className(): string; @@ -355,18 +359,6 @@ export declare class UniCommentNode extends UniNode { }; } -declare class UniCSSStyleDeclaration { - [name: string]: string | unknown; - private _cssText; - private _value; - setProperty(property: string, value: string | null): void; - getPropertyValue(property: string): string | string[]; - removeProperty(property: string): string; - get cssText(): string; - set cssText(cssText: string); - toJSON(): UniCSSStyleDeclarationJSON | undefined; -} - declare type UniCSSStyleDeclarationJSON = string | null | Record | [string, Record]; export declare class UniElement extends UniBaseNode { diff --git a/packages/uni-shared/dist/uni-shared.es.js b/packages/uni-shared/dist/uni-shared.es.js index 6064bd369..368886eb9 100644 --- a/packages/uni-shared/dist/uni-shared.es.js +++ b/packages/uni-shared/dist/uni-shared.es.js @@ -420,84 +420,6 @@ function parseEventName(name) { return [hyphenate(name.slice(2)), options]; } -class UniCSSStyleDeclaration { - constructor() { - this._cssText = null; - this._value = null; - } - setProperty(property, value) { - if (value === null || value === '') { - this.removeProperty(property); - } - else { - if (!this._value) { - this._value = {}; - } - this._value[property] = value; - } - } - getPropertyValue(property) { - if (!this._value) { - return ''; - } - return this._value[property] || ''; - } - removeProperty(property) { - if (!this._value) { - return ''; - } - const value = this._value[property]; - delete this._value[property]; - return value; - } - get cssText() { - return this._cssText || ''; - } - set cssText(cssText) { - this._cssText = cssText; - } - toJSON() { - const { _cssText, _value } = this; - const hasCssText = _cssText !== null; - const hasValue = _value !== null; - if (hasCssText && hasValue) { - return [_cssText, _value]; - } - if (hasCssText) { - return _cssText; - } - if (hasValue) { - return _value; - } - } -} -const STYLE_PROPS = [ - '_value', - '_cssText', - 'cssText', - 'getPropertyValue', - 'setProperty', - 'removeProperty', - 'toJSON', -]; -function proxyStyle(uniCssStyle) { - return new Proxy(uniCssStyle, { - get(target, key, receiver) { - if (STYLE_PROPS.indexOf(key) === -1) { - return target.getPropertyValue(key); - } - return Reflect.get(target, key, receiver); - }, - set(target, key, value, receiver) { - if (STYLE_PROPS.indexOf(key) === -1) { - target.setProperty(key, value); - return true; - } - return Reflect.set(target, key, value, receiver); - }, - }); -} - const EventModifierFlags = { stop: 1, prevent: 1 << 1, @@ -640,18 +562,21 @@ class UniNode extends UniEventTarget { : oldChild; } } +const ATTR_CLASS = 'class'; +const ATTR_STYLE = 'style'; class UniBaseNode extends UniNode { constructor(nodeType, nodeName, container) { super(nodeType, nodeName, container); this.attributes = Object.create(null); + this.style = null; this._html = null; - this.style = proxyStyle(new UniCSSStyleDeclaration()); + // this.style = proxyStyle(new UniCSSStyleDeclaration()) } get className() { - return (this.attributes['class'] || ''); + return (this.attributes[ATTR_CLASS] || ''); } set className(val) { - this.setAttribute('class', val); + this.setAttribute(ATTR_CLASS, val); } get innerHTML() { return ''; @@ -672,22 +597,35 @@ class UniBaseNode extends UniNode { } } getAttribute(qualifiedName) { + if (qualifiedName === ATTR_STYLE) { + return this.style; + } return this.attributes[qualifiedName]; } removeAttribute(qualifiedName) { - delete this.attributes[qualifiedName]; + if (qualifiedName == ATTR_STYLE) { + this.style = null; + } + else { + delete this.attributes[qualifiedName]; + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onRemoveAttribute(this, qualifiedName); } } setAttribute(qualifiedName, value) { - this.attributes[qualifiedName] = value; + if (qualifiedName === ATTR_STYLE) { + this.style = value; + } + else { + this.attributes[qualifiedName] = value; + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onSetAttribute(this, qualifiedName, value); } } toJSON({ attr, normalize, } = {}) { - const { attributes, listeners, style, _text } = this; + const { attributes, style, listeners, _text } = this; const res = {}; if (Object.keys(attributes).length) { res.a = normalize ? normalize(attributes) : attributes; @@ -704,9 +642,8 @@ class UniBaseNode extends UniNode { }); res.e = normalize ? normalize(e, false) : e; } - const cssStyle = style.toJSON(); - if (cssStyle) { - res.s = normalize ? normalize(cssStyle) : cssStyle; + if (style !== null) { + res.s = normalize ? normalize(style) : style; } if (!attr) { res.i = this.nodeId; @@ -895,4 +832,4 @@ function getEnvLocale() { return (lang && lang.replace(/[.:].*/, '')) || 'en'; } -export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventModifierFlags, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_REACH_BOTTOM_DISTANCE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle }; +export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CLASS, ATTR_STYLE, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventModifierFlags, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_REACH_BOTTOM_DISTANCE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle }; diff --git a/packages/uni-shared/src/vdom/Node.ts b/packages/uni-shared/src/vdom/Node.ts index 0e157493f..0f05e00f9 100644 --- a/packages/uni-shared/src/vdom/Node.ts +++ b/packages/uni-shared/src/vdom/Node.ts @@ -3,11 +3,7 @@ import { extend } from '@vue/shared' import { UniElement } from './Element' import { DOMException } from './DOMException' import { normalizeEventType, UniEventListener, UniEventTarget } from './Event' -import { - proxyStyle, - UniCSSStyleDeclaration, - UniCSSStyleDeclarationJSON, -} from './Style' +import { UniCSSStyleDeclarationJSON } from './Style' import { encodeModifier } from './encode' export const NODE_TYPE_PAGE = 0 @@ -256,9 +252,11 @@ export interface UniNodeJSON { t?: string } +export const ATTR_CLASS = 'class' +export const ATTR_STYLE = 'style' export class UniBaseNode extends UniNode { attributes: Record = Object.create(null) - style: UniCSSStyleDeclaration + style: null | string | Record = null protected _html: string | null = null @@ -268,15 +266,15 @@ export class UniBaseNode extends UniNode { container: UniElement | IUniPageNode ) { super(nodeType, nodeName, container) - this.style = proxyStyle(new UniCSSStyleDeclaration()) + // this.style = proxyStyle(new UniCSSStyleDeclaration()) } get className() { - return (this.attributes['class'] || '') as string + return (this.attributes[ATTR_CLASS] || '') as string } set className(val: string) { - this.setAttribute('class', val) + this.setAttribute(ATTR_CLASS, val) } get innerHTML() { @@ -314,18 +312,29 @@ export class UniBaseNode extends UniNode { } getAttribute(qualifiedName: string) { + if (qualifiedName === ATTR_STYLE) { + return this.style + } return this.attributes[qualifiedName] } removeAttribute(qualifiedName: string): void { - delete this.attributes[qualifiedName] + if (qualifiedName == ATTR_STYLE) { + this.style = null + } else { + delete this.attributes[qualifiedName] + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onRemoveAttribute(this, qualifiedName) } } setAttribute(qualifiedName: string, value: unknown): void { - this.attributes[qualifiedName] = value + if (qualifiedName === ATTR_STYLE) { + this.style = value as string | Record + } else { + this.attributes[qualifiedName] = value + } if (this.pageNode && !this.pageNode.isUnmounted) { this.pageNode.onSetAttribute(this, qualifiedName, value) } @@ -339,7 +348,7 @@ export class UniBaseNode extends UniNode { children?: boolean normalize?: (val: any, includeValue?: boolean) => any | number } = {}) { - const { attributes, listeners, style, _text } = this + const { attributes, style, listeners, _text } = this const res: Partial = {} if (Object.keys(attributes).length) { res.a = normalize ? normalize(attributes) : attributes @@ -356,9 +365,8 @@ export class UniBaseNode extends UniNode { }) res.e = normalize ? normalize(e, false) : e } - const cssStyle = style.toJSON() - if (cssStyle) { - res.s = normalize ? normalize(cssStyle) : cssStyle + if (style !== null) { + res.s = normalize ? normalize(style) : style } if (!attr) { res.i = this.nodeId diff --git a/packages/uni-shared/src/vdom/index.ts b/packages/uni-shared/src/vdom/index.ts index 10cfbe518..22e91f210 100644 --- a/packages/uni-shared/src/vdom/index.ts +++ b/packages/uni-shared/src/vdom/index.ts @@ -7,6 +7,8 @@ export { normalizeEventType, } from './Event' export { + ATTR_CLASS, + ATTR_STYLE, NODE_TYPE_PAGE, NODE_TYPE_ELEMENT, NODE_TYPE_TEXT, -- GitLab