Add one-click extension export (jupyterlab#123)

* Add one-click extension export

* remove base64 encoding in URL and keep minimal files in template

* add suggestions

* add suggestions

Author: MUFFANUJ

README.md

@@ -143,13 +143,18 @@ Plugin Playground now exposes command APIs that mirror sidebar data and support
 - `plugin-playground:list-tokens`
 - `plugin-playground:list-commands`
 - `plugin-playground:list-extension-examples`
+- `plugin-playground:export-as-extension` (supports optional `{ path: string }`)
 
 Example:
 
 ```typescript
 await app.commands.execute('plugin-playground:list-tokens', {
   query: 'notebook'
 });
+
+await app.commands.execute('plugin-playground:export-as-extension', {
+  path: 'my-extension/src/index.ts'
+});
 ```
 
 Each command returns a JSON object with:

_agents/skills/plugin-authoring/SKILL.md

@@ -64,7 +64,14 @@ Produce working plugin code that can be loaded with `plugin-playground:load-as-e
 - Check the command return value for `ok/status/message` to detect and report loading or autostart errors.
 - If reloading the same plugin ID repeatedly, ensure cleanup is handled via `deactivate()` where needed.
 
-6. Imports and module safety
+6. Export for standalone development
+
+- Run `plugin-playground:export-as-extension` to download a zip for local IDE + git workflows.
+- For deterministic automation (or when another file is focused), pass an explicit file path:
+  - `app.commands.execute('plugin-playground:export-as-extension', { path: 'my-extension/src/index.ts' })`
+- Read export result metadata (`ok`, `archiveName`, `rootPath`, `fileCount`, `message`) and report failures.
+
+7. Imports and module safety
 
 - Prefer JupyterLab/Lumino imports first.
 - For external packages, ensure AMD-compatible import targets are used.

schema/plugin.json

@@ -63,7 +63,13 @@
         "command": "plugin-playground:load-as-extension",
         "rank": 20
       },
-      { "name": "plugin-playground-load-on-save", "rank": 21 }
+      { "name": "plugin-playground-load-on-save", "rank": 21 },
+      {
+        "name": "export-extension",
+        "command": "plugin-playground:export-as-extension",
+        "label": "Export",
+        "rank": 22
+      }
     ]
   },
   "jupyter.lab.shortcuts": [

src/archive.ts

@@ -0,0 +1,168 @@
+import { normalizeContentsPath } from './contents';
+
+export interface IArchiveEntry {
+  path: string;
+  data: Uint8Array;
+}
+
+const LOCAL_FILE_HEADER_SIGNATURE = 0x04034b50;
+const CENTRAL_DIRECTORY_HEADER_SIGNATURE = 0x02014b50;
+const END_OF_CENTRAL_DIRECTORY_SIGNATURE = 0x06054b50;
+const UTF8_FILENAME_FLAG = 0x0800;
+const ZIP_VERSION = 20;
+
+const ZIP_MIME_TYPE = 'application/zip';
+
+const CRC32_TABLE = (() => {
+  const table = new Uint32Array(256);
+  for (let index = 0; index < table.length; index++) {
+    let value = index;
+    for (let bit = 0; bit < 8; bit++) {
+      value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;
+    }
+    table[index] = value >>> 0;
+  }
+  return table;
+})();
+
+function createBuffer(size: number): { bytes: Uint8Array; view: DataView } {
+  const bytes = new Uint8Array(size);
+  return { bytes, view: new DataView(bytes.buffer) };
+}
+
+function crc32(data: Uint8Array): number {
+  let crc = 0xffffffff;
+  for (const value of data) {
+    crc = CRC32_TABLE[(crc ^ value) & 0xff] ^ (crc >>> 8);
+  }
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+function createZipBytes(entries: ReadonlyArray<IArchiveEntry>): Uint8Array {
+  const encoder = new TextEncoder();
+  const localChunks: Uint8Array[] = [];
+  const centralChunks: Uint8Array[] = [];
+  let localOffset = 0;
+  let entryCount = 0;
+
+  for (const entry of entries) {
+    const normalizedPath = normalizeContentsPath(
+      entry.path.replace(/\\/g, '/')
+    );
+    if (!normalizedPath) {
+      continue;
+    }
+
+    const pathBytes = encoder.encode(normalizedPath);
+    const data = entry.data;
+    const dataLength = data.length;
+    const entryCrc32 = crc32(data);
+
+    const { bytes: localHeader, view: localView } = createBuffer(
+      30 + pathBytes.length
+    );
+    localView.setUint32(0, LOCAL_FILE_HEADER_SIGNATURE, true);
+    localView.setUint16(4, ZIP_VERSION, true);
+    localView.setUint16(6, UTF8_FILENAME_FLAG, true);
+    localView.setUint16(8, 0, true);
+    localView.setUint16(10, 0, true);
+    localView.setUint16(12, 0, true);
+    localView.setUint32(14, entryCrc32, true);
+    localView.setUint32(18, dataLength, true);
+    localView.setUint32(22, dataLength, true);
+    localView.setUint16(26, pathBytes.length, true);
+    localView.setUint16(28, 0, true);
+    localHeader.set(pathBytes, 30);
+    localChunks.push(localHeader, data);
+
+    const { bytes: centralHeader, view: centralView } = createBuffer(
+      46 + pathBytes.length
+    );
+    centralView.setUint32(0, CENTRAL_DIRECTORY_HEADER_SIGNATURE, true);
+    centralView.setUint16(4, ZIP_VERSION, true);
+    centralView.setUint16(6, ZIP_VERSION, true);
+    centralView.setUint16(8, UTF8_FILENAME_FLAG, true);
+    centralView.setUint16(10, 0, true);
+    centralView.setUint16(12, 0, true);
+    centralView.setUint16(14, 0, true);
+    centralView.setUint32(16, entryCrc32, true);
+    centralView.setUint32(20, dataLength, true);
+    centralView.setUint32(24, dataLength, true);
+    centralView.setUint16(28, pathBytes.length, true);
+    centralView.setUint16(30, 0, true);
+    centralView.setUint16(32, 0, true);
+    centralView.setUint16(34, 0, true);
+    centralView.setUint16(36, 0, true);
+    centralView.setUint32(38, 0, true);
+    centralView.setUint32(42, localOffset, true);
+    centralHeader.set(pathBytes, 46);
+    centralChunks.push(centralHeader);
+
+    localOffset += localHeader.length + dataLength;
+    if (localOffset > 0xffffffff) {
+      throw new Error('Export is too large for ZIP32 archives.');
+    }
+    entryCount += 1;
+    if (entryCount > 0xffff) {
+      throw new Error('Too many files to export in a ZIP32 archive.');
+    }
+  }
+
+  const centralDirectory = new Uint8Array(
+    centralChunks.reduce((sum, chunk) => sum + chunk.length, 0)
+  );
+  let centralCursor = 0;
+  for (const chunk of centralChunks) {
+    centralDirectory.set(chunk, centralCursor);
+    centralCursor += chunk.length;
+  }
+
+  const { bytes: endOfCentralDirectory, view: eocdView } = createBuffer(22);
+  eocdView.setUint32(0, END_OF_CENTRAL_DIRECTORY_SIGNATURE, true);
+  eocdView.setUint16(4, 0, true);
+  eocdView.setUint16(6, 0, true);
+  eocdView.setUint16(8, entryCount, true);
+  eocdView.setUint16(10, entryCount, true);
+  eocdView.setUint32(12, centralDirectory.length, true);
+  eocdView.setUint32(16, localOffset, true);
+  eocdView.setUint16(20, 0, true);
+
+  const totalSize =
+    localChunks.reduce((sum, chunk) => sum + chunk.length, 0) +
+    centralDirectory.length +
+    endOfCentralDirectory.length;
+  const archive = new Uint8Array(totalSize);
+  let offset = 0;
+  for (const chunk of localChunks) {
+    archive.set(chunk, offset);
+    offset += chunk.length;
+  }
+  archive.set(centralDirectory, offset);
+  offset += centralDirectory.length;
+  archive.set(endOfCentralDirectory, offset);
+  return archive;
+}
+
+function triggerDownload(href: string, filename: string): void {
+  const link = document.createElement('a');
+  link.href = href;
+  link.download = filename;
+  link.rel = 'noopener';
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+export function downloadArchive(
+  entries: ReadonlyArray<IArchiveEntry>,
+  filename: string
+): void {
+  const zipped = createZipBytes(entries);
+  const blob = new Blob([zipped], { type: ZIP_MIME_TYPE });
+  const objectUrl = URL.createObjectURL(blob);
+  triggerDownload(objectUrl, filename);
+  window.setTimeout(() => {
+    URL.revokeObjectURL(objectUrl);
+  }, 1000);
+}

src/contents.ts

@@ -79,7 +79,7 @@ export function contentsPathCandidates(path: string): string[] {
   // paths should be rooted. Try both forms so callers can use one code path.
   const trimmed = normalizeContentsPath(path);
   if (trimmed.length === 0) {
-    return [];
+    return ['', '/'];
   }
   return [trimmed, `/${trimmed}`];
 }
@@ -165,6 +165,32 @@ export function fileModelToText(fileModel: IFileModel | null): string | null {
   return null;
 }
 
+export function fileModelToBytes(
+  fileModel: IFileModel | null
+): Uint8Array | null {
+  if (!fileModel) {
+    return null;
+  }
+
+  if (typeof fileModel.content === 'string') {
+    if (fileModel.format === 'base64') {
+      try {
+        const decoded = atob(fileModel.content);
+        const bytes = new Uint8Array(decoded.length);
+        for (let index = 0; index < decoded.length; index++) {
+          bytes[index] = decoded.charCodeAt(index);
+        }
+        return bytes;
+      } catch {
+        return null;
+      }
+    }
+  }
+
+  const text = fileModelToText(fileModel);
+  return text === null ? null : new TextEncoder().encode(text);
+}
+
 export async function readContentsFileAsText(
   serviceManager: ServiceManager.IManager,
   path: string