/** @jsxImportSource https://esm.sh/react@18.2.0 */ import Prism from "https://esm.sh/prismjs@1.29.0?no-check"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; import "https://esm.sh/prismjs@1.29.0/components/prism-python?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-lua?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-go?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-swift?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-bash?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-markdown?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-applescript?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-json?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-typescript?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-jsx?no-check"; import "https://esm.sh/prismjs@1.29.0/components/prism-tsx?no-check"; // CSS styles for the application, including dark mode and updated chip styles const css = ` :root { --background-color: #1e1e1e; --text-color: #e0e0e0; --primary-color: #007acc; --secondary-color: #3a3a3a; --border-color: #444444; --chip-bg-color: #5d6489; --chip-text-color: #080a16; --chip-active-bg-color: #007acc; --chip-active-text-color: #ffffff; } body { background-color: var(--background-color); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } .dropzone { border: 2px dashed var(--border-color); border-radius: 20px; width: 100%; margin: 20px 0; padding: 20px; text-align: center; background-color: var(--secondary-color); cursor: pointer; } .dropzone:hover { background-color: #4a4a4a; } .tabs { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; padding: 4px 12px; background-color: var(--chip-bg-color); color: var(--chip-text-color); border-radius: 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: none; outline: none; } .chip:hover { background-color: #d4e9ff; } .chip.active { background-color: var(--chip-active-bg-color); color: var(--chip-active-text-color); } .chip-close { margin-left: 8px; font-size: 18px; line-height: 1; color: inherit; background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; transition: background-color 0.3s ease; } .chip-close:hover { background-color: rgba(0, 0, 0, 0.1); } .file-content { margin-top: 20px; background-color: var(--secondary-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 10px; } pre { white-space: pre-wrap; word-wrap: break-word; background-color: #2d2d2d; border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; max-height: 400px; overflow-y: auto; } button { background-color: var(--primary-color); color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; } button:hover { background-color: #005999; } table { width: 100%; border-collapse: collapse; margin-top: 10px; } th, td { border: 1px solid var(--border-color); padding: 8px; text-align: left; } th { background-color: var(--secondary-color); } `; // HTML template for the server response const htmlTemplate = ` File Drag and Drop Viewer (Dark Mode)

`; /** * Chip component for file tabs */ const Chip = ({ children, active, onClick, onRemove }) => { return ( ); }; /** * Main App component that handles file viewing and management */ function App() { const [files, setFiles] = useState([]); const [activeTab, setActiveTab] = useState("all"); const textAreaRef = useRef(null); /** * Recursively processes files and folders * @param {FileSystemEntry} entry - The file system entry * @param {string} path - The current path of the entry * @returns {Promise<{name: string, content: string} | null>} */ const processEntry = async (entry, path = "") => { if (entry.isFile) { return new Promise((resolve) => { entry.file(async (file) => { const content = await file.text(); resolve({ name: `${path}${file.name}`, content }); }); }); } else if (entry.isDirectory) { const dirReader = entry.createReader(); return new Promise((resolve) => { dirReader.readEntries(async (entries) => { const filePromises = entries.map(subEntry => processEntry(subEntry, `${path}${entry.name}/`)); const files = await Promise.all(filePromises); resolve(files.flat().filter(Boolean)); }); }); } return null; }; /** * Handles file drop event * @param {React.DragEvent} e - The drag event */ const onDrop = useCallback(async (e) => { e.preventDefault(); const items = e.dataTransfer.items; const filePromises = []; for (let i = 0; i < items.length; i++) { const item = items[i].webkitGetAsEntry(); if (item) { filePromises.push(processEntry(item)); } } const newFiles = (await Promise.all(filePromises)).flat().filter(Boolean); const filteredFiles = newFiles.filter(file => { const extension = file.name.split(".").pop().toLowerCase(); return !["db", "lock"].includes(extension); }); setFiles(prevFiles => [...prevFiles, ...filteredFiles]); }, []); /** * Prevents default behavior for drag events * @param {React.DragEvent} e - The drag event */ const preventDefault = (e) => e.preventDefault(); /** * Formats the content of all files * @returns {string} Formatted content of all files */ const getFormattedContent = () => { return files.map(file => `${file.name}\n"""\n${file.content}\n"""\n`).join("\n"); }; /** * Copies all file contents to clipboard */ const copyFiles = () => { const formattedContent = getFormattedContent(); if (textAreaRef.current) { textAreaRef.current.value = formattedContent; textAreaRef.current.select(); document.execCommand("copy"); } }; /** * Removes a file from the list * @param {number} index - The index of the file to remove */ const removeFile = (index) => { setFiles(prevFiles => prevFiles.filter((_, i) => i !== index)); if (activeTab === index) { setActiveTab("all"); } else if (activeTab > index) { setActiveTab(prevTab => prevTab - 1); } }; /** * Highlights code syntax after component updates */ useEffect(() => { Prism.highlightAll(); }, [activeTab, files]); /** * Determines the language for syntax highlighting based on file extension * @param {string} filename - The name of the file * @returns {string} The language for syntax highlighting */ const getLanguage = (filename) => { const extension = filename.split(".").pop().toLowerCase(); switch (extension) { case "js": return "javascript"; case "jsx": return "jsx"; case "ts": return "typescript"; case "tsx": return "tsx"; case "css": return "css"; case "html": return "markup"; case "py": return "python"; case "lua": return "lua"; case "go": return "go"; case "swift": return "swift"; case "sh": case "bash": return "bash"; case "md": case "markdown": return "markdown"; case "applescript": case "scpt": return "applescript"; case "json": return "json"; case "csv": return "csv"; default: return "plaintext"; } }; /** * Renders CSV content as a table * @param {string} content - The CSV content * @returns {JSX.Element} The rendered table */ const renderCSV = (content) => { const rows = content.trim().split("\n").map(row => row.split(",")); const headers = rows[0]; const data = rows.slice(1); return ( {headers.map((header, index) => )} {data.map((row, rowIndex) => ( {row.map((cell, cellIndex) => )} ))}

{header}
{cell}

); }; /** * Renders the content of the active tab * @returns {JSX.Element} The rendered content */ const renderContent = () => { if (activeTab === "all") { return (

          
            {getFormattedContent()}

); } else { const file = files[activeTab]; const language = getLanguage(file.name); if (language === "csv") { return ( <>

{file.name}

{renderCSV(file.content)} ); } else { return ( <>

{file.name}

              
                {file.content}

); } } }; return (

File Viewer (Multiple Languages)

Drag and drop files or folders here

{files.length > 0 && ( <>

          <div className="tabs">
            <Chip
              active={activeTab === "all"}
              onClick={() => setActiveTab("all")}
              onRemove={() => {}}
            >
              All Files
            </Chip>
            {files.map((file, index) => (
              <Chip
                key={index}
                active={index === activeTab}
                onClick={() => setActiveTab(index)}
                onRemove={() => removeFile(index)}
              >
                {file.name}
              </Chip>
            ))}
          </div>
          <div className="file-content">
            {renderContent()}
          </div>
        </>
      )}
    </div>
  );
}

/**
 * Initializes the React app on the client side
 */
function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

/**
 * Handles server-side rendering and returns the initial HTML response
 * @param {Request} request - The incoming request object
 * @returns {Promise<Response>} The HTML response
 */
export default async function server(request: Request): Promise<Response> {
  return new Response(
    htmlTemplate,
    {
      headers: {
        "content-type": "text/html",
      },
    },
  );
}</article></body></html>

FileViewer

Version 1