hikkaku 0.2.0 → 0.3.0

package/vite/index.mjs

@@ -1,15 +1,66 @@
 import { zip } from "fflate";
-import { mkdir, rm, writeFile } from "node:fs/promises";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import * as path from "node:path";
-import { pathToFileURL } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { createServerModuleRunner } from "vite";
+import crypto from "node:crypto";
 
+//#region src/vite/plugin-scratch-import.ts
+const pluginScratchImport = () => ({
+	name: "vite-plugin-hikkaku:scratch-import",
+	enforce: "pre",
+	resolveId(source, importer, _options) {
+		if (source.endsWith("?scratch")) {
+			if (source.endsWith(".svg?scratch") || source.endsWith(".png?scratch") || source.endsWith(".wav?scratch") || source.endsWith(".mp3?scratch")) {
+				const importerPath = pathToFileURL(importer ?? "");
+				return { id: `\0scratch:${new URL(source, importerPath)}` };
+			}
+		}
+	},
+	async load(id, _options) {
+		if (id.startsWith("\0scratch:")) {
+			const url = new URL(id.slice(9, -8));
+			const ext = url.pathname.split(".").pop();
+			if (!ext) throw new Error(`Unsupported scratch asset type: ${url.pathname}`);
+			const file = await readFile(fileURLToPath(url));
+			const hash = crypto.createHash("md5");
+			hash.update(file);
+			const md5 = hash.digest("hex");
+			const data = {
+				name: path.basename(url.pathname),
+				_data: Buffer.from(file).toString("base64"),
+				assetId: md5,
+				dataFormat: ext,
+				md5ext: `${md5}.${ext}`
+			};
+			return `
+        const data = ${JSON.stringify(data)}
+        // to Uint8Array
+        data._data = Uint8Array.from(atob(data._data), c => c.charCodeAt(0));
+
+        export default data
+      `;
+		}
+	}
+});
+
+//#endregion
 //#region src/vite/index.ts
 const BASE_URL = "https://scratchfoundation.github.io/scratch-gui/";
 const VIRTUAL_MODULE_IDS = { project: "/@virtual/hikkaku-project" };
 function hikkaku(init) {
 	let runner = null;
-	return {
+	let additionalAssets = /* @__PURE__ */ new Map();
+	const assetCache = /* @__PURE__ */ new Map();
+	const setContentType = (res, assetId) => {
+		const assetExt = path.extname(assetId).toLowerCase();
+		if (assetExt === ".png") res.setHeader("Content-Type", "image/png");
+		else if (assetExt === ".jpg" || assetExt === ".jpeg") res.setHeader("Content-Type", "image/jpeg");
+		else if (assetExt === ".wav") res.setHeader("Content-Type", "audio/wav");
+		else if (assetExt === ".mp3") res.setHeader("Content-Type", "audio/mpeg");
+		else res.setHeader("Content-Type", "application/octet-stream");
+	};
+	return [{
 		name: "vite-plugin-hikkaku",
 		config(config, env) {
 			if (env.command === "build") (config.plugins?.find((p) => p && typeof p === "object" && "name" in p && p.name === "vite-plugin-turbowarp-packager"))?.api.setEntry(path.join(process.cwd(), "dist", "project.sb3"));
@@ -38,8 +89,12 @@ function hikkaku(init) {
 			}
 			const { default: project } = await import(pathToFileURL(path.join(process.cwd(), "dist/.tmp", "project.mjs")).href);
 			const projectJSON = project.toScratch();
+			const assets = project.getAdditionalAssets();
 			const zipData = await new Promise((resolve, reject) => {
-				zip({ "project.json": new TextEncoder().encode(JSON.stringify(projectJSON)) }, (err, data) => {
+				zip({
+					"project.json": new TextEncoder().encode(JSON.stringify(projectJSON)),
+					...Object.fromEntries(assets.entries())
+				}, (err, data) => {
 					if (err) reject(err);
 					else resolve(data);
 				});
@@ -56,6 +111,12 @@ function hikkaku(init) {
 				name: "project.json",
 				source: JSON.stringify(projectJSON, null, 2)
 			});
+			for (const [assetId, data] of assets.entries()) this.emitFile({
+				type: "asset",
+				fileName: `assets/${assetId}`,
+				name: `assets/${assetId}`,
+				source: data
+			});
 			await rm(tmpDir, {
 				recursive: true,
 				force: true
@@ -88,6 +149,7 @@ function hikkaku(init) {
 			if (this.environment.name !== "hikkaku") return;
 			if (!runner) throw new Error("Module runner is not initialized.");
 			const project = (await runner.import(init.entry)).default;
+			additionalAssets = project.getAdditionalAssets();
 			options.server.environments.client.hot.send("hikkaku:project", project.toScratch());
 		},
 		async configureServer(server) {
@@ -98,9 +160,54 @@ function hikkaku(init) {
 			server.environments.client.hot.on("vite:client:connect", async () => {
 				if (!runner) throw new Error("Module runner is not initialized.");
 				const project = (await runner.import(init.entry)).default;
+				additionalAssets = project.getAdditionalAssets();
 				server.environments.client.hot.send("hikkaku:project", project.toScratch());
 			});
 			server.middlewares.use(async (req, res, next) => {
+				if (req.url?.startsWith("/hikkaku-assets/")) {
+					const segments = req.url.split("/");
+					const assetId = segments[segments.indexOf("hikkaku-assets") + 1];
+					if (!assetId) {
+						res.statusCode = 400;
+						res.end("Asset ID is required");
+						return;
+					}
+					const assetData = additionalAssets.get(assetId);
+					if (!assetData) {
+						if (assetCache.has(assetId)) {
+							const cached = assetCache.get(assetId);
+							if (cached === false) {
+								res.statusCode = 404;
+								res.end("Asset not found");
+								return;
+							}
+							setContentType(res, assetId);
+							res.end(cached);
+							return;
+						}
+						const assetData = await fetch(`https://assets.scratch.mit.edu/internalapi/asset/${assetId}/get/`).then((r) => {
+							if (!r.ok) return null;
+							return r.arrayBuffer();
+						}).catch((e) => {
+							console.warn("Failed to fetch asset from network:", e);
+							return null;
+						});
+						if (assetData) {
+							const uint8array = new Uint8Array(assetData);
+							assetCache.set(assetId, uint8array);
+							setContentType(res, assetId);
+							res.end(uint8array);
+							return;
+						}
+						assetCache.set(assetId, false);
+						res.statusCode = 404;
+						res.end("Asset not found");
+						return;
+					}
+					setContentType(res, assetId);
+					res.end(assetData);
+					return;
+				}
 				if (req.url === "/") {
 					const html = (await fetch(BASE_URL).then((res) => res.text())).replace("gui.js", "https://scratchfoundation.github.io/scratch-gui/gui.js").replace("</head>", "<script src=\"/@vite/client\" type=\"module\"><\/script><script type=\"module\" src=\"/@virtual/hikkaku-client\"><\/script></head>");
 					res.setHeader("Content-Type", "text/html");
@@ -122,7 +229,7 @@ function hikkaku(init) {
 				next();
 			});
 		}
-	};
+	}, pluginScratchImport()];
 }
 
 //#endregion