├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── generator ├── README.md ├── index.js └── templates │ ├── App_Resources │ ├── Android │ │ ├── AndroidManifest.xml │ │ ├── app.gradle │ │ ├── drawable-hdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-ldpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-mdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-nodpi │ │ │ └── splash_screen.xml │ │ ├── drawable-xhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-xxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── drawable-xxxhdpi │ │ │ ├── background.png │ │ │ ├── icon.png │ │ │ └── logo.png │ │ ├── values-v21 │ │ │ ├── colors.xml │ │ │ ├── strings.xml │ │ │ └── styles.xml │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── strings.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-1024.png │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchImage.launchimage │ │ │ ├── Contents.json │ │ │ ├── Default-1125h.png │ │ │ ├── Default-568h@2x.png │ │ │ ├── Default-667h@2x.png │ │ │ ├── Default-736h@3x.png │ │ │ ├── Default-Landscape-X.png │ │ │ ├── Default-Landscape.png │ │ │ ├── Default-Landscape@2x.png │ │ │ ├── Default-Landscape@3x.png │ │ │ ├── Default-Portrait.png │ │ │ ├── Default-Portrait@2x.png │ │ │ ├── Default.png │ │ │ └── Default@2x.png │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ └── LaunchScreen-AspectFill@2x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ └── LaunchScreen-Center@2x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig │ ├── nvw │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ ├── HelloWorld.android.vue │ │ ├── HelloWorld.ios.vue │ │ ├── HelloWorld.native.vue │ │ ├── HelloWorld.vue │ │ └── icon.png │ │ ├── main.js │ │ ├── main.native.js │ │ ├── package.json │ │ ├── router.js │ │ ├── styles │ │ ├── style-one.css │ │ ├── style-one.less │ │ ├── style-one.scss │ │ ├── style-one.styl │ │ ├── style-two.css │ │ ├── style-two.less │ │ ├── style-two.scss │ │ └── style-two.styl │ │ └── views │ │ ├── About.vue │ │ └── Home.vue │ ├── simple │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ ├── HelloWorld.android.vue │ │ ├── HelloWorld.ios.vue │ │ ├── HelloWorld.native.vue │ │ ├── HelloWorld.vue │ │ └── icon.png │ │ ├── main.js │ │ ├── main.native.js │ │ ├── package.json │ │ ├── router.js │ │ ├── styles │ │ ├── style-one.css │ │ ├── style-one.less │ │ ├── style-one.scss │ │ ├── style-one.styl │ │ ├── style-two.css │ │ ├── style-two.less │ │ ├── style-two.scss │ │ └── style-two.styl │ │ └── views │ │ ├── About.vue │ │ └── Home.vue │ └── vue-sfc-template.vue ├── index.js ├── lib ├── scripts │ └── webpack-maintenance.js └── tslint.js ├── logo.png ├── package-lock.json ├── package.json ├── prompts.js ├── tslint.json └── ui.js /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | generator/templates/ -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "root": true, 3 | "env": { 4 | "node": true 5 | }, 6 | "extends": [ 7 | "eslint:recommended", 8 | "plugin:vue/recommended", 9 | "@vue/airbnb", 10 | "@vue/prettier" 11 | ], 12 | "rules": { 13 | "import/extensions": 0, 14 | "global-require": 0, 15 | "eol-last": 0, 16 | "no-param-reassign": 0, 17 | "object-curly-newline": 0, 18 | "no-plusplus": 0, 19 | "max-len": [ 20 | 2, 21 | { 22 | "code": 160 23 | } 24 | ], 25 | "prefer-destructuring": [ 26 | 2, 27 | { 28 | "object": true, 29 | "array": false 30 | } 31 | ] 32 | }, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .vscode -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | generator/templates/* -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 160, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "tabWidth": 2, 6 | "semicolons": true, 7 | "bracketSpacing": true, 8 | "arrowParens": "always", 9 | "useTabs": false 10 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Igor Randjelovic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nativescript-vue-cli-plugin 2 | 3 | Nativescript-Vue Plugin for [vue-cli@3.0](https://github.com/vuejs/vue-cli) 4 | 5 | This plugin will integrate [Nativescript-Vue](https://nativescript-vue.org/) into new and existing Vue projects. Additionally, it will allow for the choice of developing for Native only environments or Native __and__ Web environments under a single project structure. In addition, choosing to integrate [Nativescript-Vue-Web](https://github.com/Nativescript-Vue-Web/Nativescript-Vue-Web), will allow for the development of Web components with a NativeScript-Vue like syntax that has the benefit of allowing for the sharing of components between the Native and Web sides of the project. This helps reduce the amount of code, maintenence needs, and the amount of time needed for development activities. 6 | 7 | ## Sharing logic in a single Web and Native capable component 8 | The key feature of this plugin is that it will allow you to compose SFC's that contain both Web and Native structures in them. If your component has exactly the same logic (` 43 | 48 | 53 | ``` 54 | 55 | ### Optional Separation of concerns for Web and Native SFC's 56 | If you want complete seperation of concerns between Web and Native for components, core logic and styling, you can also provide an alternate file naming scheme in your project. The name will dictate which mode (Web or Native) and platform (Android or IOS) the file will be used with. The same overall schema will work for `.vue`, `.js`, `.ts`, `.scss`, `.css`, `.styl`, and `.less` files. 57 | 58 | | File Type | Android __and__ IOS | Android only | IOS only | Web only | 59 | | ---------- | ------------------- | --------------- | --------------- | --------------- | 60 | | vue | *.native.vue | *.android.vue | *.ios.vue | *.vue | 61 | | js | *.native.js | *.android.js | *.ios.js | *.js | 62 | | ts | *.native.ts | *.android.ts | *.ios.ts | *.ts | 63 | | scss | *.native.scss | *.android.scss | *.ios.scss | *.scss | 64 | | css | *.native.css | *.android.css | *.ios.css | *.css | 65 | | stylus | *.native.styl | *.android.styl | *.ios.styl | *.styl | 66 | | less | *.native.less | *.android.less | *.ios.less | *.less | 67 | 68 | Webpack will handle figuring out which files to include based on the `npm run` command syntax you pass in. You can also mix and match this file naming schema with the `web` or `native` tag options mentioned above. 69 | 70 | At `serve` or `build` in conjunction with the mode such as `android` or `ios`, Webpack will filter which files are looked at. For instance, if you do `npm run serve:android`, then it will look for `*.native.vue` and `*.android.vue` files and ignore `*.ios.vue` files entirely. Conversely, it will do the same when you are working with `ios` and will ignore `*.android.vue` files. 71 | 72 | This will allow you to develop generic native components under the `*.native.vue` file extension, but in special cases, it may require you to do platform specific components, core logic and styling. Use the corrosponding file extension to allow this to happen. 73 | 74 | If you are building for web, then just `*.vue` will work and if you are building for a Native __only__ project, then `*.vue` will work as well as the previous options mentioned. 75 | 76 | ## Sharing components and assets between Native and Web SFC's 77 | If you want to use common components and assets between `web`, `android` and `ios`, you can do that. For `assets`, place them in `src/assets` and for components, place them in `src/components`. At compile time, assets will be copied to the output directory's `assets` folder and can be universally accessed across environments via something like `~/assets/logo.png`. For components, they can be universally accessed via something similar to `components/HelloWorld`. 78 | 79 | ## Install 80 | 81 | If vue-cli 3 is not yet installed, first follow the instructions here: https://github.com/vuejs/vue-cli 82 | 83 | **Tip**: If you don't want to overwrite your current vue-cli 2 setup because you still need `vue init`, [then try this](https://cli.vuejs.org/guide/creating-a-project.html#pulling-2-x-templates-legacy). 84 | 85 | Generate a project using vue-cli 3.0 86 | ```bash 87 | vue create my-app 88 | ``` 89 | 90 | Before installing the Nativescript-Vue CLI 3 Plugin, make sure to commit or stash changes in case you need to revert. 91 | 92 | To install the Nativescript-Vue CLI 3 Plugin... 93 | ```bash 94 | cd my-app 95 | vue add vue-cli-plugin-nativescript-vue 96 | ``` 97 | 98 | ## Invocation Prompts 99 | 1. Enter a unique application identifier 100 | * Accepting the default is fine for testing 101 | 2. Use HTML5 history mode? (Default: hash mode) 102 | * Required parameter for the cli core generator when vue-router is used 103 | 3. Is this a brand new project? (Default: Yes) 104 | * By choosing `No`, the plugin will try and be as non-destructive as possible to an existing project. It will do this by adding a folder into root named `ns-example` and add files into there to provide examples of how a project would change. 105 | * These changes will factor in answers to the other questions and adjust accordingly. Regardless of the answer, the plugin will install packages and adjust `package.json` as necessary to prep the project. 106 | 4. Dual Native AND Web development experience or a Native only? (Default: Dual) 107 | * By default, the plugin will assume you want to develop for the Web and Native environments within the same project. As such, there will be two sides to the project where web environments will be actively developed within `/src` and Native environments will be developed within `/app` unless you choose to integrate `Nativescript-Vue-Web` and all files will be placed in `/src`. 108 | * Warning: Choosing to develop for Native only will move the main entry point of the project and development folder to `/app`, it will copy the necessary files and then delete `/src`. 109 | * By choosing `Dual`, you will be able to bring your own component framework into the web portion of the project. `NativeScript-Vue` [cannot use vue-router](https://nativescript-vue.org/en/docs/routing/vue-router/) currently, so you will have to provide your own manual routing. The templated options deployed with the plugin will show how to do basic manual routing. 110 | 5. What type of template do you want to start with? (Default: Simple) 111 | * Simple is just a simple setup with a header and basic routing. 112 | * [Nativescript-Vue-Web](https://github.com/Nativescript-Vue-Web/Nativescript-Vue-Web) - The Simple template, but with NS-Vue like syntax for web components. This option should only appear if you have chosen to develop in the Dual Web and Native environments. This option will effecively integrate a web component framework that will allow you to develop components that can be used in the Web and Native side of the project. It uses `NativeScript-Vue` like syntax on components which will allow for the sharing of components between NativeScript and Web. 113 | * Sidebar (currently disabled), will allow you to start with a project that includes a fixed header and pop-out sidebar menu. 114 | * We expect to add more templates in the future as use cases come up. 115 | 116 | ## Running the project 117 | You will have several options in serving and building the project: 118 | 1. `npm run serve:web` 119 | 2. `npm run serve:android` 120 | 3. `npm run serve:ios` 121 | 4. `npm run build:web` 122 | 5. `npm run build:android` 123 | 6. `npm run build:ios` 124 | 125 | 126 | The basic `serve` and `build` options should be similar to what is in a CLI 3 project except the added options to dictate which kind of environment you are using: `web`, `android` or `ios`. Please note that when building web projects, they will output to `dist` and when building native projects, they will output to `platforms\android` or `platforms\ios` depending on which you are building at the time. 127 | 128 | ### Debugging your project 129 | You will have the standard options for debugging available to you as you would with just `tns`. You can do the following to debug Native versions of your app. 130 | 1. `npm run debug:android` 131 | 2. `npm run debug:ios` 132 | 133 | You should then be able to attach the Chrome debugger as you normally would via the [NativeScript docs](https://docs.nativescript.org/angular/tooling/debugging/chrome-devtools). 134 | 135 | You should also be able to debug directly in VSCode. The [NativeScript VSCode Extension docs](https://docs.nativescript.org/angular/tooling/visual-studio-code-extension) are a good place to start with understanding how to do this. However, you will need to modify your `launch.json` file to force `tns` to work properly with VUE CLI 3. 136 | 137 | Your `launch.json` file should look something like below. Notice the different in the `tnsArgs` line that is different than what is in the documentation link above. 138 | ```json 139 | { 140 | "version": "0.2.0", 141 | "configurations": [ 142 | { 143 | "name": "Launch on iOS", 144 | "type": "nativescript", 145 | "request": "launch", 146 | "platform": "ios", 147 | "appRoot": "${workspaceRoot}", 148 | "sourceMaps": true, 149 | "watch": true, 150 | "tnsArgs":[" --bundle --env.development cross-env-shell VUE_CLI_MODE=development.ios"] 151 | }, 152 | { 153 | "name": "Attach on iOS", 154 | "type": "nativescript", 155 | "request": "attach", 156 | "platform": "ios", 157 | "appRoot": "${workspaceRoot}", 158 | "sourceMaps": true, 159 | "watch": false 160 | }, 161 | { 162 | "name": "Launch on Android", 163 | "type": "nativescript", 164 | "request": "launch", 165 | "platform": "android", 166 | "appRoot": "${workspaceRoot}", 167 | "sourceMaps": true, 168 | "watch": true, 169 | "tnsArgs":[" --bundle --env.development cross-env-shell VUE_CLI_MODE=development.android"] 170 | }, 171 | { 172 | "name": "Attach on Android", 173 | "type": "nativescript", 174 | "request": "attach", 175 | "platform": "android", 176 | "appRoot": "${workspaceRoot}", 177 | "sourceMaps": true, 178 | "watch": false 179 | }, 180 | { 181 | "type": "chrome", 182 | "request": "launch", 183 | "name": "web: chrome", 184 | "url": "http://localhost:8080", 185 | "webRoot": "${workspaceFolder}/src", 186 | "breakOnLoad": true, 187 | "sourceMapPathOverrides": { 188 | "webpack:///src/*": "${webRoot}/*" 189 | } 190 | }, 191 | ] 192 | } 193 | ``` 194 | You will also need to modify your `vue.config.js` file to include a `webpack-chain` statement that will setup your source map. It should look something like this: 195 | ```js 196 | module.exports = { 197 | chainWebpack: config => { 198 | config 199 | .devtool('inline-source-map') 200 | } 201 | } 202 | ``` 203 | 204 | ### Previewing your Project 205 | You should be able to use the NativeScript Playground and Preview Apps via the following npm statements: 206 | 1. `npm run preview:android` 207 | 2. `npm run preview:ios` 208 | 209 | #### --env & --hmr command line recognition 210 | Basic support for passing the `env` command line option is in place, but has a slightly different syntax since we're working with the CLI 3 webpack infrastructure. To inject items into `env` at run-time, you will need to add `-- --env.option` Where option is one of the recognized options that Nativescript-Vue and this project supports. 211 | An example of this would be something like this: `npm run serve:android -- --env.production`. This would allow you to serve up a Production build of your Android app versus just running `npm run serve:android` which would serve a Development version of the same. 212 | 213 | HMR will also work by passing in `-- --hmr`. An example of this would be `npm run serve:android -- --hmr` 214 | 215 | #### Webpack related information 216 | The options passed in at `npm run` will dictate what webpack config is provided. The first choice webpack will make is if this is a `web` or `native` environment. Then, if it's a `native` environment, it will determine choices to be made between `ios` and `android`. 217 | 218 | Each time the project is built or served, the plugin will copy the latest webpack config from the cli to the root of your project. When you build a project, it will clean-up this file at the end, but just serving the project will not. This is an issue with [nativescript-dev-webpack](https://github.com/NativeScript/nativescript-dev-webpack) and cannot be overcome at this time. 219 | 220 | #### Inspecting the Webpack config 221 | If you'd like to see what the webpack config is doing then you can run one of the following: 222 | 223 | 1. `vue inspect -- --env.android > out-android.js` 224 | 2. `vue inspect -- --env.ios > out-ios.js` 225 | 3. `vue inspect -- --env.web > out-web.js` 226 | 227 | These will default to showing you the Development version of the webpack config. You can pass in the `-- --env.production` option to see the Production version of the config. Subtitute `development.android` or `production.ios`, etc to see the different configs based on the environmental variables. 228 | 229 | #### Aliases 230 | Prebuilt in the webpack config are several aliases that you can use. Here is a table listing out the various alias and the folder they use based on the environment chosen: 231 | 232 | | Alias | Native | Web | 233 | | ---------- | --------------- | --------------- | 234 | | ~ | /app | /src | 235 | | @ | /app | /src | 236 | | src | /src | /src | 237 | | assets | /src/assets | /src/assets | 238 | | components | /src/components | /src/components | 239 | | fonts | /src/fonts | /src/fonts | 240 | | styles | /src/styles | /src/styles | 241 | | root | / | / | 242 | 243 | 244 | ## For TypeScript enabled projects 245 | If your CLI 3 project has TypeScript enabled, then the plugin will attempt to give you a very basic TypeScript version of the template you choose. When you invoke the plugin and the template generator makes changes, you will notice the `*.d.ts` files that are usually in `src` will be moved to `/types`. The plugin's webpack integration will ensure these files are referenced correctly at compile and runtimes. 246 | -------------------------------------------------------------------------------- /generator/README.md: -------------------------------------------------------------------------------- 1 | # nativescript-vue-cli-plugin - Generator Readme 2 | 3 | Want to submit a PR for a new template? Read below. 4 | 5 | It is __highly, highly, highly suggested__ that you copy/paste the `simple` template in its entirety and then rename the copied directory. It will make it much easier for you to get started using the existing logic in the generator. Modifications to the existing generator logic will be considered for PR, but will have to go through rigourous testing to ensure the changes do not break all pre-existing templates. 6 | 7 | If you want to add additional templates to the plugin, then here's the information on how to do it: 8 | 9 | 1. Create a new option to the prompt question #5 concerning which template you'd like to deploy. 10 | * The value for the template should be kept simple and easy. 11 | 2. Create a new directory under `/generator/templates`. 12 | * The directory name should __exactly match__ the value from #1. For example if the value from #1 is `simple`, then the directory structure would be `/generator/templates/simple` 13 | 3. The new template directory __must__ have a single first-level subdirectory named `src`. 14 | 4. Inside the `src` directory, you should add the following in an effort to give the template feature consistancy to the other templates: 15 | * router.js 16 | * main.js 17 | * main.native.js (the NS-Vue project entry point) 18 | * package.json (this is the standard NativeScript-Vue package.json file. Just copy/paste from the simple template) 19 | * App.vue 20 | * views/About.vue (optional) 21 | * views/Home.vue (optional) 22 | * components/HelloWorld.vue (optional) 23 | * components/HelloWorld.native.vue (optional) 24 | * components/HelloWorld.ios.vue (optional) 25 | * components/HelloWorld.android.vue (optional) 26 | * assets/logo.png (optional, but highly encouraged to prove images are loading) 27 | 28 | Within the \*.vue files you will find [ejs](https://github.com/mde/ejs) syntax that will enable you to differentiate between TypeScript and non-TypeScript projects. Any new templates added to the project __must__ demonstrate they work across these options or the PR to add the template will be rejected. 29 | 30 | ### Word of warning concerning using EJS templates with Prettier 31 | Prettier does not support EJS templates and if you have Prettier automatically fix all issues in a `*.vue` template file, then you will run the risk of it overwriting sections of the template from one `if` statement to the `else` side of the statement. Pay close attention to this specifically in your `script` tags as it relates to the TypeScript vs. non-TypeScript parts of the template. Whichever one comes first in the `if` statement will overwrite the section after the `else` statement. 32 | 33 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | const path = require('path'); 4 | const fs = require('fs-extra'); 5 | const replace = require('replace-in-file'); 6 | 7 | const newline = process.platform === 'win32' ? '\r\n' : '\n'; 8 | 9 | module.exports = async (api, options, rootOptions) => { 10 | const genConfig = { 11 | // if it is a new project changes will be written as they normally would with any plugin 12 | // if it is an existing project, changes will be added to the ./ns-example directory 13 | dirPathPrefix: options.isNewProject === true ? './' : './ns-example/', 14 | 15 | // simple typescript detection and then variable is passed to multiple templating functions 16 | // to simply change the file's extension 17 | jsOrTs: api.hasPlugin('typescript') ? '.ts' : '.js', 18 | 19 | // A template type of 'simple' project will have a base template path that equals: ./templates/simple 20 | // then we determine if the project is using Nativescript-Vue-Web and we append a subdirectory to the base path 21 | templateTypePathModifer: options.templateType, 22 | 23 | // Get the location to the native app directory 24 | nativeAppPathModifier: options.isNativeOnly ? 'app/' : 'src/', 25 | 26 | // Determine the path to App_Resources 27 | get appResourcesPathModifier() { 28 | return this.nativeAppPathModifier + 'App_Resources'; 29 | }, 30 | 31 | // setup directories to exclude in the tsconfig.json file(s) 32 | get tsExclusionArray() { 33 | return ['node_modules', 'dist', 'platforms', 'hooks', this.appResourcesPathModifier]; 34 | } 35 | }; 36 | 37 | // common render options to be passed to render functions 38 | const commonRenderOptions = { 39 | applicationName: api.generator.pkg.name, 40 | applicationVersion: api.generator.pkg.version, 41 | applicationAndroidVersionCode: api.generator.pkg.version.split('.').join('0'), 42 | applicationDescription: api.generator.pkg.description || api.generator.pkg.name, 43 | applicationLicense: api.generator.pkg.license || 'MIT', 44 | applicationId: options.applicationId, 45 | historyMode: options.historyMode, 46 | doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript') ? true : false, 47 | usingBabel: api.hasPlugin('babel') ? true : false, 48 | usingTS: api.hasPlugin('typescript') ? true : false 49 | }; 50 | 51 | console.log('adding to package.json'); 52 | 53 | api.extendPackage({ 54 | nativescript: { 55 | id: 'org.nativescript.application', 56 | 'tns-android': { 57 | version: '6.3.1' 58 | }, 59 | 'tns-ios': { 60 | version: '6.3.0' 61 | } 62 | }, 63 | scripts: { 64 | 'build:android': 'npm run setup-webpack-config && tns build android --env.production && npm run remove-webpack-config', 65 | 'build:ios': 'npm run setup-webpack-config && tns build ios --env.production && npm run remove-webpack-config', 66 | 'remove-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance post', 67 | 'serve:android': 'npm run setup-webpack-config && tns run android --env.development', 68 | 'serve:ios': 'npm run setup-webpack-config && tns run ios --env.development', 69 | // 'inspect:android': 'npm run setup-webpack-config && vue inspect -- --env.android > out-android.js', 70 | // 'inspect:ios': 'npm run setup-webpack-config && vue inspect -- --env.ios > out-ios.js', 71 | 'debug:android': 'npm run setup-webpack-config && tns debug android --env.development', 72 | 'debug:ios': 'npm run setup-webpack-config && tns debug ios --env.development', 73 | 'preview:android': 'npm run setup-webpack-config && tns preview --env.development --env.android', 74 | 'preview:ios': 'npm run setup-webpack-config && tns preview --env.development --env.ios', 75 | 'setup-webpack-config': 'node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre', 76 | 'clean:platforms': 'rimraf platforms', 77 | 'clean:android': 'rimraf platforms/android', 78 | 'clean:ios': 'rimraf platforms/ios' 79 | }, 80 | dependencies: { 81 | 'nativescript-vue': '^2.5.0-alpha.3', 82 | 'tns-core-modules': '^6.3.2' 83 | }, 84 | devDependencies: { 85 | 'nativescript-dev-webpack': '^1.4.0', 86 | 'nativescript-vue-template-compiler': '^2.5.0-alpha.3', 87 | 'nativescript-worker-loader': '~0.9.5', 88 | 'node-sass': '^4.12.0', 89 | 'string-replace-loader': '^2.2.0', 90 | rimraf: '^2.6.3' 91 | // webpack: '4.28.4', 92 | // 'webpack-cli': '^3.3.2' 93 | } 94 | }); 95 | 96 | // add scripts when we are also developing for the web 97 | if (!options.isNativeOnly) { 98 | api.extendPackage({ 99 | scripts: { 100 | 'serve:web': 'vue-cli-service serve --mode development.web', 101 | 'build:web': 'vue-cli-service build --mode production.web' 102 | //'inspect:web': 'npm run setup-webpack-config && vue inspect -- --env.web > out-web.js' 103 | } 104 | }); 105 | 106 | // if we are using NativeScript-Vue-Web then add the package 107 | if (options.templateType == 'nvw') { 108 | api.extendPackage({ 109 | dependencies: { 110 | 'nativescript-vue-web': '^0.9.4' 111 | } 112 | }); 113 | } 114 | } else { 115 | // 116 | } 117 | 118 | if (rootOptions.router) { 119 | api.extendPackage({ 120 | dependencies: { 121 | 'nativescript-vue-navigator': '^0.2.0' 122 | } 123 | }); 124 | } 125 | 126 | if (api.hasPlugin('typescript')) { 127 | api.extendPackage({ 128 | dependencies: {}, 129 | devDependencies: { 130 | 'fork-ts-checker-webpack-plugin': '^1.5.0', 131 | 'terser-webpack-plugin': '^2.1.3', 132 | 'tns-platform-declarations': '^6.3.2' 133 | } 134 | }); 135 | 136 | // this means it's a typescript project and using babel 137 | if (api.hasPlugin('babel')) { 138 | api.extendPackage({ 139 | dependencies: {}, 140 | devDependencies: { 141 | '@babel/types': '^7.4.4' 142 | } 143 | }); 144 | } 145 | } 146 | 147 | // if the project is using babel, then load appropriate packages 148 | if (api.hasPlugin('babel')) { 149 | api.extendPackage({ 150 | devDependencies: { 151 | '@babel/core': '^7.5.5', 152 | '@babel/preset-env': '^7.5.5', 153 | 'babel-loader': '^8.0.6', 154 | '@babel/traverse': '^7.5.5' 155 | } 156 | }); 157 | 158 | api.render(async () => { 159 | fs.ensureFileSync(genConfig.dirPathPrefix + 'babel.config.js'); 160 | await applyBabelConfig(api, genConfig.dirPathPrefix + 'babel.config.js'); 161 | }); 162 | } 163 | 164 | // if the project is using eslint, add some global variables 165 | // to the eslintConfig in order to avoid no-def errors 166 | if (api.hasPlugin('eslint')) { 167 | api.extendPackage({ 168 | eslintConfig: { 169 | globals: { 170 | TNS_APP_MODE: true, 171 | TNS_APP_PLATFORM: true 172 | } 173 | } 174 | }); 175 | } 176 | 177 | console.log('deleting from package.json'); 178 | api.extendPackage((pkg) => { 179 | // if the project is using babel, then delete babel-core 180 | if (api.hasPlugin('babel')) { 181 | delete pkg.devDependencies['babel-core']; 182 | } 183 | // we will be replacing these 184 | delete pkg.scripts['serve'], delete pkg.scripts['build']; 185 | 186 | if (options.isNativeOnly) { 187 | delete pkg.browserslist; 188 | } 189 | 190 | if (options.templateType !== 'nvw') { 191 | delete pkg.dependencies['nativescript-vue-web']; 192 | } 193 | }); 194 | 195 | console.log('doing template rendering'); 196 | 197 | // render App_Resources folder 198 | api.render(async () => { 199 | // eslint-disable-next-line prettier/prettier 200 | await renderDirectoryStructure( 201 | api, 202 | options, 203 | rootOptions, 204 | '.js', 205 | commonRenderOptions, 206 | './templates/App_Resources', 207 | genConfig.dirPathPrefix + genConfig.appResourcesPathModifier 208 | ); 209 | }); 210 | 211 | // If Native only or Dual Native and Web Project. 212 | if (!options.isNativeOnly) { 213 | api.render(async () => { 214 | // render src directory 215 | await renderDirectoryStructure( 216 | api, 217 | options, 218 | rootOptions, 219 | genConfig.jsOrTs, 220 | commonRenderOptions, 221 | path.join('templates', genConfig.templateTypePathModifer, 'src'), 222 | genConfig.dirPathPrefix + 'src' 223 | ); 224 | 225 | // add router statements to src/main.*s 226 | await vueRouterSetup(api, genConfig.dirPathPrefix, genConfig.jsOrTs); 227 | 228 | // add vuex statements to src/main.*s 229 | await vuexSetup(api, options, genConfig.dirPathPrefix, genConfig.jsOrTs, genConfig.nativeAppPathModifier); 230 | }); 231 | } else { 232 | // Is Native Only 233 | api.render(async () => { 234 | // render app directory 235 | await renderDirectoryStructure( 236 | api, 237 | options, 238 | rootOptions, 239 | genConfig.jsOrTs, 240 | commonRenderOptions, 241 | path.join('templates', genConfig.templateTypePathModifer, 'src'), 242 | genConfig.dirPathPrefix + genConfig.nativeAppPathModifier.slice(0, -1) 243 | ); 244 | 245 | // add vuex statements to app/main.*s 246 | await vuexSetup(api, options, genConfig.dirPathPrefix, genConfig.jsOrTs); 247 | }); 248 | } 249 | 250 | api.onCreateComplete(async () => { 251 | // make changes to .gitignore 252 | gitignoreAdditions(api); 253 | 254 | // create files in ./ or ./ns-example 255 | writeRootFiles(api, options, genConfig.dirPathPrefix); 256 | 257 | // create nsconfig.json in ./ or ./ns-example 258 | nsconfigSetup(genConfig.dirPathPrefix, api.resolve('nsconfig.json'), genConfig.nativeAppPathModifier, genConfig.appResourcesPathModifier, options); 259 | 260 | // copy over .vue with native.vue files 261 | if (options.isNativeOnly) { 262 | nativeOnlyRenameFiles(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier.slice(0, -1)); 263 | } 264 | 265 | // remove router config for projects that don't use vue-router 266 | if (!rootOptions.router) { 267 | fs.remove(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'router' + genConfig.jsOrTs, (err) => { 268 | if (err) throw err; 269 | }); 270 | } 271 | 272 | if (api.hasPlugin('typescript')) { 273 | // we need to edit the tsconfig.json file in /app 274 | // for a Native only project to remove references to /src 275 | await tsconfigSetup(options, genConfig.dirPathPrefix, genConfig.nativeAppPathModifier); 276 | 277 | if (fs.existsSync(api.resolve('tslint.json'))) { 278 | await tslintSetup(genConfig.dirPathPrefix, api.resolve('tslint.json'), genConfig.tsExclusionArray); 279 | 280 | const baseDir = genConfig.nativeAppPathModifier; 281 | require('../lib/tslint')( 282 | { 283 | _: [`${baseDir}**/*.ts`, `${baseDir}**/*.vue`, `${baseDir}**/*.tsx`, 'tests/**/*.ts', 'tests/**/*.tsx'] 284 | }, 285 | api, 286 | false 287 | ); 288 | } 289 | } 290 | 291 | // the main difference between New and Existing for this section is 292 | // that for New projects we are moving files around, but for 293 | // existing projects we are copying files into ./ns-example 294 | if (options.isNewProject) { 295 | // move type files out of src to ./ or ./ns-example 296 | if (api.hasPlugin('typescript')) { 297 | // Do these synchronously so in the event we delete the ./src directory in a native only 298 | // situation below we don't try and move a file that no longer exists 299 | try { 300 | fs.moveSync('./src/shims-tsx.d.ts', genConfig.dirPathPrefix + 'types/shims-tsx.d.ts', { overwrite: true }); 301 | fs.moveSync('./src/shims-vue.d.ts', genConfig.dirPathPrefix + 'types/shims-vue.d.ts', { overwrite: true }); 302 | } catch (err) { 303 | throw err; 304 | } 305 | } 306 | 307 | // for new projects that are native only, move files/dirs and delete others 308 | if (options.isNativeOnly) { 309 | // Do these synchronously so that when we delete the ./src directory below 310 | // we don't try and move a file that no longer exists 311 | try { 312 | // move store.js file from ./src to ./app 313 | if (api.hasPlugin('vuex')) { 314 | fs.moveSync('./src/store' + genConfig.jsOrTs, genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'store' + genConfig.jsOrTs, { 315 | overwrite: true 316 | }); 317 | } 318 | } catch (err) { 319 | throw err; 320 | } 321 | // remove src directory as we don't need it any longer 322 | fs.remove('./src', (err) => { 323 | if (err) throw err; 324 | }); 325 | // remove public directory as we don't need it any longer 326 | fs.remove('./public', (err) => { 327 | if (err) throw err; 328 | }); 329 | // rename main.native.js to main.js 330 | fs.moveSync( 331 | genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'main.native' + genConfig.jsOrTs, 332 | genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'main' + genConfig.jsOrTs, 333 | { 334 | overwrite: true 335 | } 336 | ); 337 | 338 | nativeOnlyPackageJsonSetup(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'package.json'); 339 | } 340 | } else if (!options.isNewProject) { 341 | // copy type files from ./src to ./ns-example 342 | if (api.hasPlugin('typescript')) { 343 | fs.copy('./src/shims-tsx.d.ts', path.join(genConfig.dirPathPrefix, 'types/shims-tsx.d.ts'), (err) => { 344 | if (err) throw err; 345 | }); 346 | 347 | fs.copy('./src/shims-vue.d.ts', path.join(genConfig.dirPathPrefix, 'types/shims-vue.d.ts'), (err) => { 348 | if (err) throw err; 349 | }); 350 | } 351 | 352 | if (options.isNativeOnly) { 353 | // move store.js file from ./src to ./ns-example/app 354 | if (api.hasPlugin('vuex')) { 355 | fs.copy('./src/store' + genConfig.jsOrTs, genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'store' + genConfig.jsOrTs, (err) => { 356 | if (err) throw err; 357 | }); 358 | } 359 | 360 | // rename main.native.js to main.js 361 | fs.moveSync( 362 | genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'main.native' + genConfig.jsOrTs, 363 | genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'main' + genConfig.jsOrTs, 364 | { 365 | overwrite: true 366 | } 367 | ); 368 | 369 | nativeOnlyPackageJsonSetup(genConfig.dirPathPrefix + genConfig.nativeAppPathModifier + 'package.json'); 370 | } 371 | } else { 372 | // nothing to do here 373 | } 374 | }); 375 | }; 376 | 377 | // setup vue-router options 378 | // will not setup any vue-router options for native app 379 | // for new projects it will write to changes as normal 380 | // and for existing projects it will write changes to the ./ns-example directory 381 | const vueRouterSetup = (module.exports.vueRouterSetup = async (api, filePathPrefix, jsOrTs) => { 382 | try { 383 | if (api.hasPlugin('vue-router')) { 384 | api.injectImports(filePathPrefix.replace(/.\//, '') + 'src/main' + jsOrTs, `import router from './router';`); 385 | api.injectRootOptions(filePathPrefix.replace(/.\//, '') + 'src/main' + jsOrTs, `router`); 386 | } 387 | } catch (err) { 388 | throw err; 389 | } 390 | }); 391 | 392 | // setup Vuex options 393 | // for new projects it will write to changes as normal 394 | // and for existing projects it will write changes to the ./ns-example directory 395 | const vuexSetup = (module.exports.vuexSetup = async (api, options, filePathPrefix, jsOrTs, nativeAppPathModifier) => { 396 | try { 397 | if (api.hasPlugin('vuex')) { 398 | if (!options.isNativeOnly) { 399 | api.injectImports(filePathPrefix.replace(/.\//, '') + 'src/main' + jsOrTs, `import store from './store';`); 400 | api.injectRootOptions(filePathPrefix.replace(/.\//, '') + 'src/main' + jsOrTs, `store`); 401 | 402 | // if we're using Nativescript-Vue-Web, then we have to modify the main.native file 403 | api.injectImports(filePathPrefix.replace(/.\//, '') + 'src/main.native' + jsOrTs, `import store from './store';`); 404 | api.injectRootOptions(filePathPrefix.replace(/.\//, '') + 'src/main.native' + jsOrTs, `store`); 405 | } else { 406 | // if it's native only, it will not do anything in /src directory 407 | api.injectImports(filePathPrefix.replace(/.\//, '') + nativeAppPathModifier + 'main' + jsOrTs, `import store from './store';`); 408 | api.injectRootOptions(filePathPrefix.replace(/.\//, '') + nativeAppPathModifier + 'main' + jsOrTs, `store`); 409 | } 410 | } 411 | } catch (err) { 412 | throw err; 413 | } 414 | }); 415 | 416 | // write out babel.config.js options by adding options and replacing the base @vue/app 417 | // for new projects it will write to the root of the project 418 | // and for existing projects it will write it to the ./ns-example directory 419 | const applyBabelConfig = (module.exports.applyBabelConfig = async (api, filePath) => { 420 | const babelReplaceOptions = { 421 | files: '', 422 | from: " '@vue/app'", 423 | to: " process.env.VUE_PLATFORM === 'web' ? '@vue/app' : {}, " + newline + " ['@babel/env', { targets: { esmodules: true } }]" 424 | }; 425 | 426 | try { 427 | babelReplaceOptions.files = filePath; 428 | 429 | api.render((files) => { 430 | files[filePath] = api.genJSConfig({ 431 | plugins: ['@babel/plugin-syntax-dynamic-import'], 432 | presets: ['@vue/app'] 433 | }); 434 | // eslint-disable-next-line no-unused-vars 435 | replace(babelReplaceOptions, (err, changes) => { 436 | if (err) throw err; 437 | }); 438 | }); 439 | } catch (err) { 440 | throw err; 441 | } 442 | }); 443 | 444 | // write out files in the root of the project 445 | // this includes the environment files as well as a global types file for 446 | // Typescript projects. for new projects it will write files to the root of the project 447 | // and for existing projects it will write it to the ./ns-example directory 448 | const writeRootFiles = (module.exports.writeRootFiles = async (api, options, filePathPrefix) => { 449 | try { 450 | const envDevelopmentAndroid = 'NODE_ENV=development' + newline + 'VUE_APP_PLATFORM=android' + newline + 'VUE_APP_MODE=native'; 451 | const envDevelopmentIOS = 'NODE_ENV=development' + newline + 'VUE_APP_PLATFORM=ios' + newline + 'VUE_APP_MODE=native'; 452 | const envProductionAndroid = 'NODE_ENV=production' + newline + 'VUE_APP_PLATFORM=android' + newline + 'VUE_APP_MODE=native'; 453 | const envProductionIOS = 'NODE_ENV=production' + newline + 'VUE_APP_PLATFORM=ios' + newline + 'VUE_APP_MODE=native'; 454 | 455 | fs.writeFileSync( 456 | filePathPrefix + '.env.development.android', 457 | envDevelopmentAndroid, 458 | { 459 | encoding: 'utf8' 460 | }, 461 | (err) => { 462 | if (err) throw err; 463 | } 464 | ); 465 | fs.writeFileSync( 466 | filePathPrefix + '.env.development.ios', 467 | envDevelopmentIOS, 468 | { 469 | encoding: 'utf8' 470 | }, 471 | (err) => { 472 | if (err) throw err; 473 | } 474 | ); 475 | fs.writeFileSync( 476 | filePathPrefix + '.env.production.android', 477 | envProductionAndroid, 478 | { 479 | encoding: 'utf8' 480 | }, 481 | (err) => { 482 | if (err) throw err; 483 | } 484 | ); 485 | fs.writeFileSync( 486 | filePathPrefix + '.env.production.ios', 487 | envProductionIOS, 488 | { 489 | encoding: 'utf8' 490 | }, 491 | (err) => { 492 | if (err) throw err; 493 | } 494 | ); 495 | 496 | // only write these out if we are also developing for the web 497 | if (!options.isNativeOnly) { 498 | console.log('dual components env files'); 499 | const envDevelopmentWeb = 'NODE_ENV=development' + newline + 'VUE_APP_PLATFORM=web' + newline + 'VUE_APP_MODE=web'; 500 | const envProductionWeb = 'NODE_ENV=production' + newline + 'VUE_APP_PLATFORM=web' + newline + 'VUE_APP_MODE=web'; 501 | 502 | fs.writeFileSync( 503 | filePathPrefix + '.env.development.web', 504 | envDevelopmentWeb, 505 | { 506 | encoding: 'utf8' 507 | }, 508 | (err) => { 509 | if (err) throw err; 510 | } 511 | ); 512 | fs.writeFileSync( 513 | filePathPrefix + '.env.production.web', 514 | envProductionWeb, 515 | { 516 | encoding: 'utf8' 517 | }, 518 | (err) => { 519 | if (err) throw err; 520 | } 521 | ); 522 | } 523 | 524 | // only write this out if we are using typescript 525 | if (api.hasPlugin('typescript')) { 526 | // this file is ultimately optional if you don't use any process.env.VARIABLE_NAME references in your code 527 | const globalTypes = 528 | 'declare const TNS_ENV: string;' + newline + 'declare const TNS_APP_PLATFORM: string;' + newline + 'declare const TNS_APP_MODE: string;'; 529 | fs.outputFileSync( 530 | filePathPrefix + 'types/globals.d.ts', 531 | globalTypes, 532 | { 533 | encoding: 'utf8' 534 | }, 535 | (err) => { 536 | if (err) throw err; 537 | } 538 | ); 539 | } 540 | } catch (err) { 541 | throw err; 542 | } 543 | }); 544 | 545 | // write .gitignore additions for native app exemptions 546 | // will make changes to the root .gitignore file regardless of new or exisiting project 547 | const gitignoreAdditions = (module.exports.gitignoreAdditions = async (api) => { 548 | try { 549 | let gitignoreContent; 550 | const gitignorePath = api.resolve('.gitignore'); 551 | const gitignoreAdditions = newline + '# NativeScript application' + newline + 'hooks' + newline + 'platforms' + newline + 'webpack.config.js'; 552 | 553 | if (fs.existsSync(gitignorePath)) { 554 | gitignoreContent = fs.readFileSync(gitignorePath, { 555 | encoding: 'utf8' 556 | }); 557 | } else { 558 | gitignoreContent = ''; 559 | } 560 | 561 | if (gitignoreContent.indexOf(gitignoreAdditions) === -1) { 562 | gitignoreContent += gitignoreAdditions; 563 | 564 | fs.writeFileSync( 565 | gitignorePath, 566 | gitignoreContent, 567 | { 568 | encoding: 'utf8' 569 | }, 570 | (err) => { 571 | if (err) throw err; 572 | } 573 | ); 574 | } 575 | } catch (err) { 576 | throw err; 577 | } 578 | }); 579 | 580 | // setup nsconfig.json file. for new projects it will write to the root of the project 581 | // and for existing projects it will write it to the ./ns-example directory 582 | const nsconfigSetup = (module.exports.nsconfigSetup = async (dirPathPrefix, nsconfigPath, nativeAppPathModifier, appResourcesPathModifier, options) => { 583 | let nsconfigContent = ''; 584 | 585 | try { 586 | if (fs.existsSync(nsconfigPath)) { 587 | nsconfigContent = JSON.parse( 588 | fs.readFileSync(nsconfigPath, { 589 | encoding: 'utf8' 590 | }) 591 | ); 592 | } else { 593 | nsconfigContent = {}; 594 | } 595 | 596 | nsconfigContent.appPath = nativeAppPathModifier.slice(0, -1); 597 | nsconfigContent.appResourcesPath = appResourcesPathModifier; 598 | 599 | if (options.isNewProject) { 600 | nsconfigContent.useLegacyWorkflow = false; 601 | } 602 | 603 | fs.writeFileSync( 604 | dirPathPrefix + 'nsconfig.json', 605 | JSON.stringify(nsconfigContent, null, 2), 606 | { 607 | encoding: 'utf8' 608 | }, 609 | (err) => { 610 | if (err) console.error(err); 611 | } 612 | ); 613 | } catch (err) { 614 | throw err; 615 | } 616 | }); 617 | 618 | // can be used to strip out template tags in native only project 619 | // currently unused in preference for EJS templating 620 | // eslint-disable-next-line no-unused-vars 621 | const stripTemplateTags = (module.exports.stripTemplateTags = async (srcPathPrefix) => { 622 | try { 623 | const files = await getAllFilesInDirStructure(srcPathPrefix, ''); 624 | 625 | for (const file of files) { 626 | if (file.slice(-4) == '.vue') { 627 | const options = { 628 | files: path.join(srcPathPrefix, file), 629 | from: [ 630 | new RegExp(`^(()[\\s\\S]*?(<\\/template>)`, `gim`), 631 | new RegExp(`^(()`, `gim`) 632 | ], 633 | to: ['', '