Merge pull request #145 from gridaco/editor-console-feed

Editor console feed

Author: softmarshmallow

editor-packages/editor-debugger/package.json

@@ -0,0 +1 @@
+export * from "./window-console-feed";

editor-packages/editor-devtools/components/console-feed/index.ts

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+import { Console, Hook, Unhook } from "@code-editor/console-feed";
+
+export function WindowConsoleFeed({ style }: { style?: React.CSSProperties }) {
+  const [logs, setLogs] = useState([]);
+
+  useEffect(() => {
+    // run once
+    Hook(
+      window.console,
+      (log) => setLogs((currLogs) => [...currLogs, log]),
+      false
+    );
+    return () => {
+      Unhook(window.console as any);
+    };
+  }, []);
+
+  return (
+    <div style={style}>
+      <Console logs={logs} variant="dark" />
+    </div>
+  );
+}

editor-packages/editor-devtools/components/console-feed/window-console-feed.tsx

@@ -0,0 +1,4 @@
+export * from "./tab";
+export * from "./tab-badge";
+export * from "./console-feed";
+export * from "./visualization";

editor-packages/editor-devtools/components/index.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const bgcolortypemap = {
+  default: "rgba(255, 255, 255, 0.1)",
+  warning: "rgba(255, 230, 0, 0.1)",
+  error: "rgba(255, 0, 0, 0.1)",
+};
+
+export function TabBadge({
+  type = "default",
+  value,
+}: {
+  type?: "default" | "warning" | "error";
+  value: string | number;
+}) {
+  const background = bgcolortypemap[type];
+
+  if (value === undefined || value === null) {
+    return <></>;
+  }
+
+  return (
+    <BaseDevtoolsTabBadge background={background}>
+      <Value>{value}</Value>
+    </BaseDevtoolsTabBadge>
+  );
+}
+
+const Value = styled.span`
+  color: rgb(151, 151, 151);
+  text-overflow: ellipsis;
+  font-size: 10px;
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  text-align: center;
+`;
+
+const BaseDevtoolsTabBadge = styled.div<{ background: string }>`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  flex: none;
+  gap: 10px;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background-color: ${(p) => p.background};
+  box-sizing: border-box;
+  padding: 10px;
+`;

editor-packages/editor-devtools/components/tab-badge/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { TabBadge } from "../tab-badge";
+
+export function DevtoolsTab({
+  label,
+  badge,
+  selected,
+  onTap,
+}: {
+  selected?: boolean;
+  label: string;
+  badge?: string | number;
+  onTap?: () => void;
+}) {
+  return (
+    <TabBase onClick={onTap}>
+      <Label data-selected={selected}>{label}</Label>
+      <TabBadge value={badge} />
+    </TabBase>
+  );
+}
+
+const TabBase = styled.div`
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+`;
+
+const Label = styled.span`
+  color: rgb(151, 151, 151);
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  text-align: left;
+
+  &:hover {
+    color: white;
+  }
+
+  &[data-selected="true"] {
+    color: white;
+  }
+`;

editor-packages/editor-devtools/components/tab/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { useRouter } from "next/router";
 import { ClearRemoteDesignSessionCache } from "components/clear-remote-design-session-cache";
-import { WidgetTree } from "@code-editor/debugger/components/visualization/json-visualization/json-tree";
+import { WidgetTree } from "@code-editor/devtools/components/visualization/json-visualization/json-tree";
 import Link from "next/link";
 
 export const Debugger = ({

editor-packages/editor-debugger/components/visualization/README.md renamed to editor-packages/editor-devtools/components/visualization/README.md

@@ -1 +1,2 @@
 export * from "./debugger-panel";
+export * from "./components";

editor-packages/editor-debugger/components/visualization/index.ts renamed to editor-packages/editor-devtools/components/visualization/index.ts

@@ -0,0 +1,8 @@
+{
+  "name": "@code-editor/devtools",
+  "version": "0.0.0",
+  "private": false,
+  "dependencies": {
+    "@code-editor/console-feed": "^3.3.1"
+  }
+}

editor-packages/editor-debugger/components/visualization/json-visualization/json-tree.tsx renamed to editor-packages/editor-devtools/components/visualization/json-visualization/json-tree.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import PIP from "./pip";
 import { ResizableBox } from "react-resizable";
 import "react-resizable/css/styles.css";
-import type { ResizableBoxProps as RawResizableBoxProps } from "react-resizable";
+import type {
+  ResizableBoxProps as RawResizableBoxProps,
+  ResizableProps,
+} from "react-resizable";
 import styled from "@emotion/styled";
 
 interface ResizableBoxProps
@@ -17,7 +20,7 @@ interface ResizableBoxProps
    * resize handle to display - a react component
    * @default none
    */
-  resizeHandle?: React.ReactNode;
+  resizeHandle?: ResizableProps["handle"];
   /**
    * @default 500
    */

editor-packages/editor-debugger/components/visualization/node-visualization/index.ts renamed to editor-packages/editor-devtools/components/visualization/node-visualization/index.ts

@@ -44,7 +44,6 @@ const bundler = async (rawCode: string, lang: Loader) => {
 
     return { code: result.outputFiles[0].text, err: null };
   } catch (error: any) {
-    console.error("esbuild error: ", error);
     return {
       code: null,
       err: { method: "error", data: [error.message], id: nanoid() },

editor-packages/editor-debugger/components/visualization/node-visualization/tree-view.tsx renamed to editor-packages/editor-devtools/components/visualization/node-visualization/tree-view.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
+import { useDispatch } from "core/dispatch";
 
 export function VanillaESBuildAppRunner({
   doc,
@@ -13,6 +14,17 @@ export function VanillaESBuildAppRunner({
   };
 }) {
   const ref = useRef<HTMLIFrameElement>();
+  const dispatch = useDispatch();
+
+  const consoleLog = useCallback(
+    (p: { method; data }) => {
+      dispatch({
+        type: "devtools-console",
+        log: p,
+      });
+    },
+    [dispatch]
+  );
 
   const loadCode = useCallback(
     (e: HTMLIFrameElement) => {
@@ -29,6 +41,22 @@ export function VanillaESBuildAppRunner({
     }
   }, [doc?.html, doc?.css, doc?.javascript]);
 
+  useEffect(() => {
+    const handler = (event: any) => {
+      if (event.data.type === "console") {
+        console[event.data.method](JSON.parse(event.data.data).join(" "));
+        consoleLog({
+          method: event.data.method,
+          data: JSON.parse(event.data.data),
+        });
+      }
+    };
+
+    window.addEventListener("message", handler);
+
+    return () => window.removeEventListener("message", handler);
+  }, []);
+
   return (
     <VanillaRunner
       ref={ref}

editor-packages/editor-debugger/debugger-panel.tsx renamed to editor-packages/editor-devtools/debugger-panel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "@emotion/styled";
-import RefreshSharpIcon from "@material-ui/icons/RefreshSharp";
+import RefreshSharpIcon from "@mui/icons-material/RefreshSharp";
 import { colors } from "theme";
 
 export function ZoomControl({

editor-packages/editor-debugger/index.ts renamed to editor-packages/editor-devtools/index.ts

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { MonacoEditor, MonacoEditorProps as MonacoEditorProps } from "./monaco";
-import { Tabs, Tab } from "@material-ui/core";
+import { Tabs, Tab } from "@mui/material";
 
 export interface CodeEditorProps
   extends Omit<MonacoEditorProps, "defaultValue" | "defaultLanguage"> {}
@@ -35,8 +35,10 @@ export function CodeEditor({
         <Tabs
           value={filekey}
           onChange={handleChange}
+          indicatorColor="primary"
+          textColor="inherit"
           variant="scrollable"
-          scrollButtons="off"
+          scrollButtons={false}
           style={{ color: "white" }}
           aria-label="scrollable prevent tabs example"
         >

editor-packages/editor-devtools/package.json

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import styled from "@emotion/styled";
-import TreeView from "@material-ui/lab/TreeView";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import TreeItem from "@material-ui/lab/TreeItem";
+import TreeView from "@mui/lab/TreeView";
+import TreeItem from "@mui/lab/TreeItem";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { SideNavigation } from "components/side-navigation";
 
 interface LayerTree {

editor-packages/editor-preview-pip/lib/resizable-pip.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { ArrowBack } from "@material-ui/icons";
+import { ArrowBack } from "@mui/icons-material";
 import { useRouter } from "next/router";
 import { colors } from "theme";
 import ClientOnly from "components/client-only";

editor-packages/editor-services-esbuild/index.ts

@@ -2,5 +2,5 @@ export * as figmacomp from "./figma";
 export * as canvas from "./design-preview-as-is";
 export * as code from "./code-editor";
 export * as runner from "./app-runner";
-export * as visualization from "../../editor-packages/editor-debugger/components/visualization";
+export * as visualization from "../../editor-packages/editor-devtools/components/visualization";
 export * from "./client-only";

editor/components/app-runner/vanilla-esbuild-app-runner.tsx

@@ -1,5 +1,5 @@
 import type { FrameworkConfig } from "@designto/config";
-import type { EditorState, ScenePreviewData } from "core/states";
+import type { ConsoleLog, EditorState, ScenePreviewData } from "core/states";
 
 export type WorkspaceAction =
   //
@@ -20,7 +20,8 @@ export type Action =
   | HighlightLayerAction
   | CanvasModeAction
   | PreviewAction
-  | CodeEditorAction;
+  | CodeEditorAction
+  | DevtoolsAction;
 
 export type ActionType = Action["type"];
 
@@ -74,3 +75,13 @@ export interface CodeEditorEditComponentCodeAction {
   componentName: string;
   raw: string;
 }
+
+export type DevtoolsAction = DevtoolsConsoleAction | DevtoolsConsoleClearAction;
+export interface DevtoolsConsoleAction {
+  type: "devtools-console";
+  log: ConsoleLog;
+}
+
+export interface DevtoolsConsoleClearAction {
+  type: "devtools-console-clear";
+}

editor/components/canvas/controller-zoom-control.tsx

@@ -8,6 +8,8 @@ import type {
   CanvasModeGobackAction,
   PreviewBuildingStateUpdateAction,
   PreviewSetAction,
+  DevtoolsConsoleAction,
+  DevtoolsConsoleClearAction,
 } from "core/actions";
 import { EditorState } from "core/states";
 import { useRouter } from "next/router";
@@ -153,6 +155,35 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
         draft.currentPreview = data; // set
       });
     }
+    case "devtools-console": {
+      const { log } = <DevtoolsConsoleAction>action;
+      return produce(state, (draft) => {
+        if (!draft.devtoolsConsole?.logs?.length) {
+          draft.devtoolsConsole = { logs: [] };
+        }
+
+        const logs = Array.from(state.devtoolsConsole?.logs ?? []);
+        logs.push(log);
+
+        draft.devtoolsConsole.logs = logs;
+      });
+      break;
+    }
+    case "devtools-console-clear": {
+      const {} = <DevtoolsConsoleClearAction>action;
+      return produce(state, (draft) => {
+        if (draft.devtoolsConsole?.logs?.length) {
+          draft.devtoolsConsole.logs = [
+            {
+              id: "clear",
+              method: "info",
+              data: ["Console was cleared"],
+            },
+          ];
+        }
+      });
+      break;
+    }
     default:
       throw new Error(`Unhandled action type: ${action["type"]}`);
   }