@octane-xplat/gif 0.1.0

package/dist/native/index.js

@@ -0,0 +1,36 @@
+import { defineUniversalComponent, registerElement, universalPlan, universalValue } from "@nativescript-community/octane";
+import { Img } from "@nativescript-community/ui-image";
+//#region src/AnimatedImage.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "animatedimage",
+	"props": {
+		"animatedImageView": true,
+		"autoPlayAnimations": true
+	},
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["src", 3],
+		["stretch", 4],
+		["width", 5],
+		["height", 6],
+		["accessibilityLabel", 7]
+	]
+});
+registerElement("animatedimage", Img);
+var AnimatedImage = defineUniversalComponent("nativescript", function AnimatedImage(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		props.className,
+		props.style,
+		props.src,
+		props.stretch ?? "aspectFit",
+		props.width,
+		props.height,
+		props.alt
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { AnimatedImage };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "6d4d5e50-5abb-4b45-9287-419436cba763",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/index.js

@@ -0,0 +1,38 @@
+import { __s, bag6, clone, setStyle, template } from "octane";
+import { bindSignalAttribute, enableSignalBindings, setPlainAttribute, setURLAttribute } from "octane/internal/client";
+//#region src/AnimatedImage.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<img/>");
+var OBJECT_FIT = {
+	none: "none",
+	fill: "fill",
+	aspectFit: "contain",
+	aspectFill: "cover"
+};
+var AnimatedImage = /* @__PURE__ */ __s(function AnimatedImage(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:42ec7ee7", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.className, "b:1b1f2715", "class");
+	{
+		const _v = {
+			objectFit: OBJECT_FIT[props.stretch ?? "aspectFit"],
+			width: props.width,
+			height: props.height,
+			...props.style
+		};
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "src", props.src, "b:3d7475fa", setURLAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "alt", props.alt, "b:3f7e4d1f", setPlainAttribute);
+});
+//#endregion
+export { AnimatedImage };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "bdcff4a8-56d9-4b9d-82b0-696a3d259344",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@octane-xplat/gif",
+  "version": "0.1.0",
+  "description": "Animated image (GIF/animated webp) leaf for Octane xplat — web <img> + @nativescript-community/ui-image",
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "web": "./dist/web/index.js",
+      "native": "./dist/native/index.js",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nativescript-community/ui-image": "4.6.20"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.1",
+    "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.60",
+    "octane": "0.5.0",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.1.51 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json"
+  }
+}

package/src/AnimatedImage.native.tsrx

@@ -0,0 +1,35 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane';
+import type { Attributes } from '@nativescript-community/octane/intrinsics';
+import { Img } from '@nativescript-community/ui-image';
+import type { AnimatedImageProps } from './props';
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		animatedimage: Attributes<typeof Img>;
+	}
+}
+
+// @nativescript-community/ui-image — Fresco DraweeView on Android,
+// SDAnimatedImageView on iOS when `animatedImageView` is set (plain UIImageView
+// otherwise, which would still decode but not animate).
+registerElement('animatedimage', Img);
+
+/** AnimatedImage — GIF/animated-webp decode + autoplay via ui-image. `src`
+ *  takes the Img grammar: remote URL, res://name, ~/bundle path, file path.
+ *  There is intentionally no play/pause prop — <img> can't pause on web, so
+ *  the shared contract is always-playing. */
+export function AnimatedImage(props: AnimatedImageProps) @{
+	<animatedimage
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		src={props.src}
+		stretch={props.stretch ?? 'aspectFit'}
+		width={props.width}
+		height={props.height}
+		animatedImageView={true}
+		autoPlayAnimations={true}
+		accessibilityLabel={props.alt}
+	/>
+}

package/src/AnimatedImage.web.tsrx

@@ -0,0 +1,25 @@
+import type { AnimatedImageProps } from './props';
+
+const OBJECT_FIT = {
+	none: 'none',
+	fill: 'fill',
+	aspectFit: 'contain',
+	aspectFill: 'cover',
+} as const;
+
+/** AnimatedImage — a plain <img>; browsers animate GIF/webp natively.
+ *  `stretch` maps to object-fit. */
+export function AnimatedImage(props: AnimatedImageProps) @{
+	<img
+		id={props.id}
+		className={props.className}
+		style={{
+			objectFit: OBJECT_FIT[props.stretch ?? 'aspectFit'],
+			width: props.width,
+			height: props.height,
+			...props.style,
+		}}
+		src={props.src}
+		alt={props.alt}
+	/>
+}

package/src/index.native.ts

@@ -0,0 +1,4 @@
+// Platform barrels — explicit .tsrx leaf imports (moduleSuffixes don't
+// reach .tsrx; same convention as @octane-xplat/ui index.*.ts).
+export { AnimatedImage } from './AnimatedImage.native.tsrx';
+export type { AnimatedImageProps } from './props';

package/src/index.web.ts

@@ -0,0 +1,4 @@
+// Platform barrels — explicit .tsrx leaf imports (moduleSuffixes don't
+// reach .tsrx; same convention as @octane-xplat/ui index.*.ts).
+export { AnimatedImage } from './AnimatedImage.web.tsrx';
+export type { AnimatedImageProps } from './props';

package/src/props.ts

@@ -0,0 +1,12 @@
+export interface AnimatedImageProps {
+	className?: any
+	style?: any
+	id?: string
+	src: string
+	alt?: string
+	/** Content fit — same grammar as core Image. Web maps to object-fit;
+	 *  ui-image (Fresco/SDWebImage) accepts the same values. */
+	stretch?: 'none' | 'fill' | 'aspectFit' | 'aspectFill'
+	width?: string | number
+	height?: string | number
+}

package/types/index.d.ts

@@ -0,0 +1,8 @@
+// Boundary types for @octane-xplat/gif — the mechanical wrapper over
+// props.ts (tsrx-tsc can't emit .tsrx declarations; see ui/types/index.d.ts
+// for the same pattern).
+import type { UniversalComponent } from 'octane/universal'
+import type { AnimatedImageProps } from './props'
+
+export declare const AnimatedImage: UniversalComponent<AnimatedImageProps>
+export type { AnimatedImageProps }

package/types/props.d.ts

@@ -0,0 +1,12 @@
+export interface AnimatedImageProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    src: string;
+    alt?: string;
+    /** Content fit — same grammar as core Image. Web maps to object-fit;
+     *  ui-image (Fresco/SDWebImage) accepts the same values. */
+    stretch?: 'none' | 'fill' | 'aspectFit' | 'aspectFill';
+    width?: string | number;
+    height?: string | number;
+}