nativescript-web-adapter 0.1.2 → 0.1.3

package/core/composables/dialogs.ts

@@ -0,0 +1,31 @@
+export async function alert(message: string, title?: string, okButtonText?: string) {
+  window.alert(title ? `${title}\n\n${message}` : message);
+}
+
+export async function confirm(message: string, title?: string, okButtonText?: string, cancelButtonText?: string): Promise<boolean> {
+  return window.confirm(title ? `${title}\n\n${message}` : message);
+}
+
+export async function prompt(message: string, defaultText = '', title?: string, okButtonText?: string, cancelButtonText?: string): Promise<{ result: boolean; text: string }> {
+  const res = window.prompt(title ? `${title}\n\n${message}` : message, defaultText);
+  return { result: res !== null, text: res ?? '' };
+}
+
+export async function login(message = '登录', userName = '', password = '', title?: string, okButtonText?: string, cancelButtonText?: string): Promise<{ result: boolean; userName: string; password: string }> {
+  const u = window.prompt(title ? `${title}\n\n${message} - 用户名` : `${message} - 用户名`, userName);
+  if (u === null) return { result: false, userName: '', password: '' };
+  const p = window.prompt(title ? `${title}\n\n${message} - 密码` : `${message} - 密码`, password);
+  if (p === null) return { result: false, userName: '', password: '' };
+  return { result: true, userName: u, password: p };
+}
+
+export async function action(options: string | { message?: string; cancelButtonText?: string; actions?: string[] }, title?: string): Promise<string | undefined> {
+  let message = typeof options === 'string' ? options : (options.message || '选择一个操作');
+  const actions = typeof options === 'string' ? [] : (options.actions || []);
+  const promptText = title ? `${title}\n\n${message}${actions.length ? `\n选项: ${actions.join(', ')}` : ''}` : `${message}${actions.length ? `\n选项: ${actions.join(', ')}` : ''}`;
+  const res = window.prompt(promptText);
+  if (!res) return undefined;
+  if (!actions.length) return res;
+  const match = actions.find(a => a.toLowerCase() === res.toLowerCase());
+  return match ?? undefined;
+}

package/core/composables/index.js

@@ -0,0 +1,3 @@
+export { useActionBar } from './useActionBar.js';
+export { usePage } from './usePage.js';
+export { useFrame } from './useFrame.js';

package/core/composables/index.ts

@@ -0,0 +1,4 @@
+export * from './useActionBar';
+export * from './usePage';
+export * from './useFrame';
+export * from './dialogs';

package/core/composables/useActionBar.js

@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+
+export function useActionBar() {
+  const title = ref('');
+  function setTitle(t) { title.value = t; }
+  return { title, setTitle };
+}

package/core/composables/useActionBar.ts

@@ -0,0 +1,19 @@
+import { Ref, ref } from 'vue';
+
+export interface ActionBarState {
+  title: Ref<string>;
+  setTitle: (value: string) => void;
+}
+
+export function useActionBar(): ActionBarState {
+  const title = ref('');
+  
+  function setTitle(value: string) {
+    title.value = value;
+  }
+
+  return {
+    title,
+    setTitle
+  };
+}

package/core/composables/useFrame.js

@@ -0,0 +1,8 @@
+import { ref } from 'vue';
+
+export function useFrame() {
+  const stack = ref([]);
+  function push(page) { stack.value.push(page); }
+  function pop() { return stack.value.pop(); }
+  return { stack, push, pop };
+}

package/core/composables/useFrame.ts

@@ -0,0 +1,25 @@
+import { Ref, ref } from 'vue';
+
+export interface FrameState {
+  stack: Ref<any[]>;
+  push: (page: any) => void;
+  pop: () => any;
+}
+
+export function useFrame(): FrameState {
+  const stack = ref<any[]>([]);
+  
+  function push(page: any) {
+    stack.value.push(page);
+  }
+  
+  function pop() {
+    return stack.value.pop();
+  }
+
+  return {
+    stack,
+    push,
+    pop
+  };
+}

package/core/composables/usePage.js

@@ -0,0 +1,8 @@
+import { ref } from 'vue';
+
+export function usePage() {
+  const isVisible = ref(true);
+  function show() { isVisible.value = true; }
+  function hide() { isVisible.value = false; }
+  return { isVisible, show, hide };
+}

package/core/composables/usePage.ts

@@ -0,0 +1,25 @@
+import { Ref, ref } from 'vue';
+
+export interface PageState {
+  isVisible: Ref<boolean>;
+  show: () => void;
+  hide: () => void;
+}
+
+export function usePage(): PageState {
+  const isVisible = ref(true);
+  
+  function show() {
+    isVisible.value = true;
+  }
+  
+  function hide() {
+    isVisible.value = false;
+  }
+
+  return {
+    isVisible,
+    show,
+    hide
+  };
+}

package/core/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/core/index.js

@@ -0,0 +1,4 @@
+import * as components from './components/index.js';
+import * as composables from './composables/index.js';
+
+export { components, composables };

package/core/index.ts

@@ -0,0 +1,85 @@
+// Explicitly collect components and composables into objects so consumers
+// can reference `core.components` and `core.composables` at runtime.
+import ActionBar from './components/ActionBar.vue';
+import Page from './components/Page.vue';
+import Frame from './components/Frame.vue';
+import StackLayout from './components/StackLayout.vue';
+import GridLayout from './components/GridLayout.vue';
+import FlexboxLayout from './components/FlexboxLayout.vue';
+import WrapLayout from './components/WrapLayout.vue';
+import ScrollView from './components/ScrollView.vue';
+import Label from './components/Label.vue';
+import Button from './components/Button.vue';
+import Image from './components/Image.vue';
+import HtmlView from './components/HtmlView.vue';
+import ImageCacheIt from './components/ImageCacheIt.vue';
+import TabView from './components/TabView.vue';
+import TabViewItem from './components/TabViewItem.vue';
+import RootLayout from './components/RootLayout.vue';
+import DockLayout from './components/DockLayout.vue';
+import AbsoluteLayout from './components/AbsoluteLayout.vue';
+import ActionItem from './components/ActionItem.vue';
+import NavigationButton from './components/NavigationButton.vue';
+import ActivityIndicator from './components/ActivityIndicator.vue';
+import DatePicker from './components/DatePicker.vue';
+import TimePicker from './components/TimePicker.vue';
+import ListPicker from './components/ListPicker.vue';
+import ListView from './components/ListView.vue';
+import Placeholder from './components/Placeholder.vue';
+import Progress from './components/Progress.vue';
+import SearchBar from './components/SearchBar.vue';
+import SegmentedBar from './components/SegmentedBar.vue';
+import SegmentedBarItem from './components/SegmentedBarItem.vue';
+import Slider from './components/Slider.vue';
+import SwitchComp from './components/Switch.vue';
+import TextField from './components/TextField.vue';
+import TextView from './components/TextView.vue';
+import WebView from './components/WebView.vue';
+
+export const components = {
+	ActionBar,
+	Page,
+	Frame,
+	StackLayout,
+	GridLayout,
+	FlexboxLayout,
+	WrapLayout,
+	ScrollView,
+	Label,
+	Button,
+	Image,
+	HtmlView,
+	ImageCacheIt,
+	TabView,
+	TabViewItem,
+  RootLayout,
+  DockLayout,
+  AbsoluteLayout,
+  ActionItem,
+  NavigationButton,
+  ActivityIndicator,
+  DatePicker,
+  TimePicker,
+  ListPicker,
+  ListView,
+  Placeholder,
+  Progress,
+  SearchBar,
+  SegmentedBar,
+  SegmentedBarItem,
+  Slider,
+  Switch: SwitchComp,
+  TextField,
+  TextView,
+  WebView,
+};
+
+import * as composablesNS from './composables';
+export const composables = composablesNS;
+
+// Re-export types for convenience
+export * from './types';
+
+// Also provide the original named exports for compatibility
+export { ActionBar, Page, Frame, StackLayout, GridLayout, FlexboxLayout, WrapLayout, ScrollView, Label, Button, Image, HtmlView, ImageCacheIt, TabView, TabViewItem };
+export { RootLayout, DockLayout, AbsoluteLayout, ActionItem, NavigationButton, ActivityIndicator, DatePicker, TimePicker, ListPicker, ListView, Placeholder, Progress, SearchBar, SegmentedBar, SegmentedBarItem, Slider, SwitchComp as Switch, TextField, TextView, WebView };

package/core/types.ts

@@ -0,0 +1,12 @@
+import type { DefineComponent } from 'vue';
+import type { FrameState } from './composables/useFrame';
+import type { PageState } from './composables/usePage';
+import type { ActionBarState } from './composables/useActionBar';
+
+// 重新导出Vue组件类型
+export type ActionBarComponent = DefineComponent;
+export type PageComponent = DefineComponent;
+export type FrameComponent = DefineComponent;
+
+// 重新导出composables类型
+export type { FrameState, PageState, ActionBarState };

package/dist/nativescript-web-adapter.es.js

@@ -0,0 +1,83 @@
+import { defineComponent as r, createElementBlock as s, openBlock as c, renderSlot as a, ref as u } from "vue";
+const f = { class: "ns-actionbar" }, p = /* @__PURE__ */ r({
+  name: "ActionBar",
+  __name: "ActionBar",
+  setup(e) {
+    return (t, o) => (c(), s("header", f, [
+      a(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), _ = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [n, d] of t)
+    o[n] = d;
+  return o;
+}, m = /* @__PURE__ */ _(p, [["__scopeId", "data-v-f29dfd84"]]), v = { class: "ns-page" }, b = /* @__PURE__ */ r({
+  name: "Page",
+  __name: "Page",
+  setup(e) {
+    return (t, o) => (c(), s("div", v, [
+      a(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), g = /* @__PURE__ */ _(b, [["__scopeId", "data-v-87719fa5"]]), h = { class: "ns-frame" }, $ = /* @__PURE__ */ r({
+  name: "Frame",
+  __name: "Frame",
+  setup(e) {
+    return (t, o) => (c(), s("div", h, [
+      a(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), O = /* @__PURE__ */ _($, [["__scopeId", "data-v-a66356e7"]]), i = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ActionBar: m,
+  Frame: O,
+  Page: g
+}, Symbol.toStringTag, { value: "Module" }));
+function P() {
+  const e = u("");
+  function t(o) {
+    e.value = o;
+  }
+  return { title: e, setTitle: t };
+}
+function j() {
+  const e = u(!0);
+  function t() {
+    e.value = !0;
+  }
+  function o() {
+    e.value = !1;
+  }
+  return { isVisible: e, show: t, hide: o };
+}
+function y() {
+  const e = u([]);
+  function t(n) {
+    e.value.push(n);
+  }
+  function o() {
+    return e.value.pop();
+  }
+  return { stack: e, push: t, pop: o };
+}
+const l = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  useActionBar: P,
+  useFrame: y,
+  usePage: j
+}, Symbol.toStringTag, { value: "Module" })), x = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  components: i,
+  composables: l
+}, Symbol.toStringTag, { value: "Module" })), B = {
+  install(e) {
+    Object.entries(i || {}).forEach(([t, o]) => {
+      e.component(t, o);
+    }), e.config.globalProperties.$ns = l || {};
+  }
+};
+export {
+  x as core,
+  B as default
+};

package/dist/nativescript-web-adapter.umd.js

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.NativeScriptWebAdapter={},r.Vue))})(this,function(r,e){"use strict";const l={class:"ns-actionbar"},_=e.defineComponent({name:"ActionBar",__name:"ActionBar",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("header",l,[e.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),c=(t,n)=>{const o=t.__vccOpts||t;for(const[s,$]of n)o[s]=$;return o},u=c(_,[["__scopeId","data-v-f29dfd84"]]),d={class:"ns-page"},f=c(e.defineComponent({name:"Page",__name:"Page",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("div",d,[e.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),[["__scopeId","data-v-87719fa5"]]),p={class:"ns-frame"},a=Object.freeze(Object.defineProperty({__proto__:null,ActionBar:u,Frame:c(e.defineComponent({name:"Frame",__name:"Frame",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),[["__scopeId","data-v-a66356e7"]]),Page:f},Symbol.toStringTag,{value:"Module"}));function m(){const t=e.ref("");function n(o){t.value=o}return{title:t,setTitle:n}}function b(){const t=e.ref(!0);function n(){t.value=!0}function o(){t.value=!1}return{isVisible:t,show:n,hide:o}}function g(){const t=e.ref([]);function n(s){t.value.push(s)}function o(){return t.value.pop()}return{stack:t,push:n,pop:o}}const i=Object.freeze(Object.defineProperty({__proto__:null,useActionBar:m,useFrame:g,usePage:b},Symbol.toStringTag,{value:"Module"})),h=Object.freeze(Object.defineProperty({__proto__:null,components:a,composables:i},Symbol.toStringTag,{value:"Module"})),S={install(t){Object.entries(a||{}).forEach(([n,o])=>{t.component(n,o)}),t.config.globalProperties.$ns=i||{}}};r.core=h,r.default=S,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.ns-actionbar[data-v-f29dfd84]{background:#1f1140;color:#fff;padding:12px}.ns-page[data-v-87719fa5]{top:0;left:0;position:absolute;width:100%;min-height:100%;padding:0}

package/package.json

@@ -1,61 +1,47 @@
 {
   "name": "nativescript-web-adapter",
-  "version": "0.1.2",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ponzS/NativeScript-for-web.git"
-  },
-  "bugs": {
-    "url": "https://github.com/ponzS/NativeScript-for-web/issues"
-  },
-  "homepage": "https://github.com/ponzS/NativeScript-for-web#readme",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "description": "Web adapter for NativeScript UI components (Vue 3)",
-  "license": "MIT",
+  "version": "0.1.3",
+  "description": "Web adapter for NativeScript applications",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "main": "./dist/nativescript-web-adapter.umd.js",
+  "module": "./dist/nativescript-web-adapter.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./vue": {
-      "import": "./dist/vue.js",
-      "require": "./dist/vue.cjs",
-      "types": "./dist/types/vue.d.ts"
-    },
-    "./core": {
-      "import": "./dist/core.js",
-      "require": "./dist/core.cjs",
-      "types": "./dist/types/core/index.d.ts"
-    },
-    "./vue.css": "./dist/vue.css",
-    "./index.css": "./dist/index.css"
+      "import": "./dist/nativescript-web-adapter.es.js",
+      "require": "./dist/nativescript-web-adapter.umd.js",
+      "types": "./dist/index.d.ts"
+    }
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c",
-    "types": "tsc -p tsconfig.json",
-    "test": "vitest run",
-    "dev": "vitest",
-    "bt": "npm run build && npm run types"
+    "create:web": "node tools/create-web-platform.cjs",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
   },
-  "peerDependencies": {
-    "vue": "^3.4.0"
+  "bin": {
+    "ns-web": "./tools/cli.cjs"
+  },
+  "files": [
+    "dist",
+    "tools",
+    "templates",
+    "core"
+  ],
+  "dependencies": {
+    "vue": "^3.4.0",
+    "commander": "^11.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.6",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.22.0",
-    "rollup-plugin-dts": "^6.0.2",
-    "rollup-plugin-postcss": "^4.0.2",
-    "tslib": "^2.6.3",
-    "typescript": "~5.9.0",
-    "vitest": "^2.0.5"
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
   }
 }

package/tools/cli.cjs

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+const { program } = require('commander');
+const { createWebPlatform } = require('./create-web-platform.cjs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+program
+  .name('ns-web')
+  .description('CLI工具用于创建和管理NativeScript应用的web平台')
+  .version('1.0.0');
+
+program
+  .command('init')
+  .description('为NativeScript项目初始化web平台支持')
+  .action(async () => {
+    await createWebPlatform();
+  });
+
+program
+  .command('build')
+  .description('生成web平台并在 platforms/web 内构建')
+  .option('--skip-install', '跳过依赖安装')
+  .action(async (opts) => {
+    await createWebPlatform();
+    const webDir = path.join(process.cwd(), 'platforms', 'web');
+    if (!opts.skipInstall) {
+      execSync('npm install', { stdio: 'inherit', cwd: webDir });
+    }
+    execSync('npm run build', { stdio: 'inherit', cwd: webDir });
+  });
+
+program
+  .command('dev')
+  .description('生成web平台并在 platforms/web 内启动开发服务器')
+  .option('--skip-install', '跳过依赖安装')
+  .action(async (opts) => {
+    await createWebPlatform();
+    const webDir = path.join(process.cwd(), 'platforms', 'web');
+    if (!opts.skipInstall) {
+      execSync('npm install', { stdio: 'inherit', cwd: webDir });
+    }
+    execSync('npm run dev', { stdio: 'inherit', cwd: webDir });
+  });
+
+program.parse();

package/tools/create-web-platform.cjs

@@ -0,0 +1,76 @@
+console.log('[web-adapter] create-web-platform.cjs 脚本已启动');
+const fs = require('fs');
+const path = require('path');
+
+// 模块入口（全部实现下沉到 modules/*）
+const copy = require('./modules/copy.cjs');
+const transform = require('./modules/transform.cjs');
+const routerGen = require('./modules/router.cjs');
+const appPatch = require('./modules/appPatch.cjs');
+const templates = require('./modules/templates.cjs');
+
+function createWebPlatform(options = {}) {
+  const adapterDir = path.resolve(__dirname, '..');
+  // 当作为 node_modules 使用时，项目根应为当前工作目录
+  const projectRoot = options.projectRoot ? path.resolve(options.projectRoot) : process.cwd();
+  const platformsDir = path.join(projectRoot, 'platforms');
+  const webDir = path.join(platformsDir, 'web');
+  const srcDir = path.join(projectRoot, 'src');
+
+  console.log('[web-adapter] 项目根目录:', projectRoot);
+  console.log('[web-adapter] platforms 目录:', platformsDir);
+  console.log('[web-adapter] web 目录:', webDir);
+  console.log('[web-adapter] src 目录:', srcDir);
+
+  try {
+    if (!fs.existsSync(webDir)) {
+      fs.mkdirSync(webDir, { recursive: true });
+      console.log('[web-adapter] 已创建 web 目录');
+    } else {
+      console.log('[web-adapter] web 目录已存在');
+    }
+
+    // 1) 复制源码（仅脚本层转换，保留模板标签）
+    copy.copySourceFiles(srcDir, path.join(webDir, 'src'), transform.transformContent);
+    console.log('[web-adapter] 已复制 src 源代码');
+
+    // 2) 复制适配器 web 组件与 composables
+    const adapterComponentsDir = path.join(adapterDir, 'core', 'components');
+    const targetComponentsDir = path.join(webDir, 'src', 'components', 'websfc');
+    copy.copyAdapterComponents(adapterComponentsDir, targetComponentsDir);
+    console.log('[web-adapter] 已复制适配器组件到 websfc');
+
+    const adapterComposablesDir = path.join(adapterDir, 'core', 'composables');
+    const targetComposablesDir = path.join(webDir, 'src', 'composables', 'websfc');
+    copy.copyAdapterComposables(adapterComposablesDir, targetComposablesDir);
+    console.log('[web-adapter] 已复制适配器 composables 到 websfc');
+
+    // 3) 写入 web 项目模板（index.html、package.json、vite.config、postcss、tailwind、App.vue）
+    templates.createWebPlatformFiles(webDir);
+    console.log('[web-adapter] 已生成 web 平台模板与配置');
+
+    // 4) 生成路由（根据 pages 目录）
+    const routerDirPath = path.join(webDir, 'src', 'router');
+    if (!fs.existsSync(routerDirPath)) {
+      fs.mkdirSync(routerDirPath, { recursive: true });
+    }
+    const routerContent = routerGen.buildRouterFromPages(webDir);
+    fs.writeFileSync(path.join(routerDirPath, 'index.ts'), routerContent, 'utf8');
+    console.log('[web-adapter] 已创建路由配置');
+
+    // 5) 修补 app.ts：注册所有 Web 适配组件并挂载应用
+    appPatch.patchAppForWeb(webDir);
+    console.log('[web-adapter] 正在安装依赖项...');
+
+    // 如需安装依赖，可在此调用（默认跳过以加快生成速度）
+    // installDependencies(webDir);
+  } catch (err) {
+    console.error('[web-adapter] 生成 web 平台时出错:', err);
+  }
+}
+
+module.exports = { createWebPlatform };
+
+if (require.main === module) {
+  createWebPlatform();
+}