refactor(miniapp): template render (#1868)

* chore: template render * fix: filterNodes params * fix: builtin component render * fix: picker-view * fix: input render * fix: node missing * feat(miniapp): support native form components * chore: add value cache * fix: domNode error * fix: form element * fix(miniapp): add use-template check when init data * fix: custom component render * feat: add scrollTop * feat: support appear * chore: opitimize isEqual Co-authored-by: ChrisCindy <[email protected]>
alibaba · May 20, 2020 · 4e559a7 · 4e559a7
1 parent bda6fd2
commit 4e559a7
Show file tree

Hide file tree

Showing 55 changed files with 2,502 additions and 1,775 deletions.
diff --git a/packages/miniapp-element/scripts/adapter.js b/packages/miniapp-element/scripts/adapter.js
@@ -16,6 +16,8 @@ export default {
     touchCancel: 'onTouchCancel',
     load: 'onLoad',
     error: 'onError',
+    appear: 'onAppear',
+    disAppear: 'onDisappear',
     supportComponentGenerics: false
   },
   wechat: {

diff --git a/packages/miniapp-element/scripts/genreateSubtree.js b/packages/miniapp-element/scripts/genreateSubtree.js
@@ -13,17 +13,18 @@ function getSubtreeSimple(i, platform) {
   const isFirst = i === 1;
   const subContent = [
     `<block ${adapter[platform].if}="{{${itemName}.type === 'text'}}">{{${itemName}.content}}</block>`,
-    `<image ${adapter[platform].elseif}="{{${itemName}.isImage}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.class || ''}}" style="{{${itemName}.style || ''}}" src="{{${itemName}.src}}" animation="{{${itemName}.animation}}"  rendering-mode="{{${itemName}.mode ? 'backgroundImage' : 'img'}}" mode="{{${itemName}.mode}}" lazy-load="{{${itemName}.lazyLoad}}" show-menu-by-longpress="{{${itemName}.showMenuByLongpress}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].load}="onImgLoad" ${adapter[platform].error}="onImgError"></image>`,
-    `<view ${adapter[platform].elseif}="{{${itemName}.isLeaf${isLast ? '' : ' || ' + itemName + '.isSimple'}}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.class || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap">{{${itemName}.content}}${isLast ? '</view>' : ''}`
+    `<image ${adapter[platform].elseif}="{{${itemName}.isImage}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.className || ''}}" style="{{${itemName}.style || ''}}" src="{{${itemName}.src}}" animation="{{${itemName}.animation}}"  rendering-mode="{{${itemName}.mode ? 'backgroundImage' : 'img'}}" mode="{{${itemName}.mode}}" lazy-load="{{${itemName}.lazyLoad}}" show-menu-by-longpress="{{${itemName}.showMenuByLongpress}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].load}="onImgLoad" ${adapter[platform].error}="onImgError"></image>`,
+    `<template ${adapter[platform].elseif}="{{${itemName}.useTemplate}}" is="{{${itemName}.extra.builtinComponentName}}" data="{{...${itemName}.extra}}"/>`,
+    `<view ${adapter[platform].elseif}="{{${itemName}.isLeaf${isLast ? '' : ' || ' + itemName + '.isSimple'}}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.className || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].appear ? adapter[platform].appear + '="onAppear"' : ''} ${adapter[platform].disAppear ? adapter[platform].disAppear + '="onDisappear"' : ''} >{{${itemName}.content}}${isLast ? '</view>' : ''}`
   ];
 
   // Recursion next
   if (!isLast) {
-    subContent.splice(3, 0, ...getSubtreeSimple(i + 1, platform));
+    subContent.splice(4, 0, ...getSubtreeSimple(i + 1, platform));
   }
 
   // Add custom element
-  subContent.push(`<element ${adapter[platform].elseif}="{{${itemName}.type === 'element'}}" in-cover="{{inCover}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.class || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].supportComponentGenerics ? 'generic:custom-component="custom-component"' : ''}></element>`);
+  subContent.push(`<element ${adapter[platform].elseif}="{{${itemName}.type === 'element'}}" in-cover="{{inCover}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.className || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].supportComponentGenerics ? 'generic:custom-component="custom-component"' : ''}></element>`);
 
   // Add head content & foot content
   const outputContent = [
@@ -48,17 +49,18 @@ function getSubtreeCoverSimple(i, platform) {
   const isLast = i === DOM_SUBTREE_LEVEL;
   const isFirst = i === 1;
   const subContent = [
-    `<cover-image ${adapter[platform].if}="{{${itemName}.isImage}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.class || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" src="{{${itemName}.src}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].load}="onImgLoad" ${adapter[platform].error}="onImgError"></cover-image>`,
-    `<cover-view ${adapter[platform].elseif}="{{${itemName}.type === 'text' || ${itemName}.isLeaf || ${itemName}.isSimple}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.class || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap">{{${itemName}.content}}${isLast ? '</cover-view>' : ''}`
+    `<cover-image ${adapter[platform].if}="{{${itemName}.isImage}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.className || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" src="{{${itemName}.src}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].load}="onImgLoad" ${adapter[platform].error}="onImgError"></cover-image>`,
+    `<template ${adapter[platform].elseif}="{{${itemName}.useTemplate}}" is="{{${itemName}.extra.builtinComponentName}}" data="{{...${itemName}.extra}}"/>`,
+    `<cover-view ${adapter[platform].elseif}="{{${itemName}.type === 'text' || ${itemName}.isLeaf || ${itemName}.isSimple}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.className || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap">{{${itemName}.content}}${isLast ? '</cover-view>' : ''}`
   ];
 
   // Recursion next
   if (!isLast) {
-    subContent.splice(2, 0, ...getSubtreeCoverSimple(i + 1, platform));
+    subContent.splice(3, 0, ...getSubtreeCoverSimple(i + 1, platform));
   }
 
   // Add custom element
-  subContent.push(`<element ${adapter[platform].elseif}="{{${itemName}.type === 'element'}}" in-cover="{{true}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.class || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].supportComponentGenerics ? 'generic:custom-component="custom-component"' : ''}></element>`);
+  subContent.push(`<element ${adapter[platform].elseif}="{{${itemName}.type === 'element'}}" in-cover="{{true}}" data-private-node-id="{{${itemName}.nodeId}}" data-private-page-id="{{${itemName}.pageId}}" id="{{${itemName}.id}}" class="{{${itemName}.className || ''}}" style="{{${itemName}.style || ''}}" animation="{{${itemName}.animation}}" ${adapter[platform].touchStart}="onTouchStart" ${adapter[platform].touchMove}="onTouchMove" ${adapter[platform].touchEnd}="onTouchEnd" ${adapter[platform].touchCancel}="onTouchCancel" ${adapter[platform].tap}="onTap" ${adapter[platform].supportComponentGenerics ? 'generic:custom-component="custom-component"' : ''}></element>`);
 
   // Add head and foot
   const outputContent = [
@@ -85,6 +87,9 @@ function createSubtreeTemplate(platform) {
     '</template>',
     '\n'
   ];
+  if (platform !== 'ali') {
+    content.unshift(`<import src="./inner-component.${adapter[platform].xml}"/>`);
+  }
   return content.join('');
 }
 
@@ -98,23 +103,34 @@ function createSubtreeCoverTemplate(platform) {
     '</template>',
     '\n'
   ];
+  if (platform !== 'ali') {
+    content.unshift(`<import src="./inner-component.${adapter[platform].xml}"/>`);
+  }
   return content.join('');
 }
 
-export default function(distPath, platform) {
+function createInnerComponentTemplate(templatesDir, platform) {
+  return fs.readFileSync(path.join(templatesDir, `inner-component.${adapter[platform].xml}`), 'utf8');
+}
+
+export default function(distPath, templatesDir, platform) {
   switch (platform) {
     case 'ali':
       const subtreeAXMLTemplate = createSubtreeTemplate(platform);
       const subtreeCoverAXMLTemplate = createSubtreeCoverTemplate(platform);
+      const innerComponentAXMLTemplate = createInnerComponentTemplate(templatesDir, platform);
       const XMLPath = path.join(distPath, 'index.axml');
+      fs.appendFileSync(XMLPath, innerComponentAXMLTemplate);
       fs.appendFileSync(XMLPath, subtreeAXMLTemplate);
       fs.appendFileSync(XMLPath, subtreeCoverAXMLTemplate);
       break;
     case 'wechat':
       const subtreeWXMLTemplate = createSubtreeTemplate(platform);
       const subtreeCoverWXMLTemplate = createSubtreeCoverTemplate(platform);
+      const innerComponentWXMLTemplate = createInnerComponentTemplate(templatesDir, platform);
       const templatePath = path.join(distPath, 'template');
       fs.ensureDirSync(templatePath);
+      fs.writeFileSync(path.join(templatePath, `inner-component.${adapter[platform].xml}`), innerComponentWXMLTemplate, 'utf8');
       fs.writeFileSync(path.join(templatePath, `subtree.${adapter[platform].xml}`), subtreeWXMLTemplate, 'utf8');
       fs.writeFileSync(path.join(templatePath, `subtree-cover.${adapter[platform].xml}`), subtreeCoverWXMLTemplate, 'utf8');
       break;

diff --git a/packages/miniapp-element/scripts/handleComponentFile.js b/packages/miniapp-element/scripts/handleComponentFile.js
@@ -8,7 +8,8 @@ export default function(platform) {
   fs.ensureDirSync(distPath);
 
   // Copy index file
-  const sourceIndexXMLFilePath = path.resolve('src', 'templates', `index.${adapter[platform].xml}`);
+  const templatesDir = path.resolve('src', 'templates');
+  const sourceIndexXMLFilePath = path.resolve(templatesDir, `index.${adapter[platform].xml}`);
   const distIndexXMLFilePath = path.join(distPath, `index.${adapter[platform].xml}`);
   const sourceIndexJSONFilePath = path.resolve('src', `index.${platform}.json`);
   const distIndexJSONFilePath = path.join(distPath, 'index.json');
@@ -22,5 +23,5 @@ export default function(platform) {
   fs.writeFileSync(path.join(customComponentPath, 'index.json'), '{ "component": true }');
   fs.writeFileSync(path.join(customComponentPath, `index.${adapter[platform].xml}`), '<slot></slot>');
 
-  generateSubtree(distPath, platform);
+  generateSubtree(distPath, templatesDir, platform);
 }
diff --git a/packages/miniapp-element/src/builtInComponents/ad.js b/packages/miniapp-element/src/builtInComponents/ad.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'ad',
@@ -20,13 +20,13 @@ export default {
   }],
   handles: {
     onAdLoad(evt) {
-      callSimpleEvent('load', evt, this.domNode);
+      callSingleEvent('load', evt, this);
     },
     onAdError(evt) {
-      callSimpleEvent('error', evt, this.domNode);
+      callSingleEvent('error', evt, this);
     },
     onAdClose(evt) {
-      callSimpleEvent('close', evt, this.domNode);
+      callSingleEvent('close', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/button.js b/packages/miniapp-element/src/builtInComponents/button.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'button',
@@ -107,23 +107,22 @@ export default {
   }],
   handles: {
     onButtonGetUserInfo(evt) {
-      callSimpleEvent('getuserinfo', evt, this.domNode);
+      callSingleEvent('getuserinfo', evt, this);
     },
     onButtonContact(evt) {
-      callSimpleEvent('contact', evt, this.domNode);
+      callSingleEvent('contact', evt, this);
     },
     onButtonGetPhoneNumber(evt) {
-      callSimpleEvent('getphonenumber', evt, this.domNode);
+      callSingleEvent('getphonenumber', evt, this);
     },
     onButtonError(evt) {
-      callSimpleEvent('error', evt, this.domNode);
+      callSingleEvent('error', evt, this);
     },
     onButtonOpenSetting(evt) {
-      callSimpleEvent('opensetting', evt, this.domNode);
+      callSingleEvent('opensetting', evt, this);
     },
     onButtonLaunchApp(evt) {
-      callSimpleEvent('launchapp', evt, this.domNode);
+      callSingleEvent('launchapp', evt, this);
     },
-
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/camera.js b/packages/miniapp-element/src/builtInComponents/camera.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'camera',
@@ -30,16 +30,16 @@ export default {
   }],
   handles: {
     onCameraStop(evt) {
-      callSimpleEvent('stop', evt, this.domNode);
+      callSingleEvent('stop', evt, this);
     },
     onCameraError(evt) {
-      callSimpleEvent('error', evt);
+      callSingleEvent('error', evt, this);
     },
     onCameraInitDone(evt) {
-      callSimpleEvent('initdone', evt, this.domNode);
+      callSingleEvent('initdone', evt, this);
     },
     onCameraScanCode(evt) {
-      callSimpleEvent('scancode', evt, this.domNode);
+      callSingleEvent('scancode', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/canvas.js b/packages/miniapp-element/src/builtInComponents/canvas.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'canvas',
@@ -25,25 +25,25 @@ export default {
   }],
   handles: {
     onCanvasTouchStart(evt) {
-      this.callSimpleEvent('canvastouchstart', evt);
+      callSingleEvent('canvastouchstart', evt, this);
     },
 
     onCanvasTouchMove(evt) {
-      this.callSimpleEvent('canvastouchmove', evt);
+      callSingleEvent('canvastouchmove', evt, this);
     },
 
     onCanvasTouchEnd(evt) {
-      this.callSimpleEvent('canvastouchend', evt);
+      callSingleEvent('canvastouchend', evt, this);
     },
 
     onCanvasTouchCancel(evt) {
-      this.callSimpleEvent('canvastouchcancel', evt);
+      callSingleEvent('canvastouchcancel', evt, this);
     },
     onCanvasLongTap(evt) {
-      callSimpleEvent('longtap', evt, this.domNode);
+      callSingleEvent('longtap', evt, this);
     },
     onCanvasError(evt) {
-      callSimpleEvent('error', evt, this.domNode);
+      callSingleEvent('error', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/checkbox-group.js b/packages/miniapp-element/src/builtInComponents/checkbox-group.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'checkbox-group',
@@ -10,7 +10,7 @@ export default {
   }],
   handles: {
     onCheckboxChange(evt) {
-      callSimpleEvent('change', evt, this.domNode);
+      callSingleEvent('change', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/checkbox.js b/packages/miniapp-element/src/builtInComponents/checkbox.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'checkbox',
@@ -7,6 +7,11 @@ export default {
     get(domNode) {
       return domNode.getAttribute('value') || '';
     },
+  }, {
+    name: 'name',
+    get(domNode) {
+      return domNode.getAttribute('name') || '';
+    },
   }, {
     name: 'checked',
     get(domNode) {
@@ -25,7 +30,7 @@ export default {
   }],
   handles: {
     onCheckboxItemChange(evt) {
-      callSimpleEvent('change', evt, this.domNode);
+      callSingleEvent('change', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/cover-image.js b/packages/miniapp-element/src/builtInComponents/cover-image.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'cover-image',
@@ -15,10 +15,10 @@ export default {
   }],
   handles: {
     onCoverImageLoad(evt) {
-      callSimpleEvent('load', evt, this.domNode);
+      callSingleEvent('load', evt, this);
     },
     onCoverImageError(evt) {
-      callSimpleEvent('error', evt, this.domNode);
+      callSingleEvent('error', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/editor.js b/packages/miniapp-element/src/builtInComponents/editor.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'editor',
@@ -35,19 +35,19 @@ export default {
   }],
   handles: {
     onEditorReady(evt) {
-      callSimpleEvent('ready', evt, this.domNode);
+      callSingleEvent('ready', evt, this);
     },
     onEditorFocus(evt) {
-      callSimpleEvent('focus', evt, this.domNode);
+      callSingleEvent('focus', evt, this);
     },
     onEditorBlur(evt) {
-      callSimpleEvent('blur', evt, this.domNode);
+      callSingleEvent('blur', evt, this);
     },
     onEditorInput(evt) {
-      callSimpleEvent('input', evt, this.domNode);
+      callSingleEvent('input', evt, this);
     },
     onEditorStatusChange(evt) {
-      callSimpleEvent('statuschange', evt, this.domNode);
+      callSingleEvent('statuschange', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/form.js b/packages/miniapp-element/src/builtInComponents/form.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'form',
@@ -20,10 +20,10 @@ export default {
   }],
   handles: {
     onFormSubmit(evt) {
-      callSimpleEvent('submit', evt, this.domNode);
+      callSingleEvent('submit', evt, this);
     },
     onFormReset(evt) {
-      callSimpleEvent('reset', evt, this.domNode);
+      callSingleEvent('reset', evt, this);
     },
   },
 };
diff --git a/packages/miniapp-element/src/builtInComponents/image.js b/packages/miniapp-element/src/builtInComponents/image.js
@@ -1,4 +1,4 @@
-import callSimpleEvent from '../events/callSimpleEvent';
+import callSingleEvent from '../events/callSingleEvent';
 
 export default {
   name: 'image',
@@ -35,10 +35,10 @@ export default {
   }],
   handles: {
     onImageLoad(evt) {
-      callSimpleEvent('load', evt, this.domNode);
+      callSingleEvent('load', evt, this);
     },
     onImageError(evt) {
-      callSimpleEvent('error', evt, this.domNode);
+      callSingleEvent('error', evt, this);
     },
   },
 };