New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[proposal] support define methods for kind of native components #969

Closed
Jinjiang opened this Issue Aug 10, 2016 · 7 comments

Comments

Projects
None yet
4 participants
@Jinjiang
Contributor

Jinjiang commented Aug 10, 2016

For example: the methods in webview module could be used directly at a <web> element. Usage:

function vmMethod() {
  var el = this.$el('web')
  el.goBack()
  el.refresh()
  el.goForward()
}

Once the method called. JS Framework will run callNative(instanceId, [{ module: 'web' /* component name */, method: 'goBack' /* method name */, args: []}]). The module name may need discussed more.

That need JS Framework to return a "real" DOM element when this.$el(id) called. At the same time native should register methods for each native components when registerComponents(...). Usage:

registerComponents([
  { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
])
@fkysly

This comment has been minimized.

Show comment
Hide comment
@fkysly

fkysly Oct 25, 2016

After discussion, the solution is as follows:

Usage:

function vmMethod() {
  var el = this.$el('web')
  el.goBack()
  el.refresh()
  el.goForward()
}

jsfm -> native

callNative(instanceId, [{ 
    module: 'web' | component: 'web' ,
    ref: 'xx' (optional) ,
    method: 'goBack' ,
    args: []
}])

native register methods:

registerComponents([
  { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
])

fkysly commented Oct 25, 2016

After discussion, the solution is as follows:

Usage:

function vmMethod() {
  var el = this.$el('web')
  el.goBack()
  el.refresh()
  el.goForward()
}

jsfm -> native

callNative(instanceId, [{ 
    module: 'web' | component: 'web' ,
    ref: 'xx' (optional) ,
    method: 'goBack' ,
    args: []
}])

native register methods:

registerComponents([
  { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
])
@fkysly

This comment has been minimized.

Show comment
Hide comment
@fkysly

fkysly Oct 25, 2016

Be careful: native use registerComponents methods , the method name must be Camel-Case

fkysly commented Oct 25, 2016

Be careful: native use registerComponents methods , the method name must be Camel-Case

@MrRaindrop

This comment has been minimized.

Show comment
Hide comment
@MrRaindrop

MrRaindrop Oct 29, 2016

Member

@fkysly during other calling for native APIs, the element ref is always the first arguments in the task.args, not a separate parameter (task.ref) for a task object. Why is this changed on this situation ? I think this is better for historical reason and consistency:

callNative(instanceId, [{ 
    module: 'web' | component: 'web' ,
    method: 'goBack' ,
    args: [ref, ..., cid]
}])
Member

MrRaindrop commented Oct 29, 2016

@fkysly during other calling for native APIs, the element ref is always the first arguments in the task.args, not a separate parameter (task.ref) for a task object. Why is this changed on this situation ? I think this is better for historical reason and consistency:

callNative(instanceId, [{ 
    module: 'web' | component: 'web' ,
    method: 'goBack' ,
    args: [ref, ..., cid]
}])

Hanks10100 added a commit that referenced this issue Nov 4, 2016

Merge pull request #1578 from fkysly/jsfm-feature-0.16
+ [jsfm] v0.16.18 fix #969, support define methods for kind of native component

Hanks10100 added a commit that referenced this issue Nov 7, 2016

Merge pull request #1597 from fkysly/html5-feature-0.4
+ [html5] fix #969, support define methods for kind of native component
@Jinjiang

This comment has been minimized.

Show comment
Hide comment
@Jinjiang

Jinjiang Nov 8, 2016

Contributor

Here is another implementation which create extended element constructors which has methods in its own prototype. https://github.com/jinjiang/weex/tree/jsfm-feature-component-methods

Contributor

Jinjiang commented Nov 8, 2016

Here is another implementation which create extended element constructors which has methods in its own prototype. https://github.com/jinjiang/weex/tree/jsfm-feature-component-methods

@Hanks10100

This comment has been minimized.

Show comment
Hide comment
@Hanks10100

Hanks10100 Nov 9, 2016

Member

#1604 did this.

Member

Hanks10100 commented Nov 9, 2016

#1604 did this.

@Jinjiang Jinjiang closed this in b8e54eb Nov 14, 2016

Hanks10100 added a commit to Hanks10100/weex that referenced this issue Nov 14, 2016

[html5] Merge dev into html5-feature-0.5 and fix the conflicts (#7)
* ci

* update hello.we

* update podfile path

* update workspace

* update xcode_sdk

* update xcode_sdk

* * [jsfm] improve the coverage of api methods test

* * [jsfm] add register module test cases

* * [jsfm] add invalid version check in downgrade

* + [jsfm] add test case for App.prototype methods

* * [jsfm] add test case for updateActions

* * [jsfm] add test case for shared methods

* + [jsfm] add some test for runtime

* * [jsfm] fix eslint

* + [jsfm] add handler.js to generate callNative task handler

* * [jsfm] separate the operation of the dispatch task into a function

* * [jsfm] add default parameter for createAction

* * [jsfm] add all top level API for dom operation

* * [jsfm] adds validation when binding events

* * [jsfm] move docMap into a sole file

* * [jsfm] move common methods into operation.js

* * [jsfm] split vdom.js into different files

* * [jsfm] move element operation methods to operation.js

* + [jsfm] add legacy test

* * [jsfm] fix condition judgment bug in insertBefore & insertAfter

* * [jsfm] move event handler validation to directive bindEvents

* * [jsfm] move extend into operation

* * [jsfm] use extend() to add prototype methods

* * [jsfm] wrap IFFE and use strict mode for js bundle

* * [jsfm] add detailed comments for runtime files

* - [jsfm] remove resetClassStyle api from document prototype

* + [jsfm] add test for static

* * [jsfm] fix format for lint

* + [jsfm] add vm/compiler test

* * [jsfm] just warn when bind an invalid event handler

* * [jsfm] move browserifyRequire out of the define

* * [jsfm] move shared utils to legacy framework

* * [jsfm] add setNativeConsole and resetNativeConsole API

* * [jsfm] add setNativeTimer and resetNativeTimer API

* + [jsfm] add build script for native & runtime

* * [jsfm] bump the Node version in ci config

* * [jsfm] skip the console test

* * [jsfm] modify the runtime usage in html5 render

* + [jsfm] add test case for strict mode

* * [jsfm] freeze the prototype of build-in objects

* * [jsfm] istanbul ignore ployfills

* + [jsfm] add test case for freezePrototype

* * [jsfm] add the missing setTimeout for Android

* + [jsfm] add test for legacy app/core/static/util

* * [jsfm] use Object.defineProperty to add properties

* * [jsfm] use Object.create to extend prototype

* + [jsfm] add unit test

* * [ios] 1. fix refresh location 2. cancel playground re-checkupdate

* + [jsfm] merge examples config file

* * [ios] remove unused

* Revert "update hello.we"

This reverts commit 990d30e.

* * [ios] update playground version

* * [jsfm] merge package.json add package.json

* * [jsfm] remove the 'this' in downgrade

* * [jsfm] import promise hack before polyfill

* * [jsfm] modify the rollup build script

* - [jsfm] no need to freeze Math.prototype

* + [jsfm] fix #969, support define methods for kind of native component

* * [jsfm] v0.16.18

* * [jsfm] add node test case

* bugfix for config

bugfix for config, need to be a json.

* * [jsfm] Bump vue version.

* bug fix. retrieve sqliteDatabase fails. (#1600)

* bug fix. retrieve sqliteDatabase fails.

* reuse WXThread#secure instead of make a new one

* update

* re create table if not exists

* * [all] fix the regex of commit message

* * [jsfm] make 'global' to be a local variable

MrRaindrop added a commit that referenced this issue Nov 14, 2016

[html5] Merge dev into html5-feature-0.5 and fix the conflicts (#1635)
* ci

* update hello.we

* update podfile path

* update workspace

* update xcode_sdk

* update xcode_sdk

* * [jsfm] improve the coverage of api methods test

* * [jsfm] add register module test cases

* * [jsfm] add invalid version check in downgrade

* + [jsfm] add test case for App.prototype methods

* * [jsfm] add test case for updateActions

* * [jsfm] add test case for shared methods

* + [jsfm] add some test for runtime

* * [jsfm] fix eslint

* + [jsfm] add handler.js to generate callNative task handler

* * [jsfm] separate the operation of the dispatch task into a function

* * [jsfm] add default parameter for createAction

* * [jsfm] add all top level API for dom operation

* * [jsfm] adds validation when binding events

* * [jsfm] move docMap into a sole file

* * [jsfm] move common methods into operation.js

* * [jsfm] split vdom.js into different files

* * [jsfm] move element operation methods to operation.js

* + [jsfm] add legacy test

* * [jsfm] fix condition judgment bug in insertBefore & insertAfter

* * [jsfm] move event handler validation to directive bindEvents

* * [jsfm] move extend into operation

* * [jsfm] use extend() to add prototype methods

* * [jsfm] wrap IFFE and use strict mode for js bundle

* * [jsfm] add detailed comments for runtime files

* - [jsfm] remove resetClassStyle api from document prototype

* + [jsfm] add test for static

* * [jsfm] fix format for lint

* + [jsfm] add vm/compiler test

* * [jsfm] just warn when bind an invalid event handler

* * [jsfm] move browserifyRequire out of the define

* * [jsfm] move shared utils to legacy framework

* * [jsfm] add setNativeConsole and resetNativeConsole API

* * [jsfm] add setNativeTimer and resetNativeTimer API

* + [jsfm] add build script for native & runtime

* * [jsfm] bump the Node version in ci config

* * [jsfm] skip the console test

* * [jsfm] modify the runtime usage in html5 render

* + [jsfm] add test case for strict mode

* * [jsfm] freeze the prototype of build-in objects

* * [jsfm] istanbul ignore ployfills

* + [jsfm] add test case for freezePrototype

* * [jsfm] add the missing setTimeout for Android

* + [jsfm] add test for legacy app/core/static/util

* * [jsfm] use Object.defineProperty to add properties

* * [jsfm] use Object.create to extend prototype

* + [jsfm] add unit test

* * [ios] 1. fix refresh location 2. cancel playground re-checkupdate

* + [jsfm] merge examples config file

* * [ios] remove unused

* Revert "update hello.we"

This reverts commit 990d30e.

* * [ios] update playground version

* * [jsfm] merge package.json add package.json

* * [jsfm] remove the 'this' in downgrade

* * [jsfm] import promise hack before polyfill

* * [jsfm] modify the rollup build script

* - [jsfm] no need to freeze Math.prototype

* + [jsfm] fix #969, support define methods for kind of native component

* * [jsfm] v0.16.18

* * [jsfm] add node test case

* bugfix for config

bugfix for config, need to be a json.

* * [jsfm] Bump vue version.

* bug fix. retrieve sqliteDatabase fails. (#1600)

* bug fix. retrieve sqliteDatabase fails.

* reuse WXThread#secure instead of make a new one

* update

* re create table if not exists

* * [all] fix the regex of commit message

* * [jsfm] make 'global' to be a local variable
@Jinjiang

This comment has been minimized.

Show comment
Hide comment
@Jinjiang

Jinjiang Nov 18, 2016

Contributor

reopen for #1604

Contributor

Jinjiang commented Nov 18, 2016

reopen for #1604

@Jinjiang Jinjiang reopened this Nov 18, 2016

@Hanks10100

This comment has been minimized.

Show comment
Hide comment
@Hanks10100

Hanks10100 Dec 9, 2016

Member

Both #1604 and #1665 are merged to achieve this.

Member

Hanks10100 commented Dec 9, 2016

Both #1604 and #1665 are merged to achieve this.

@Hanks10100 Hanks10100 closed this Dec 9, 2016

@Hanks10100 Hanks10100 referenced this issue Jul 4, 2017

Merged

[weex] Sync recent changes of Weex #6028

3 of 8 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment