p5.js Starter Project

import JSZip from "https://esm.sh/jszip@3.10.0"; import tar from "https://esm.sh/tar@6.2.0"; // Get tarball URL for scoped npm package const getNpmTarball = async (scope, packageName, version = "latest") => { const fullPackageName = scope ? `@${scope}/${packageName}` : packageName; const response = await fetch(`https://registry.npmjs.org/${fullPackageName}/${version}`); if (!response.ok) { throw new Error(`Failed to fetch metadata for ${fullPackageName}`); } const data = await response.json(); return data.dist.tarball; }; export default async function server(request: Request): Promise { // Default modules to include const defaultModules = [ "p5", "@ff6347/p5-easing", ]; // Parse query parameters for custom modules const url = new URL(request.url); const modules = url.searchParams.get("modules") ? url.searchParams.get("modules")?.split(",") : defaultModules; const zip = new JSZip(); // Fetch latest versions of modules from npm registry const moduleContents = await Promise.all( modules.map(async (moduleName) => { try { // Handle scoped and non-scoped package names const packageNameParts = moduleName.split("/"); const scope = packageNameParts.length > 1 ? packageNameParts[0].replace("@", "") : null; const packageName = packageNameParts.length > 1 ? packageNameParts[1] : moduleName; // Get tarball URL const tarballUrl = await getNpmTarball(scope, packageName); const tarballResponse = await fetch(tarballUrl); if (!tarballResponse.ok) { throw new Error(`Failed to download tarball for ${moduleName}`); } const tarballArrayBuffer = await tarballResponse.arrayBuffer(); // Extract tarball contents const extractedFiles: { [key: string]: string; } = {}; await new Promise((resolve, reject) => { const reader = new tar.Parse(); reader.on("entry", (entry) => { let content = ""; entry.on("data", (chunk) => { content += new TextDecoder().decode(chunk); }); entry.on("end", () => { // Strip package/ prefix and ignore node_modules const cleanPath = entry.path.replace(/^package\//, ""); if (!cleanPath.startsWith(".") && !cleanPath.includes("node_modules")) { extractedFiles[cleanPath] = content; } }); }); reader.on("finish", resolve); reader.on("error", reject); // Convert ArrayBuffer to Uint8Array and pipe to tar parser reader.write(new Uint8Array(tarballArrayBuffer)); reader.end(); }); return { name: moduleName, version: extractedFiles["package.json"] ? JSON.parse(extractedFiles["package.json"]).version : "unknown", files: extractedFiles, }; } catch (error) { console.error(`Error processing module ${moduleName}:`, error); // Return a minimal object to prevent complete failure return { name: moduleName, version: "error", files: {}, }; } }), ); // Create zip contents zip.file( ".editorconfig", `root = true [*] indent_style = tab indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true max_line_length = 80 [*.{yml,yaml}] indent_style = space`, ); zip.file( ".vscode/extensions.json", `{ "recommendations": [ "ms-vscode.live-server", "esbenp.prettier-vscode", "ritwickdey.liveserver" ] }`, ); zip.file(".vscode/settings.json", `{ "prettier.useEditorConfig": true }`); zip.file( "index.html", ` p5.js Starter Project

souce code

`, ); zip.file( "index.js", ` function setup(){ const canvas = createCanvas(100,100); canvas.parent("sketch"); background("black"); } function draw() {} `, ); // Add module files to zip moduleContents.forEach(module => { // Add entire package contents to modules directory Object.entries(module.files).forEach(([filepath, content]) => { zip.file(`modules/${module.name}/${filepath}`, content); }); }); // Generate zip const zipContent = await zip.generateAsync({ type: "blob" }); return new Response(zipContent, { headers: { "Content-Type": "application/zip", "Content-Disposition": `attachment; filename="p5-starter-${Date.now()}.zip"`, }, }); }