@octanejs/content-loader 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Julian Ćwirko <julian.io>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# @octanejs/content-loader
+
+Octane binding for
+[`react-content-loader@7.1.2`](https://github.com/danilowoz/react-content-loader).
+
+```tsrx
+import ContentLoader, { Code } from '@octanejs/content-loader';
+
+export function LoadingArticle() @{
+	<ContentLoader width={400} height={120} viewBox="0 0 400 120">
+		<rect x="0" y="0" width="320" height="18" rx="3" />
+		<rect x="0" y="34" width="400" height="12" rx="3" />
+	</ContentLoader>
+}
+
+export function LoadingCode() @{
+	<Code />
+}
+```
+
+The default export and the `Facebook`, `Instagram`, `Code`, `List`, and
+`BulletList` presets target web SVG. The upstream `./native` entry is not
+available because Octane has no React Native renderer.
+
+See [UPSTREAM.md](./UPSTREAM.md) for the pin and test disposition.

package/UPSTREAM.md

@@ -0,0 +1,69 @@
+# Upstream provenance
+
+`@octanejs/content-loader` is pinned to `react-content-loader@7.1.2`.
+
+- repository: https://github.com/danilowoz/react-content-loader
+- tag commit: `c8a6b6c6669d7e663f9d7e1efecec08e876b0e5d`
+- advertised range: `7.1.x`
+- license: MIT
+- npm integrity: `sha512-naFG7OERUQNPKQt1QWHyBF0/y6Zmr7dOzqjs1U5yOnu4OZmcE3+b/blp40dEKa9lvYAzOuj5dvfTK1cg5YWJkA==`
+- npm shasum: `ca2c2e2f28cafc9595a7c39f30153561e65586e7`
+
+Git `package.json` at this SHA still says `6.2.1`; npm published `7.1.2`
+from that commit.
+
+## Source boundary
+
+- `upstream/src/` is the canonical web and native source with its Jest tests.
+- `upstream/npm/` is the published tarball.
+- Octane `src/web/` mirrors `upstream/src/web/`.
+
+Vendored evidence is development-only and excluded from package `files`.
+
+## Export crosswalk
+
+| Upstream export | Octane status | Evidence / divergence |
+| --- | --- | --- |
+| default `ContentLoader` | Ported | `src/web/ContentLoader.tsrx`; `tests/content-loader.test.ts` |
+| `Facebook` | Ported | `src/web/presets/FacebookStyle.tsrx`; complete SVG DOM and shape-count assertions |
+| `Instagram` | Ported | `src/web/presets/InstagramStyle.tsrx`; complete SVG DOM and shape-count assertions |
+| `Code` | Ported | `src/web/presets/CodeStyle.tsrx`; complete SVG DOM and shape-count assertions |
+| `List` | Ported | `src/web/presets/ListStyle.tsrx`; complete SVG DOM and shape-count assertions |
+| `BulletList` | Ported | `src/web/presets/BulletListStyle.tsrx`; complete SVG DOM and shape-count assertions |
+| `IContentLoaderProps` | Ported | Octane SVG intrinsic props plus `OctaneNode` for `beforeMask` |
+| `./native` | Explicit gap | Requires React Native and `react-native-svg`; Octane has no React Native renderer |
+
+## Upstream test disposition
+
+All web cases below are adapted in `tests/content-loader.test.ts`. Assertions
+formerly tied to `react-test-renderer`, its shallow renderer, or snapshots
+observe the mounted SVG DOM and retain the upstream numeric and prop
+expectations.
+
+| Upstream artifact | Disposition |
+| --- | --- |
+| `src/web/__tests__/Svg.test.tsx` | Adapted case-for-case |
+| `src/web/__tests__/ContentLoader.test.tsx` | Adapted case-for-case; renderer swapped to mounted DOM |
+| `src/web/__tests__/index.test.tsx` | Adapted case-for-case |
+| `src/web/__tests__/uid.test.tsx` | Adapted case-for-case |
+| `src/web/__tests__/snapshots.test.tsx` | Adapted case-for-case as complete observable SVG markup |
+| `src/web/__tests__/presets/FacebookStyle.test.tsx` | Adapted case-for-case |
+| `src/web/__tests__/presets/InstagramStyle.test.tsx` | Adapted case-for-case |
+| `src/web/__tests__/presets/CodeStyle.test.tsx` | Adapted case-for-case |
+| `src/web/__tests__/presets/ListStyle.test.tsx` | Adapted case-for-case |
+| `src/web/__tests__/presets/BulletListStyle.test.tsx` | Adapted case-for-case |
+| Web snapshot files | Replaced by exact assertions over observable SVG markup; no case dropped |
+| `src/native/__tests__/**` and native snapshots | Out of scope with the explicit `./native` renderer gap |
+
+## Intentional divergences
+
+- `beforeMask` is typed as `OctaneNode`, and only valid Octane element
+  descriptors are inserted, matching the upstream runtime guard.
+- `useId` has Octane's opaque identifier format. Relationships and uniqueness,
+  rather than identifier spelling, are the public contract.
+- Octane serializes SVG/CSS `url()` functions with quotes (`url("#id")`)
+  while React's test renderer reports the unquoted form (`url(#id)`). Tests
+  compare the unquoted uniqueKey/baseUrl relationship.
+- Octane inserts empty comment holes between children. Snapshots compare the
+  public SVG tree after those markers are stripped.
+- The React Native `./native` entry is not published.

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@octanejs/content-loader",
+  "version": "0.0.1",
+  "description": "Octane binding for react-content-loader 7.1.2 (web). Native/React Native is an explicit gap.",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/content-loader"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "UPSTREAM.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "octane": "0.1.45"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.10",
+    "@octanejs/testing-library": "0.1.42",
+    "octane": "0.1.45"
+  },
+  "scripts": {
+    "test": "vitest run --root ../.. --config vitest.config.js --project content-loader",
+    "typecheck": "tsrx-tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default, Facebook, Instagram, Code, List, BulletList } from './web/index.ts';
+export type { IContentLoaderProps } from './web/types.ts';

package/src/shared/uid.ts

@@ -0,0 +1,3 @@
+export default function uid(): string {
+	return Math.random().toString(36).substring(6);
+}

package/src/web/ContentLoader.tsrx

@@ -0,0 +1,8 @@
+import type { OctaneNode } from 'octane';
+import type { IContentLoaderProps } from './types';
+import Facebook from './presets/FacebookStyle.tsrx';
+import Svg from './Svg.tsrx';
+
+export default function ContentLoader(props: IContentLoaderProps): OctaneNode {
+	return props.children ? <Svg {...props} /> : <Facebook {...props} />;
+}

package/src/web/Svg.tsrx

@@ -0,0 +1,65 @@
+import { isValidElement, useId, type OctaneNode } from 'octane';
+import type { IContentLoaderProps } from './types';
+
+export default function Svg({
+	animate = true,
+	backgroundColor = '#f5f6f7',
+	backgroundOpacity = 1,
+	baseUrl = '',
+	children,
+	foregroundColor = '#eee',
+	foregroundOpacity = 1,
+	gradientRatio = 2,
+	uniqueKey,
+	rtl = false,
+	speed = 1.2,
+	style = {},
+	title = 'Loading...',
+	beforeMask = null,
+	...props
+}: IContentLoaderProps): OctaneNode {
+	let fixedId = useId();
+	if (uniqueKey) {
+		fixedId = uniqueKey;
+	}
+	const idClip = `${fixedId}-diff`;
+	const idGradient = `${fixedId}-animated-diff`;
+	const idAria = `${fixedId}-aria`;
+
+	const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : {};
+	const dur = `${speed}s`;
+
+	const from = `${gradientRatio * -1} 0`;
+	const to = `${gradientRatio} 0`;
+
+	return <svg aria-labelledby={idAria} role="img" style={{ ...style, ...rtlStyle }} {...props}>
+		{title ? <title id={idAria}>{title as string}</title> : null}
+		{beforeMask && isValidElement(beforeMask) ? beforeMask : null}
+		<rect
+			role="presentation"
+			x="0"
+			y="0"
+			width="100%"
+			height="100%"
+			clipPath={`url(${baseUrl}#${idClip})`}
+			style={{ fill: `url(${baseUrl}#${idGradient})` }}
+		/>
+		<defs>
+			<clipPath id={idClip}>{children}</clipPath>
+			<linearGradient id={idGradient} gradientTransform={`translate(${from})`}>
+				<stop offset="0%" stopColor={backgroundColor} stopOpacity={backgroundOpacity} />
+				<stop offset="50%" stopColor={foregroundColor} stopOpacity={foregroundOpacity} />
+				<stop offset="100%" stopColor={backgroundColor} stopOpacity={backgroundOpacity} />
+				{animate
+					? <animateTransform
+							attributeName="gradientTransform"
+							type="translate"
+							values={`${from}; 0 0; ${to}`}
+							dur={dur}
+							repeatCount="indefinite"
+						/>
+					: null}
+			</linearGradient>
+		</defs>
+	</svg>;
+}

package/src/web/index.ts

@@ -0,0 +1,12 @@
+import ContentLoader from './ContentLoader.tsrx';
+import type { IContentLoaderProps } from './types';
+
+export type { IContentLoaderProps };
+
+export { default as Facebook } from './presets/FacebookStyle.tsrx';
+export { default as Instagram } from './presets/InstagramStyle.tsrx';
+export { default as Code } from './presets/CodeStyle.tsrx';
+export { default as List } from './presets/ListStyle.tsrx';
+export { default as BulletList } from './presets/BulletListStyle.tsrx';
+
+export default ContentLoader;

package/src/web/presets/BulletListStyle.tsrx

@@ -0,0 +1,16 @@
+import type { OctaneNode } from 'octane';
+import ContentLoader from '../ContentLoader.tsrx';
+import type { IContentLoaderProps } from '../types';
+
+export default function BulletList(props: IContentLoaderProps): OctaneNode {
+	return <ContentLoader viewBox="0 0 245 125" {...props}>
+		<circle cx="10" cy="20" r="8" />
+		<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
+		<circle cx="10" cy="50" r="8" />
+		<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
+		<circle cx="10" cy="80" r="8" />
+		<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
+		<circle cx="10" cy="110" r="8" />
+		<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
+	</ContentLoader>;
+}

package/src/web/presets/CodeStyle.tsrx

@@ -0,0 +1,16 @@
+import type { OctaneNode } from 'octane';
+import type { IContentLoaderProps } from '../types';
+import ContentLoader from '../ContentLoader.tsrx';
+
+export default function Code(props: IContentLoaderProps): OctaneNode {
+	return <ContentLoader viewBox="0 0 340 84" {...props}>
+		<rect x="0" y="0" width="67" height="11" rx="3" />
+		<rect x="76" y="0" width="140" height="11" rx="3" />
+		<rect x="127" y="48" width="53" height="11" rx="3" />
+		<rect x="187" y="48" width="72" height="11" rx="3" />
+		<rect x="18" y="48" width="100" height="11" rx="3" />
+		<rect x="0" y="71" width="37" height="11" rx="3" />
+		<rect x="18" y="23" width="140" height="11" rx="3" />
+		<rect x="166" y="23" width="173" height="11" rx="3" />
+	</ContentLoader>;
+}

package/src/web/presets/FacebookStyle.tsrx

@@ -0,0 +1,14 @@
+import type { OctaneNode } from 'octane';
+import type { IContentLoaderProps } from '../types';
+import ContentLoader from '../ContentLoader.tsrx';
+
+export default function Facebook(props: IContentLoaderProps): OctaneNode {
+	return <ContentLoader viewBox="0 0 476 124" {...props}>
+		<rect x="48" y="8" width="88" height="6" rx="3" />
+		<rect x="48" y="26" width="52" height="6" rx="3" />
+		<rect x="0" y="56" width="410" height="6" rx="3" />
+		<rect x="0" y="72" width="380" height="6" rx="3" />
+		<rect x="0" y="88" width="178" height="6" rx="3" />
+		<circle cx="20" cy="20" r="20" />
+	</ContentLoader>;
+}

package/src/web/presets/InstagramStyle.tsrx

@@ -0,0 +1,12 @@
+import type { OctaneNode } from 'octane';
+import type { IContentLoaderProps } from '../types';
+import ContentLoader from '../ContentLoader.tsrx';
+
+export default function Instagram(props: IContentLoaderProps): OctaneNode {
+	return <ContentLoader viewBox="0 0 400 460" {...props}>
+		<circle cx="31" cy="31" r="15" />
+		<rect x="58" y="18" rx="2" ry="2" width="140" height="10" />
+		<rect x="58" y="34" rx="2" ry="2" width="140" height="10" />
+		<rect x="0" y="60" rx="2" ry="2" width="400" height="400" />
+	</ContentLoader>;
+}

package/src/web/presets/ListStyle.tsrx

@@ -0,0 +1,14 @@
+import type { OctaneNode } from 'octane';
+import type { IContentLoaderProps } from '../types';
+import ContentLoader from '../ContentLoader.tsrx';
+
+export default function List(props: IContentLoaderProps): OctaneNode {
+	return <ContentLoader viewBox="0 0 400 110" {...props}>
+		<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
+		<rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
+		<rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
+		<rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
+		<rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
+		<rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
+	</ContentLoader>;
+}

package/src/web/types.ts

@@ -0,0 +1,22 @@
+import type { OctaneNode } from 'octane';
+import type { JSX } from 'octane/jsx-runtime';
+
+export interface IContentLoaderProps extends Omit<
+	JSX.IntrinsicElements['svg'],
+	'children' | 'title' | 'style'
+> {
+	animate?: boolean;
+	backgroundColor?: string;
+	backgroundOpacity?: number;
+	baseUrl?: string;
+	foregroundColor?: string;
+	foregroundOpacity?: number;
+	gradientRatio?: number;
+	rtl?: boolean;
+	speed?: number;
+	title?: string;
+	uniqueKey?: string;
+	beforeMask?: OctaneNode;
+	children?: OctaneNode;
+	style?: Record<string, string | number>;
+}