feat: add native Octane diff view adapter

README.md

@@ -134,6 +134,7 @@ import { DiffView, DiffModeEnum } from "@git-diff-view/cli";
 - [`@git-diff-view/solid`](https://www.npmjs.com/package/@git-diff-view/solid) - Solid component
 - [`@git-diff-view/svelte`](https://www.npmjs.com/package/@git-diff-view/svelte) - Svelte component
 - [`@git-diff-view/lynx`](https://www.npmjs.com/package/@git-diff-view/lynx) - ReactLynx DiffView (wrap-first Split/Unified)
+- [`@git-diff-view/octane`](https://www.npmjs.com/package/@git-diff-view/octane) - Native Octane DiffView with client and SSR entries
 - [`@git-diff-view/cli`](https://www.npmjs.com/package/@git-diff-view/cli) - Terminal diff viewer (`DiffView`, `CodeView`, scroll API)
 
 **Core Libraries**

package.json

@@ -32,6 +32,7 @@
     "@git-diff-view/core": "workspace:*",
     "@git-diff-view/file": "workspace:*",
     "@git-diff-view/lynx": "workspace:*",
+    "@git-diff-view/octane": "workspace:*",
     "@git-diff-view/react": "workspace:*",
     "@git-diff-view/lezer": "workspace:*",
     "@git-diff-view/shiki": "workspace:*",
@@ -64,4 +65,4 @@
     "tslib": "catalog:",
     "typescript": "catalog:"
   }
-}
+}

packages/octane/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 MrWangJustToDo
+
+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.

packages/octane/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@git-diff-view/octane",
+  "description": "Octane components for rendering Git diffs",
+  "author": "MrWangJustToDo",
+  "license": "MIT",
+  "version": "0.1.7",
+  "type": "module",
+  "main": "./dist/server/index.js",
+  "module": "./dist/client/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "styles",
+    "LICENSE",
+    "readme.md"
+  ],
+  "scripts": {
+    "build": "vite build --mode npm-client && vite build --mode npm-server && pnpm run gen:css && pnpm run build:types && node ./scripts/check-built-package.mjs",
+    "build:types": "node ./scripts/generate-tsrx-types.mjs --out-dir dist/types && rollup -c ./scripts/rollup.dts.config.mjs",
+    "gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
+    "gen:css2": "postcss src/tailwind.css -o dist/css/diff-view-pure.css",
+    "gen:css": "pnpm run gen:css1 && pnpm run gen:css2",
+    "test": "pnpm run test:client && pnpm run test:ssr && pnpm run test:package",
+    "test:client": "vitest run --config vitest.config.ts",
+    "test:ssr": "vitest run --config vitest.ssr.config.ts",
+    "test:package": "node ./scripts/smoke-packed-package.mjs",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MrWangJustToDo/git-diff-view.git",
+    "directory": "packages/octane"
+  },
+  "homepage": "https://mrwangjusttodo.github.io/git-diff-view",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/client/index.js",
+      "node": "./dist/server/index.js",
+      "import": "./dist/client/index.js",
+      "default": "./dist/client/index.js"
+    },
+    "./styles/*": "./dist/css/*",
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "diff component",
+    "octane diff component"
+  ],
+  "dependencies": {
+    "@git-diff-view/core": "^0.1.7",
+    "@types/hast": "^3.0.0",
+    "fast-diff": "^1.3.0",
+    "highlight.js": "^11.11.0",
+    "lowlight": "^3.3.0",
+    "reactivity-store": "^0.4.0"
+  },
+  "peerDependencies": {
+    "octane": ">=0.1.36 <0.2.0"
+  },
+  "devDependencies": {
+    "@octanejs/testing-library": "^0.1.18",
+    "@tsrx/typescript-plugin": "^0.3.118",
+    "autoprefixer": "^10.4.27",
+    "jsdom": "^24.1.3",
+    "octane": "^0.1.36",
+    "postcss": "^8.5.8",
+    "rollup": "^4.50.0",
+    "rollup-plugin-dts": "^6.2.3",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.16",
+    "vitest": "^3.2.4"
+  }
+}

packages/octane/postcss.config.cjs

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { resolve } = require("path");
+
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: { config: resolve(__dirname) + "/tailwind.config.cjs" },
+    "postcss-prefix-selector": {
+      prefix: ".diff-tailwindcss-wrapper",
+      transform: function (prefix, selector, prefixedSelector, _filePath, rule) {
+        const filePath = rule.source?.input?.file;
+        if (filePath.includes("_base.css")) return prefixedSelector;
+        if (
+          selector.includes("diff-line-extend-wrapper") ||
+          selector.includes("diff-line-widget-wrapper") ||
+          selector.includes("diff-multiselect-wrapper") ||
+          selector.includes("diff-multi-selecting")
+        ) {
+          return selector;
+        }
+        if (selector.includes("[data-theme")) return prefix + selector;
+        if (filePath.includes("node_modules")) {
+          if (filePath.includes("dark.css")) {
+            return `${prefix}[data-theme="dark"] .diff-line-syntax-raw ${selector}`;
+          }
+          return `${prefix}[data-theme="light"] .diff-line-syntax-raw ${selector}`;
+        }
+        return prefixedSelector;
+      },
+    },
+    autoprefixer: {},
+  },
+};

packages/octane/readme.md

@@ -0,0 +1,151 @@
+# @git-diff-view/octane
+
+> A high-performance Octane diff view component with GitHub-style UI
+
+[![npm version](https://img.shields.io/npm/v/@git-diff-view/octane)](https://www.npmjs.com/package/@git-diff-view/octane)
+
+## Features
+
+- ✅ Split & Unified views
+- ✅ Syntax highlighting with full context
+- ✅ Light & Dark themes
+- ✅ Native Octane client and SSR builds
+- ✅ Widget & extend data system
+- ✅ High performance with Web Worker support
+
+## Installation
+
+```bash
+npm install @git-diff-view/octane octane
+# or
+pnpm add @git-diff-view/octane octane
+# or
+yarn add @git-diff-view/octane octane
+```
+
+## Quick Start
+
+### Basic Usage
+
+```tsrx
+import { DiffView, DiffModeEnum } from "@git-diff-view/octane";
+import "@git-diff-view/octane/styles/diff-view.css";
+
+function MyDiffView() {
+  return (
+    <DiffView
+      data={{
+        oldFile: { fileName: "old.ts", content: "..." },
+        newFile: { fileName: "new.ts", content: "..." },
+        hunks: ["..."]
+      }}
+      diffViewMode={DiffModeEnum.Split}
+      diffViewTheme="dark"
+      diffViewHighlight
+    />
+  );
+}
+```
+
+### Advanced Usage with DiffFile
+
+**File Comparison Mode**
+
+```tsrx
+import { DiffView } from "@git-diff-view/octane";
+import { DiffFile, generateDiffFile } from "@git-diff-view/file";
+import "@git-diff-view/octane/styles/diff-view.css";
+
+const file = generateDiffFile(
+  "old.ts", oldContent,
+  "new.ts", newContent,
+  "typescript", "typescript"
+);
+file.initTheme('dark');
+file.init();
+file.buildSplitDiffLines();
+
+<DiffView diffFile={file} />
+```
+
+**Git Diff Mode**
+
+```tsrx
+import { DiffView } from "@git-diff-view/octane";
+import { DiffFile } from "@git-diff-view/core";
+import "@git-diff-view/octane/styles/diff-view.css";
+
+const file = new DiffFile(
+  oldFileName,
+  oldContent,
+  newFileName,
+  newContent,
+  hunks,
+  oldFileLang,
+  newFileLang
+);
+file.initTheme('dark');
+file.init();
+file.buildSplitDiffLines();
+
+<DiffView diffFile={file} />
+```
+
+## Styling
+
+```tsrx
+// Default styles with Tailwind (next release will be pure CSS)
+import "@git-diff-view/octane/styles/diff-view.css";
+
+// Pure CSS (no Tailwind conflicts)
+import "@git-diff-view/octane/styles/diff-view-pure.css";
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `DiffData` | Diff data with `oldFile`, `newFile`, and `hunks` |
+| `diffFile` | `DiffFile` | Pre-processed diff file instance |
+| `diffViewMode` | `Split \| Unified` | View mode (default: `Split`) |
+| `diffViewTheme` | `light \| dark` | Theme (default: `light`) |
+| `diffViewHighlight` | `boolean` | Enable syntax highlighting |
+| `diffViewWrap` | `boolean` | Enable line wrapping |
+| `diffViewFontSize` | `number` | Font size in pixels |
+| `diffViewAddWidget` | `boolean` | Enable widget button |
+| `renderWidgetLine` | `(props) => OctaneNode` | Custom widget renderer |
+| `renderExtendLine` | `(props) => OctaneNode` | Custom extend data renderer |
+| `extendData` | `ExtendData` | Additional data per line |
+| `onAddWidgetClick` | `(lineNumber, side) => void` | Widget button click handler |
+
+### DiffData Type
+
+```typescript
+type DiffData = {
+  oldFile?: {
+    fileName?: string | null;
+    fileLang?: string | null;
+    content?: string | null;
+  };
+  newFile?: {
+    fileName?: string | null;
+    fileLang?: string | null;
+    content?: string | null;
+  };
+  hunks: string[];
+};
+```
+
+## Compatibility
+
+The public `DiffView` and `DiffViewWithMultiSelect` surface mirrors `@git-diff-view/react` 0.1.7. Components use Octane refs-as-props, native browser events, and precompiled browser/server exports; no React runtime is required.
+
+## Live Demo
+
+Try it online: [https://mrwangjusttodo.github.io/git-diff-view](https://mrwangjusttodo.github.io/git-diff-view)
+
+## License
+
+MIT © [MrWangJustToDo](https://github.com/MrWangJustToDo)

packages/octane/scripts/check-built-package.mjs

@@ -0,0 +1,89 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+
+const packageRoot = resolve(import.meta.dirname, "..");
+const distRoot = join(packageRoot, "dist");
+const expected = [
+  "dist/client/index.js",
+  "dist/server/index.js",
+  "dist/index.d.ts",
+  "dist/css/diff-view.css",
+  "dist/css/diff-view-pure.css",
+];
+
+function filesUnder(directory) {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const file = join(directory, entry.name);
+    return entry.isDirectory() ? filesUnder(file) : [file];
+  });
+}
+
+const missing = expected.filter((file) => !existsSync(join(packageRoot, file)));
+if (missing.length > 0) {
+  throw new Error(`@git-diff-view/octane build omitted:\n${missing.map((file) => `  ${file}`).join("\n")}`);
+}
+
+for (const file of filesUnder(distRoot)) {
+  const packagePath = relative(packageRoot, file);
+  if (/\.(?:ts|tsx|tsrx)$/.test(file) && !file.endsWith(".d.ts")) {
+    throw new Error(`Raw TypeScript leaked into the package: ${packagePath}`);
+  }
+  if (!file.endsWith(".js")) continue;
+
+  const source = readFileSync(file, "utf8");
+  if (/(?:from\s*|import\s*\()["'](?:react|react-dom|use-sync-external-store)(?:\/[^"']*)?["']/.test(source)) {
+    throw new Error(`React runtime import leaked into ${packagePath}`);
+  }
+  if (!source.startsWith("// octane-no-slot:")) {
+    throw new Error(`Precompiled marker is missing from ${packagePath}`);
+  }
+  if (packagePath.startsWith("dist/server/") && /from\s*["']octane["']/.test(source)) {
+    throw new Error(`Server output retained a client Octane runtime import: ${packagePath}`);
+  }
+}
+
+for (const environment of ["client", "server"]) {
+  const entry = readFileSync(join(distRoot, environment, "index.js"), "utf8");
+  if (!/\bDiffView\b/.test(entry) || !/\bexport\s*\{/.test(entry)) {
+    throw new Error(`${environment} entry does not expose DiffView.`);
+  }
+}
+
+const declarationEntry = readFileSync(join(distRoot, "index.d.ts"), "utf8");
+if (/from\s+["']@git-diff-view\/utils(?:\/[^"']*)?["']/.test(declarationEntry)) {
+  throw new Error("Published declarations retained the private @git-diff-view/utils workspace import.");
+}
+
+const clientEntry = readFileSync(join(distRoot, "client/index.js"), "utf8");
+const compiledHookRegions = [
+  "src/hooks/useCallbackRef.ts",
+  "src/hooks/useDomWidth.ts",
+  "src/hooks/useUnmount.ts",
+  "src/hooks/useUpdateEffect.ts",
+];
+
+for (const sourcePath of compiledHookRegions) {
+  const start = clientEntry.indexOf(`//#region ${sourcePath}`);
+  const end = clientEntry.indexOf("//#endregion", start);
+  const region = start >= 0 && end > start ? clientEntry.slice(start, end) : "";
+  if (!region.includes("hookSlots(") || !region.includes("_h$")) {
+    throw new Error(`${sourcePath} lost compiler-assigned internal hook slots.`);
+  }
+}
+
+for (const hook of [
+  "useCallbackRef",
+  "useDiffViewContext",
+  "useDiffWidgetContext",
+  "useDomWidth",
+  "useUnmount",
+  "useUpdateEffect",
+]) {
+  if (!new RegExp(`withSlot\\([^\\n;]*\\b${hook}\\b`).test(clientEntry)) {
+    throw new Error(`${hook} lost its compiler-assigned call-site scope.`);
+  }
+}
+
+console.log(
+  "@git-diff-view/octane dist contains scoped hooks, client/server entries, declarations, styles, and no React runtime."
+);