├── .gitignore ├── README.md ├── tsconfig.json ├── LICENSE ├── package.json └── src └── index.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nativescript-vue-devtools 2 | 3 | A NativeScript-Vue plugin for connecting to the standalone vue-devtools. 4 | 5 | [See documentation for more details](https://nativescript-vue.org/en/docs/getting-started/vue-devtools/) 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "declaration": true, 8 | "strict": true, 9 | "esModuleInterop": true, 10 | "skipLibCheck": true, 11 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */, 12 | "outDir": "./dist", 13 | "baseUrl": "./src", 14 | "lib": ["es2017", "DOM"], 15 | "typeRoots": [ 16 | "./node_modules/@types", 17 | "./node_modules/@nativescript/types" 18 | ] 19 | }, 20 | "include": ["./src/**/*"] 21 | } 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 NativeScript-Vue 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nativescript-vue-devtools", 3 | "version": "1.5.1", 4 | "description": "A NativeScript-Vue plugin for connecting to the standalone vue-devtools", 5 | "main": "dist/index.js", 6 | "nativescript": { 7 | "plugin": { 8 | "vue": "true" 9 | } 10 | }, 11 | "scripts": { 12 | "build": "tsc", 13 | "prepare": "npm run build" 14 | }, 15 | "files": [ 16 | "dist" 17 | ], 18 | "typings": "dist/index.d.ts", 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/nativescript-vue/nativescript-vue-devtools.git" 22 | }, 23 | "keywords": [ 24 | "nativescript", 25 | "nativescript-vue", 26 | "devtools", 27 | "vue", 28 | "vuejs" 29 | ], 30 | "author": "Igor Randjelovic", 31 | "license": "MIT", 32 | "bugs": { 33 | "url": "https://github.com/nativescript-vue/nativescript-vue-devtools/issues" 34 | }, 35 | "homepage": "https://github.com/nativescript-vue/nativescript-vue-devtools#readme", 36 | "peerDependencies": { 37 | "@nativescript/core": "*", 38 | "@vue/devtools": "*", 39 | "vue": "*", 40 | "@triniwiz/nativescript-socketio": "*", 41 | "@triniwiz/nativescript-toasty": "*" 42 | }, 43 | "dependencies": {}, 44 | "devDependencies": { 45 | "@nativescript/core": "^8.0.0", 46 | "@nativescript/types": "^8.0.0", 47 | "@triniwiz/nativescript-socketio": "^4.0.1", 48 | "@triniwiz/nativescript-toasty": "^4.1.3", 49 | "@types/node": "^14.14.37", 50 | "@vue/devtools": "^5.3.4", 51 | "typescript": "^4.2.3", 52 | "vue": "^2.6.12" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import devtools from "@vue/devtools"; 2 | import { isAndroid } from "@nativescript/core"; 3 | import type { VueConstructor } from "vue"; 4 | 5 | if (!global.performance) { 6 | (global.performance as any) = {}; 7 | } 8 | 9 | if (!global.performance.now) { 10 | const nowOffset = Date.now(); 11 | 12 | global.performance.now = function now() { 13 | return Date.now() - nowOffset; 14 | }; 15 | } 16 | 17 | if (!global.requestAnimationFrame) { 18 | global.requestAnimationFrame = function raf(cb) { 19 | return setTimeout(cb, 1000 / 60); 20 | }; 21 | } 22 | 23 | // fixes a crash when running VueDevtools 24 | if (!global.HTMLElement) { 25 | (global.HTMLElement as any) = function () { 26 | return false; 27 | }; 28 | } 29 | 30 | /** 31 | * Returns the correct address for the host machine when running on emulator 32 | */ 33 | const getServerIpAddress = (host: string | null, port: number): string => { 34 | if (host) { 35 | return `${host}:${port}`; 36 | } 37 | 38 | if (isAndroid) { 39 | // @ts-ignore 40 | const FINGERPRINT = android.os.Build.FINGERPRINT; 41 | if (FINGERPRINT.includes("vbox")) { 42 | // running on genymotion 43 | return `10.0.3.2:${port}`; 44 | } else if (FINGERPRINT.includes("generic")) { 45 | // running on android emulator 46 | return `10.0.2.2:${port}`; 47 | } 48 | } 49 | 50 | // ios simulator uses localhost 51 | return `127.0.0.1:${port}`; 52 | }; 53 | 54 | // Wrap the toast message in a try, devtool still work without toaster 55 | const showToast = (message: string): void => { 56 | try { 57 | const { Toasty } = require("@triniwiz/nativescript-toasty"); 58 | new Toasty({ 59 | text: message, 60 | backgroundColor: "#53ba82", 61 | yAxisOffset: 50, 62 | }).show(); 63 | } catch (error) { 64 | console.log(`[nativescript-vue-devtools] ${message}`); 65 | } 66 | }; 67 | 68 | const install = ( 69 | Vue: VueConstructor, 70 | { debug = false, host = null, port = 8098 } = {} 71 | ): void => { 72 | // ensure all dependencies are available and bail out if anything is missing 73 | try { 74 | require.resolve("@vue/devtools"); 75 | require.resolve("@triniwiz/nativescript-socketio"); 76 | } catch (e) { 77 | console.log( 78 | "[nativescript-vue-devtools] skipping install due to missing dependencies.\n\n", 79 | e, 80 | "\n\n" 81 | ); 82 | return; 83 | } 84 | 85 | const startApp = Vue.prototype.$start; 86 | 87 | Vue.prototype.$start = function () { 88 | const setupDevtools = () => { 89 | const options = { 90 | app: this, 91 | showToast, 92 | io() { 93 | try { 94 | const { SocketIO } = require("@triniwiz/nativescript-socketio"); 95 | const address = `http://${getServerIpAddress(host, port)}`; 96 | // this line causes a crash. the socketio plugin needs to be updated to nativescript version 8.0 97 | let socketIO = new SocketIO(address, { debug: debug }); 98 | socketIO.connect(); 99 | return socketIO; 100 | } catch (error) { 101 | console.log(error); 102 | // prevent crashing by returning a noop stub 103 | return { 104 | on() {}, 105 | emit() {}, 106 | }; 107 | } 108 | }, 109 | }; 110 | 111 | // vue-dev-tools type files are outdated so this is to get around that 112 | (devtools as any).connect("ws://localhost", port, options); 113 | (devtools as any).init(Vue); 114 | }; 115 | 116 | if (isAndroid) { 117 | setupDevtools(); 118 | } else { 119 | // on ios we need to delay the call because the socket connection is not established 120 | // if called too early in the application startup process 121 | // we might need to add a delay to the setTimeout in the future 122 | setTimeout(setupDevtools); 123 | } 124 | 125 | return startApp.call(this); 126 | }; 127 | }; 128 | 129 | export default { 130 | install, 131 | }; 132 | --------------------------------------------------------------------------------