nativescript-web-adapter 0.1.3 → 0.1.5

package/README.md

@@ -11,18 +11,22 @@ This project is a “web adapter” for NativeScript‑Vue‑Vite. It can transf
 
 ## Quick Start
 
-Temporarily add the local bin to `PATH` to make the `ns-web` command available:
-
 ```bash
-export PATH="$PWD/node_modules/.bin:$PATH"
+npm install nativescript-web-adapter
 ```
 
 Compile the web template – install dependencies – start the web project's dev server:
 
-Web
+vue
+
+```bash
+npx ns-web vue
+```
+
+nuxt
 
 ```bash
-ns-web dev
+npx ns-web nuxt
 ```
 
 iOS

package/core/components/ActionBar.vue

@@ -7,5 +7,5 @@ defineOptions({ name: 'ActionBar' });
 </script>
 
 <style scoped>
-.ns-actionbar { background: #1f1140; color: white; padding: 12px; }
+.ns-actionbar { padding: 12px; }
 </style>

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

@@ -1,31 +1,31 @@
-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({
+import { defineComponent as r, createElementBlock as s, openBlock as a, renderSlot as c, ref as u } from "vue";
+const p = { class: "ns-actionbar" }, d = /* @__PURE__ */ r({
   name: "ActionBar",
   __name: "ActionBar",
   setup(e) {
-    return (t, o) => (c(), s("header", f, [
-      a(t.$slots, "default", {}, void 0, !0)
+    return (t, o) => (a(), s("header", p, [
+      c(t.$slots, "default", {}, void 0, !0)
     ]));
   }
 }), _ = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [n, d] of t)
-    o[n] = d;
+  for (const [n, f] of t)
+    o[n] = f;
   return o;
-}, m = /* @__PURE__ */ _(p, [["__scopeId", "data-v-f29dfd84"]]), v = { class: "ns-page" }, b = /* @__PURE__ */ r({
+}, m = /* @__PURE__ */ _(d, [["__scopeId", "data-v-f3af35bf"]]), 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)
+    return (t, o) => (a(), s("div", v, [
+      c(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)
+    return (t, o) => (a(), s("div", h, [
+      c(t.$slots, "default", {}, void 0, !0)
     ]));
   }
 }), O = /* @__PURE__ */ _($, [["__scopeId", "data-v-a66356e7"]]), i = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({

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

@@ -1 +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"}})});
+(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-f3af35bf"]]),f={class:"ns-page"},d=c(e.defineComponent({name:"Page",__name:"Page",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("div",f,[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:d},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

@@ -1 +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}
+.ns-actionbar[data-v-f3af35bf]{padding:12px}.ns-page[data-v-87719fa5]{top:0;left:0;position:absolute;width:100%;min-height:100%;padding:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-web-adapter",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Web adapter for NativeScript applications",
   "type": "module",
   "main": "./dist/nativescript-web-adapter.umd.js",

package/tools/cli.cjs

@@ -18,11 +18,11 @@ program
 
 program
   .command('build')
-  .description('生成web平台并在 platforms/web 内构建')
+  .description('生成 Vue 平台并在 platforms/vue 内构建')
   .option('--skip-install', '跳过依赖安装')
   .action(async (opts) => {
     await createWebPlatform();
-    const webDir = path.join(process.cwd(), 'platforms', 'web');
+    const webDir = path.join(process.cwd(), 'platforms', 'vue');
     if (!opts.skipInstall) {
       execSync('npm install', { stdio: 'inherit', cwd: webDir });
     }
@@ -30,16 +30,30 @@ program
   });
 
 program
-  .command('dev')
-  .description('生成web平台并在 platforms/web 内启动开发服务器')
+  .command('vue')
+  .description('生成 Vue 平台并在 platforms/vue 内启动开发服务器')
   .option('--skip-install', '跳过依赖安装')
   .action(async (opts) => {
     await createWebPlatform();
-    const webDir = path.join(process.cwd(), 'platforms', 'web');
+    const webDir = path.join(process.cwd(), 'platforms', 'vue');
     if (!opts.skipInstall) {
       execSync('npm install', { stdio: 'inherit', cwd: webDir });
     }
     execSync('npm run dev', { stdio: 'inherit', cwd: webDir });
   });
 
+program
+  .command('nuxt')
+  .description('生成 Nuxt 平台并在 platforms/nuxt 内执行构建')
+  .option('--skip-install', '跳过依赖安装')
+  .action(async (opts) => {
+    const { createNuxtPlatform } = require('./create-nuxt-platform.cjs');
+    await createNuxtPlatform();
+    const nuxtDir = path.join(process.cwd(), 'platforms', 'nuxt');
+    if (!opts.skipInstall) {
+      execSync('npm install', { stdio: 'inherit', cwd: nuxtDir });
+    }
+    execSync('npm run build', { stdio: 'inherit', cwd: nuxtDir });
+  });
+
 program.parse();

package/tools/create-nuxt-platform.cjs

@@ -0,0 +1,57 @@
+const fs = require('fs');
+const path = require('path');
+const copy = require('./modules/copy.cjs');
+const transformNuxt = require('./modules/transform-nuxt.cjs');
+const templatesNuxt = require('./modules/templates-nuxt.cjs');
+
+function createNuxtPlatform(options = {}) {
+  const adapterDir = path.resolve(__dirname, '..');
+  const projectRoot = options.projectRoot ? path.resolve(options.projectRoot) : process.cwd();
+  const platformsDir = path.join(projectRoot, 'platforms');
+  const nuxtDir = path.join(platformsDir, 'nuxt');
+  const srcDir = path.join(projectRoot, 'src');
+
+  if (!fs.existsSync(nuxtDir)) {
+    fs.mkdirSync(nuxtDir, { recursive: true });
+  }
+
+  const adapterComponentsDir = path.join(adapterDir, 'core', 'components');
+  const adapterComposablesDir = path.join(adapterDir, 'core', 'composables');
+  const targetComponentsDir = path.join(nuxtDir, 'components', 'websfc');
+  const targetComposablesDir = path.join(nuxtDir, 'composables', 'websfc');
+
+  copy.copyAdapterComponents(adapterComponentsDir, targetComponentsDir);
+  copy.copyAdapterComposables(adapterComposablesDir, targetComposablesDir);
+
+  const srcPagesDir = path.join(srcDir, 'pages');
+  const srcComponentsDir = path.join(srcDir, 'components');
+  const targetPagesDir = path.join(nuxtDir, 'pages');
+  const targetUserComponentsDir = path.join(nuxtDir, 'components');
+
+  copy.copySourceFiles(srcPagesDir, targetPagesDir, transformNuxt.transformNuxtContent);
+  copy.copySourceFiles(srcComponentsDir, targetUserComponentsDir, transformNuxt.transformNuxtContent);
+
+  const srcGlobals = path.join(srcDir, 'globals.ts');
+  const nuxtGlobals = path.join(nuxtDir, 'globals.ts');
+  if (fs.existsSync(srcGlobals)) {
+    const content = fs.readFileSync(srcGlobals, 'utf8');
+    const transformed = transformNuxt.transformNuxtContent(content, srcGlobals);
+    fs.writeFileSync(nuxtGlobals, transformed, 'utf8');
+  }
+
+  const srcCss = path.join(srcDir, 'app.css');
+  const assetsDir = path.join(nuxtDir, 'assets');
+  if (!fs.existsSync(assetsDir)) fs.mkdirSync(assetsDir, { recursive: true });
+  if (fs.existsSync(srcCss)) {
+    fs.copyFileSync(srcCss, path.join(assetsDir, 'app.css'));
+  }
+
+  templatesNuxt.createNuxtPlatformFiles(nuxtDir);
+}
+
+module.exports = { createNuxtPlatform };
+
+if (require.main === module) {
+  createNuxtPlatform();
+}
+

package/tools/create-web-platform.cjs

@@ -14,20 +14,20 @@ function createWebPlatform(options = {}) {
   // 当作为 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 webDir = path.join(platformsDir, 'vue');
   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] vue 目录:', webDir);
   console.log('[web-adapter] src 目录:', srcDir);
 
   try {
     if (!fs.existsSync(webDir)) {
       fs.mkdirSync(webDir, { recursive: true });
-      console.log('[web-adapter] 已创建 web 目录');
+      console.log('[web-adapter] 已创建 vue 目录');
     } else {
-      console.log('[web-adapter] web 目录已存在');
+      console.log('[web-adapter] vue 目录已存在');
     }
 
     // 1) 复制源码（仅脚本层转换，保留模板标签）
@@ -73,4 +73,4 @@ module.exports = { createWebPlatform };
 
 if (require.main === module) {
   createWebPlatform();
-}
+}

package/tools/modules/templates-nuxt.cjs

@@ -0,0 +1,63 @@
+const fs = require('fs');
+const path = require('path');
+
+function createNuxtPlatformFiles(nuxtDir) {
+  const projectRoot = path.dirname(path.dirname(nuxtDir));
+
+  const pkg = {
+    name: 'ns-nuxt-platform',
+    private: true,
+    scripts: {
+      dev: 'nuxt dev',
+      build: 'nuxt build',
+      preview: 'nuxt preview'
+    },
+    dependencies: {
+      nuxt: '^3.12.0'
+    },
+    devDependencies: {
+      typescript: '^5.0.0',
+      tailwindcss: '^3.4.0',
+      postcss: '^8.4.31',
+      autoprefixer: '^10.4.16'
+    }
+  };
+  fs.writeFileSync(path.join(nuxtDir, 'package.json'), JSON.stringify(pkg, null, 2));
+
+  const appVue = `<template>\n  <NuxtPage />\n</template>`;
+  fs.writeFileSync(path.join(nuxtDir, 'app.vue'), appVue);
+
+  const nuxtConfig = `import { defineNuxtConfig } from 'nuxt/config'
+export default defineNuxtConfig({
+  components: [{ path: '~/components/websfc', global: true }],
+  css: ['~/assets/app.css']
+})`;
+  fs.writeFileSync(path.join(nuxtDir, 'nuxt.config.ts'), nuxtConfig);
+
+  const pluginsDir = path.join(nuxtDir, 'plugins');
+  if (!fs.existsSync(pluginsDir)) fs.mkdirSync(pluginsDir, { recursive: true });
+  const pluginContent = `import { initGlobals } from '~/globals'
+import * as ns from '~/composables/websfc/index.ts'
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.config.globalProperties.$ns = ns
+  initGlobals()
+})`;
+  fs.writeFileSync(path.join(pluginsDir, 'ns-web.ts'), pluginContent);
+
+  const rootPostcss = path.join(projectRoot, 'postcss.config.js');
+  const rootTailwind = path.join(projectRoot, 'tailwind.config.js');
+  if (fs.existsSync(rootPostcss)) {
+    fs.copyFileSync(rootPostcss, path.join(nuxtDir, 'postcss.config.js'));
+  } else {
+    const postcssConfig = `module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};`;
+    fs.writeFileSync(path.join(nuxtDir, 'postcss.config.js'), postcssConfig);
+  }
+  if (fs.existsSync(rootTailwind)) {
+    fs.copyFileSync(rootTailwind, path.join(nuxtDir, 'tailwind.config.js'));
+  } else {
+    const tailwindConfig = `/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    './app.vue',\n    './components/**/*.{vue,js,ts}',\n    './pages/**/*.{vue,js,ts}',\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};`;
+    fs.writeFileSync(path.join(nuxtDir, 'tailwind.config.js'), tailwindConfig);
+  }
+}
+
+module.exports = { createNuxtPlatformFiles };

package/tools/modules/transform-nuxt.cjs

@@ -0,0 +1,59 @@
+function transformNuxtContent(content, srcPath) {
+  if (srcPath && /globals\.ts$/.test(srcPath)) {
+    return "export function initGlobals() {}\n";
+  }
+
+  content = content.replace(/from\s+['\"](nativescript-vue)['\"]/g, "from 'vue'");
+  content = content.replace(/import\s+.*@nativescript\/core.*;?\n?/g, '');
+  content = content.replace(/import\s+.*nativescript-web-adapter.*;?\n?/g, '');
+  content = content.replace(/declare\s+var\s+com[:\s\w]*;?\n?/g, '');
+
+  content = content.replace(/function\s+enterNow\([^\)]*\)\s*\{[\s\S]*?\}\n?/g, "function enterNow() { window.open(\"https://viteconf.amsterdam\", '_blank'); }\n");
+  content = content.replace(/function\s+enterNow\([^\)]*\)\s*\{[\s\S]*?\}\s*[\s\S]*?let interval/g, 'function enterNow() { window.open("https://viteconf.amsterdam", "_blank"); }\n\nlet interval');
+
+  if (srcPath && /\.vue$/i.test(srcPath)) {
+    const hasNavigateTo = /\$navigateTo\(\s*[A-Za-z_][A-Za-z0-9_]*\s*\)/.test(content);
+    const hasNavigateBack = /\$navigateBack\(\s*\)/.test(content);
+    const hasFrameNav = /Frame\.(navigate|goBack)\(/.test(content);
+    const hasFrameTopmost = /Frame\.topmost\(\)\.(navigate|goBack)\(/.test(content);
+    if (hasNavigateTo || hasNavigateBack || hasFrameNav || hasFrameTopmost) {
+      content = content.replace(/(?:this\.|[A-Za-z_$]+\?\.|[A-Za-z_$]+\.)*\$navigateTo\(\s*([A-Za-z_][A-Za-z0-9_]*)\s*\)/g, "router.push('/$1')");
+      content = content.replace(/(?:this\.|[A-Za-z_$]+\?\.|[A-Za-z_$]+\.)*\$navigateBack\(\s*\)/g, 'router.go(-1)');
+      content = content.replace(/Frame\.goBack\(\s*\)/g, 'router.go(-1)');
+      content = content.replace(/Frame\.navigate\(\s*([A-Za-z_][A-Za-z0-9_]*)\s*\)/g, "router.push('/$1')");
+      content = content.replace(/Frame\.navigate\(\s*['\"]([^'\"]+)['\"]\s*\)/g, (m, p1) => {
+        const base = String(p1).split('/')?.pop()?.replace(/\.vue$/i, '') || p1;
+        return `router.push('/${base}')`;
+      });
+      content = content.replace(/Frame\.navigate\(\s*\{[\s\S]*?moduleName\s*:\s*['\"]([^'\"]+)['\"][\s\S]*?\}\s*\)/g, (m, p1) => {
+        const base = String(p1).split('/')?.pop()?.replace(/\.vue$/i, '') || p1;
+        return `router.push('/${base}')`;
+      });
+      content = content.replace(/Frame\.topmost\(\)\.goBack\(\s*\)/g, 'router.go(-1)');
+      content = content.replace(/Frame\.topmost\(\)\.navigate\(\s*([A-Za-z_][A-Za-z0-9_]*)\s*\)/g, "router.push('/$1')");
+      content = content.replace(/Frame\.topmost\(\)\.navigate\(\s*['\"]([^'\"]+)['\"]\s*\)/g, (m, p1) => {
+        const base = String(p1).split('/')?.pop()?.replace(/\.vue$/i, '') || p1;
+        return `router.push('/${base}')`;
+      });
+      content = content.replace(/Frame\.topmost\(\)\.navigate\(\s*\{[\s\S]*?moduleName\s*:\s*['\"]([^'\"]+)['\"][\s\S]*?\}\s*\)/g, (m, p1) => {
+        const base = String(p1).split('/')?.pop()?.replace(/\.vue$/i, '') || p1;
+        return `router.push('/${base}')`;
+      });
+      if (!/useRouter\s*\(/.test(content)) {
+        content = content.replace(/(<script[^>]*>)/i, "$1\nimport { useRouter } from 'vue-router';\nconst router = useRouter();\n");
+      }
+    }
+  }
+
+  content = content.replace(/.*(nativeApp|android\.|UIApplication|NSURL|NSDictionary|com\.tns|intent|startActivity|android\.content).*/g, '');
+  content = content.replace(/else\s*\{[\s\S]*?\}/g, '');
+  content = content.replace(/\/\s+\/>/g, '\/>');
+  content = content.replace(/registerElement\([^)]+\);?\n?/g, '');
+  if (content.includes('__ANDROID__') || content.includes('Application.launchEvent')) {
+    content = content.replace(/Application\.on[\s\S]*?}\);/g, '');
+  }
+
+  return content;
+}
+
+module.exports = { transformNuxtContent };