├── static
    ├── favicon.ico
    ├── eszip_wasm_bg.wasm
    ├── global.css
    └── logo.svg
├── .vscode
    ├── extensions.json
    └── settings.json
├── twind.config.ts
├── dev.ts
├── README.md
├── deno.json
├── components
    └── Button.tsx
├── routes
    └── index.tsx
├── main.ts
├── fresh.gen.ts
├── import_map.json
└── islands
    └── EszipTool.tsx


/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denoland/eszip_viewer/main/static/favicon.ico


--------------------------------------------------------------------------------
/static/eszip_wasm_bg.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/denoland/eszip_viewer/main/static/eszip_wasm_bg.wasm


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "denoland.vscode-deno",
4 |     "sastan.twind-intellisense"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "deno.enable": true,
3 |   "deno.lint": true,
4 |   "editor.defaultFormatter": "denoland.vscode-deno"
5 | }
6 | 


--------------------------------------------------------------------------------
/twind.config.ts:
--------------------------------------------------------------------------------
1 | import { Options } from "$fresh/plugins/twind.ts";
2 | 
3 | export default {
4 |   selfURL: import.meta.url,
5 | } as Options;
6 | 


--------------------------------------------------------------------------------
/dev.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env -S deno run -A --watch=static/,routes/
2 | 
3 | import dev from "$fresh/dev.ts";
4 | 
5 | await dev(import.meta.url, "./main.ts");
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # fresh project
 2 | 
 3 | ### Usage
 4 | 
 5 | Start the project:
 6 | 
 7 | ```
 8 | deno task start
 9 | ```
10 | 
11 | This will watch the project directory and restart as necessary.
12 | 


--------------------------------------------------------------------------------
/deno.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tasks": {
 3 |     "start": "deno run -A --watch=static/,routes/ dev.ts"
 4 |   },
 5 |   "importMap": "./import_map.json",
 6 |   "compilerOptions": {
 7 |     "jsx": "react-jsx",
 8 |     "jsxImportSource": "preact"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/static/global.css:
--------------------------------------------------------------------------------
 1 | pre {
 2 |   counter-reset: line;
 3 | }
 4 | 
 5 | pre span {
 6 |   display: block;
 7 |   line-height: 1.5rem;
 8 | }
 9 | 
10 | pre span:before {
11 |   counter-increment: line;
12 |   content: counter(line);
13 |   display: inline-block;
14 |   padding-right: .5em;
15 |   margin-right: .5em;
16 |   color: #BBB;
17 | }
18 | 


--------------------------------------------------------------------------------
/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import { JSX } from "preact";
 2 | import { IS_BROWSER } from "$fresh/runtime.ts";
 3 | 
 4 | export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
 5 |   return (
 6 |     <button
 7 |       {...props}
 8 |       disabled={!IS_BROWSER || props.disabled}
 9 |       class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"
10 |     />
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import EszipTool from "../islands/EszipTool.tsx";
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <div class="h-screen flex flex-col">
 6 |       <header class="p-4 font-bold border-b text-2xl flex gap-4">
 7 |         <img src="/logo.svg" class="w-8 h-8" />
 8 |         <h1>ESZIP Tools</h1>
 9 |       </header>
10 |       <EszipTool />
11 |     </div>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/main.ts:
--------------------------------------------------------------------------------
 1 | /// <reference no-default-lib="true" />
 2 | /// <reference lib="dom" />
 3 | /// <reference lib="dom.iterable" />
 4 | /// <reference lib="dom.asynciterable" />
 5 | /// <reference lib="deno.ns" />
 6 | 
 7 | import { start } from "$fresh/server.ts";
 8 | import manifest from "./fresh.gen.ts";
 9 | 
10 | import twindPlugin from "$fresh/plugins/twind.ts";
11 | import twindConfig from "./twind.config.ts";
12 | 
13 | await start(manifest, { plugins: [twindPlugin(twindConfig)] });
14 | 


--------------------------------------------------------------------------------
/fresh.gen.ts:
--------------------------------------------------------------------------------
 1 | // DO NOT EDIT. This file is generated by fresh.
 2 | // This file SHOULD be checked into source version control.
 3 | // This file is automatically updated during development when running `dev.ts`.
 4 | 
 5 | import config from "./deno.json" assert { type: "json" };
 6 | import * as $0 from "./routes/index.tsx";
 7 | import * as $$0 from "./islands/EszipTool.tsx";
 8 | 
 9 | const manifest = {
10 |   routes: {
11 |     "./routes/index.tsx": $0,
12 |   },
13 |   islands: {
14 |     "./islands/EszipTool.tsx": $$0,
15 |   },
16 |   baseUrl: import.meta.url,
17 |   config,
18 | };
19 | 
20 | export default manifest;
21 | 


--------------------------------------------------------------------------------
/import_map.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "imports": {
 3 |     "$fresh/": "https://deno.land/x/fresh@1.1.2/",
 4 |     "preact": "https://esm.sh/preact@10.11.0",
 5 |     "preact/": "https://esm.sh/preact@10.11.0/",
 6 |     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
 7 |     "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
 8 |     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
 9 |     "twind": "https://esm.sh/twind@0.16.17",
10 |     "twind/": "https://esm.sh/twind@0.16.17/",
11 |     "$eszip": "https://raw.githubusercontent.com/denoland/eszip/6dd5a50fddb31a72f5eece204a7fc152fed699c7/lib/mod.ts"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/static/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 5120 5120"><title>Deno logo</title><path d="M2560 0a2560 2560 0 1 1 0 5120 2560 2560 0 0 1 0-5120z"/><path fill="#fff" d="M2460 1449c-744 0-1324 469-1324 1052 0 550 533 901 1359 884l25-1 91-3-23 60 3 6a668 668 0 0 1 18 47l2 6 3 10 4 14 3 9 4 10 3 11 4 16 5 17 3 11 5 18 5 19 4 19 5 20 4 14 5 22 5 22 7 30 3 16 5 24 5 25 6 26 7 37 6 30 8 42 4 21 7 33 6 34 8 46 9 48 8 50 9 51 9 52 9 54 9 56 7 43 11 73 5 30 12 77 9 63 8 48 9 66 5 33c549-73 1037-339 1393-728l11-12-51-190-135-505-84-314-74-276-46-168-29-106-17-64-16-56-6-24-4-13-2-7-2-6c-78-251-229-473-435-634-242-189-549-288-907-288zm-654 2669c-65-18-133 20-152 85l-1 3-112 416a2287 2287 0 0 0 215 93l17 7 121-451 1-3c16-66-23-133-89-150zm697-305c-66-18-134 20-153 85l-1 3-170 630v3a125 125 0 0 0 241 65l1-3 170-630v-3l3-14 1-5-4-21-6-29-4-18a125 125 0 0 0-78-63zm-1185-649-8 19-1 4-170 630-1 3a125 125 0 0 0 241 66l1-3 154-572c-80-42-153-92-216-147zm-405-725c-66-17-134 21-153 85l-1 3-170 630v3a125 125 0 0 0 241 66l1-3 170-630v-3c16-66-23-133-88-151zm3811-143c-65-17-133 21-152 85l-1 3-170 630-1 3a125 125 0 0 0 242 66v-3l171-630v-4c16-65-23-132-89-150zM542 1455a2284 2284 0 0 0-267 838 124 124 0 0 0 62 38c65 17 133-21 152-85l1-3 170-630 1-3c16-66-23-133-89-151a127 127 0 0 0-30-4zm3752 4c-66-17-133 21-153 85v3l-170 630-1 3a125 125 0 0 0 241 66l1-3 170-630 1-3c16-66-24-133-89-151z"/><path d="M2620 1870a160 160 0 1 1 0 320 160 160 0 0 1 0-320z"/><path fill="#fff" d="M1282 860c-65-17-133 21-152 85l-1 3-170 630-1 3a125 125 0 0 0 241 66l1-3 170-630 1-4c16-65-23-132-89-150zm2185 119c-66-17-134 21-153 85l-1 3-114 424a1399 1399 0 0 1 211 128l11 9 134-495v-3c16-66-23-133-88-151zM2355 269a2299 2299 0 0 0-238 34l-17 3-158 587-1 3a125 125 0 0 0 241 65l1-3 170-630 1-3a124 124 0 0 0 1-56zm1564 435-33 124-1 3a125 125 0 0 0 241 65l1-3 4-13a2312 2312 0 0 0-197-165l-15-11zm-989-414-60 223-1 3a125 125 0 0 0 241 65l1-3 63-235a2286 2286 0 0 0-226-50l-18-3z"/></svg>


--------------------------------------------------------------------------------
/islands/EszipTool.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "preact/hooks";
  2 | import { options, Parser } from "$eszip";
  3 | import { Head } from "$fresh/runtime.ts";
  4 | 
  5 | options.wasmURL = window.location &&
  6 |   new URL("/eszip_wasm_bg.wasm", window.location.href);
  7 | 
  8 | export default function EszipTool() {
  9 |   const [file, setFile] = useState<File | null>(null);
 10 | 
 11 |   return (
 12 |     <div class="flex-grow-1 flex">
 13 |       {file ? <Viewer file={file} /> : <Upload onSelect={setFile} />}
 14 |     </div>
 15 |   );
 16 | }
 17 | 
 18 | function cancelEvent(event: Event) {
 19 |   event.preventDefault();
 20 |   event.stopPropagation();
 21 | }
 22 | 
 23 | function Upload(props: { onSelect: (file: File) => void }) {
 24 |   const [isDragging, setIsDragging] = useState(false);
 25 | 
 26 |   function onDragStart(event: DragEvent) {
 27 |     cancelEvent(event);
 28 |     setIsDragging(true);
 29 |   }
 30 | 
 31 |   function onDragEnd(event: DragEvent) {
 32 |     cancelEvent(event);
 33 |     setIsDragging(false);
 34 |   }
 35 | 
 36 |   function onDrop(event: DragEvent) {
 37 |     cancelEvent(event);
 38 |     setIsDragging(false);
 39 |     props.onSelect(event.dataTransfer!.files[0]);
 40 |   }
 41 | 
 42 |   function onInput(event: Event) {
 43 |     const input = event.currentTarget as HTMLInputElement;
 44 |     props.onSelect(input.files![0]);
 45 |   }
 46 | 
 47 |   useEffect(() => {
 48 |     async function doIt() {
 49 |       const downloadURL = new URLSearchParams(location.search).get(
 50 |         "download_from",
 51 |       );
 52 |       if (!downloadURL) {
 53 |         return;
 54 |       }
 55 | 
 56 |       try {
 57 |         setIsDragging(true);
 58 |         const resp = await fetch(downloadURL);
 59 |         const blob = await resp.blob();
 60 |         props.onSelect(new File([blob], "downloaded_archive.eszip"));
 61 |       } catch (error) {
 62 |         window.alert("Download failed, see console");
 63 |         throw error;
 64 |       } finally {
 65 |         setIsDragging(false);
 66 |       }
 67 |     }
 68 | 
 69 |     doIt();
 70 |   }, []);
 71 | 
 72 |   return (
 73 |     <>
 74 |       <Head>
 75 |         <link href="global.css" rel="stylesheet" />
 76 |       </Head>
 77 | 
 78 |       <form class="flex-grow-1 flex">
 79 |         <label
 80 |           htmlFor="file"
 81 |           class={`p-4 border border-dashed m-4 flex-grow-1 flex flex-col items-center justify-center hover:cursor-pointer gap-8 ${
 82 |             isDragging && "bg-gray-100"
 83 |           }`}
 84 |           onDrag={cancelEvent}
 85 |           onDragStart={onDragStart}
 86 |           onDragEnd={onDragEnd}
 87 |           onDragOver={cancelEvent}
 88 |           onDragEnter={onDragStart}
 89 |           onDragLeave={onDragEnd}
 90 |           onDrop={onDrop}
 91 |         >
 92 |           <svg
 93 |             class="text-gray-400 h-12 w-12"
 94 |             xmlns="http://www.w3.org/2000/svg"
 95 |             fill="none"
 96 |             viewBox="0 0 24 24"
 97 |             strokeWidth={1.5}
 98 |             stroke="currentColor"
 99 |           >
100 |             <path
101 |               strokeLinecap="round"
102 |               strokeLinejoin="round"
103 |               d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
104 |             />
105 |           </svg>
106 |           <p class="text-gray-400">Drop or upload a ESZIP file to get started.</p>
107 |         </label>
108 |         <input class="hidden" type="file" id="file" onInput={onInput} />
109 |       </form>
110 |     </>
111 |   );
112 | }
113 | 
114 | function Viewer(props: { file: File }) {
115 |   const [data, setData] = useState<Uint8Array | null>(null);
116 |   const [sources, setSources] = useState<Map<string, string> | null>(null);
117 | 
118 |   useEffect(() => {
119 |     let cancel = false;
120 |     props.file.arrayBuffer().then((data) => {
121 |       if (!cancel) setData(new Uint8Array(data));
122 |     });
123 |     return () => (cancel = true);
124 |   }, [props.file]);
125 | 
126 |   useEffect(() => {
127 |     if (!data) return;
128 |     Parser.createInstance().then(async (parser) => {
129 |       const specifiers = await parser.parseBytes(data);
130 |       await parser.load();
131 |       const sources = new Map<string, string>();
132 |       for (const specifier of specifiers.sort()) {
133 |         sources.set(specifier, await parser.getModuleSource(specifier));
134 |       }
135 |       setSources(sources);
136 |     });
137 |   }, [data]);
138 | 
139 |   if (!data) {
140 |     return <div>Loading file...</div>;
141 |   }
142 | 
143 |   if (!sources) {
144 |     return <div>Parsing eszip...</div>;
145 |   }
146 | 
147 |   return <FileViewer sources={sources} />;
148 | }
149 | 
150 | function FileViewer(props: { sources: Map<string, string> }) {
151 |   const [selected, setSelected] = useState<string | null>(null);
152 |   const [search, setSearch] = useState("");
153 | 
154 |   return (
155 |     <div class="flex-grow-1 grid grid-cols-4">
156 |       <ul class="border-r pb-2 overflow-y-auto">
157 |         <li>
158 |           <input
159 |             value={search}
160 |             onInput={(e) => setSearch(e.currentTarget.value)}
161 |             placeholder="Search..."
162 |             class="px-2 py-1 w-full border-b mb-2"
163 |           />
164 |         </li>
165 |         {Array.from(props.sources.keys())
166 |           .filter((s) => s.includes(search))
167 |           .map((specifier) => (
168 |             <li
169 |               class={`px-2 hover:bg-gray-50 cursor-pointer whitespace-nowrap ${
170 |                 specifier === selected && "bg-gray-100 font-bold"
171 |               }`}
172 |               onClick={() => setSelected(specifier)}
173 |             >
174 |               {specifier}
175 |             </li>
176 |           ))}
177 |       </ul>
178 |       <div class="col-span-3">
179 |         {selected && <SourceViewer source={props.sources.get(selected)!} />}
180 |       </div>
181 |     </div>
182 |   );
183 | }
184 | 
185 | function SourceViewer(props: { source: string }) {
186 |   const lines = props.source.split("\n");
187 | 
188 |   return (
189 |     <pre class="font-mono text-sm p-4">{lines.map(line => <span>{line}</span>)}</pre>
190 |   );
191 | }
192 | 


--------------------------------------------------------------------------------