Merge pull request #187 from GeekyAnts/develop

Release tag v0.1.1

Author: gauravprwl14

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

@@ -1,55 +1,78 @@
-# Vue Native: Read more at [vue-native.io](https://vue-native.io)
+# Vue Native
+
 [![Backers on Open Collective](https://opencollective.com/vue-native-core/backers/badge.svg)](#backers)
  [![Sponsors on Open Collective](https://opencollective.com/vue-native-core/sponsors/badge.svg)](#sponsors) 
 
-### Start with the Vue Native CLI
+Visit our website at [vue-native.io](https://vue-native.io) or read the official documentation [here](https://vue-native.io/docs/installation.html).
 
-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.
+## Build native mobile apps using Vue
 
-The Vue Native CLI generates a simple single page application (SPA) using [expo-cli](https://github.com/expo/expo-cli) and
-[vue-native-core](https://github.com/GeekyAnts/vue-native-core).
+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
 
-## Installation Prerequisites
+- **The simplicity of Vue.js.** Incrementally build user interfaces with the familiar syntax of HTML and CSS in single file components.
+- **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.
 
-You should have expo-cli or react-native-cli installed as a global dependency
+## Contents
+- [Documentation](#documentation)
+- [Installation](#installation)
+- [Project setup with Vue Native CLI](#project-setup-with-vue-native-cli)
+- [Using Vue Native with a pre-existing React Native or Expo project](#using-vue-native-in-a-react-native-project)
+- [Deprecated React Native modules](#react-native-components-that-cant-be-used-out-of-the-box)
+- [Contributors](#contributors)
+- [Backers](#backers)
+- [Sponsors](#sponsors)
+- [License](#license)
+- [Special thanks](#credits-to-react-vue)
 
-```
-For React Native ClI => npm install react-native-cli -g
-```
+## Documentation
 
-```
-For CRNA => npm install expo-cli -g
-```
+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.
+
+The source for the Vue Native documentation and website is hosted on a separate repo, [here](https://github.com/GeekyAnts/vue-native-website)
 
-## Installation:
+## Installation
 
+To install Vue Native's official CLI, run
 ```
-$ npm install -g vue-native-cli
+$ npm install vue-native-cli -g
 ```
 
-Generate [CRNA + Vue App](https://github.com/GeekyAnts/vue-native-core)
+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.
+
+## Project setup with Vue Native CLI
 
+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).
+
+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).
+
+With the CLI, generating a Vue Native project is as easy as running the command
 ```
 $ vue-native init <projectName>
 ```
 
-## NOTE: 
+## Using Vue Native in a React Native project
 
-```
-'AlertIOS',
-'AsyncStorage',
-'ImageStore',
-'ListView',
-'MaskedViewIOS',
-'NetInfo',
-'Slider',
-'SwipeableListView',
-'ViewPagerAndroid',
-'WebView',
-``` 
-The above modules are set to be removed from future core react-native. 
-Hence these modules can no longer be imported from vue-native.
-[[Further Instructions](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059#lean-core-is-underway)]
+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).
+
+These instructions can also be used to set up a Vue Native project from scratch.
+
+## React Native components that can't be used out of the box
+
+The following modules are set to be removed from React Native in the future.
+Hence these modules are no longer made available with Vue Native.
+- AlertIOS
+- AsyncStorage
+- ImageStore
+- ListView
+- MaskedViewIOS
+- NetInfo
+- Slider
+- SwipeableListView
+- ViewPagerAndroid
+- WebView
+
+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.
+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).
 
 ## Contributors
 

README.md

@@ -0,0 +1,90 @@
+## Setting up a React Native project for Vue Native
+
+[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.
+
+### Step 1: Install
+
+The following packages are required as runtime dependencies by Vue Native:
+- [vue-native-core](https://www.npmjs.com/package/vue-native-core)
+- [vue-native-helper](https://www.npmjs.com/package/vue-native-helper)
+
+During development, another package is required to transpile Vue Native component files (with `.vue` extensions) into JS:
+- [vue-native-scripts](https://www.npmjs.com/package/vue-native-scripts)
+
+To install them, run the following commands in your project directory
+```
+$ npm install --save vue-native-core vue-native-helper
+$ npm install --save-dev vue-native-scripts
+```
+
+### Step 2: Configure the React Native bundler
+
+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):
+
+```js
+const { getDefaultConfig } = require("metro-config");
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts }
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false,
+        },
+      })
+    },
+    resolver: {
+      sourceExts: [...sourceExts, "vue"]
+    }
+  };
+})();
+```
+
+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:
+
+```js
+// For React Native version 0.59 or later
+var upstreamTransformer = require("metro-react-native-babel-transformer");
+
+// You will need to use different transformers for different React Native versions
+// However, versions older than v0.59 are no longer supported by Vue Native
+
+// For React Native version 0.56 - 0.58
+// var upstreamTransformer = require("metro/src/reactNativeTransformer");
+
+// For React Native version 0.52 - 0.55
+// var upstreamTransformer = require("metro/src/transformer");
+
+// For React Native version 0.47 - 0.51
+// var upstreamTransformer = require("metro-bundler/src/transformer");
+
+// For React Native version 0.46
+// var upstreamTransformer = require("metro-bundler/build/transformer");
+
+var vueNaiveScripts = require("vue-native-scripts");
+var vueExtensions = ["vue"]; // <-- Add other extensions if needed.
+
+module.exports.transform = function({ src, filename, options }) {
+  if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
+    return vueNaiveScripts.transform({ src, filename, options });
+  }
+  return upstreamTransformer.transform({ src, filename, options });
+};
+```
+
+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.
+
+## Using Vue Native components and `.vue` files
+
+In the React Native application, you can simply `import` your Vue components as follows
+
+```
+import VueComponent from './VueComponent.vue'
+```
+
+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.

converting-react-native-project.md

@@ -1,6 +1,6 @@
 {
   "name": "vue-native-core",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Create mobile apps using vuejs",
   "main": "dist/vue.runtime.esm.js",
   "module": "dist/vue.runtime.esm.js",

package.json

@@ -1,40 +1,7 @@
-# Vue Native: Read more at [vue-native.io](https://vue-native.io)
+# vue-native-core
 
-### Start with the Vue Native CLI
+> 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).
 
-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.
+Find the `vue-native-core` repository [here](https://github.com/GeekyAnts/vue-native-core).
 
-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
-[vue-native-core](https://github.com/GeekyAnts/vue-native-core).
-
-## Installation Prerequisites
-
-You should have create-react-native-app or react-native-cli installed as a global dependency
-
-```
-For React Native ClI => npm install react-native-cli -g
-```
-
-```
-For CRNA => npm install create-react-native-app -g
-```
-
-## Installation:
-
-```
-$ npm install -g vue-native-cli
-```
-
-Generate [CRNA + Vue App](https://github.com/GeekyAnts/vue-native-core) App
-
-```
-$ vue-native init <projectName>
-```
-
-## License
-
-[MIT](http://opensource.org/licenses/MIT)
-
-## Credits to [react-vue](https://github.com/SmallComfort/react-vue)
-
-A huge thanks to the author of react-vue for most of the work on Vue Native.
+For the official documentation, visit [this](https://vue-native.io/docs/installation.html) website.

packages/vue-native-core/README.md

@@ -1,7 +1,7 @@
 {
   "name": "vue-native-core",
   "version": "0.1.0",
-  "description": "vue native core",
+  "description": "Library with core functionalities to create Vue Native components",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -18,6 +18,6 @@
   },
   "homepage": "https://github.com/GeekyAnts/vue-native-core/tree/master/packages/vue-native-core",
   "peerDependencies": {
-    "react": "*"
+    "react": "^16.3.0"
   }
 }

packages/vue-native-core/package.json

@@ -1,3 +1,7 @@
 # vue-native-helper
 
-> This package is auto-generated. For pull requests please see [--todo][src/platforms/react/runtime]().
+> 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).
+
+Find the `vue-native-core` repository [here](https://github.com/GeekyAnts/vue-native-core).
+
+For the official documentation, visit [this](https://vue-native.io/docs/installation.html) website.

packages/vue-native-helper/README.md

@@ -1,7 +1,7 @@
 {
   "name": "vue-native-helper",
   "version": "0.1.0",
-  "description": "react vue render helper",
+  "description": "Helper library with utilities for vue-native-core",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -19,6 +19,6 @@
   },
   "homepage": "https://github.com/GeekyAnts/vue-native-core#readme",
   "peerDependencies": {
-    "react": "*"
+    "react": "^16.3.0"
   }
 }