Question:

[maxencedouet]

@RishabhKarnad , does this framework is still maintained ?

[xdadda]

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]

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:

1. <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.
2. 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))
  })

3. 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

4. @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).

5. 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.

6. 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

7. 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]

source refs:

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

vue-native-core/src/compiler/parser/index.js

Line 487 in 853fb25

if (isNative) {

vue-native-core/src/compiler/parser/index.js

Line 502 in 853fb25

if (isNative) {

hard coded v-model

vue-native-core/src/compiler/parser/index.js

Lines 513 to 521 in 853fb25

	if (el.tag !== "switch") {
	addAttr(
	el,
	"on-change",
	`(value) => ${value}=value.nativeEvent.text`
	);
	} else {
	addAttr(el, "on-value-change", `(value) => ${value}=value`);
	}

incorrect v-model="value" onChange binding

vue-native-core/src/compiler/parser/index.js

Line 517 in 853fb25

`(value) => ${value}=value.nativeEvent.text`

vue-native-core/src/compiler/parser/index.js

Line 520 in 853fb25

addAttr(el, "on-value-change", `(value) => ${value}=value`);

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 (:)

vue-native-core/src/compiler/parser/index.js

Line 456 in 853fb25

if (bindRE.test(name)) { // v-bind

even if you write v-bind:="object" will not work, since addProp/addAttr does not handle.

vue-native-core/src/compiler/parser/index.js

Lines 477 to 481 in 853fb25

	if (isProp || platformMustUseProp(el.tag, el.attrsMap.type, name)) {
	addProp(el, name, value)
	} else {
	addAttr(el, name, value)
	}

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.

vue-native-core/src/platforms/vue-native/compiler/codegen/RenderGenerator.js

Lines 88 to 92 in 6e24f26

	// for template $props eg: v-bind:$props
	if (filterDirectiveBindProps(ast).length) {
	props = `Object.assign({}, vm.$props, ${props})`;
	props = `${COMMON.handleProps.name}(${props}, '${ast.tag}')`;
	}

[RishabhKarnad]

@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]

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