create-octane-xplat 0.1.0 → 0.3.0

package/template/src/App.tsrx

@@ -13,10 +13,12 @@ const FEATURES = [
  *  (.web.tsrx / .native.tsrx), never inside a component. */
 export function App() @{
 	const [count, setCount] = useState(0);
-	const [dark, setDark] = useState(false);
+	// null = follow the system; the toggle overrides it for this session.
+	const [override, setOverride] = useState<boolean | null>(null);
 	const scheme = useColorScheme();
+	const dark = override ?? scheme === 'dark';
 
-	<View className={['app', dark ? 'dark' : '']}>
+	<View className={['app', dark ? 'dark' : 'light']}>
 		<Text className="title">octane-xplat</Text>
 		<Text className="muted">one codebase — web · iOS · android</Text>
 
@@ -28,7 +30,7 @@ export function App() @{
 
 		<List items={FEATURES} renderItem={(f) => <Text className="chip">{f}</Text>} />
 
-		<Pressable className="link" onPress={() => setDark(!dark)}>
+		<Pressable className="link" onPress={() => setOverride(!dark)}>
 			<Text>{dark ? 'light' : 'dark'} mode (system: {scheme})</Text>
 		</Pressable>
 	</View>

package/template/src/native.ts

@@ -0,0 +1,33 @@
+// Native entry — the iOS/Android twin of main.web.tsrx. Same App.tsrx,
+// different shell: a Frame hosting a Page that renders the universal root.
+import { Application, Frame, Page } from '@nativescript/core';
+import { renderNativeScriptApp } from '@nativescript-community/octane';
+import { App } from './App.tsrx';
+import '@octane-xplat/ui/theme/tokens.css';
+import './style.css';
+
+const entry = {
+	create: () => {
+		// Root is a Frame so pushRoute() can push Pages later — a Frame
+		// window root doubles as the 'root' stack with no registration;
+		// named stacks come from TabSpec.stack or registerStack. Route
+		// pushes also need registerScreens({name: Component}) at boot.
+		const frame = new Frame();
+		const page = new Page();
+		page.actionBarHidden = true;
+		renderNativeScriptApp(page, App);
+		frame.navigate({ create: () => page });
+		return frame;
+	},
+};
+
+// Under the vite dev session the placeholder bootstrap has already run
+// Application.run(), and a module-graph reload re-evaluates this entry.
+// Android's run() throws "Application is already started" on re-entry
+// (iOS core handles the placeholder handoff internally); resetRootView is
+// the documented way to swap the root of a running app.
+if (Application.started) {
+	Application.resetRootView(entry);
+} else {
+	Application.run(entry);
+}

package/template/src/style.css

@@ -6,6 +6,25 @@
 body {
 	margin: 0;
 	font-family: system-ui, sans-serif;
+	background-color: var(--color-surface);
+}
+
+/* System-dark before JS mounts — no white flash. Same values tokens.css
+ * sets under .dark; .app.light below is the manual override back. */
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-surface: #0f172a;
+		--color-text: #f8fafc;
+	}
+	body {
+		background-color: var(--color-surface);
+	}
+}
+
+/* Manual light override when the system is dark (JS adds .light). */
+.app.light {
+	--color-surface: #ffffff;
+	--color-text: #111827;
 }
 
 .app {

package/template/tsconfig.json

@@ -10,7 +10,9 @@
 		"customConditions": ["web"],
 		"lib": ["ESNext", "DOM", "DOM.Iterable"],
 		"types": ["vite/client"],
-		"noEmit": true
+		"noEmit": true,
+		"skipLibCheck": true
 	},
-	"include": ["src/**/*"]
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "src/native.ts"]
 }

package/template/tsconfig.native.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "preserve",
+		"jsxImportSource": "@nativescript-community/octane",
+		"moduleSuffixes": [".ios", ".android", ".native", ""],
+		"customConditions": ["native"],
+		"lib": ["ESNext"],
+		"types": ["@nativescript/types"],
+		"noEmit": true,
+		"skipLibCheck": true
+	},
+	"include": ["src/**/*", "references.d.ts"],
+	"exclude": ["node_modules", "platforms", "**/*.web.*"]
+}

package/template/vite.config.native.mts

@@ -0,0 +1,85 @@
+import { defineConfig, mergeConfig, type Plugin } from 'vite';
+import { octaneConfig } from '@nativescript-community/vite-octane';
+import { nativeScriptRenderer } from '@nativescript-community/octane/config';
+
+/**
+ * On-device HMR needs the app's websocket client to attach to /ns-hmr after
+ * the HTTP boot. When it never does — the @valor/nativescript-websockets
+ * polyfill missing from the bundle, `adb reverse` not covering the vite port,
+ * or a boot error before the client import — every save logs `recipients=0`
+ * and the device silently stays stale. Warn once when a dev session was
+ * fetched but no client ever attached.
+ */
+function nsHmrClientWatchdog(): Plugin {
+	return {
+		name: 'ns-hmr-client-watchdog',
+		configureServer(server) {
+			let everConnected = false;
+			let timer: ReturnType<typeof setTimeout> | undefined;
+			// Hook the raw 'request' event — middlewares.use() appends after the
+			// ns plugin's session handler, which ends the response without next(),
+			// so a connect middleware never observes /__ns_dev__/session at all.
+			server.httpServer?.on('request', (req) => {
+				if (!everConnected && req.url?.startsWith('/__ns_dev__/session')) {
+					clearTimeout(timer);
+					timer = setTimeout(() => {
+						if (!everConnected) {
+							console.warn(
+								'[ns-hmr-client-watchdog] the app fetched its dev session ' +
+									'but no /ns-hmr websocket client connected — edits will not ' +
+									'reach the device. Check that @valor/nativescript-websockets ' +
+									'is installed, `adb reverse tcp:<port>` covers this vite port ' +
+									'(physical Android), and the device log for hmr-client errors.',
+							);
+						}
+					}, 15_000);
+				}
+			});
+			server.httpServer?.on('upgrade', (req) => {
+				if (req.url?.startsWith('/ns-hmr')) {
+					everConnected = true;
+					clearTimeout(timer);
+				}
+			});
+		},
+	};
+}
+
+// The native build (iOS/Android). @octane-xplat/ui resolves through the
+// package's `native` export condition → compiled dist/native — no .tsrx
+// leaves needed from node_modules, so the renderer rule covers src/ only.
+export default defineConfig(({ mode }) =>
+	mergeConfig(
+		octaneConfig(
+			{ mode },
+			{
+				octane: {
+					renderers: {
+						registry: { nativescript: nativeScriptRenderer },
+						rules: [
+							{ include: 'src/**/*.{ts,tsx,tsrx}', renderer: 'nativescript' },
+						],
+					},
+				},
+			},
+		),
+		{
+			plugins: [nsHmrClientWatchdog()],
+			resolve: {
+				conditions: ['native'],
+				// The deps-bundle scanner sees source-level 'octane' imports
+				// before the compiler retargets hooks — without this it vendors
+				// the DOM runtime. Exact match only.
+				alias: [{ find: /^octane$/, replacement: 'octane/universal/native' }],
+				preserveSymlinks: false,
+				// Suffix chain (first match wins): .ios/.android → .native → shared.
+				extensions: [
+					'.ios.tsrx', '.android.tsrx', '.native.tsrx', '.tsrx',
+					'.ios.tsx', '.android.tsx', '.native.tsx', '.tsx',
+					'.ios.ts', '.android.ts', '.native.ts', '.mjs', '.mts', '.ts',
+					'.jsx', '.js', '.json',
+				],
+			},
+		},
+	),
+);