feat(web): plugin playground / display console

web/src/beta/features/PluginPlayground/Code/hook.ts

@@ -51,10 +51,70 @@ const getYmlJson = (file: FileType) => {
 export default ({ files }: Props) => {
   const [widgets, setWidgets] = useState<Widgets>();
   const [, setNotification] = useNotification();
+  const [fileOutputs, setFileOutputs] = useState<
+    {
+      title: string;
+      output: string;
+    }[]
+  >();
 
   const executeCode = useCallback(() => {
     const ymlFile = files.find((file) => file.title.endsWith(".yml"));
 
+    const jsFiles = files.filter((file) => file.title.endsWith(".js"));
+
+    const outputs = jsFiles.map((file) => {
+      try {
+        const fn = new Function(
+          `"use strict";
+          const reearth = {
+            ui: {
+              show: function () {}
+            },
+            popup: {
+              show: function () {}
+            },
+            modal: {
+              show: function () {}
+            }
+          };
+
+          let capturedConsole = [];
+
+          console.log = (message) => {
+            capturedConsole.push(message);
+          };
+
+          console.error = (message) => {
+            capturedConsole.push(message);
+          };
+
+          ${file.sourceCode};
+
+          return capturedConsole.join("\\n");
+          `
+        );
+
+        return {
+          title: file.title,
+          output: fn()
+        };
+      } catch (error) {
+        if (error instanceof Error) {
+          return {
+            title: file.title,
+            output: error.message
+          };
+        }
+        return {
+          title: file.title,
+          output: "Failed to execute"
+        };
+      }
+    });
+
+    setFileOutputs(outputs);
+
     if (!ymlFile) return;
 
     const getYmlResult = getYmlJson(ymlFile);
@@ -66,13 +126,7 @@ export default ({ files }: Props) => {
 
     const ymlJson = getYmlResult.data;
 
-    if (!Array.isArray(ymlJson.extensions) || ymlJson.extensions.length === 0) {
-      setNotification({
-        type: "error",
-        text: "No extensions found in YAML file."
-      });
-      return;
-    }
+    if (!ymlJson.extensions) return;
 
     const widgets = ymlJson.extensions.reduce<NonNullable<Widgets>>(
       (prv, cur) => {
@@ -126,6 +180,7 @@ export default ({ files }: Props) => {
 
   return {
     executeCode,
-    widgets
+    widgets,
+    fileOutputs
   };
 };

web/src/beta/features/PluginPlayground/Console/index.tsx

@@ -1,7 +1,34 @@
+import { styled } from "@reearth/services/theme";
 import { FC } from "react";
 
-const Console: FC = () => {
-  return <div>Console content</div>;
+type Props = {
+  fileOutputs:
+    | {
+        title: string;
+        output: string;
+      }[]
+    | undefined;
 };
 
+const Console: FC<Props> = ({ fileOutputs }) => {
+  if (!fileOutputs) return null;
+  return (
+    <Wrapper>
+      {fileOutputs.map(({ title, output }, index) => (
+        <div key={index}>
+          {`[${title}]`} {output}
+        </div>
+      ))}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div(() => ({
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "100%",
+  height: "100%",
+  overflow: "auto"
+}));
+
 export default Console;

web/src/beta/features/PluginPlayground/hooks.tsx

@@ -24,7 +24,7 @@ export default () => {
     handlePluginDownload
   } = usePlugins();
 
-  const { widgets, executeCode } = useCode({
+  const { widgets, executeCode, fileOutputs } = useCode({
     files: selectedPlugin.files
   });
 
@@ -46,10 +46,10 @@ export default () => {
       {
         id: "console",
         name: "Console",
-        children: <Console />
+        children: <Console fileOutputs={fileOutputs} />
       }
     ],
-    []
+    [fileOutputs]
   );
 
   const SubRightAreaTabs: TabItem[] = useMemo(