nativescript-vue · rigor789 · May 17, 2023 · Apr 26, 2023 · May 17, 2023 · May 17, 2023
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "\n---- Commit Lint ----\n";
+npx --no-install commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "\n---- Lint Staged ----\n";
+npx --no-install lint-staged --config=package.json
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+demo/hooks
+demo/platforms
+demo/App_Resources
+dist/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,21 +1,19 @@
 {
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/CVS": true,
-        "**/.DS_Store": true,
-        "**/Thumbs.db": true,
-        "**/*.js": {
-            "when": "$(basename).ts"
-        },
-        "**/*.map": true,
-        "**/.idea": false,
-        "**/.tscache": true,
-        "**/node_modules": false
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/*.js": {
+      "when": "$(basename).ts"
     },
+    "**/*.map": true,
+    "**/.idea": false,
+    "**/.tscache": true,
+    "**/node_modules": false
+  },
 
-    "html.customData": [
-        "./test.json"
-    ]
-}
+  "html.customData": ["./test.json"]
+}
diff --git a/README.md b/README.md
@@ -4,7 +4,6 @@
 
 <h1 align="center">NativeScript-Vue3 Beta</h1>
 
-
 <p align="center">
     <a href="https://www.npmjs.com/package/nativescript-vue">
        <img src="https://img.shields.io/npm/v/nativescript-vue/beta.svg" alt="npm">
@@ -14,7 +13,6 @@
     </a>
 </p>
 
-
 NativeScript-Vue with Vue3 support now in beta!
 
 ## Quick start
@@ -38,7 +36,6 @@ If you encounter any issues, please open a new issue with as much detail as poss
 
 - [Join Discord](https://nativescript.org/discord)
 
-
 ## Looking for V2?
 
 The V2 version has been moved to the [v2 branch](https://github.com/nativescript-vue/nativescript-vue/tree/v2)
diff --git a/build.js b/build.js
@@ -1,6 +1,6 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import { build } from "esbuild";
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { build } from 'esbuild';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -9,17 +9,17 @@ try {
   await build({
     bundle: true,
     sourcemap: true,
-    format: "cjs",
+    format: 'cjs',
     // target: "node",
-    external: ["@nativescript/core"],
-    entryPoints: [path.join(__dirname, "src", "index.ts")],
-    outdir: path.join(__dirname, "dist"),
+    external: ['@nativescript/core'],
+    entryPoints: [path.join(__dirname, 'src', 'index.ts')],
+    outdir: path.join(__dirname, 'dist'),
     // outExtension: { ".js": ".mjs" },
     define: {
       __VUE_OPTIONS_API__: true,
-      __VUE_PROD_DEVTOOLS__: true
-    }
+      __VUE_PROD_DEVTOOLS__: true,
+    },
   });
 } catch {
   process.exitCode = 1;
-}
+}
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};
diff --git a/demo/App_Resources/iOS/Podfile b/demo/App_Resources/iOS/Podfile
@@ -1 +1,11 @@
+platform :ios, '13.0'
+
 pod 'FPSCounter', '~> 4.1'
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    target.build_configurations.each do |config|
+      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
+    end
+  end
+end
diff --git a/demo/App_Resources/iOS/build.xcconfig b/demo/App_Resources/iOS/build.xcconfig
@@ -1,8 +1,10 @@
 // You can add custom settings here
 // for example you can uncomment the following line to force distribution code signing
-// CODE_SIGN_IDENTITY = iPhone Distribution 
+// CODE_SIGN_IDENTITY = iPhone Distribution
 // To build for device with XCode you need to specify your development team.
 // DEVELOPMENT_TEAM = YOUR_TEAM_ID;
 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 
 DEVELOPMENT_TEAM = 3462C7DLZZ
+
+IPHONEOS_DEPLOYMENT_TARGET = 13.0;
diff --git a/demo/app/app.ts b/demo/app/app.ts
@@ -1,13 +1,9 @@
-import { createApp } from "vue";
+import { createApp } from 'nativescript-vue';
 
-// @ts-ignore
-global.window = global;
-// import Home from './components/Home.vue'
-
-import App from "./components/demo_ListView.vue";
+import App from './components/demo_ListView.vue';
 
 createApp(App)
   .use(() => {
-    console.log("test1");
+    console.log('test1');
   })
   .start();
diff --git a/demo/app/components/Bench.vue b/demo/app/components/Bench.vue
@@ -6,7 +6,7 @@ export default {
       show: false,
       iter: 0,
 
-      times: [],
+      times: [] as number[],
     };
   },
   methods: {
@@ -24,11 +24,11 @@ export default {
 
       if (this.iter < 5) {
         setTimeout(() => {
-          console.log("hide now");
+          console.log('hide now');
           this.show = false;
 
           setTimeout(() => {
-            console.log("and. start.");
+            console.log('and. start.');
             this.start();
           }, 5000);
         }, 2000);
@@ -62,12 +62,8 @@ export default {
       />
 
       <template v-if="show">
-        <Label
-          v-for="i in 2000"
-          :key="this.iter + 'item' + i"
-          text="Hello World"
-        />
-        <Label @loaded="end" :key="this.iter + 'end'" text="End" />
+        <Label v-for="i in 2000" :key="iter + 'item' + i" text="Hello World" />
+        <Label @loaded="end" :key="iter + 'end'" text="End" />
       </template>
     </GridLayout>
   </Page>

diff --git a/demo/app/components/GH1010.vue b/demo/app/components/GH1010.vue
@@ -1,23 +1,24 @@
 <!-- https://github.com/nativescript-vue/nativescript-vue/issues/1010 -->
 <script lang="ts" setup>
-import { ref } from "vue";
+import { EventData } from '@nativescript/core';
+import { ref } from 'nativescript-vue';
 
 const tapCount = ref(0);
 
 function onTap() {
   tapCount.value++;
-  console.trace("Tapped!", tapCount.value);
+  console.trace('Tapped!', tapCount.value);
 }
 
-function onLoaded(args) {
-  console.log("STACK LOADED")
+function onLoaded(_args: EventData) {
+  console.log('STACK LOADED');
 }
 </script>
 
 <template>
   <StackLayout @loaded="onLoaded" @LOADED="onLoaded" @lOaD="onLoaded">
     <Label>Tap count: {{ tapCount }}</Label>
-    <Button @tap="(tapCount = 0)">Reset</Button>
+    <Button @tap="tapCount = 0">Reset</Button>
 
     <!-- correct: fires only once -->
     <Button @tap="onTap">Tap: Button</Button>
@@ -26,4 +27,3 @@ function onLoaded(args) {
     <Label @tap="onTap">Tap: Label</Label>
   </StackLayout>
 </template>
-
diff --git a/demo/app/components/GH1010.yaml b/demo/app/components/GH1010.yaml
@@ -1,8 +1,8 @@
 appId: org.nativescript.demo
 ---
 - launchApp
-- assertVisible: "Tap Count: 0"
-- tapOn: "Tap: Button"
-- assertVisible: "Tap Count: 1"
-- tapOn: "Tap: Label"
-- assertVisible: "Tap Count: 2"
+- assertVisible: 'Tap Count: 0'
+- tapOn: 'Tap: Button'
+- assertVisible: 'Tap Count: 1'
+- tapOn: 'Tap: Label'
+- assertVisible: 'Tap Count: 2'
diff --git a/demo/app/components/GH1011.vue b/demo/app/components/GH1011.vue
@@ -4,6 +4,6 @@
     text="Test text"
     class="text-2xl m-6"
     backgroundColor="yellow"
-    style="background-color: red;"
+    style="background-color: red"
   ></Label>
 </template>
diff --git a/demo/app/components/GH1012.vue b/demo/app/components/GH1012.vue
@@ -1,11 +1,14 @@
 <script lang="ts" setup>
-const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+import type { Button, EventData } from '@nativescript/core';
+import { Color } from '@nativescript/core';
 
-async function animateIn(args) {
-  console.log("ANIMATE")
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+async function animateIn(args: EventData) {
+  console.log('ANIMATE');
   await wait(1);
-  const view = args.object;
-  view.color = "green";
+  const view = args.object as Button;
+  view.color = new Color('green');
   view.scaleX = 0;
   view.scaleY = 0;
 
@@ -19,7 +22,7 @@ async function animateIn(args) {
       duration: 3000,
     })
     .then(() => {
-      view.color = "red";
+      view.color = new Color('red');
     })
     .catch((err) => console.log(err));
 }

diff --git a/demo/app/components/Home.vue b/demo/app/components/Home.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import Test from "./Test.vue";
-import { goHome } from "~/composables/goHome";
-import { onUnmounted } from "vue";
-import { ListItem } from "../../../src";
+import { ListItem, onMounted, onUnmounted } from 'nativescript-vue';
+import { goHome } from '~/composables/goHome';
+import Test from './Test.vue';
 
-defineProps<{
-  depth?: number;
-}>();
+defineProps({
+  depth: {
+    type: Number,
+    default: 0,
+  },
+});
 
-const message = "Hello World!";
+const message = 'Hello World!!';
 
 interface Test {
   name: string;
@@ -25,11 +27,15 @@ const items: Test[] = Array(1000)
   }));
 
 function selector(item: ListItem<Test>) {
-  return item.even ? "default" : "odd";
+  return item.even ? 'default' : 'odd';
 }
 
+onMounted(() => {
+  console.log('MOUNTED HOME');
+});
+
 onUnmounted(() => {
-  console.log("UNMOUNTED HOME");
+  console.log('UNMOUNTED HOME');
 });
 </script>
 

diff --git a/demo/app/components/Test.vue b/demo/app/components/Test.vue
@@ -1,3 +1,3 @@
 <template>
-<Label>Hello I'm a label...</Label>
+  <Label>Hello I'm a label...</Label>
 </template>