We Keep Coding

How to setup Vue.JS to have JSX and TypeScript working together

JSX works perfectly in my Vue.JS project ... Unless I use typescript.
I create a Vue.JS project without typescript
vue create test
cd test
npm run serve
I replace HelloWorld.vue by
<script>
import Vue from 'vue';
export default Vue.extend({
name: 'HelloWorld',
render(){return (<p>JSX !</p>)},
});
</script>
And it's working perfectly
I make an other project, but with typescript, replace again HelloWorld.vue, I get an error
Module parse failed: Unexpected token (4:35)
You may need an appropriate loader to handle this file type.
| export default Vue.extend({
| name: 'HelloWorld',
> render: function (h) { return (<p>JSX !</p>); }
| });
|
I've tried every thin clue I've found on internet: I've tried writting HelloWorld.tsx instead, configuring babel or tsconfig, I've tried creating jsx.d.ts, installing more packages, ... Everytime I get exactly this error.
Could anybody give me the magic recipe for having a Vue.JS project with both JSX and typescript ?

vuejs2 - two npm packages have same prop

I am stuck at one point here. I am building a multilingual website for which I have used the package vue-multilanguage https://github.com/leonardovilarinho/vue-multilanguage
I have registered the package in my main.js as below -
import MultiLanguage from 'vue-multilanguage'
import resources from './resources/resources'
Vue.use(MultiLanguage, resources)
to set a language dynamically, the code I have used is
this.language = fr //example.
It works like a charm, no issues..
Now, the problem arises when I use a datetime picker from https://www.npmjs.com/package/vuejs-datepicker.
I register it in my component as
import Datepicker from 'vuejs-datepicker';
export default {
name: 'UserCustEmpRelationship',
components: {
Datepicker
},
}
Now this datepicker also has a prop called language. Coincidentally my multilanguage package also has a data property called language(I set it to this.language).. My guess is that the datepicker is confusing the two language and giving the error as -
The data property "language" is already declared as a prop. Use prop default value instead.
found in
--->
Any help will be highly appreciated

React Native 0.48 - `scrollview has no proptype for native

I am running into the following error after I upgraded to react native 0.48, which is showing on the expo app (in IOS only) when rendering
scrollview has no proptype for native prop
RCTScrollView.onScrollAnimationEnd of native type BOOL .if you havent
changed this prop yourself this usually means that your versions of
the native code and javascript code are out of sync. Updating oth
should make this error go away.
Not sure why, But I narrowed my code base down as much as possible. this error is generated when I try to use ListView.
Here is the code base:
import React from 'react';
import {AppRegistry,View,Text,StyleSheet,ListView} from 'react-native';
const styles = StyleSheet.create({
fullView:{
flex:1
},
statusBar: {
backgroundColor:"#de3c3c",
padding:5
},
});
class MyComponent extends React.Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
}
export default MyComponent;
And here are my dependencies:
"dependencies": {
"expo": "^20.0.0",
"react": "^16.0.0-alpha.12",
"react-native": "^0.48.1",
"react-navigation": "^1.0.0-beta.11"
}
I took a look over the docs for ListView, seems like its deprecated, but it should still work? FlatList generates the same error as well when i tried it.
Note: I made sure there isn't another packager running .

Found the possible solution!
- Bump expo version in package.json to 21.0.2
- Bump react-native version in package.json to 0.48.4
- Remove node_modules
- npm install or yarn install
- Change sdk version in app.json to 21.0.0
...
ScrollView error should disappear.

Based on https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md it looks like expo 20.x.x should be used with 0.47.x version of react-native.

Apparently at the moment Expo Client app not completely compatible with RN 0.48 and higher.
One solution is to use react-native init in order to test react native projects of version 0.48.

I met the same question. But I have not use expo.
Finally i fix it by reset ios simulator.
Step: Hardware - Erase All Content and Settings - Reset

Angular1.x and angular2 together

Is there any problem to use angular2 in a website that uses angular 1.x theme (HTML theme develeoped using angular 1.x).
Any challenges need to be faced while developing?

You can use Angular (Angular2) components inside an AngularJs (Angular1) application by using downgradeComponent function of upgrade module. Check this documentation link.
import { HeroDetailComponent } from './hero-detail.component';
/* . . . */
import { downgradeComponent } from '#angular/upgrade/static';
angular.module('heroApp', [])
.directive(
'heroDetail',
downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
);

Angular 2 component inside Angular 1?

I want to add an Angular 2 component inside my Angular 1 controller, so the Angular 1 controller is a parent and Angular 2 component is a child. I would like a child and parent be able to exchange data between each other like using #Input and #Output in Angular 2. Does anyone know how to do that?

This should be done using Upgrade Adapter module (shipped with Angular 2).
The steps should be:
1. Bootstrap you app using the adapter, instead of ng-app
2. Downgrade your angular 2 component and wrap it with Angular 1 directive.
You can use my super simple Todo app example (just look into the commits for the steps inside 'upgrade' branch):
Todo-app example
This is how your bootstrap file look like:
declare var angular: any;
import {UpgradeAdapter} from 'angular2/upgrade';
import {TodoList} from "./components/todo-list";
import {TodoInput} from "./components/todo-input";
import {TodoApp} from "./components/todo-app";
let adapter = new UpgradeAdapter();
angular.module('todoListWorkshopApp').directive('todoList', adapter.downgradeNg2Component(TodoList));
angular.module('todoListWorkshopApp').directive('todoInput', adapter.downgradeNg2Component(TodoInput));
angular.module('todoListWorkshopApp').directive('todoApp', adapter.downgradeNg2Component(TodoApp));
adapter.bootstrap(document.body, ['todoListWorkshopApp']);
And this is an example of the controller's template (Angular 1):
<div>
<todo-input (on-item-added)="add($event)"></todo-input>
<todo-list [todos]="todos"></todo-list>
</div>