fix npm i

app/srv/ws/sync/editor/code/watcher.ts

@@ -72,7 +72,7 @@ export const startCodeWatcher = async (code: DBCode) => {
                     .forEach((item, ws) => {
                       sendWS(ws, {
                         type: SyncType.Event,
-                        evant: "code",
+                        event: "code",
                         data: {
                           name: code.name,
                           id: code.id,
@@ -97,7 +97,7 @@ export const startCodeWatcher = async (code: DBCode) => {
                     .forEach((item, ws) => {
                       sendWS(ws, {
                         type: SyncType.Event,
-                        evant: "code",
+                        event: "code",
                         data: {
                           name: code.name,
                           id: code.id,

app/web/src/render/ed/logic/ed-global.ts

@@ -112,9 +112,12 @@ export const EDGlobal = {
     popup: {
       code: {
         init: false,
-        open: false,
+        open: true,
         id: "",
-        name: "",
+        name: "site",
+        log: "",
+        loading: false,
+        show_log: false,
       },
       site: null as null | ((site_id: string) => void | Promise<void>),
       site_form: null as null | {

app/web/src/render/ed/logic/ed-sync.tsx

@@ -63,6 +63,15 @@ export const edInitSync = (p: PG) => {
       page_id: params.page_id,
       events: {
         code(arg) {
+          if (arg.event === "pkg-install-start") {
+            p.ui.popup.code.loading = true;
+            p.render();
+          } else if (arg.event === "pkg-install-end") {
+            if (typeof arg.content === "string")
+              p.ui.popup.code.log = arg.content;
+            p.ui.popup.code.loading = false;
+            p.render();
+          }
           console.log(arg);
         },
         activity(arg) {},

app/web/src/render/ed/panel/popup/code/code.tsx

@@ -4,24 +4,25 @@ import { Modal } from "../../../../../utils/ui/modal";
 import { useEffect } from "react";
 import { isLocalhost } from "../../../../../utils/ui/is-localhost";
 import { Loading } from "../../../../../utils/ui/loading";
+import { Tooltip } from "../../../../../utils/ui/tooltip";
+import { Popover } from "../../../../../utils/ui/popover";
 
 export const EdPopCode = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
-  const local = useLocal({ id_code: "" });
 
   useEffect(() => {
     (async () => {
-      if (p.ui.popup.code.init) {
+      if (!p.ui.popup.code.init) {
         const id_code = await p.sync.activity("site", {
           action: p.ui.popup.code.open ? "open" : "close",
           id: p.site.id,
           type: "code",
-          name: "main",
+          name: p.ui.popup.code.name,
         });
 
         if (id_code) {
-          local.id_code = id_code;
+          p.ui.popup.code.id = id_code;
-          local.render();
+          p.render();
         }
       }
       p.ui.popup.code.init = true;
@@ -46,33 +47,76 @@ export const EdPopCode = () => {
     >
       <div
         className={cx(
-          "bg-white fixed inset-[50px] bottom-0 flex flex-col inset-0"
+          "bg-white select-none fixed inset-[50px] bottom-0 flex flex-col inset-0"
         )}
       >
         <div className="border-b flex h-[40px] items-stretch">
           <div
             className={cx(
-              "border-r flex items-center px-2 w-[100px] overflow-ellipsis space-x-1",
+              "border-r flex items-center px-2 w-[200px] overflow-ellipsis space-x-1",
               "cursor-pointer"
             )}
           >
+            <div className="capitalize flex-1">{p.ui.popup.code.name}</div>
+            <div className="flex items-center space-x-1">
+              <div className="hover:bg-blue-100 flex items-center justify-center border w-[20px] h-[20px] flex">
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+                  }}
+                ></div>
+              </div>
+              <div className="hover:bg-blue-100 flex items-center justify-center border w-[20px] h-[20px] flex">
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+                  }}
+                ></div>
+              </div>
+            </div>
+          </div>
+
+          <Tooltip
+            content="Stdout Log"
+            delay={0}
+            placement="bottom"
+            className="flex items-stretch relative"
+            onClick={() => {
+              p.ui.popup.code.show_log = !p.ui.popup.code.show_log;
+              p.render();
+            }}
+          >
+            {p.ui.popup.code.show_log && (
+              <div className="absolute bottom-[-4px] left-0 right-[1px] h-[5px] bg-white"></div>
+            )}
             <div
-              className="-mt-[2px]"
+              className={cx(
+                "border-r flex text-center items-center hover:bg-blue-50 cursor-pointer px-2 transition-all",
+                p.ui.popup.code.loading
+                  ? "border-b-2 border-b-orange-400"
+                  : "border-b-2 border-b-transparent"
+              )}
               dangerouslySetInnerHTML={{
-                __html: `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5C3 2.22386 3.22386 2 3.5 2H11.5C11.7761 2 12 2.22386 12 2.5V13.5C12 13.6818 11.9014 13.8492 11.7424 13.9373C11.5834 14.0254 11.3891 14.0203 11.235 13.924L7.5 11.5896L3.765 13.924C3.61087 14.0203 3.41659 14.0254 3.25762 13.9373C3.09864 13.8492 3 13.6818 3 13.5V2.5ZM4 3V12.5979L6.97 10.7416C7.29427 10.539 7.70573 10.539 8.03 10.7416L11 12.5979V3H4Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+                __html: p.ui.popup.code.loading
+                  ? `<svg version="1.1" id="L2"  width="15" height="15"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><circle fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/><line fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5"><animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite"/></line><line fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74"><animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite"/></line></svg>`
+                  : `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
               }}
             ></div>
-            <div>Site</div>
+          </Tooltip>
-          </div>
         </div>
-        {!local.id_code ? (
+        {p.ui.popup.code.show_log && (
+          <div className="h-[150px] overflow-auto font-mono p-2 text-xs whitespace-pre-wrap border-b">
+            <div>{p.ui.popup.code.log || "stdout is empty..."}</div>
+          </div>
+        )}
+        {!p.ui.popup.code.open || !p.ui.popup.code.id ? (
           <div className="flex flex-1 relative">
             <Loading backdrop={false} />
           </div>
         ) : (
           <iframe
             className="flex flex-1"
-            src={`${vscode_url}folder=/site/code/${local.id_code}`}
+            src={`${vscode_url}folder=/site/code/${p.ui.popup.code.id}`}
           ></iframe>
         )}
       </div>

app/web/src/render/ed/panel/script/code/code.tsx

@@ -1,33 +0,0 @@
-import { useGlobal } from "web-utils";
-import { EDGlobal } from "../../../logic/ed-global";
-import { EdMonaco } from "../monaco/monaco";
-import { useEffect } from "react";
-
-export const EdCode = () => {
-  const p = useGlobal(EDGlobal, "EDITOR");
-
-  useEffect(() => {
-    p.sync.activity("site", {
-      type: "code",
-      id: p.site.id,
-      action: p.ui.popup.code.open ? "open" : "close",
-      name: p.ui.popup.code.name,
-    });
-  }, [p.ui.popup.code.open]);
-
-  if (!p.ui.popup.code.open) return null;
-
-  return (
-    <EdMonaco
-      id="code"
-      type="js"
-      filename=""
-      modal={false}
-      monaco={{
-        value: p.site.js,
-        onChange: async (v) => {},
-      }}
-      onClose={() => {}}
-    />
-  );
-};

app/web/src/render/live/logic/mobile.ts

@@ -1,6 +1,5 @@
-import { apiClient } from "web-utils";
-import { PG } from "./global";
 import { w } from "../../../utils/script/init-api";
+import { PG } from "./global";
 
 type NOTIF_ARG = {
   user_id: any;

app/web/src/utils/sync/ws-client.ts

@@ -78,7 +78,7 @@ export const clientStartSync = async (arg: {
     code: (arg: {
       name: string;
       id: string;
-      event: "pkg-install-start" | "pkg-isntall-end";
+      event: "pkg-install-start" | "pkg-install-end";
       content?: string;
     }) => void;
     activity: (arg: {
@@ -200,7 +200,6 @@ const connect = (
               resolve();
             } else if (msg.type === SyncType.Event) {
               const eventName = msg.event as ClientEvent;
-
               if (event[eventName]) {
                 if (offlineEvents.includes(eventName)) {
                   saveEventOffline(eventName, msg.data);
@@ -210,12 +209,12 @@ const connect = (
             } else if (msg.type === SyncType.ActionResult) {
               const pending = runtime.action.pending[msg.argid];
               if (pending) {
+                pending.resolve(msg.val);
                 delete runtime.action.pending[msg.argid];
                 const idb = conf.idb;
                 if (idb) {
                   await set(msg.argid, msg.val, idb);
                 }
-                pending.resolve(msg.val);
               }
             }
           };

pkgs/core/server/create.ts

@@ -133,7 +133,6 @@ export const createServer = async () => {
           );
         } catch (e) {
           g.log.error(e);
-
           return new Response("Loading...");
         }
       };