提交 309014db 编写于 作者: fxy060608's avatar fxy060608

feat(app): support animation

上级 31a2ae74
......@@ -322,6 +322,7 @@
const PRIMARY_COLOR = "#007aff";
const SCHEME_RE = /^([a-z-]+:)?\/\//i;
const DATA_RE = /^data:.*,.*/;
const JSON_PROTOCOL = "json://";
const ON_PAGE_SCROLL = "onPageScroll";
const ON_REACH_BOTTOM = "onReachBottom";
const isObject = (val) => val !== null && typeof val === "object";
......@@ -6083,6 +6084,13 @@
postActionJobs.clear();
}
}
const JSON_PROTOCOL_LEN = JSON_PROTOCOL.length;
function decodeAttr(value) {
if (isString(value) && value.indexOf(JSON_PROTOCOL) === 0) {
value = JSON.parse(value.substr(JSON_PROTOCOL_LEN));
}
return value;
}
class UniElement extends UniNode {
constructor(id2, element, parentNodeId, refNodeId, nodeJson, propNames = []) {
super(id2, element.tagName, parentNodeId, element);
......@@ -6108,7 +6116,7 @@
watch(this.$props, () => {
queuePostActionJob(this._update);
}, { flush: "sync" });
this.update();
this.update(true);
}
setAttrs(attrs2) {
Object.keys(attrs2).forEach((name) => {
......@@ -6145,6 +6153,7 @@
}
}
setAttribute(name, value) {
value = decodeAttr(value);
if (this.$propNames.indexOf(name) !== -1) {
this.$props[name] = value;
} else {
......@@ -6158,7 +6167,7 @@
this.$.removeAttribute(name);
}
}
update() {
update(isMounted = false) {
}
}
class UniComment extends UniNode {
......@@ -14304,13 +14313,23 @@
};
fn.call(context);
}
init(nodeJson) {
super.init(nodeJson);
const item = animation.watch.animation;
watch(() => this.$props.animation, () => {
this.call(item.handler);
}, { deep: item.deep });
this.call(animation.mounted);
setAttribute(name, value) {
if (name === "animation") {
this.$animate = true;
}
return super.setAttribute(name, value);
}
update(isMounted = false) {
if (!this.$animate) {
return;
}
if (isMounted) {
return this.call(animation.mounted);
}
if (this.$animate) {
this.$animate = false;
this.call(animation.watch.animation.handler);
}
}
}
const PROP_NAMES_HOVER$1 = ["space", "decode"];
......@@ -14327,7 +14346,7 @@
this._text = text2;
this.update();
}
update() {
update(isMounted = false) {
const {
$props: { space, decode }
} = this;
......@@ -14335,6 +14354,7 @@
space,
decode
}).join("<br>");
super.update(isMounted);
}
}
class UniTextNode extends UniNode {
......@@ -14358,7 +14378,7 @@
...propNames
]);
}
update() {
update(isMounted = false) {
const hoverClass = this.$props["hover-class"];
if (hoverClass && hoverClass !== "none") {
if (!this._hover) {
......@@ -14370,6 +14390,7 @@
this._hover.removeEvent();
}
}
super.update(isMounted);
}
}
class Hover {
......@@ -14691,8 +14712,6 @@
};
}
});
const JSON_PREFIX = "$JSON$:";
const JSON_PREFIX_LEN = JSON_PREFIX.length;
class UniComponent extends UniNode {
constructor(id2, tag, component, parentNodeId, refNodeId, nodeJson, selector) {
super(id2, tag, parentNodeId);
......@@ -14741,10 +14760,7 @@
this.$props[name] = null;
}
setAttr(name, value) {
if (isString(value) && value.indexOf(JSON_PREFIX) === 0) {
value = JSON.parse(value.substr(JSON_PREFIX_LEN));
}
this.$props[name] = value;
this.$props[name] = decodeAttr(value);
}
removeAttr(name) {
this.$props[name] = null;
......
import { hasOwn, isString } from '@vue/shared'
import { hasOwn } from '@vue/shared'
import {
App,
Component,
......@@ -14,9 +14,8 @@ import { createInvoker } from '../modules/events'
import { createWrapper, UniCustomElement } from '.'
import { $, removeElement } from '../page'
import { queuePostActionJob } from '../scheduler'
import { decodeAttr } from '../utils'
const JSON_PREFIX = '$JSON$:'
const JSON_PREFIX_LEN = JSON_PREFIX.length
export class UniComponent extends UniNode {
declare $: UniCustomElement
protected $props!: Record<string, any>
......@@ -82,10 +81,7 @@ export class UniComponent extends UniNode {
this.$props[name] = null
}
setAttr(name: string, value: unknown) {
if (isString(value) && value.indexOf(JSON_PREFIX) === 0) {
value = JSON.parse(value.substr(JSON_PREFIX_LEN))
}
this.$props[name] = value
this.$props[name] = decodeAttr(value)
}
removeAttr(name: string) {
this.$props[name] = null
......
import { watch } from 'vue'
import { UniNodeJSON } from '@dcloudio/uni-shared'
import { animation } from '@dcloudio/uni-components'
import { UniElement } from './UniElement'
......@@ -9,6 +8,7 @@ interface AnimationProps {
export class UniAnimationElement<T extends object> extends UniElement<
T & AnimationProps
> {
private $animate?: boolean
constructor(
id: number,
element: Element,
......@@ -29,16 +29,22 @@ export class UniAnimationElement<T extends object> extends UniElement<
}
fn.call(context)
}
init(nodeJson: Partial<UniNodeJSON>) {
super.init(nodeJson)
const item = animation.watch.animation
watch(
() => this.$props.animation,
() => {
this.call(item.handler)
},
{ deep: item.deep }
)
this.call(animation.mounted)
setAttribute(name: string, value: unknown) {
if (name === 'animation') {
this.$animate = true
}
return super.setAttribute(name, value)
}
update(isMounted: boolean = false) {
if (!this.$animate) {
return
}
if (isMounted) {
return this.call(animation.mounted)
}
if (this.$animate) {
this.$animate = false
this.call(animation.watch.animation.handler)
}
}
}
......@@ -7,6 +7,7 @@ import { patchStyle } from '../modules/style'
import { patchEvent } from '../modules/events'
import { UniCustomElement } from '../components'
import { queuePostActionJob } from '../scheduler'
import { decodeAttr } from '../utils'
export class UniElement<T extends object> extends UniNode {
declare $: UniCustomElement
......@@ -47,7 +48,7 @@ export class UniElement<T extends object> extends UniNode {
},
{ flush: 'sync' }
)
this.update()
this.update(true)
}
setAttrs(attrs: Record<string, any>) {
Object.keys(attrs).forEach((name) => {
......@@ -84,6 +85,7 @@ export class UniElement<T extends object> extends UniNode {
}
}
setAttribute(name: string, value: unknown) {
value = decodeAttr(value)
if (this.$propNames.indexOf(name) !== -1) {
;(this.$props as any)[name] = value
} else {
......@@ -97,5 +99,5 @@ export class UniElement<T extends object> extends UniNode {
this.$.removeAttribute(name)
}
}
update() {}
update(isMounted: boolean = false) {}
}
......@@ -28,7 +28,7 @@ export class UniHoverElement extends UniAnimationElement<HoverProps> {
...propNames,
])
}
update() {
update(isMounted: boolean = false) {
const hoverClass = this.$props['hover-class']
if (hoverClass && hoverClass !== 'none') {
if (!this._hover) {
......@@ -40,6 +40,7 @@ export class UniHoverElement extends UniAnimationElement<HoverProps> {
this._hover.removeEvent()
}
}
super.update(isMounted)
}
}
......
......@@ -39,7 +39,7 @@ export class UniTextElement extends UniAnimationElement<TextProps> {
this.update()
}
update() {
update(isMounted: boolean = false) {
const {
$props: { space, decode },
} = this
......@@ -47,5 +47,6 @@ export class UniTextElement extends UniAnimationElement<TextProps> {
space,
decode,
}).join('<br>')
super.update(isMounted)
}
}
import { JSON_PROTOCOL } from '@dcloudio/uni-shared'
import { isString } from '@vue/shared'
const JSON_PROTOCOL_LEN = JSON_PROTOCOL.length
export function decodeAttr(value: unknown) {
if (isString(value) && value.indexOf(JSON_PROTOCOL) === 0) {
value = JSON.parse(value.substr(JSON_PROTOCOL_LEN))
}
return value
}
......@@ -386,7 +386,8 @@ export default function vueFactory(exports) {
super(nodeType, nodeName, container);
this.attributes = Object.create(null);
this.style = null;
this._html = null; // this.style = proxyStyle(new UniCSSStyleDeclaration())
this.vShow = null;
this._html = null;
}
get className() {
......@@ -562,6 +563,8 @@ export default function vueFactory(exports) {
}
}
var JSON_PROTOCOL = 'json://';
/**
* Make a map and return a function for checking if a key
* is in that map.
......@@ -570,7 +573,6 @@ export default function vueFactory(exports) {
* So that rollup can tree-shake them if necessary.
*/
function makeMap(str, expectsLowerCase) {
var map = Object.create(null);
var list = str.split(',');
......@@ -11127,8 +11129,13 @@ export default function vueFactory(exports) {
VIDEO: ['danmu-list', 'header'],
'WEB-VIEW': ['webview-styles']
};
var forcePatchPropKeys = ['animation'];
var forcePatchProp = (_, key) => {
if (forcePatchPropKeys.indexOf(key) > -1) {
return true;
}
var keys = forcePatchProps[_.nodeName];
if (keys && keys.indexOf(key) > -1) {
......@@ -11156,14 +11163,18 @@ export default function vueFactory(exports) {
patchEvent(el, key, prevValue, nextValue);
}
} else {
if (isProxy(nextValue)) {
var equal = prevValue === nextValue; // 触发收集最新依赖
// 非基本类型
if (isObject(nextValue)) {
var equal = prevValue === nextValue; // 可触发收集响应式数据的最新依赖
nextValue = '$JSON$:' + JSON.stringify(nextValue);
nextValue = JSON_PROTOCOL + JSON.stringify(nextValue);
if (equal && el.getAttribute(key) === nextValue) {
return;
}
} else if (prevValue === nextValue) {
// 基本类型
return;
}
patchAttr(el, key, nextValue);
......@@ -11844,7 +11855,6 @@ export default function vueFactory(exports) {
beforeMount(el, {
value
}) {
el._vod = el.style.display === 'none' ? '' : el.style.display;
setDisplay(el, value);
},
......@@ -11865,7 +11875,7 @@ export default function vueFactory(exports) {
};
function setDisplay(el, value) {
el.style.display = value ? el._vod : 'none';
el.setAttribute('.vShow', !!value);
}
var rendererOptions = extend({
......
import { UniInputElement, UniTextAreaElement, UniElement, UniTextNode, UniCommentNode } from '@dcloudio/uni-shared';
import { UniInputElement, UniTextAreaElement, UniElement, UniTextNode, UniCommentNode, JSON_PROTOCOL } from '@dcloudio/uni-shared';
/**
* Make a map and return a function for checking if a key
......@@ -9134,7 +9134,11 @@ const forcePatchProps = {
VIDEO: ['danmu-list', 'header'],
'WEB-VIEW': ['webview-styles']
};
const forcePatchPropKeys = ['animation'];
const forcePatchProp = (_, key) => {
if (forcePatchPropKeys.indexOf(key) > -1) {
return true;
}
const keys = forcePatchProps[_.nodeName];
if (keys && keys.indexOf(key) > -1) {
return true;
......@@ -9158,14 +9162,19 @@ const patchProp = (el, key, prevValue, nextValue, parentComponent) => {
}
}
else {
if (isProxy(nextValue)) {
// 非基本类型
if (isObject(nextValue)) {
const equal = prevValue === nextValue;
// 触发收集最新依赖
nextValue = '$JSON$:' + JSON.stringify(nextValue);
// 可触发收集响应式数据的最新依赖
nextValue = JSON_PROTOCOL + JSON.stringify(nextValue);
if (equal && el.getAttribute(key) === nextValue) {
return;
}
}
else if (prevValue === nextValue) {
// 基本类型
return;
}
patchAttr(el, key, nextValue);
}
break;
......@@ -9728,7 +9737,6 @@ const withKeys = (fn, modifiers) => {
const vShow = {
beforeMount(el, { value }) {
el._vod = (el.style.display === 'none' ? '' : el.style.display);
setDisplay(el, value);
},
updated(el, { value, oldValue }) {
......@@ -9741,7 +9749,7 @@ const vShow = {
}
};
function setDisplay(el, value) {
el.style.display = value ? el._vod : 'none';
el.setAttribute('.vShow', !!value);
}
const rendererOptions = extend({ patchProp, forcePatchProp }, nodeOps);
......
......@@ -577,8 +577,8 @@ class UniBaseNode extends UniNode {
super(nodeType, nodeName, container);
this.attributes = Object.create(null);
this.style = null;
this.vShow = null;
this._html = null;
// this.style = proxyStyle(new UniCSSStyleDeclaration())
}
get className() {
return (this.attributes[ATTR_CLASS] || '');
......@@ -833,6 +833,7 @@ const UNI_SSR_GLOBAL_DATA = 'globalData';
const SCHEME_RE = /^([a-z-]+:)?\/\//i;
const DATA_RE = /^data:.*,.*/;
const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE';
const JSON_PROTOCOL = 'json://';
// lifecycle
// App and Page
const ON_SHOW = 'onShow';
......@@ -958,6 +959,7 @@ exports.COMPONENT_SELECTOR_PREFIX = COMPONENT_SELECTOR_PREFIX;
exports.DATA_RE = DATA_RE;
exports.EventChannel = EventChannel;
exports.EventModifierFlags = EventModifierFlags;
exports.JSON_PROTOCOL = JSON_PROTOCOL;
exports.NAVBAR_HEIGHT = NAVBAR_HEIGHT;
exports.NODE_TYPE_COMMENT = NODE_TYPE_COMMENT;
exports.NODE_TYPE_ELEMENT = NODE_TYPE_ELEMENT;
......
......@@ -186,6 +186,8 @@ export declare interface IUniPageNode {
onNodeValue: (thisNode: UniNode, val: string | null) => void;
}
export declare const JSON_PROTOCOL = "json://";
export declare const NAVBAR_HEIGHT = 44;
declare type NavigateToOptionEvents = Record<string, (...args: any[]) => void>;
......@@ -410,6 +412,7 @@ export declare const UNI_SSR_TITLE = "title";
export declare class UniBaseNode extends UniNode {
attributes: Record<string, unknown>;
style: null | string | Record<string, string | string[]>;
vShow: null | boolean;
protected _html: string | null;
constructor(nodeType: UniNodeType, nodeName: string, container: UniElement | IUniPageNode);
get className(): string;
......@@ -451,6 +454,7 @@ export declare class UniEvent {
bubbles: boolean;
cancelable: boolean;
defaultPrevented: boolean;
detail?: Record<string, any>;
timeStamp: number;
_stop: boolean;
_end: boolean;
......
......@@ -573,8 +573,8 @@ class UniBaseNode extends UniNode {
super(nodeType, nodeName, container);
this.attributes = Object.create(null);
this.style = null;
this.vShow = null;
this._html = null;
// this.style = proxyStyle(new UniCSSStyleDeclaration())
}
get className() {
return (this.attributes[ATTR_CLASS] || '');
......@@ -829,6 +829,7 @@ const UNI_SSR_GLOBAL_DATA = 'globalData';
const SCHEME_RE = /^([a-z-]+:)?\/\//i;
const DATA_RE = /^data:.*,.*/;
const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE';
const JSON_PROTOCOL = 'json://';
// lifecycle
// App and Page
const ON_SHOW = 'onShow';
......@@ -933,4 +934,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, ATTR_CLASS, ATTR_STYLE, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventChannel, EventModifierFlags, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, 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, createUniEvent, 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, EventChannel, EventModifierFlags, JSON_PROTOCOL, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, 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, createUniEvent, 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 };
......@@ -20,6 +20,8 @@ export const DATA_RE = /^data:.*,.*/
export const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE'
export const JSON_PROTOCOL = 'json://'
// lifecycle
// App and Page
......
......@@ -35,6 +35,7 @@ export class UniEvent {
bubbles: boolean
cancelable: boolean
defaultPrevented: boolean = false
detail?: Record<string, any>
timeStamp = Date.now()
......
......@@ -257,6 +257,7 @@ export const ATTR_STYLE = 'style'
export class UniBaseNode extends UniNode {
attributes: Record<string, unknown> = Object.create(null)
style: null | string | Record<string, string | string[]> = null
vShow: null | boolean = null
protected _html: string | null = null
......@@ -266,7 +267,6 @@ export class UniBaseNode extends UniNode {
container: UniElement | IUniPageNode
) {
super(nodeType, nodeName, container)
// this.style = proxyStyle(new UniCSSStyleDeclaration())
}
get className() {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册