Skip to content

Commit f0b5ed9

Browse files
gauravprwl14gauravprwl14
authored
Merge pull request #184 from GeekyAnts/feat/update-readmes
Updated readmes in root directory and packages
2 parents b1ad0b9 + 62a697a commit f0b5ed9

File tree

7 files changed

+220
-94
lines changed

7 files changed

+220
-94
lines changed

‎packages/vue-native-core/COMPONENT.md renamed to ‎COMPONENT.md

File renamed without changes.

‎README.md

Lines changed: 55 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,78 @@
1-
# Vue Native: Read more at [vue-native.io](https://vue-native.io)
1+
# Vue Native
2+
23
[![Backers on Open Collective](https://opencollective.com/vue-native-core/backers/badge.svg)](#backers)
34
[![Sponsors on Open Collective](https://opencollective.com/vue-native-core/sponsors/badge.svg)](#sponsors)
45

5-
### Start with the Vue Native CLI
6+
Visit our website at [vue-native.io](https://vue-native.io) or read the official documentation [here](https://vue-native.io/docs/installation.html).
67

7-
The Vue Native CLI is used to generate a `Vue Native` app, which is a React Native API wrapper. This means that with Vue Native, you can do anything that could be done with React Native.
8+
## Build native mobile apps using Vue
89

9-
The Vue Native CLI generates a simple single page application (SPA) using [expo-cli](https://github.com/expo/expo-cli) and
10-
[vue-native-core](https://github.com/GeekyAnts/vue-native-core).
10+
Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get
1111

12-
## Installation Prerequisites
12+
- **The simplicity of Vue.js.** Incrementally build user interfaces with the familiar syntax of HTML and CSS in single file components.
13+
- **Seamless interop with React Native.** Use core React Native components with Vue.js syntax out of the box to develop mobile apps on both iOS and Android.
1314

14-
You should have expo-cli or react-native-cli installed as a global dependency
15+
## Contents
16+
- [Documentation](#documentation)
17+
- [Installation](#installation)
18+
- [Project setup with Vue Native CLI](#project-setup-with-vue-native-cli)
19+
- [Using Vue Native with a pre-existing React Native or Expo project](#using-vue-native-in-a-react-native-project)
20+
- [Deprecated React Native modules](#react-native-components-that-cant-be-used-out-of-the-box)
21+
- [Contributors](#contributors)
22+
- [Backers](#backers)
23+
- [Sponsors](#sponsors)
24+
- [License](#license)
25+
- [Special thanks](#credits-to-react-vue)
1526

16-
```
17-
For React Native ClI => npm install react-native-cli -g
18-
```
27+
## Documentation
1928

20-
```
21-
For CRNA => npm install expo-cli -g
22-
```
29+
You can find the full documentation for Vue Native [on this website](https://vue-native.io/docs/installation.html). It covers installation and setup, component basics, routing, testing, the internal API and more.
30+
31+
The source for the Vue Native documentation and website is hosted on a separate repo, [here](https://github.com/GeekyAnts/vue-native-website)
2332

24-
## Installation:
33+
## Installation
2534

35+
To install Vue Native's official CLI, run
2636
```
27-
$ npm install -g vue-native-cli
37+
$ npm install vue-native-cli -g
2838
```
2939

30-
Generate [CRNA + Vue App](https://github.com/GeekyAnts/vue-native-core)
40+
To use the CLI, you must have either [expo-cli](https://github.com/expo/expo-cli) or [react-native-cli](https://github.com/react-native-community/cli) installed globally.
41+
42+
## Project setup with Vue Native CLI
3143

44+
The Vue Native CLI can be used to easily generate a fully configured Vue Native app. It wraps `expo-cli` and `react-native-cli` to generate a simple single page application (SPA) after installing and configuring dependencies from [vue-native-core](https://github.com/GeekyAnts/vue-native-core).
45+
46+
You should have either expo-cli or react-native-cli installed as a global dependency. Refer to the [installation guide](https://vue-native.io/docs/installation.html) for details on project setup. The GitHub repository for Vue Native CLI is hosted [here](https://github.com/GeekyAnts/vue-native-cli).
47+
48+
With the CLI, generating a Vue Native project is as easy as running the command
3249
```
3350
$ vue-native init <projectName>
3451
```
3552

36-
## NOTE:
53+
## Using Vue Native in a React Native project
3754

38-
```
39-
'AlertIOS',
40-
'AsyncStorage',
41-
'ImageStore',
42-
'ListView',
43-
'MaskedViewIOS',
44-
'NetInfo',
45-
'Slider',
46-
'SwipeableListView',
47-
'ViewPagerAndroid',
48-
'WebView',
49-
```
50-
The above modules are set to be removed from future core react-native.
51-
Hence these modules can no longer be imported from vue-native.
52-
[[Further Instructions](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059#lean-core-is-underway)]
55+
It is possible to integrate Vue Native into a pre-existing React Native project. You can find instructions to do this [here](converting-react-native-project.md).
56+
57+
These instructions can also be used to set up a Vue Native project from scratch.
58+
59+
## React Native components that can't be used out of the box
60+
61+
The following modules are set to be removed from React Native in the future.
62+
Hence these modules are no longer made available with Vue Native.
63+
- AlertIOS
64+
- AsyncStorage
65+
- ImageStore
66+
- ListView
67+
- MaskedViewIOS
68+
- NetInfo
69+
- Slider
70+
- SwipeableListView
71+
- ViewPagerAndroid
72+
- WebView
73+
74+
If you still wish to use them, you can import them explicitly from `react-native` (until they are removed) or from their individual forked packages.
75+
For more information, refer to [this page](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059#lean-core-is-underway).
5376

5477
## Contributors
5578

‎converting-react-native-project.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
## Setting up a React Native project for Vue Native
2+
3+
[Vue Native CLI](https://github.com/GeekyAnts/vue-native-cli) is the recommended way to setup a new Vue Native project. However, if you wish to setup a project from scratch, use the following steps after setting up a React Native / Expo project.
4+
5+
### Step 1: Install
6+
7+
The following packages are required as runtime dependencies by Vue Native:
8+
- [vue-native-core](https://www.npmjs.com/package/vue-native-core)
9+
- [vue-native-helper](https://www.npmjs.com/package/vue-native-helper)
10+
11+
During development, another package is required to transpile Vue Native component files (with `.vue` extensions) into JS:
12+
- [vue-native-scripts](https://www.npmjs.com/package/vue-native-scripts)
13+
14+
To install them, run the following commands in your project directory
15+
```
16+
$ npm install --save vue-native-core vue-native-helper
17+
$ npm install --save-dev vue-native-scripts
18+
```
19+
20+
### Step 2: Configure the React Native bundler
21+
22+
The Metro bundler is used by React Native to generate app bundles. It can be configured using a `metro.config.js` file. Add the following to your `metro.config.js` (make one to your project's root if you don't have one already):
23+
24+
```js
25+
const { getDefaultConfig } = require("metro-config");
26+
27+
module.exports = (async () => {
28+
const {
29+
resolver: { sourceExts }
30+
} = await getDefaultConfig();
31+
return {
32+
transformer: {
33+
babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
34+
getTransformOptions: async () => ({
35+
transform: {
36+
experimentalImportSupport: false,
37+
inlineRequires: false,
38+
},
39+
})
40+
},
41+
resolver: {
42+
sourceExts: [...sourceExts, "vue"]
43+
}
44+
};
45+
})();
46+
```
47+
48+
The `babelTransformPath` property above takes the path to the transformer you wish to use. In our case, we need to create a `vueTransformerPlugin.js` file to the project's root and specify supported extensions:
49+
50+
```js
51+
// For React Native version 0.59 or later
52+
var upstreamTransformer = require("metro-react-native-babel-transformer");
53+
54+
// You will need to use different transformers for different React Native versions
55+
// However, versions older than v0.59 are no longer supported by Vue Native
56+
57+
// For React Native version 0.56 - 0.58
58+
// var upstreamTransformer = require("metro/src/reactNativeTransformer");
59+
60+
// For React Native version 0.52 - 0.55
61+
// var upstreamTransformer = require("metro/src/transformer");
62+
63+
// For React Native version 0.47 - 0.51
64+
// var upstreamTransformer = require("metro-bundler/src/transformer");
65+
66+
// For React Native version 0.46
67+
// var upstreamTransformer = require("metro-bundler/build/transformer");
68+
69+
var vueNaiveScripts = require("vue-native-scripts");
70+
var vueExtensions = ["vue"]; // <-- Add other extensions if needed.
71+
72+
module.exports.transform = function({ src, filename, options }) {
73+
if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
74+
return vueNaiveScripts.transform({ src, filename, options });
75+
}
76+
return upstreamTransformer.transform({ src, filename, options });
77+
};
78+
```
79+
80+
This file conditionally transforms files based on their extensions. `vue-native-scripts` is used for `.vue` files, while the stock React Native Babel transformer is used for other (JS) files.
81+
82+
## Using Vue Native components and `.vue` files
83+
84+
In the React Native application, you can simply `import` your Vue components as follows
85+
86+
```
87+
import VueComponent from './VueComponent.vue'
88+
```
89+
90+
There should be a file named `VueComponent.vue` in the corresponding folder; the transformer parses this file and sends it to the React Native bundler.

‎packages/vue-native-core/README.md

Lines changed: 4 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,7 @@
1-
# Vue Native: Read more at [vue-native.io](https://vue-native.io)
1+
# vue-native-core
22

3-
### Start with the Vue Native CLI
3+
> This package is auto-generated. For pull requests please work with [src/platforms/vue-native/index.js](https://github.com/GeekyAnts/vue-native-core/tree/develop/src/platforms/vue-native).
44
5-
The Vue Native CLI is used to generate a `Vue Native` app, which is a React Native API wrapper. This means that with Vue Native, you can do anything that could be done with React Native.
5+
Find the `vue-native-core` repository [here](https://github.com/GeekyAnts/vue-native-core).
66

7-
The Vue Native CLI generates a simple single page appliction (SPA) using [create-react-native-app](https://github.com/react-community/create-react-native-app) and
8-
[vue-native-core](https://github.com/GeekyAnts/vue-native-core).
9-
10-
## Installation Prerequisites
11-
12-
You should have create-react-native-app or react-native-cli installed as a global dependency
13-
14-
```
15-
For React Native ClI => npm install react-native-cli -g
16-
```
17-
18-
```
19-
For CRNA => npm install create-react-native-app -g
20-
```
21-
22-
## Installation:
23-
24-
```
25-
$ npm install -g vue-native-cli
26-
```
27-
28-
Generate [CRNA + Vue App](https://github.com/GeekyAnts/vue-native-core) App
29-
30-
```
31-
$ vue-native init <projectName>
32-
```
33-
34-
## License
35-
36-
[MIT](http://opensource.org/licenses/MIT)
37-
38-
## Credits to [react-vue](https://github.com/SmallComfort/react-vue)
39-
40-
A huge thanks to the author of react-vue for most of the work on Vue Native.
7+
For the official documentation, visit [this](https://vue-native.io/docs/installation.html) website.

‎packages/vue-native-helper/README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
# vue-native-helper
22

3-
> This package is auto-generated. For pull requests please see [--todo][src/platforms/react/runtime]().
3+
> This package is auto-generated. For pull requests please work with [src/platforms/vue-native/runtime/helpers.js](https://github.com/GeekyAnts/vue-native-core/tree/develop/src/platforms/vue-native/runtime).
4+
5+
Find the `vue-native-core` repository [here](https://github.com/GeekyAnts/vue-native-core).
6+
7+
For the official documentation, visit [this](https://vue-native.io/docs/installation.html) website.

‎packages/vue-native-scripts/README.md

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,76 @@
11
# vue-native-scripts
22

3-
Compile And Transform Vue component to React Native.
3+
> This package is auto-generated. For pull requests please work with [src/platforms/vue-native/scripts/index.js](https://github.com/GeekyAnts/vue-native-core/tree/develop/src/platforms/vue-native/scripts).
44
5-
## Install
5+
Compile and transform Vue components to React Native.
6+
7+
Find the `vue-native-core` repository [here](https://github.com/GeekyAnts/vue-native-core).
8+
9+
For the official documentation, visit [this](https://vue-native.io/docs/installation.html) website.
10+
11+
## Usage
12+
13+
[Vue Native CLI](https://github.com/GeekyAnts/vue-native-cli) is the recommended way to setup a new Vue Native project. However, if you wish to setup a project from scratch, use the following steps after setting up a React Native / Expo project.
614

715
### Step 1: Install
816

17+
The following packages are required as runtime dependencies by Vue Native:
18+
- [vue-native-core](https://www.npmjs.com/package/vue-native-core)
19+
- [vue-native-helper](https://www.npmjs.com/package/vue-native-helper)
20+
21+
During development, another package is required to transpile Vue Native component files (with `.vue` extensions) into JS:
22+
- [vue-native-scripts](https://www.npmjs.com/package/vue-native-scripts)
23+
24+
To install them, run the following commands in your project directory
925
```
10-
npm install --save vue-native-core vue-native-helper
11-
npm install --save-dev vue-native-scripts
26+
$ npm install --save vue-native-core vue-native-helper
27+
$ npm install --save-dev vue-native-scripts
1228
```
1329

14-
### Step 2: Configure the react native packager
30+
### Step 2: Configure the React Native bundler
1531

16-
Add this to your `rn-cli.config.js` (make one to your project's root if you don't have one already):
32+
The Metro bundler is used by React Native to generate app bundles. It can be configured using a `metro.config.js` file. Add the following to your `metro.config.js` (make one to your project's root if you don't have one already):
1733

1834
```js
19-
module.exports = {
20-
getTransformModulePath() {
21-
return require.resolve("./vueTransformerPlugin.js");
22-
},
23-
getSourceExts() {
24-
return ["vue"];
25-
}
26-
};
35+
const { getDefaultConfig } = require("metro-config");
36+
37+
module.exports = (async () => {
38+
const {
39+
resolver: { sourceExts }
40+
} = await getDefaultConfig();
41+
return {
42+
transformer: {
43+
babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
44+
getTransformOptions: async () => ({
45+
transform: {
46+
experimentalImportSupport: false,
47+
inlineRequires: false,
48+
},
49+
})
50+
},
51+
resolver: {
52+
sourceExts: [...sourceExts, "vue"]
53+
}
54+
};
55+
})();
2756
```
2857

29-
Create `vueTransformerPlugin.js` file to your project's root and specify supported extensions:
58+
The `babelTransformPath` property above takes the path to the transformer you wish to use. In our case, we need to create a `vueTransformerPlugin.js` file to the project's root and specify supported extensions:
3059

3160
```js
32-
// For React Native version 0.52 or later
33-
var upstreamTransformer = require("metro/src/transformer");
61+
// For React Native version 0.59 or later
62+
var upstreamTransformer = require("metro-react-native-babel-transformer");
63+
64+
// You will need to use different transformers for different React Native versions
65+
// However, versions older than v0.59 are no longer supported by Vue Native
66+
67+
// For React Native version 0.56 - 0.58
68+
// var upstreamTransformer = require("metro/src/reactNativeTransformer");
69+
70+
// For React Native version 0.52 - 0.55
71+
// var upstreamTransformer = require("metro/src/transformer");
3472

35-
// For React Native version 0.47-0.51
73+
// For React Native version 0.47 - 0.51
3674
// var upstreamTransformer = require("metro-bundler/src/transformer");
3775

3876
// For React Native version 0.46
@@ -49,14 +87,14 @@ module.exports.transform = function({ src, filename, options }) {
4987
};
5088
```
5189

52-
## Tips
90+
This file conditionally transforms files based on their extensions. `vue-native-scripts` is used for `.vue` files, while the stock React Native Babel transformer is used for other (JS) files.
5391

54-
For react-native packager can not bundle `.vue` file, this scripts just compiled the file with `.vue` suffixed and generated a same name file with `.js` suffixed.
92+
## Using Vue Native components and `.vue` files
5593

56-
In the react native application, you can simply `import` your Vue components as following
94+
In the React Native application, you can simply `import` your Vue components as follows
5795

5896
```
5997
import VueComponent from './VueComponent.vue'
6098
```
6199

62-
There should be a file named `VueComponent.vue` in the corresponding folder, and the transformer would be parse this file and send it to the react native packager.
100+
There should be a file named `VueComponent.vue` in the corresponding folder; the transformer parses this file and sends it to the React Native bundler.

‎packages/vue-native-template-compiler/README.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
# react-vue-template-compiler
1+
# vue-native-template-compiler
22

3-
> This package is auto-generated. For pull requests please see [--todo] [src/platforms/react-vue/compiler/index.js]().
3+
> This package is auto-generated. For pull requests please work with [src/platforms/vue-native/compiler/index.js](https://github.com/GeekyAnts/vue-native-core/tree/develop/src/platforms/vue-native).
4+
5+
Find the `vue-native-core` repository [here](https://github.com/GeekyAnts/vue-native-core).
6+
7+
For the official documentation, visit [this](https://vue-native.io/docs/installation.html) website.

0 commit comments

Comments
 (0)