diff --git a/packages/vue-native-core/COMPONENT.md b/COMPONENT.md similarity index 100% rename from packages/vue-native-core/COMPONENT.md rename to COMPONENT.md diff --git a/README.md b/README.md index cd3576a..2f3ecd2 100644 --- a/README.md +++ b/README.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 ``` -## 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 diff --git a/converting-react-native-project.md b/converting-react-native-project.md new file mode 100644 index 0000000..25c3e9e --- /dev/null +++ b/converting-react-native-project.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. diff --git a/package.json b/package.json index c17bb49..7b5691f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/vue-native-core/README.md b/packages/vue-native-core/README.md index a54d261..379b8e7 100644 --- a/packages/vue-native-core/README.md +++ b/packages/vue-native-core/README.md @@ -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 -``` - -## 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. diff --git a/packages/vue-native-core/package.json b/packages/vue-native-core/package.json index aadf0fd..be77af1 100644 --- a/packages/vue-native-core/package.json +++ b/packages/vue-native-core/package.json @@ -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" } } diff --git a/packages/vue-native-helper/README.md b/packages/vue-native-helper/README.md index 010e3a4..c8148af 100644 --- a/packages/vue-native-helper/README.md +++ b/packages/vue-native-helper/README.md @@ -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. diff --git a/packages/vue-native-helper/package.json b/packages/vue-native-helper/package.json index 099c9d2..344f84f 100644 --- a/packages/vue-native-helper/package.json +++ b/packages/vue-native-helper/package.json @@ -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" } } diff --git a/packages/vue-native-scripts/README.md b/packages/vue-native-scripts/README.md index e22e119..f33c6d2 100644 --- a/packages/vue-native-scripts/README.md +++ b/packages/vue-native-scripts/README.md @@ -1,38 +1,76 @@ # vue-native-scripts -Compile And Transform Vue component to React Native. +> 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). -## Install +Compile and transform Vue components to React Native. + +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. + +## Usage + +[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 +$ npm install --save vue-native-core vue-native-helper +$ npm install --save-dev vue-native-scripts ``` -### Step 2: Configure the react native packager +### Step 2: Configure the React Native bundler -Add this to your `rn-cli.config.js` (make one to your project's root if you don't have one already): +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 -module.exports = { - getTransformModulePath() { - return require.resolve("./vueTransformerPlugin.js"); - }, - getSourceExts() { - return ["vue"]; - } -}; +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"] + } + }; +})(); ``` -Create `vueTransformerPlugin.js` file to your project's root and specify supported extensions: +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.52 or later -var upstreamTransformer = require("metro/src/transformer"); +// 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 +// For React Native version 0.47 - 0.51 // var upstreamTransformer = require("metro-bundler/src/transformer"); // For React Native version 0.46 @@ -49,14 +87,14 @@ module.exports.transform = function({ src, filename, options }) { }; ``` -## Tips +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. -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. +## Using Vue Native components and `.vue` files -In the react native application, you can simply `import` your Vue components as following +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, and the transformer would be parse this file and send it to the react native packager. +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. diff --git a/packages/vue-native-scripts/build.js b/packages/vue-native-scripts/build.js index 275ff86..8b79c46 100644 --- a/packages/vue-native-scripts/build.js +++ b/packages/vue-native-scripts/build.js @@ -505,21 +505,26 @@ if (reactNativeMinorVersion >= 59) { } function sourceMapAstInPlace(tsMap, babelAst) { - var tsConsumer = new sourceMap.SourceMapConsumer(tsMap); - traverse$1.cheap(babelAst, function (node) { - if (node.loc) { - var originalStart = tsConsumer.originalPositionFor(node.loc.start); - if (originalStart.line) { - node.loc.start.line = originalStart.line; - node.loc.start.column = originalStart.column; - } - var originalEnd = tsConsumer.originalPositionFor(node.loc.end); - if (originalEnd.line) { - node.loc.end.line = originalEnd.line; - node.loc.end.column = originalEnd.column; - } + return sourceMap.SourceMapConsumer.with( + tsMap, + null, + function (consumer) { + traverse$1.cheap(babelAst, function (node) { + if (node.loc) { + var originalStart = consumer.originalPositionFor(node.loc.start); + if (originalStart.line) { + node.loc.start.line = originalStart.line; + node.loc.start.column = originalStart.column; + } + var originalEnd = consumer.originalPositionFor(node.loc.end); + if (originalEnd.line) { + node.loc.end.line = originalEnd.line; + node.loc.end.column = originalEnd.column; + } + } + }); } - }); + ); } function transform(ref) { diff --git a/packages/vue-native-scripts/package.json b/packages/vue-native-scripts/package.json index 4a3e39a..b571303 100644 --- a/packages/vue-native-scripts/package.json +++ b/packages/vue-native-scripts/package.json @@ -1,7 +1,7 @@ { "name": "vue-native-scripts", "version": "0.1.0", - "description": "Compile Vue component to React Native", + "description": "Compile Vue Native components to React Native", "main": "index.js", "scripts": {}, "bin": { @@ -21,13 +21,13 @@ "path": "^0.12.7", "semver": "^6.2.0", "source-map": "^0.7.3", - "vue-native-template-compiler": "^0.0.13" + "vue-native-template-compiler": "^0.1.0" }, "peerDependencies": { - "react-native": "*", - "metro": "*", + "react-native": "^0.59.0", + "metro": "^0.51.0", "metro-bundler": "*", - "metro-react-native-babel-transformer": "*" + "metro-react-native-babel-transformer": "^0.51.0" }, "bugs": { "url": "https://github.com/GeekyAnts/vue-native-core/issues" diff --git a/packages/vue-native-template-compiler/README.md b/packages/vue-native-template-compiler/README.md index 735cabc..8a19e4a 100644 --- a/packages/vue-native-template-compiler/README.md +++ b/packages/vue-native-template-compiler/README.md @@ -1,3 +1,7 @@ -# react-vue-template-compiler +# vue-native-template-compiler -> This package is auto-generated. For pull requests please see [--todo] [src/platforms/react-vue/compiler/index.js](). +> 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). + +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. diff --git a/packages/vue-native-template-compiler/package.json b/packages/vue-native-template-compiler/package.json index 57b9958..78df926 100644 --- a/packages/vue-native-template-compiler/package.json +++ b/packages/vue-native-template-compiler/package.json @@ -1,7 +1,7 @@ { "name": "vue-native-template-compiler", "version": "0.1.0", - "description": "react vue template compiler", + "description": "Vue Native template compiler, dependency of vue-native-scripts. It can also be used as a stand-alone compiler", "main": "index.js", "repository": { "type": "git", diff --git a/src/platforms/vue-native/scripts/transformerPlugin.js b/src/platforms/vue-native/scripts/transformerPlugin.js index c010db9..a19764e 100644 --- a/src/platforms/vue-native/scripts/transformerPlugin.js +++ b/src/platforms/vue-native/scripts/transformerPlugin.js @@ -30,21 +30,26 @@ if (reactNativeMinorVersion >= 59) { } function sourceMapAstInPlace(tsMap, babelAst) { - const tsConsumer = new SourceMapConsumer(tsMap); - traverse.cheap(babelAst, node => { - if (node.loc) { - const originalStart = tsConsumer.originalPositionFor(node.loc.start); - if (originalStart.line) { - node.loc.start.line = originalStart.line; - node.loc.start.column = originalStart.column; - } - const originalEnd = tsConsumer.originalPositionFor(node.loc.end); - if (originalEnd.line) { - node.loc.end.line = originalEnd.line; - node.loc.end.column = originalEnd.column; - } + return SourceMapConsumer.with( + tsMap, + null, + (consumer) => { + traverse.cheap(babelAst, node => { + if (node.loc) { + const originalStart = consumer.originalPositionFor(node.loc.start); + if (originalStart.line) { + node.loc.start.line = originalStart.line; + node.loc.start.column = originalStart.column; + } + const originalEnd = consumer.originalPositionFor(node.loc.end); + if (originalEnd.line) { + node.loc.end.line = originalEnd.line; + node.loc.end.column = originalEnd.column; + } + } + }); } - }); + ); } export function transform({ src, filename, options }) {