wip mobile cap

app/srv/ws/sync/editor/prep-code.ts

@@ -1 +1,6 @@
-export const prepCode = async (site_id: string, name: string) => {};
+export const prepCode = async (site_id: string, name: string) => {
+  // cek folder code
+  // pastikan struktur folder code
+  // create jika ga ada
+  // nyalain bun file watcher
+};

app/web/src/index.tsx

@@ -5,6 +5,7 @@ import "./index.css";
 import { createAPI, createDB, reloadDBAPI } from "./utils/script/init-api";
 import { w } from "./utils/types/general";
 import * as Y from "yjs";
+import { registerMobile } from "./render/live/logic/mobile";
 
 (window as any).Y = Y;
 
@@ -13,7 +14,13 @@ const start = async () => {
   let react = {
     root: null as null | ReactRoot,
   };
-  if (!["localhost", "127.0.0.1"].includes(location.hostname)) {
+  (window as any).mobile = registerMobile();
+
+  if (
+    !["localhost", "127.0.0.1", "trycloudflare.com", "ngrok"].find((e) =>
+      location.hostname.includes(e)
+    )
+  ) {
     const sw = await registerServiceWorker();
 
     const cacheCurrentPage = () => {

app/web/src/render/editor/panel/script/monaco/types/base.ts

@@ -1,75 +0,0 @@
-export const baseTypings = `
-type FC<T> = React.FC<T>;
-const Fragment = React.Fragment;
-const ReactNode = React.ReactNode;
-const useCallback = React.useCallback;
-const useMemo = React.useMemo;
-const ReactElement = React.ReactElement;
-const isValidElement = React.isValidElement;
-const useEffect = React.useEffect;
-const useState = React.useState;
-
-const pathname: string;
-const isEditor: boolean;
-const isLayout: boolean;
-const isMobile: boolean;
-const isDesktop: boolean;
-const preload: (pathname: string) => void;
-const apiHeaders: Record<string, any>;
-const navigate: (url:string) => void;
-const params: any;
-const cx = (...classNames: any[]) => string;
-const css = (
-  tag: CSSAttribute | TemplateStringsArray | string,
-  ...props: Array<string | number | boolean | undefined | null>
-) => string;
-
-const props: {
-  className: string;
-  onPointerDown?: () => void;
-  onPointerMove?: () => void;
-  onPointerLeave?: () => void;
-}; 
-const children: ReactNode; 
-
-const PassProp: FC<Record<string,any> & {children: React.ReactNode; }>;
-const PassChild: FC<{name: string}>;
-const Preload: FC<{url: string[]}>;
-const apiurl: string;
-const pageid: string;
-type ITEM = {
-  id: string
-  name: string;
-  type: 'item' | 'text';
-  adv?: {
-    js?: string;
-    jsBuilt?: string;
-    css?: string;
-    html?: string;
-  },
-  text: string,
-  html: string,
-  component?: { id:string, props: Record<string, {
-    value: string, 
-    valueBuilt: string,
-    meta: { type: string }
-  }>},
-  childs: ITEM[]
-}
-const newElement: (gen?: (item: ITEM) => ITEM | ITEM[]) => React.ReactNode;
-const Local: <T extends Record<string, any>>(arg: {
-  name: string;
-  value: T;
-  idx?: any;
-  children: ((local: T & { render: () => void }) => any);
-  deps?: any[];
-  effect?: (
-    local: T & { render: () => void }
-  ) => void | (() => void) | Promise<void | (() => void)>;
-  hook?: (
-    local: T & { render: () => void }
-  ) => void | (() => void) | Promise<void | (() => void)>;
-  cache?: boolean;
-}) => ReactNode;
-
-`;

app/web/src/render/editor/panel/script/monaco/typings.ts

@@ -1,8 +1,8 @@
 import type { OnMount } from "@monaco-editor/react";
 import { w } from "../../../../../utils/types/general";
 import { PG } from "../../../logic/global";
-import { baseTypings } from "./types/base";
 import { extractProp } from "./types/prop";
+import { baseTypings } from "../../../../../utils/script/types/base";
 export type MonacoEditor = Parameters<OnMount>[0];
 type Monaco = Parameters<OnMount>[1];
 

app/web/src/render/live/logic/init.tsx

@@ -1,14 +1,11 @@
 import { createRouter } from "radix3";
 import { validate } from "uuid";
 import { type apiClient } from "web-utils";
-import {
-  createAPI,
-  createDB,
-  initApi
-} from "../../../utils/script/init-api";
+import { createAPI, createDB, initApi } from "../../../utils/script/init-api";
 import importModule from "../../editor/tools/dynamic-import";
 import { LSite, PG } from "./global";
 import { validateLayout } from "./layout";
+import { registerMobile } from "./mobile";
 
 export const w = window as unknown as {
   basepath: string;
@@ -23,7 +20,7 @@ export const w = window as unknown as {
   apiClient: typeof apiClient;
   apiurl: string;
   preload: (path: string) => void;
-
+  mobile?: ReturnType<typeof registerMobile>;
   externalAPI: {
     mode: "dev" | "prod";
     devUrl: string;
@@ -35,6 +32,10 @@ export const initLive = async (p: PG, domain_or_siteid: string) => {
   if (p.status === "init") {
     p.status = "loading";
 
+    if (w.mobile && w.mobile.send) {
+      w.mobile.send({ type: "ready" });
+    }
+
     w.isEditor = false;
     w.isLayout = true;
     w.apiHeaders = {};

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

@@ -0,0 +1,49 @@
+type NOTIF_ARG = {
+  user_id: string;
+  body: string;
+  title: string;
+  data?: any;
+};
+export const registerMobile = () => {
+  const default_mobile = {
+    notif: {
+      register: (user_id: string) => {},
+      send: (data: NOTIF_ARG) => {},
+      onTap: (data: NOTIF_ARG) => {},
+    },
+  };
+  if (window.parent) {
+    let config = { notif_token: "" };
+    window.addEventListener("message", ({ data: raw }) => {
+      if (typeof raw === "object" && raw.mobile) {
+        const data = raw as unknown as {
+          type: "notification-token";
+          token: string;
+        };
+
+        console.log("mobile receive", data);
+
+        switch (data.type) {
+          case "notification-token":
+            config.notif_token = data.token;
+            break;
+        }
+      }
+    });
+
+    return {
+      send: (msg: { type: "ready" }) => {
+        window.parent.postMessage({ mobile: true, ...msg }, "*");
+      },
+      config,
+      notif: {
+        register: (user_id: string) => {},
+        send: (data: NOTIF_ARG) => {},
+        onTap: (data: NOTIF_ARG) => {},
+      },
+    };
+  }
+  return {
+    ...default_mobile,
+  };
+};

app/web/src/utils/script/types/base.ts

@@ -57,6 +57,23 @@ type ITEM = {
   childs: ITEM[]
 }
 const newElement: (gen?: (item: ITEM) => ITEM | ITEM[]) => React.ReactNode;
+const mobile: {
+  notif: {
+    register: (user_id: string) => void;
+    send: (data: {
+      user_id: string,
+      title: string,
+      body: string,
+      data: any
+    }) => void;
+    onTap: (data: {
+      user_id: string,
+      title: string,
+      body: string,
+      data: any
+    }) => void | Promise<void>
+  }
+};
 const Local: <T extends Record<string, any>>(arg: {
   name: string;
   idx?: any;