nativescript-vue 3.0.0-beta.0 → 3.0.0-beta.10

package/nativescript.webpack.js

@@ -1,19 +1,118 @@
-const { VueLoaderPlugin } = require("vue-loader");
+const { VueLoaderPlugin } = require('vue-loader');
+const spawn = require('cross-spawn');
+
+function findFreePort(startingPort = 8098) {
+  let found = false;
+  let port = startingPort;
+
+  const isPortFree = (port) =>
+    new Promise((resolve) => {
+      const server = require('http')
+        .createServer()
+        .listen(port, '0.0.0.0', () => {
+          server.close();
+          resolve(true);
+        })
+        .on('error', () => {
+          resolve(false);
+        });
+    });
+
+  const findFreePort = () => {
+    isPortFree(port).then((isFree) => {
+      if (!isFree) {
+        port++;
+        return findFreePort();
+      }
+      found = true;
+    });
+  };
+
+  findFreePort();
+
+  while (!found) {
+    process._tickCallback();
+    const start = Date.now();
+    while (Date.now() - start < 100) {
+      // busy wait... not ideal, but we need to find a port synchronously...
+    }
+  }
+
+  return port;
+}
+
+function startVueDevtools(port, isAndroid = false) {
+  console.log(`[VueDevtools] Starting standalone Vue Devtools on port ${port}`);
+  if (isAndroid) {
+    console.log(
+      `[VueDevtools] If the app doesn't automatically connect, check if http traffic is allowed. (e.g. on Android, you may need to set android:usesCleartextTraffic="true" in AndroidManifest.xml)`,
+    );
+  }
+  spawn(require.resolve('@vue/devtools/bin.js'), [], {
+    stdio: 'ignore',
+    env: {
+      ...process.env,
+      PORT: port,
+    },
+  });
+}
 
 /**
  * @param {typeof import("@nativescript/webpack")} webpack
  */
 module.exports = (webpack) => {
-  webpack.useConfig("vue");
+  webpack.useConfig('vue');
+
+  webpack.chainWebpack((config, env) => {
+    const additionalDefines = {
+      __VUE_PROD_DEVTOOLS__: false,
+    };
 
-  webpack.chainWebpack((config) => {
-    config.plugin("VueLoaderPlugin").use(VueLoaderPlugin);
+    // todo: support configuring the devtools host/port from the nativescript.config.ts...
+    if (!!env.vueDevtools) {
+      // find a free port for the devtools
+      const vueDevtoolsPort = findFreePort(8098);
+      const isAndroid = webpack.Utils.platform.getPlatformName() === 'android';
 
-    config.module
-      .rule("vue")
-      .test(/\.vue$/)
-      .use("vue-loader")
-      .loader(require.resolve("vue-loader"))
+      // on android simulators, localhost is not the host machine...
+      const vueDevtoolsHost = isAndroid
+        ? 'http://10.0.2.2'
+        : 'http://localhost';
+
+      additionalDefines['__VUE_PROD_DEVTOOLS__'] = true;
+      additionalDefines['__NS_VUE_DEVTOOLS_HOST__'] =
+        JSON.stringify(vueDevtoolsHost);
+      additionalDefines['__NS_VUE_DEVTOOLS_PORT__'] = vueDevtoolsPort;
+
+      const devtoolsEntryPath = require.resolve('./devtools.js');
+      const entryPath = webpack.Utils.platform.getEntryPath();
+      const paths = config.entry('bundle').values();
+      const entryIndex = paths.indexOf(entryPath);
+
+      if (entryIndex === -1) {
+        // if the app entry is not found, add the devtools entry at the beginning - generally should not happen, but just in case.
+        paths.unshift(entryPath);
+      } else {
+        // insert devtools entry before the app entry, but after globals etc.
+        paths.splice(entryIndex, 0, devtoolsEntryPath);
+      }
+
+      config.entry('bundle').clear().merge(paths);
+
+      // start the devtools...
+      startVueDevtools(vueDevtoolsPort, isAndroid);
+    }
+
+    // resolve any imports from "vue" to "nativescript-vue"
+    config.resolve.alias.set('vue', 'nativescript-vue');
+
+    config.plugins.get('VueLoaderPlugin').use(VueLoaderPlugin);
+
+    // use "vue-loader" from "nativescript-vue" deps rather than the one from @nativescript/webpack
+    config.module.rules
+      .get('vue')
+      .uses.get('vue-loader')
+      .loader(require.resolve('vue-loader'))
       .tap((options) => {
         return {
           ...options,
@@ -25,17 +124,27 @@ module.exports = (webpack) => {
         };
       });
 
-    config.plugin("DefinePlugin").tap((args) => {
+    config.module.rules
+      .get('css')
+      .uses.get('vue-css-loader')
+      .loader(require.resolve('vue-loader/dist/stylePostLoader.js'));
+
+    config.module.rules
+      .get('scss')
+      .uses.get('vue-css-loader')
+      .loader(require.resolve('vue-loader/dist/stylePostLoader.js'));
+
+    config.plugin('DefinePlugin').tap((args) => {
       Object.assign(args[0], {
         __VUE_OPTIONS_API__: true,
-        __VUE_PROD_DEVTOOLS__: false,
+        ...additionalDefines,
       });
 
       return args;
     });
 
     // disable vue fork ts checker, as it doesn't work with vue3 yet?
-    config.plugin("ForkTsCheckerWebpackPlugin").tap((args) => {
+    config.plugin('ForkTsCheckerWebpackPlugin').tap((args) => {
       args[0] = webpack.merge(args[0], {
         typescript: {
           extensions: {
@@ -45,6 +154,7 @@ module.exports = (webpack) => {
           },
         },
       });
+
       return args;
     });
   });

package/package.json

@@ -1,29 +1,52 @@
 {
   "name": "nativescript-vue",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.10",
   "main": "dist/index.js",
   "files": [
     "dist/",
+    "devtools.js",
     "nativescript.webpack.js"
   ],
   "license": "MIT",
   "scripts": {
     "build": "tsc",
-    "prepack": "npm run build"
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "simple-git-hooks",
+    "pack:template": "npm pack ./packages/template-blank",
+    "prepack": "npm run build && npm run pack:template"
   },
   "dependencies": {
-    "@vue/compiler-dom": "^3.2.41",
-    "@vue/runtime-dom": "^3.2.41",
-    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/devtools": "^6.5.0",
+    "@vue/runtime-core": "^3.3.4",
+    "@vue/shared": "^3.3.4",
+    "cross-spawn": "^7.0.3",
     "set-value": "^4.1.0",
-    "vue-loader": "^17.0.0"
+    "vue-loader": "^17.2.2"
   },
   "devDependencies": {
-    "@nativescript/core": "^8.3.5",
-    "@nativescript/webpack": "~5.0.12",
-    "esbuild": "^0.15.12",
-    "tsx": "^3.11.0",
-    "typescript": "^4.8.4",
-    "vue": "^3.2.41"
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@nativescript/core": "~8.5.9",
+    "@nativescript/webpack": "~5.0.17",
+    "esbuild": "^0.19.2",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
+    "simple-git-hooks": "^2.9.0",
+    "typescript": "^5.2.2"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx --no-install lint-staged --config=package.json",
+    "commit-msg": "npx --no-install commitlint --edit"
+  },
+  "lint-staged": {
+    "*": [
+      "prettier --ignore-unknown --write"
+    ]
+  },
+  "prettier": {
+    "useTabs": false,
+    "singleQuote": true
   }
 }

package/dist/components/ListView.working.d.ts

@@ -1,44 +0,0 @@
-import { VNode } from "..";
-declare global {
-    interface ListItem<T = any> {
-        item: T;
-        index: number;
-        even: boolean;
-        odd: boolean;
-    }
-}
-export declare const ListView: import("@vue/runtime-core").DefineComponent<{
-    items: {
-        (arrayLength: number): any[];
-        (...items: any[]): any[];
-        new (arrayLength: number): any[];
-        new (...items: any[]): any[];
-        isArray(arg: any): arg is any[];
-        readonly prototype: any[];
-        from<T>(arrayLike: ArrayLike<T>): T[];
-        from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
-        from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
-        from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
-        of<T_4>(...items: T_4[]): T_4[];
-        readonly [Symbol.species]: ArrayConstructor;
-    };
-    itemTemplateSelector: FunctionConstructor;
-}, () => VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
-    items: {
-        (arrayLength: number): any[];
-        (...items: any[]): any[];
-        new (arrayLength: number): any[];
-        new (...items: any[]): any[];
-        isArray(arg: any): arg is any[];
-        readonly prototype: any[];
-        from<T>(arrayLike: ArrayLike<T>): T[];
-        from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
-        from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
-        from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
-        of<T_4>(...items: T_4[]): T_4[];
-        readonly [Symbol.species]: ArrayConstructor;
-    };
-    itemTemplateSelector: FunctionConstructor;
-}>>, {}>;

package/dist/components/ListView.working.js

@@ -1,126 +0,0 @@
-import { defineComponent, h, warn } from "@vue/runtime-core";
-import { ListView as NSCListView, ObservableArray, StackLayout, } from "@nativescript/core";
-import { getCurrentInstance, ref, watch, onBeforeUpdate, onUpdated, } from "..";
-import { registerElement } from "../registry";
-import { ELEMENT_REF } from "../runtimeHelpers";
-registerElement("NSCListView", () => NSCListView, {
-    viewFlags: 8 /* NSVViewFlags.NO_CHILDREN */,
-});
-registerElement("NSCListViewDummyHolder", () => StackLayout);
-function getListItem(item, index) {
-    return {
-        item,
-        index,
-        even: index % 2 === 0,
-        odd: index % 2 !== 0,
-    };
-}
-const LIST_CELL_ID = Symbol("list_cell_id");
-export const ListView = /*#__PURE__*/ defineComponent({
-    props: {
-        items: (Array),
-        itemTemplateSelector: Function,
-    },
-    setup(props, ctx) {
-        const itemTemplates = Object.keys(ctx.slots).map((slotName) => {
-            return {
-                key: slotName,
-                createView() {
-                    // no need to return anything here
-                },
-            };
-        });
-        const getSlotName = (itemCtx) => props.itemTemplateSelector?.(itemCtx) ?? "default";
-        const listView = ref(null);
-        const vm = getCurrentInstance();
-        watch(props, () => {
-            console.log("props changed?");
-            try {
-                const lv = listView.value?.nativeView;
-                lv?.refresh();
-            }
-            catch (err) {
-                console.log(err);
-            }
-        });
-        let cellId = 0;
-        const cells = ref({});
-        function onitemLoading(event) {
-            const el = event.view?.[ELEMENT_REF];
-            const id = el?.nativeView[LIST_CELL_ID] ?? `LIST_CELL_${cellId++}`;
-            const itemCtx = getListItem(props.items instanceof ObservableArray
-                ? props.items.getItem(event.index)
-                : props.items[event.index], event.index);
-            // update the cell data with the current row
-            cells.value[id] = {
-                itemCtx,
-                slotName: getSlotName(itemCtx),
-            };
-            // trigger an update!
-            vm.update();
-            // find the vnode rendering this cell
-            const vnode = vm.subTree.children.find((vnode) => {
-                return vnode.key === id;
-            });
-            // store the cell id on the Element itself so we can retrieve it when recycling kicks in
-            const cellEl = vnode.el.nativeView;
-            cellEl[LIST_CELL_ID] = id;
-            // finally, set the event.view to the rendered cellEl
-            event.view = cellEl;
-            // event.view = new Label();
-        }
-        function itemTemplateSelector(item, index) {
-            // pass on the template selector call with the ListItem context
-            return getSlotName(getListItem(item, index));
-        }
-        onBeforeUpdate(() => {
-            console.time("update");
-        });
-        onUpdated(() => {
-            console.timeEnd("update");
-        });
-        return () => {
-            console.log("RENDER");
-            // return h("StackLayout", [
-            //   h("NSCListView", {
-            //     ref: listView,
-            //     items: props.items,
-            //     itemTemplates,
-            //     itemTemplateSelector,
-            //     onitemLoading,
-            //   }),
-            //   ...Object.entries(cells.value).map(([id, child]) => {
-            //     const vnodes: VNode[] = ctx.slots[child.slotName](child.itemCtx);
-            //     if (vnodes.length > 1) {
-            //       warn(
-            //         `ListView template must contain a single root element. Found: ${vnodes.length}. Only the first one will be used.`
-            //       );
-            //     }
-            //     const vnode: VNode = vnodes[0];
-            //     // set the key to the list cell id, so we can find this cell later...
-            //     vnode.key = id;
-            //     return vnode;
-            //   }),
-            // ]);
-            return h("NSCListView", {
-                ref: listView,
-                items: props.items,
-                itemTemplates,
-                itemTemplateSelector,
-                onitemLoading,
-            }, 
-            // render all realized templates as children
-            Object.entries(cells.value).map(([id, child]) => {
-                const vnodes = ctx.slots[child.slotName](child.itemCtx);
-                if (vnodes.length > 1) {
-                    warn(`ListView template must contain a single root element. Found: ${vnodes.length}. Only the first one will be used.`);
-                }
-                const vnode = vnodes[0];
-                // set the key to the list cell id, so we can find this cell later...
-                vnode.key = id;
-                return vnode;
-            }));
-        };
-    },
-});
-//# sourceMappingURL=ListView.working.js.map

package/dist/components/ListView.working.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListView.working.js","sourceRoot":"","sources":["../../src/components/ListView.working.ts"],"names":[],"mappings":"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"}