feat: add plugin-based file rendering system with 3D file preview support

Author: kerwin612

package-lock.json

@@ -39,6 +39,7 @@
     "minimatch": "10.0.2",
     "monaco-editor": "0.52.2",
     "monaco-editor-webpack-plugin": "7.1.0",
+    "online-3d-viewer": "0.16.0",
     "pdfobject": "2.3.1",
     "perfect-debounce": "1.0.0",
     "postcss": "8.5.5",

package.json

@@ -110,7 +110,7 @@
 					{{else if .IsPDFFile}}
 						<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
 					{{else}}
-						<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
+						<div class="file-view-container" data-global-init="initFileView" data-filename="{{.TreePath}}" data-url="{{$.RawFileLink}}" data-fallback-text="{{ctx.Locale.Tr "repo.file_view_raw"}}"></div>
 					{{end}}
 				</div>
 			{{else if .FileSize}}

templates/repo/view_file.tmpl

@@ -0,0 +1,71 @@
+/**
+ * File View & Render Plugin Styles
+ */
+
+/* file view container */
+.file-view-container {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-view-container.is-loading {
+  position: relative;
+}
+
+.file-view-container.is-loading::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  border: 5px solid var(--color-secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.view-raw-fallback {
+  padding: 16px;
+  text-align: center;
+}
+
+/* 3D model viewer */
+.model3d-content {
+  width: 100% !important;
+  min-height: 400px !important;
+  border: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* error message */
+.file-view-container .ui.error.message {
+  margin: 1em 0;
+  width: 100%;
+}
+
+.file-view-container .ui.error.message pre {
+  margin-top: 0.5em;
+  font-size: 12px;
+  max-height: 150px;
+  overflow: auto;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0.5em;
+}

web_src/css/file-view.css

@@ -85,4 +85,6 @@
 
 @import "./helpers.css";
 
+@import "./file-view.css";
+
 @tailwind utilities;

web_src/css/index.css

@@ -0,0 +1,59 @@
+import {applyRenderPlugin} from '../modules/file-render-plugin.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+
+/**
+ * init file view renderer
+ *
+ * detect renderable files and apply appropriate plugins
+ */
+export function initFileView(): void {
+  // register file view renderer init function
+  registerGlobalInitFunc('initFileView', async (container: HTMLElement) => {
+    // get file info
+    const filename = container.getAttribute('data-filename');
+    const fileUrl = container.getAttribute('data-url');
+
+    // mark loading state
+    container.classList.add('is-loading');
+
+    try {
+      // check if filename and url exist
+      if (!filename || !fileUrl) {
+        console.error(`missing filename(${filename}) or file url(${fileUrl}) for rendering`);
+        throw new Error('missing necessary file info');
+      }
+
+      // try to apply render plugin
+      const success = await applyRenderPlugin(container);
+
+      // if no suitable plugin is found, show default view
+      if (!success) {
+        // show default view raw file link
+        const fallbackText = container.getAttribute('data-fallback-text') || 'View Raw File';
+
+        container.innerHTML = `
+          <div class="view-raw-fallback">
+            <a href="${fileUrl}" class="ui basic button" target="_blank">${fallbackText}</a>
+          </div>
+        `;
+      }
+    } catch (error) {
+      console.error('file view init error:', error);
+
+      // show error message
+      const fallbackText = container.getAttribute('data-fallback-text') || 'View Raw File';
+
+      container.innerHTML = `
+        <div class="ui error message">
+          <div class="header">Failed to render file</div>
+          <p>Error: ${String(error)}</p>
+          <pre>${JSON.stringify({filename, fileUrl}, null, 2)}</pre>
+          <a class="ui basic button" href="${fileUrl || '#'}" target="_blank">${fallbackText}</a>
+        </div>
+      `;
+    } finally {
+      // remove loading state
+      container.classList.remove('is-loading');
+    }
+  });
+}

web_src/js/features/file-view.ts

@@ -20,6 +20,8 @@ import {initStopwatch} from './features/stopwatch.ts';
 import {initFindFileInRepo} from './features/repo-findfile.ts';
 import {initMarkupContent} from './markup/content.ts';
 import {initPdfViewer} from './render/pdf.ts';
+import {initFileView} from './features/file-view.ts';
+import {register3DViewerPlugin} from './render/plugins/3d-viewer.ts';
 import {initUserAuthOauth2, initUserCheckAppUrl} from './features/user-auth.ts';
 import {initRepoPullRequestAllowMaintainerEdit, initRepoPullRequestReview, initRepoIssueSidebarDependency, initRepoIssueFilterItemLabel} from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
@@ -163,6 +165,9 @@ onDomReady(() => {
     initColorPickers,
 
     initOAuth2SettingsDisableCheckbox,
+
+    initFileView,
+    register3DViewerPlugin,
   ]);
 
   // it must be the last one, then the "querySelectorAll" only needs to be executed once for global init functions.

web_src/js/index.ts

@@ -0,0 +1,69 @@
+/**
+ * File Render Plugin System
+ *
+ * This module provides a plugin architecture for rendering different file types
+ * in the browser without requiring backend support for identifying file types.
+ */
+
+/**
+ * Interface for file render plugins
+ */
+export type FileRenderPlugin = {
+  // unique plugin name
+  name: string;
+
+  // test if plugin can handle specified file
+  canHandle: (filename: string, mimeType: string) => boolean;
+
+  // render file content
+  render: (container: HTMLElement, fileUrl: string, options?: any) => Promise<void>;
+}
+
+// store registered render plugins
+const plugins: FileRenderPlugin[] = [];
+
+/**
+ * register a file render plugin
+ */
+export function registerFileRenderPlugin(plugin: FileRenderPlugin): void {
+  plugins.push(plugin);
+}
+
+/**
+ * find suitable render plugin by filename and mime type
+ */
+function findPlugin(filename: string, mimeType: string): FileRenderPlugin | null {
+  return plugins.find((plugin) => plugin.canHandle(filename, mimeType)) || null;
+}
+
+/**
+ * apply render plugin to specified container
+ */
+export async function applyRenderPlugin(container: HTMLElement): Promise<boolean> {
+  try {
+    // get file info from container element
+    const filename = container.getAttribute('data-filename') || '';
+    const fileUrl = container.getAttribute('data-url') || '';
+
+    if (!filename || !fileUrl) {
+      console.warn('Missing filename or file URL for renderer');
+      return false;
+    }
+
+    // get mime type (optional)
+    const mimeType = container.getAttribute('data-mime-type') || '';
+
+    // find plugin that can handle this file
+    const plugin = findPlugin(filename, mimeType);
+    if (!plugin) {
+      return false;
+    }
+
+    // apply plugin to render file
+    await plugin.render(container, fileUrl);
+    return true;
+  } catch (error) {
+    console.error('Error applying render plugin:', error);
+    return false;
+  }
+}