Question: - Githubissues

maxencedouet commented 4 years ago

@RishabhKarnad , does this framework is still maintained ?

xdadda commented 4 years ago

Good question. I had to switch to React and React Native as this framework doesn't seem to be maintained on a regular basis (therefore too dangerous to rely on it for production).

lkho commented 4 years ago

Good question. I have been written JSX in Vue SFC whenever the vue compiler compiles my code wrongly.

Here I will summarize my current findings, in case anyone encountered surprises:

<script> supports lang="jsx" but not tsx If you want to write JSX inside SFCs, add lang="jsx" attr. It works. The vue transformer will pass down the code to babel. However, I can't make it to work with typescript.

Don't use a variable named value when passing to v-model, i.e. v-model="value" fails, while v-model="value1" works. Reason: the compiler generated value = ... instead of vm['value'] = ... (=.=")

(0, React.createElement)(vm.$options.components['TextInput'], {
  value: vm['value'],
  onChange: function onChange(value) {
    return value = value.nativeEvent.text;
  },
  style: (0, _vueNativeHelper.mergeNativeStyleAndNativeClass)(undefined, undefined),
  '__react__vue__customEventmodel': (0, _vueNativeHelper.event)(function ($event) {
    vm['value'].apply(this, arguments);
  }.bind(this))
})

(0, React.createElement)(vm.$options.components['TextInput'], {
  value: vm['value1'],
  onChange: function onChange(value) {
    return vm['value1'] = value.nativeEvent.text;
  },
  style: (0, _vueNativeHelper.mergeNativeStyleAndNativeClass)(undefined, undefined),
  '__react__vue__customEventmodel': (0, _vueNativeHelper.event)(function ($event) {
    vm['value1'].apply(this, arguments);
  }.bind(this))
})

v-model only works on TextInput by default. If you are to write a custom component and wish to accept v-model syntax, you need to make it "behaves like" a TextInput. I.e. the compiled v-model has a fixed format as below:
```
(0, React.createElement)(vm.$options.components['Gallery'], {
  value: vm['abc'],
  onChange: function onChange(value) {
    return vm['abc'] = value.nativeEvent.text;
  },
  style: (0, _vueNativeHelper.mergeNativeStyleAndNativeClass)(undefined, undefined),
  '__react__vue__customEventmodel': (0, _vueNativeHelper.event)(function ($event) {
    vm['abc'].apply(this, arguments);
  }.bind(this))
})
```
- The v-model is passed to the value prop;
- A callback is passed to the onChange prop, which expects 1 argument, and the argument should have .nativeEvent.text.
- You can NOT customize the above with https://vuejs.org/v2/api/#model
@eventName is compiled to onEventName prop, and also registers a vue custom event, if the target component is also a vue component. i.e.:
- you can use <vue-component @click="..." />, where vue-component is a vue component, which does $emit('click', arg)
- you can use <react-component @click="..." />, where ReactComponent is a react component, which accepts a onClick prop. However, note that @click="expression", where expression is the function body of the callback, instead of the function reference passing to the prop. As a result, you can write @click="myFunc()" but not @click="myFunc" (yes, you cannot get the original arguments passed down from the onClick).
render-prop and render-prop-fn do not work inside the ENTIRE branch of v-else-if and v-else. You can however write another v-if with a negative condition. IMO, if you want to use render-prop, do not use any v-else/v-else-if in your entire component.
v-bind="object" (binding an object of attributes) and v-on="object" (object syntax) is not supported. https://vuejs.org/v2/api/#v-bind https://vuejs.org/v2/api/#v-on
ref for elements with render-prop/render-prop-fn will crash.
- render-prop creates a separated render function and the context is called with undefined, which the enclosing setRef will crash.
- render-prop-fn creates a separated render function and the context is called by the child component, which the enclosing setRef is called incorrectly with the child context, and is most likely to crash also.

lkho commented 4 years ago

source refs:

it uses 'babel-core' (outdated package) `transform` internally for the template codegen, however the command does not load the project's babel config and all of the other plugins/transformers are not loaded. So the code inside template does not support the `esnext` features set by the react-native bundler, e.g. `??`, `?.` .

https://github.com/GeekyAnts/vue-native-core/blob/b72b8ca0b184a3ce4caa7dc561a8ac659bae8b6a/src/platforms/vue-native/scripts/util/addvm.js

incorrect `v-bind="object"`

bindRE does not detect v-bind without a colon (:) https://github.com/GeekyAnts/vue-native-core/blob/853fb25c77f22635fac011828d05756cd6f86c6a/src/compiler/parser/index.js#L456 even if you write v-bind:="object" will not work, since addProp/addAttr does not handle. https://github.com/GeekyAnts/vue-native-core/blob/853fb25c77f22635fac011828d05756cd6f86c6a/src/compiler/parser/index.js#L477-L481 However, there is logic to handled v-bind="$props" specially. But since the v-bind directive is not processed in the parser, this also don't work. https://github.com/GeekyAnts/vue-native-core/blob/6e24f26f24599d49bec309f2ebd5ddd3a6e11a82/src/platforms/vue-native/compiler/codegen/RenderGenerator.js#L88-L92

RishabhKarnad commented 3 years ago

@maxencedouet we are focusing mainly on critical fixes right now, such as #259. Due to other work, the fixes have been getting delayed. But the project is being maintained.

@lkho Thanks for the detailed summary. We'll look into this further. There are a lot of inconsistencies and edge cases right now and we're trying to work on them as well.

mawlicious commented 2 years ago

This framework is currently not being maintained, if anyone is looking for help you can join the following discord, and I will assist you as soon as i could:

discord.gg/rPgwrD9gYa

GeekyAnts / vue-native-core

Question: #277

incorrect isNative check (affects v-on, v-bind, v-directive)

hard coded v-model

incorrect v-model="value" onChange binding

incorrect `v-bind="object"`

GeekyAnts / vue-native-core

Question: #277

incorrect isNative check (affects v-on, v-bind, v-directive)

hard coded v-model

incorrect v-model="value" onChange binding

incorrect v-bind="object"

incorrect `v-bind="object"`