create-octane-xplat 0.1.0 → 0.4.0

package/template/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+	"images": [
+		{
+			"idiom": "universal",
+			"filename": "LaunchScreen-Center.png",
+			"scale": "1x"
+		},
+		{
+			"idiom": "universal",
+			"filename": "LaunchScreen-Center@2x.png",
+			"scale": "2x"
+		},
+		{
+			"idiom": "universal",
+			"filename": "LaunchScreen-Center@3x.png",
+			"scale": "3x"
+		}
+	],
+	"info": {
+		"version": 1,
+		"author": "xcode"
+	}
+}

package/template/App_Resources/iOS/Assets.xcassets/octane.imageset/Contents.json

@@ -0,0 +1,8 @@
+{
+	"images": [
+		{ "filename": "octane.png", "idiom": "universal", "scale": "1x" },
+		{ "filename": "octane@2x.png", "idiom": "universal", "scale": "2x" },
+		{ "filename": "octane@3x.png", "idiom": "universal", "scale": "3x" }
+	],
+	"info": { "author": "xcode", "version": 1 }
+}

package/template/App_Resources/iOS/Info.plist

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundleExecutable</key>
+	<string>${EXECUTABLE_NAME}</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiresFullScreen</key>
+	<false/>
+	<key>UIApplicationSceneManifest</key>
+	<dict>
+		<key>UIApplicationSupportsMultipleScenes</key>
+		<true/>
+	</dict>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+</dict>
+</plist>

package/template/App_Resources/iOS/LaunchScreen.storyboard

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina5_9" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <layoutGuides>
+                        <viewControllerLayoutGuide type="top" id="Llm-lL-Icb"/>
+                        <viewControllerLayoutGuide type="bottom" id="xb3-aO-Qok"/>
+                    </layoutGuides>
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.AspectFill" translatesAutoresizingMaskIntoConstraints="NO" id="wtH-rr-YfP">
+                                <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
+                            </imageView>
+                            <imageView userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="LaunchScreen.Center" translatesAutoresizingMaskIntoConstraints="NO" id="s1z-aa-wYv">
+                                <rect key="frame" x="0.0" y="150" width="375" height="512"/>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstAttribute="trailing" secondItem="s1z-aa-wYv" secondAttribute="trailing" id="4Rf-kf-vql"/>
+                            <constraint firstAttribute="bottom" secondItem="wtH-rr-YfP" secondAttribute="bottom" id="5CS-At-4ka"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="Awn-b8-xf1"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="BpJ-vb-eKA"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="QIM-7J-OZz"/>
+                            <constraint firstAttribute="trailing" secondItem="wtH-rr-YfP" secondAttribute="trailing" id="RXg-rW-UK8"/>
+                            <constraint firstItem="s1z-aa-wYv" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="Rcp-LG-48z"/>
+                            <constraint firstItem="wtH-rr-YfP" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="cch-8E-tYu"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="509.60000000000002" y="237.93103448275863"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="LaunchScreen.AspectFill" width="768" height="1024"/>
+        <image name="LaunchScreen.Center" width="384" height="512"/>
+    </resources>
+</document>

package/template/App_Resources/iOS/build.xcconfig

@@ -0,0 +1,7 @@
+// You can add custom settings here
+// for example you can uncomment the following line to force distribution code signing
+// CODE_SIGN_IDENTITY = iPhone Distribution 
+// To build for device with XCode you need to specify your development team.
+// DEVELOPMENT_TEAM = YOUR_TEAM_ID;
+ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+IPHONEOS_DEPLOYMENT_TARGET = 17.0;

package/template/App_Resources/iOS/src/OctaneShaders.metal

@@ -0,0 +1,128 @@
+#include <metal_stdlib>
+#include <SwiftUI/SwiftUI_Metal.h>
+using namespace metal;
+
+// Stitchable shaders for SwiftUI's `.distortionEffect` / `.colorEffect` (iOS 17+).
+// SwiftUI supplies the leading parameters — `position` for a distortion, plus
+// `color` for a colour effect — and appends the arguments passed at the call
+// site in `OctaneLogo.swift`.
+
+/// Rising heat haze.
+///
+/// A distortion shader maps a destination pixel back to the source pixel it
+/// should sample, so the returned offset reads as the image bending. Amplitude
+/// is weighted by `base^2` (1 at the bottom, 0 at the top) so the mark shimmers
+/// like air over hot metal instead of wobbling as a rigid block, and the two
+/// waves use incommensurate frequencies so the pattern never visibly repeats.
+[[ stitchable ]] float2 octaneHeatHaze(float2 position, float time, float2 size, float intensity) {
+	float2 uv = position / size;
+	float base = 1.0 - uv.y;
+	float wave = sin(uv.y * 26.0 - time * 3.1) * 0.6
+	           + sin(uv.y * 11.0 - time * 1.9 + uv.x * 4.0) * 0.4;
+	float amp = 2.4 * base * base * intensity;
+	return position + float2(wave * amp, 0.0);
+}
+
+/// Ember sheen sweeping diagonally across the ink.
+///
+/// SwiftUI hands colour effects premultiplied alpha, so the colour has to be
+/// un-premultiplied before mixing and re-premultiplied on the way out —
+/// blending straight into premultiplied RGB would bleed the highlight into the
+/// transparent surround and halo the glyph edges.
+[[ stitchable ]] half4 octaneSheen(float2 position, half4 color, float time, float2 size, float intensity) {
+	if (color.a < 0.004h) {
+		return color;
+	}
+	half3 rgb = color.rgb / color.a;
+
+	float2 uv = position / size;
+	float sweep = fract(time * 0.22);
+	float d = (uv.x * 0.85 + (1.0 - uv.y) * 0.35) - (sweep * 1.8 - 0.4);
+	float band = exp(-(d * d) * 42.0);
+
+	half3 ember = half3(1.0h, 0.255h, 0.353h); // the logo's #FF415A accent
+	half3 gold = half3(1.0h, 0.72h, 0.36h);
+	half3 hot = mix(ember, gold, half(band));
+
+	half glow = half(band) * half(intensity);
+	rgb = mix(rgb, hot, glow * 0.9h);
+	rgb += half3(glow * 0.25h);
+
+	return half4(saturate(rgb) * color.a, color.a);
+}
+
+/// Per-shard pseudo-random pair. Deterministic in the cell index, so a shard
+/// keeps the same trajectory for the whole burst instead of jittering per frame.
+static inline float2 shardNoise(float2 cell) {
+	float3 a = fract(float3(cell.xyx) * float3(0.1031, 0.1030, 0.0973));
+	a += dot(a, a.yzx + 33.33);
+	return fract(float2((a.x + a.y) * a.z, (a.x + a.z) * a.y));
+}
+
+/// Ignition burst: the mark shatters outward and reassembles.
+///
+/// A layer effect (rather than a distortion) because each shard has to read
+/// from somewhere else in the image: sampling `position - offset` with an
+/// offset that is constant across a grid cell translates that whole cell as a
+/// rigid chip, which is what reads as breaking apart. A distortion shader can
+/// only nudge its own pixel, so it smears instead of shattering.
+///
+/// `progress` runs 0 -> 1 once per burst and the displacement rides
+/// `sin(p * pi)`, so the shards fly out and land back exactly where they
+/// started — no separate reassembly pass, and the mark cannot get stranded
+/// mid-explosion if a frame is dropped.
+[[ stitchable ]] half4 octaneShatter(float2 position, SwiftUI::Layer layer, float2 size, float progress) {
+	if (progress <= 0.0001) {
+		return layer.sample(position);
+	}
+
+	float p = clamp(progress, 0.0, 1.0);
+	float fly = sin(p * M_PI_F);
+	float ease = fly * fly;
+
+	float2 cells = float2(22.0, 5.0);
+	float2 cellSize = size / cells;
+	float2 rnd = shardNoise(floor(position / cellSize));
+
+	float2 centre = size * 0.5;
+	float2 radial = (position - centre) / max(size.x * 0.5, 1.0);
+	float2 dir = radial + (rnd - 0.5) * 0.9;
+	float len = max(length(dir), 0.0001);
+	dir /= len;
+
+	// Capped so the outermost shards stay inside the host view; anything
+	// travelling further is clipped by its bounds rather than fading out.
+	float2 offset = dir * mix(22.0, 70.0, rnd.x) * ease;
+	offset.y += (rnd.y - 0.5) * 42.0 * ease;
+	float2 src = position - offset;
+
+	// Chromatic split along the flight path — the shards read as moving fast
+	// rather than merely being displaced.
+	float split = ease * 3.5;
+	half4 cr = layer.sample(src + dir * split);
+	half4 cg = layer.sample(src);
+	half4 cb = layer.sample(src - dir * split);
+	half alpha = max(max(cr.a, cg.a), cb.a);
+	if (alpha < 0.004h) {
+		return half4(0.0h);
+	}
+	half3 rgb = half3(cr.r, cg.g, cb.b) / alpha;
+
+	// Expanding shockwave ring, brightest just after the tap.
+	float ring = exp(-pow((length(radial) - p * 1.5) * 5.0, 2.0)) * (1.0 - p);
+
+	half3 ember = half3(1.0h, 0.255h, 0.353h);
+	half3 gold = half3(1.0h, 0.78h, 0.35h);
+	half heat = half(ease);
+	// Ember-leaning, and only a partial mix: pushing all the way to `hot` turns
+	// every shard the same flat gold and the mark stops being recognisable
+	// mid-flight. Holding some ink back keeps them reading as burning pieces
+	// of the logo.
+	half3 hot = mix(ember, gold, heat * 0.75h);
+
+	rgb = mix(rgb, hot, heat * 0.6h);
+	rgb += half3(heat * 0.18h * half(rnd.x) + half(ring) * 0.45h);
+
+	alpha *= 1.0h - heat * 0.2h;
+	return half4(saturate(rgb) * alpha, alpha);
+}

package/template/gitignore

@@ -1,2 +1,4 @@
 node_modules
 dist
+platforms/
+hooks/

package/template/index.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>octane-xplat app</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsrx"></script>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>octane-xplat app</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.web.tsrx"></script>
+	</body>
 </html>

package/template/nativescript.config.ts

@@ -0,0 +1,13 @@
+import { NativeScriptConfig } from '@nativescript/core'
+
+export default {
+	id: 'org.nativescript.octanexplat',
+	appPath: 'src',
+	appResourcesPath: 'App_Resources',
+	android: {
+		v8Flags: '--expose_gc',
+		markingMode: 'none',
+	},
+	bundler: 'vite',
+	bundlerConfigPath: 'vite.config.native.mts',
+} as NativeScriptConfig

package/template/package.json

@@ -1,20 +1,42 @@
 {
-  "name": "octane-xplat-app",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "typecheck": "tsrx-tsc --noEmit"
-  },
-  "dependencies": {
-    "@octane-xplat/ui": "^0.2.0",
-    "octane": "0.4.0"
-  },
-  "devDependencies": {
-    "@octanejs/vite-plugin": "0.1.58",
-    "@tsrx/typescript-plugin": "0.4.7",
-    "typescript": "5.9.3",
-    "vite": "8.3.0"
-  }
+	"name": "octane-xplat-app",
+	"private": true,
+	"type": "module",
+	"main": "src/index.native.ts",
+	"scripts": {
+		"xplat": "xplat",
+		"dev": "vite",
+		"dev:ios": "ns run ios",
+		"dev:android": "ns run android",
+		"build": "vite build",
+		"build:ios": "ns build ios",
+		"build:android": "ns build android",
+		"lint": "xplat-lint",
+		"lint:fix": "xplat-lint --fix",
+		"typecheck": "tsrx-tsc --noEmit && tsrx-tsc --noEmit -p tsconfig.native.json"
+	},
+	"dependencies": {
+		"@nativescript-community/octane": "0.2.1",
+		"@nativescript-community/ui-canvas": "4.6.52",
+		"@nativescript-community/ui-svg": "0.2.24",
+		"@nativescript/core": "9.1.2",
+		"@octane-xplat/ui": "^0.4.0",
+		"@valor/nativescript-websockets": "2.0.3",
+		"octane": "0.4.0"
+	},
+	"devDependencies": {
+		"@nativescript-community/vite-octane": "0.2.1",
+		"@nativescript/android": "9.1.1",
+		"@nativescript/ios": "9.1.0",
+		"@nativescript/types": "9.0.0",
+		"@nativescript/vite": "8.0.11",
+		"@octane-xplat/cli": "^0.4.0",
+		"@octane-xplat/lint": "^0.1.0",
+		"@octanejs/vite-plugin": "0.1.58",
+		"@tsrx/typescript-plugin": "0.4.7",
+		"oxlint": "^1.74.0",
+		"nativescript": "9.1.1",
+		"typescript": "5.9.3",
+		"vite": "8.3.0"
+	}
 }

package/template/patches/@nativescript-community__vite-octane@0.2.1.patch

@@ -0,0 +1,41 @@
+diff --git a/dist/server/strategy.js b/dist/server/strategy.js
+index 7d84b37e2ed3a026da5b31c8a11027e0580877b2..f6594a913ba64837135e994cb183add13c6a0530 100644
+--- a/dist/server/strategy.js
++++ b/dist/server/strategy.js
+@@ -14,7 +14,9 @@ import { purgeTransformCachesForHotUpdate, runHotUpdatePrologue, typescriptServe
+  * otherwise the re-fetch can be served from the previous save's transform and
+  * the screen ends up one save behind.
+  */
+-const SCRIPT_FILE_RE = /\.(?:[mc]?[jt]sx?)$/i;
++// `.tsrx` is Octane's component extension — without it the deferred delta is
++// never emitted and component edits silently never reach the device.
++const SCRIPT_FILE_RE = /\.(?:[mc]?[jt]sx?|tsrx)$/i;
+ export const octaneServerStrategy = {
+     ...typescriptServerStrategy,
+     flavor: 'octane',
+@@ -24,7 +26,7 @@ export const octaneServerStrategy = {
+         if (!state)
+             return;
+         const { root, metrics, emitSummary } = state;
+-        const { moduleGraph, verbose, sharedTransformRequest } = deps;
++        const { moduleGraph, verbose, sharedTransformRequest, wss, isSocketClientOpen } = deps;
+         const { file, server } = ctx;
+         if (!SCRIPT_FILE_RE.test(file)) {
+             emitSummary();
+@@ -71,6 +73,16 @@ export const octaneServerStrategy = {
+             const gm = moduleGraph.get(normalizedId);
+             if (gm)
+                 moduleGraph.emitDelta([gm], []);
++            // The ns:hmr-delta broadcast IS the update delivery for this flavor —
++            // count open sockets so the always-on summary reflects reality
++            // instead of reporting recipients=0 for a delivered update.
++            try {
++                wss?.clients?.forEach((client) => {
++                    if (isSocketClientOpen?.(client))
++                        metrics.recipients += 1;
++                });
++            }
++            catch { }
+         }
+         catch (e) {
+             if (verbose)