[WIP] Implement handler on ?viewer query string for .decofile

deno.json

@@ -15,12 +15,15 @@
   },
   "fmt": {
     "files": {
-      "exclude": ["static/", "README.md"]
+      "exclude": [
+        "static/",
+        "README.md"
+      ]
     }
   },
   "importMap": "./import_map.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   }
-}
+}

engine/manifest/manifestGen.ts

@@ -107,8 +107,8 @@ export const defaultRoutes: {
   },
   {
     block: "routes",
-    from: ["$live/routes/live/release.ts", "deco/routes/live/release.ts"],
-    key: "./routes/live/release.ts",
+    from: ["$live/routes/live/release.tsx", "deco/routes/live/release.tsx"],
+    key: "./routes/live/release.tsx",
     ref: "$live_release",
   },
   {

live.gen.ts

@@ -17,8 +17,8 @@ import * as $$$$7 from "./routes/live/workflows/run.ts";
 import * as $$$$8 from "./routes/live/workbench.ts";
 import * as $$$$9 from "./routes/live/previews/index.tsx";
 import * as $$$$10 from "./routes/live/previews/[...block].tsx";
-import * as $$$$11 from "./routes/live/release.ts";
-import * as $$$$12 from "./routes/live/_meta.ts";
+import * as $$$$11 from "./routes/live/_meta.ts";
+import * as $$$$12 from "./routes/live/release.tsx";
 import * as $$$$13 from "./routes/[...catchall].tsx";
 import * as $$$$$$0 from "./handlers/routesSelection.ts";
 import * as $$$$$$1 from "./handlers/router.ts";
@@ -68,14 +68,14 @@ const manifest = {
     "./routes/[...catchall].tsx": $$$$13,
     "./routes/deco/render.ts": $$$$2,
     "./routes/index.tsx": $$$$0,
-    "./routes/live/_meta.ts": $$$$12,
+    "./routes/live/_meta.ts": $$$$11,
     "./routes/live/editorData.ts": $$$$6,
     "./routes/live/inspect/[...block].ts": $$$$3,
     "./routes/live/invoke/[...key].ts": $$$$4,
     "./routes/live/invoke/index.ts": $$$$5,
     "./routes/live/previews/[...block].tsx": $$$$10,
     "./routes/live/previews/index.tsx": $$$$9,
-    "./routes/live/release.ts": $$$$11,
+    "./routes/live/release.tsx": $$$$12,
     "./routes/live/workbench.ts": $$$$8,
     "./routes/live/workflows/run.ts": $$$$7,
   },

plugins/deco.ts

@@ -4,7 +4,7 @@ import { SourceMap } from "../blocks/app.ts";
 import { buildDecoState, injectLiveStateForPath } from "../blocks/route.ts";
 import { DECO_FILE_NAME, newFsProvider } from "../engine/releases/fs.ts";
 import { Release } from "../engine/releases/provider.ts";
-import { AppManifest, SiteInfo, createResolver } from "../mod.ts";
+import { AppManifest, createResolver, SiteInfo } from "../mod.ts";
 import {
   default as Render,
   handler as entrypoint,
@@ -21,7 +21,10 @@ import {
   handler as previewHandler,
 } from "../routes/live/previews/[...block].tsx";
 import { default as PreviewsPage } from "../routes/live/previews/index.tsx";
-import { handler as releaseHandler } from "../routes/live/release.ts";
+import {
+  default as ReleaseViewer,
+  handler as releaseHandler,
+} from "../routes/live/release.tsx";
 import { handler as workbenchHandler } from "../routes/live/workbench.ts";
 import { handler as workflowHandler } from "../routes/live/workflows/run.ts";
 
@@ -67,6 +70,7 @@ export default function decoPlugin(opt?: Options): Plugin {
     {
       paths: ["/live/release", "/.decofile"],
       handler: releaseHandler,
+      component: ReleaseViewer,
     },
     {
       paths: ["/live/workbench"],

routes/live/release.tsx

@@ -0,0 +1,67 @@
+import { HandlerContext, PageProps } from "$fresh/server.ts";
+import { DecoState } from "../../mod.ts";
+import { groupObjectBy } from "deco/utils/fn/groupObjectBy.ts";
+
+export const handler = async (
+  _req: Request,
+  ctx: HandlerContext<unknown, DecoState>,
+) => {
+  const viewer = new URL(_req.url).searchParams.has("viewer");
+  const release = await ctx.state.release.state();
+
+  console.log("viewer", viewer);
+  if (viewer) {
+    return ctx.render({ release });
+  }
+
+  return new Response(
+    JSON.stringify(release),
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+};
+
+function ReleaseViewer({
+  data: {
+    release,
+  },
+}: PageProps<{ release: any }>) {
+  if (!release) {
+    throw new Error("Release not found");
+  }
+
+  const grouped = groupObjectBy(release, (key, value) => {
+    if (value?.__resolveType?.contains("/sections/")) {
+      return "section";
+    }
+    if (value?.__resolveType?.contains("/loaders/")) {
+      return "loader";
+    }
+    return "other";
+  });
+
+  return (
+    <div>
+      <div>
+        <h1>Release</h1>
+        <span>number of keys: {Object.keys(release).length}</span>
+      </div>
+      <div>
+        keys: {Object.keys(release).map((a) => <p>{a}</p>)}
+      </div>
+      <div>
+        <span>Grouped JSON:</span>
+        <pre>{JSON.stringify(grouped, null, 2)}</pre>
+      </div>
+      <div>
+        <span>Raw JSON:</span>
+        <pre>{JSON.stringify(release, null, 2)}</pre>
+      </div>
+    </div>
+  );
+}
+
+export default ReleaseViewer;

utils/fn/groupObjectBy.ts

@@ -0,0 +1,12 @@
+// implement in typescript groupObjectBy function using reduce, which traverses an object and return a new object where the keys are the return of the function and the values are the keys of the original object that return the same value.
+// example: groupBy({a: "b", c: "d", f: "b"}, (i) => i) // {b: ['a', 'f'], d: ['c']}
+
+export const groupObjectBy = (obj: object, fn: Function) => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const group = fn(value);
+    return {
+      ...acc,
+      [group]: [...(acc[group] || []), key],
+    };
+  }, {});
+};