nativescript-vue · heywhy · Apr 26, 2023 · Apr 26, 2023 · Apr 26, 2023 · Apr 26, 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/demo/app/app.ts b/demo/app/app.ts
@@ -1,8 +1,4 @@
-import { createApp } from "vue";
-
-// @ts-ignore
-global.window = global;
-// import Home from './components/Home.vue'
+import { createApp } from "nativescript-vue";
 
 import App from "./components/demo_ListView.vue";
 

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: {
@@ -64,10 +64,10 @@ export default {
       <template v-if="show">
         <Label
           v-for="i in 2000"
-          :key="this.iter + 'item' + i"
+          :key="iter + 'item' + i"
           text="Hello World"
         />
-        <Label @loaded="end" :key="this.iter + 'end'" text="End" />
+        <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,6 +1,7 @@
 <!-- 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);
 
@@ -9,7 +10,7 @@ function onTap() {
   console.trace("Tapped!", tapCount.value);
 }
 
-function onLoaded(args) {
+function onLoaded(_args: EventData) {
   console.log("STACK LOADED")
 }
 </script>

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) {
+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,12 +1,15 @@
 <script setup lang="ts">
 import Test from "./Test.vue";
 import { goHome } from "~/composables/goHome";
-import { onUnmounted } from "vue";
-import { ListItem } from "../../../src";
+import { onUnmounted } from "nativescript-vue";
+import { ListItem } from "nativescript-vue";
 
-defineProps<{
-  depth?: number;
-}>();
+defineProps({
+  depth: {
+    type: Number,
+    default: 0
+  }
+});
 
 const message = "Hello World!";
 

diff --git a/demo/app/components/demo_ListView.vue b/demo/app/components/demo_ListView.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { ObservableArray } from "@nativescript/core";
 import { useDebounceFn } from "@vueuse/shared";
-import { ref } from "vue";
+import { ref } from "nativescript-vue";
 import { goHome } from "../composables/goHome";
 import { useFPS } from "../composables/useFPS";
+import type { ListItem } from "nativescript-vue";
 
 const navigate = () => {
   goHome();
 };
 
 interface Item {
+  name: string;
   title: string;
   text: string;
   date: Date;
@@ -67,7 +69,7 @@ setInterval(() => {
 //   items2.value.push({ name: name.value });
 // }, 100);
 
-const onItemTap = useDebounceFn((item) => {
+const onItemTap = useDebounceFn((item: Item) => {
   console.log("ITEM TAP", item);
   if (selected.value.includes(item)) {
     selected.value.splice(selected.value.indexOf(item), 1);
@@ -111,7 +113,7 @@ const onItemTap = useDebounceFn((item) => {
           <Label>Selected: {{ selected.length }}</Label>
 
           <ListView :items="items2" height="800">
-            <template #default="{ item, index }: ListItem<{ name: string }>">
+            <template #default="{ item, index }: ListItem<Item>">
               <StackLayout
                 @tap="onItemTap(item)"
                 :backgroundColor="selected.includes(item) ? '#ffedd5' : ''"

diff --git a/demo/app/components/demo_ListViewTemplates.vue b/demo/app/components/demo_ListViewTemplates.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ListItem, ref } from "nativescript-vue";
 import { goHome } from "../composables/goHome";
 
 import { useTimeAgo } from "@vueuse/core";

diff --git a/demo/app/components/test_TextNodes.vue b/demo/app/components/test_TextNodes.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from "nativescript-vue";
 import { goHome } from "../composables/goHome";
 import { useFPS } from "../composables/useFPS";
 

diff --git a/demo/app/composables/goHome.ts b/demo/app/composables/goHome.ts
@@ -1,4 +1,4 @@
-import { $navigateTo, $showModal } from "../../../src";
+import { $navigateTo, $showModal } from "nativescript-vue";
 import Home from "../components/Home.vue";
 
 export function goHome(depth = 0, modal = false) {

diff --git a/demo/app/composables/useFPS.ts b/demo/app/composables/useFPS.ts
@@ -4,7 +4,7 @@ import {
   start,
   stop,
 } from "@nativescript/core/fps-meter";
-import { ref } from "vue";
+import { ref } from "nativescript-vue";
 
 export function useFPS() {
   const fps = ref(60);

diff --git a/demo/package.json b/demo/package.json
@@ -4,17 +4,19 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@nativescript/core": "~8.3.0",
+    "@nativescript/core": "~8.5.0",
     "@vueuse/components": "^9.4.0",
-    "@vueuse/core": "^9.4.0"
+    "@vueuse/core": "^9.4.0",
+    "nativescript-vue": "link:.."
   },
   "devDependencies": {
-    "@nativescript/android": "8.3.1",
-    "@nativescript/ios": "8.3.3",
-    "@nativescript/types": "~8.3.0",
+    "@nativescript/android": "~8.5.0",
+    "@nativescript/ios": "~8.5.0",
+    "@nativescript/types": "~8.5.0",
     "@nativescript/webpack": "~5.0.9",
     "@types/node": "~17.0.21",
-    "typescript": "~4.7.0",
-    "vue-loader": "^17.0.0"
+    "@vue/compiler-sfc": "^3.2.47",
+    "typescript": "~4.9.5",
+    "vue-loader": "^17.1.0"
   }
 }
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "strict": false,
-    "target": "es2017",
+    "strict": true,
+    "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
-    "lib": ["dom", "es2017"],
+    "lib": ["esnext", "WebWorker"],
     "sourceMap": true,
     "noEmitHelpers": true,
     "importHelpers": true,
@@ -21,6 +21,10 @@
     "emitDecoratorMetadata": true,
     "skipLibCheck": true
   },
+  "vueCompilerOptions": {
+    "target": 3,
+    "lib": "nativescript-vue"
+  },
   "include": ["app", "types"],
   "exclude": ["node_modules", "platforms"]
 }
diff --git a/demo/types/shims.vue.d.ts b/demo/types/shims.vue.d.ts
@@ -1,5 +1,5 @@
 declare module "*.vue" {
-  import type { DefineComponent } from "../../dist/withCompiler";
+  import type { DefineComponent } from "nativescript-vue";
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -1,59 +1,7 @@
 const webpack = require("@nativescript/webpack");
-const { VueLoaderPlugin } = require("vue-loader");
-
-const path = require("path");
-
-const nsVuePath = path.resolve(__dirname, "../src/index.ts");
 
 module.exports = (env) => {
   webpack.init(env);
-  webpack.useConfig("vue");
-
-  webpack.chainWebpack((config) => {
-    config.resolve.alias.set("vue", nsVuePath);
-
-    config.plugin("VueLoaderPlugin").use(VueLoaderPlugin);
-
-    config.module
-      .rule("vue")
-      .test(/\.vue$/)
-      .use("vue-loader")
-      .loader(require.resolve("vue-loader"))
-      .tap((options) => {
-        return {
-          ...options,
-          isServerBuild: false,
-          // compiler: path.resolve(__dirname, '../dist/compiler-sfc'),
-          compilerOptions: {
-            // isCustomElement: (el) => true,
-            // transformHoist: null
-          },
-        };
-      });
-
-    config.plugin("DefinePlugin").tap((args) => {
-      Object.assign(args[0], {
-        __VUE_OPTIONS_API__: true,
-        __VUE_PROD_DEVTOOLS__: false,
-      });
-
-      return args;
-    });
-
-    // disable vue fork ts checker, as it doesn't work with vue3 yet?
-    config.plugin("ForkTsCheckerWebpackPlugin").tap((args) => {
-      args[0] = webpack.merge(args[0], {
-        typescript: {
-          extensions: {
-            vue: {
-              enabled: false,
-            },
-          },
-        },
-      });
-      return args;
-    });
-  });
 
   // Learn how to customize:
   // https://docs.nativescript.org/webpack