nativescript-web-adapter 0.1.3 → 0.1.6

package/README.md

@@ -5,24 +5,40 @@
 [![npm](https://img.shields.io/npm/v/nativescript-web-adapter.svg?logo=npm&label=npm)](https://www.npmjs.com/package/nativescript-web-adapter)
 [![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
-This project is a “web adapter” for NativeScript‑Vue‑Vite. It can transform native app code into a pure Vue Web project that runs in the browser (generated under `platforms/web/`).
+This project is a “web adapter” for NativeScript apps. It can transform native app code into a Web project that runs in the browser (generated under `platforms/<framework>/`).
 
 ---
 
 ## Quick Start
 
-Temporarily add the local bin to `PATH` to make the `ns-web` command available:
+```bash
+npm install nativescript-web-adapter
+```
+
+Generate the web template – install dependencies – run the web project:
+
+vue (dev server)
 
 ```bash
-export PATH="$PWD/node_modules/.bin:$PATH"
+npx ns-web vue
 ```
 
-Compile the web template – install dependencies – start the web project's dev server:
+angular (build)
+
+```bash
+npx ns-web angular
+```
 
-Web
+auto (build, detects framework from the project)
 
 ```bash
-ns-web dev
+npx ns-web build
+```
+
+nuxt
+
+```bash
+npx ns-web nuxt
 ```
 
 iOS
@@ -57,8 +73,8 @@ ns run android
 ## Background & Goals
 
 - Provide a native app example using `nativescript-vue` + `@nativescript/vite`, showcasing development and HMR on iOS/Android.
-- Provide a “web adapter” (local package `nativescript-web-adapter`) that scans and transforms the project's `src/` code to generate a Vue application that runs in the browser, enabling quick preview and collaboration on desktop browsers.
-- The generated Web project lives in `platforms/web/` with its own Vite config, dependencies, and entry files, without affecting the native side.
+- Provide a “web adapter” (local package `nativescript-web-adapter`) that scans and transforms the project's `src/` code to generate a Web application that runs in the browser (Vue or Angular), enabling quick preview and collaboration on desktop browsers.
+- The generated Web project lives in `platforms/<framework>/` with its own Vite config, dependencies, and entry files, without affecting the native side.
 
 ---
 
@@ -97,13 +113,15 @@ ns run android
 
 ---
 
-## Web Side (Generated Vue Project)
+## Web Side (Generated Web Project)
 
-- Output location: `platforms/web/`
+- Output location:
+  - Vue: `platforms/vue/`
+  - Angular: `platforms/angular/`
 - Example structure:
 
 ```
-platforms/web/
+platforms/vue/
   package.json          # generated (includes vue + vue-router)
   vite.config.ts        # generated (server.port = 3005, strictPort = true)
   index.html
@@ -121,6 +139,8 @@ platforms/web/
       websfc/           # adapter composables (useActionBar/usePage/useFrame)
 ```
 
+Angular platform uses `platforms/angular/` and keeps the same `src/components/websfc` + `src/composables/websfc` structure, but the entry is `src/main.ts` and the HTML root is `<ns-app></ns-app>`.
+
 - Default dev URL: `http://localhost:3005/` (if the port is taken, it fails directly; set `strictPort` to `false` in `vite.config.ts` to enable fallback).
 
 ---
@@ -148,8 +168,9 @@ platforms/web/
   - `npm run dev:android`: run Vite and NS Android debug in parallel.
   - `npm run ios` / `npm run android`: use `ns debug` for debugging builds.
 - Generate and run the Web project:
-  - `npm run dev:web`: run the adapter generator, then enter `platforms/web`, install deps, and start the Web Vite dev server.
-  - On first run, it creates `platforms/web` along with required templates and configuration.
+  - Vue dev server: `npx ns-web vue`
+  - Angular build: `npx ns-web angular`
+  - Auto build (detects framework): `npx ns-web build`
 
 ---
 
@@ -213,7 +234,8 @@ The generator’s `transformContent()` currently performs only necessary code‑
   - Uses `@nativescript/vite` with `vite serve -- --env.hmr` to establish an HMR channel, pushing changes to the device.
   - `patches/nativescript-vue+3.0.1.patch` injects within `app.start`: `globalThis.__NS_VUE_APP__ = app`, helping restore state in deep navigation stacks (e.g., when returning during HMR).
 - Web side:
-  - Independent Vite (`platforms/web/vite.config.ts`) runs on port `3005`, using standard Vue HMR and route refresh.
+  - Vue Vite (`platforms/vue/vite.config.ts`) runs on port `3005`.
+  - Angular Vite (`platforms/angular/vite.config.ts`) runs on port `3006`.
 
 ---
 
@@ -225,8 +247,8 @@ The generator’s `transformContent()` currently performs only necessary code‑
   - Basic web components are provided (`ActionBar/Page/Frame/Grid/Stack/Flex/Wrap/Scroll/Label/Button/Image/HtmlView/ImageCacheIt`). More detailed property‑to‑style mappings will be added later (e.g., `flexDirection/row`, grid rows/columns).
 - Regex‑driven transformation:
   - Edge cases may exist for complex code and templates. Gradually moving to AST‑level transformation is recommended.
-- Generator template duplicate writes:
-  - The generator currently writes `platforms/web/package.json` twice (with different dependency versions). This can be streamlined into a single write to reduce maintenance cost.
+- Generator templates:
+  - The generator writes framework-specific Vite templates and copies adapter components/composables into `src/components/websfc` and `src/composables/websfc`.
 
 ---
 
@@ -239,4 +261,4 @@ The generator’s `transformContent()` currently performs only necessary code‑
 3. Tests & validation:
    - Add unit tests and e2e tests for transformation rules and template generation to ensure stability across different project structures.
 
----
+---

package/angular/components/absolute-layout.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'AbsoluteLayout, absolutelayout',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-absolute"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-absolute {
+				position: relative;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	],
+})
+export class AbsoluteLayoutComponent {}

package/angular/components/action-bar.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'ActionBar, actionbar',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<header class="ns-actionbar"><ng-content></ng-content></header>`,
+	styles: [
+		`
+			.ns-actionbar {
+				padding: 12px;
+			}
+		`,
+	],
+})
+export class ActionBarComponent {}

package/angular/components/action-item.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+	selector: 'ActionItem, actionitem',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<button class="ns-actionitem" (click)="tap.emit($event)"><ng-content></ng-content></button>`,
+	styles: [
+		`
+			.ns-actionitem {
+				background: transparent;
+				border: none;
+				color: inherit;
+				cursor: pointer;
+				padding: 8px;
+			}
+		`,
+	],
+})
+export class ActionItemComponent {
+	@Output() tap = new EventEmitter<MouseEvent>();
+}

package/angular/components/activity-indicator.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'ActivityIndicator, activityindicator',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-activity-indicator" [class.busy]="busy"></div>`,
+	styles: [
+		`
+			.ns-activity-indicator {
+				width: 20px;
+				height: 20px;
+				border-radius: 50%;
+				border: 2px solid rgba(255, 255, 255, 0.3);
+				border-top-color: currentColor;
+				opacity: 0.8;
+			}
+			.ns-activity-indicator.busy {
+				animation: ns-spin 0.8s linear infinite;
+			}
+			@keyframes ns-spin {
+				to {
+					transform: rotate(360deg);
+				}
+			}
+		`,
+	],
+})
+export class ActivityIndicatorComponent {
+	@Input() busy = true;
+}
+

package/angular/components/button.component.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'Button, button[nsButton], ns-button',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<button class="ns-button" [ngStyle]="btnStyle" (click)="tap.emit($event)"><ng-content></ng-content></button>`,
+	styles: [
+		`
+			.ns-button {
+				cursor: pointer;
+			}
+		`,
+	],
+})
+export class ButtonComponent {
+	@Input() horizontalAlignment?: string;
+	@Output() tap = new EventEmitter<MouseEvent>();
+
+	get btnStyle(): Record<string, string> {
+		const style: Record<string, string> = {};
+		const h = this.horizontalAlignment?.toLowerCase();
+		if (h === 'center') {
+			style.display = 'block';
+			style.width = 'fit-content';
+			style.marginLeft = 'auto';
+			style.marginRight = 'auto';
+			style.alignSelf = 'center';
+			style.justifySelf = 'center';
+		} else if (h === 'right') {
+			style.display = 'block';
+			style.width = 'fit-content';
+			style.marginLeft = 'auto';
+			style.alignSelf = 'flex-end';
+			style.justifySelf = 'end';
+		} else if (h === 'left') {
+			style.display = 'block';
+			style.width = 'fit-content';
+			style.marginRight = 'auto';
+			style.alignSelf = 'flex-start';
+			style.justifySelf = 'start';
+		}
+		return style;
+	}
+}

package/angular/components/date-picker.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'DatePicker, datepicker',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<input class="ns-datepicker" type="date" [value]="valueStr" (input)="onInput($event)" />`,
+	styles: [
+		`
+			.ns-datepicker {
+				padding: 6px 8px;
+			}
+		`,
+	],
+})
+export class DatePickerComponent {
+	@Input() date?: string | Date;
+	@Output() dateChange = new EventEmitter<string | Date>();
+	@Output() change = new EventEmitter<string | Date>();
+
+	get valueStr(): string {
+		if (!this.date) return '';
+		const d = typeof this.date === 'string' ? new Date(this.date) : this.date;
+		if (Number.isNaN(d.getTime())) return '';
+		const pad = (n: number) => (n < 10 ? `0${n}` : String(n));
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+	}
+
+	onInput(e: Event) {
+		const v = (e.target as HTMLInputElement).value;
+		this.dateChange.emit(v);
+		this.change.emit(v);
+	}
+}
+

package/angular/components/directives/absolute-position.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core';
+
+@Directive({
+	selector: '[left],[top]',
+	standalone: true,
+})
+export class NsAbsolutePositionDirective implements OnChanges {
+	@Input() left?: number | string;
+	@Input() top?: number | string;
+
+	constructor(
+		private readonly el: ElementRef<HTMLElement>,
+		private readonly renderer: Renderer2
+	) {}
+
+	ngOnChanges(): void {
+		const host = this.el.nativeElement;
+		this.renderer.setStyle(host, 'position', 'absolute');
+		if (this.left !== undefined) this.renderer.setStyle(host, 'left', this.toCssPx(this.left));
+		if (this.top !== undefined) this.renderer.setStyle(host, 'top', this.toCssPx(this.top));
+	}
+
+	private toCssPx(v: number | string): string {
+		if (typeof v === 'number') return `${v}px`;
+		const t = v.trim();
+		if (!t) return '0px';
+		if (/^-?\d+(\.\d+)?$/.test(t)) return `${t}px`;
+		return t;
+	}
+}
+

package/angular/components/directives/grid-position.directive.ts

@@ -0,0 +1,43 @@
+import { Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core';
+
+@Directive({
+	selector: '[row],[col],[rowSpan],[colSpan]',
+	standalone: true,
+})
+export class NsGridPositionDirective implements OnChanges {
+	@Input() row?: number | string;
+	@Input() col?: number | string;
+	@Input() rowSpan?: number | string;
+	@Input() colSpan?: number | string;
+
+	constructor(
+		private readonly el: ElementRef<HTMLElement>,
+		private readonly renderer: Renderer2
+	) {}
+
+	ngOnChanges(): void {
+		const host = this.el.nativeElement;
+		const row = this.toNumberOrUndefined(this.row);
+		const col = this.toNumberOrUndefined(this.col);
+		const rowSpan = this.toNumberOrUndefined(this.rowSpan);
+		const colSpan = this.toNumberOrUndefined(this.colSpan);
+
+		if (row !== undefined) {
+			const start = row + 1;
+			const span = rowSpan && rowSpan > 0 ? rowSpan : 1;
+			this.renderer.setStyle(host, 'grid-row', `${start} / span ${span}`);
+		}
+		if (col !== undefined) {
+			const start = col + 1;
+			const span = colSpan && colSpan > 0 ? colSpan : 1;
+			this.renderer.setStyle(host, 'grid-column', `${start} / span ${span}`);
+		}
+	}
+
+	private toNumberOrUndefined(v: number | string | undefined): number | undefined {
+		if (v === undefined || v === null) return undefined;
+		const n = typeof v === 'number' ? v : Number(v);
+		return Number.isFinite(n) ? n : undefined;
+	}
+}
+

package/angular/components/dock-layout.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'DockLayout, docklayout',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<div class="ns-dock">
+			<div class="ns-dock-top"><ng-content select="[dock='top'],[dock='Top'],[dock='TOP']"></ng-content></div>
+			<div class="ns-dock-middle">
+				<div class="ns-dock-left"><ng-content select="[dock='left'],[dock='Left'],[dock='LEFT']"></ng-content></div>
+				<div class="ns-dock-center"><ng-content></ng-content></div>
+				<div class="ns-dock-right"><ng-content select="[dock='right'],[dock='Right'],[dock='RIGHT']"></ng-content></div>
+			</div>
+			<div class="ns-dock-bottom"><ng-content select="[dock='bottom'],[dock='Bottom'],[dock='BOTTOM']"></ng-content></div>
+		</div>
+	`,
+	styles: [
+		`
+			.ns-dock {
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				height: 100%;
+			}
+			.ns-dock-top,
+			.ns-dock-bottom {
+				flex: 0 0 auto;
+			}
+			.ns-dock-middle {
+				display: flex;
+				flex: 1 1 auto;
+				min-height: 0;
+			}
+			.ns-dock-left,
+			.ns-dock-right {
+				flex: 0 0 auto;
+			}
+			.ns-dock-center {
+				flex: 1 1 auto;
+				min-width: 0;
+			}
+		`,
+	],
+})
+export class DockLayoutComponent {}

package/angular/components/flexbox-layout.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'FlexboxLayout, flexboxlayout',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-flex"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-flex {
+				display: flex;
+			}
+		`,
+	],
+})
+export class FlexboxLayoutComponent {}

package/angular/components/frame.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'Frame, frame',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-frame"><ng-content></ng-content></div>`,
+})
+export class FrameComponent {}

package/angular/components/grid-layout.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'GridLayout, gridlayout',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-grid" [ngStyle]="gridStyle"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-grid {
+				padding: 0px;
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				min-width: 0;
+				min-height: 0;
+			}
+		`,
+	],
+})
+export class GridLayoutComponent {
+	@Input() rows?: string;
+	@Input() columns?: string;
+
+	get gridStyle(): Record<string, string> {
+		const style: Record<string, string> = { display: 'grid' };
+		const rows = this.parseSegments(this.rows);
+		const cols = this.parseSegments(this.columns);
+		if (rows) style.gridTemplateRows = rows;
+		if (cols) style.gridTemplateColumns = cols;
+		return style;
+	}
+
+	private parseSegments(input?: string): string | undefined {
+		if (!input) return undefined;
+		const segToCss = (s: string) => {
+			const t = s.trim();
+			if (!t) return 'auto';
+			if (t === '*') return '1fr';
+			const star = t.match(/^(\d+)\*$/);
+			if (star) return `${star[1]}fr`;
+			if (t.toLowerCase() === 'auto') return 'auto';
+			if (/^\d+$/.test(t)) return `${t}px`;
+			return t;
+		};
+		return input.split(',').map(segToCss).join(' ');
+	}
+}

package/angular/components/html-view.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'HtmlView, htmlview',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CommonModule],
+	template: `
+		<div class="ns-htmlview" *ngIf="html; else projected" [innerHTML]="html"></div>
+		<ng-template #projected><div class="ns-htmlview"><ng-content></ng-content></div></ng-template>
+	`,
+	styles: [
+		`
+			.ns-htmlview {
+				display: block;
+			}
+		`,
+	],
+})
+export class HtmlViewComponent {
+	@Input() html?: string;
+}

package/angular/components/image-cache-it.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'ImageCacheIt, imagecacheit',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<img class="ns-imagecacheit" [src]="src" />`,
+	styles: [
+		`
+			.ns-imagecacheit {
+				display: block;
+				max-width: 100%;
+				height: auto;
+			}
+		`,
+	],
+})
+export class ImageCacheItComponent {
+	@Input({ required: true }) src!: string;
+}
+

package/angular/components/image.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'Image, image',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<img class="ns-image" [src]="src" />`,
+	styles: [
+		`
+			.ns-image {
+				display: block;
+				max-width: 100%;
+				height: auto;
+			}
+		`,
+	],
+})
+export class ImageComponent {
+	@Input({ required: true }) src!: string;
+	@Input() stretch?: string;
+}
+