fix

app/web/package.json

@@ -16,7 +16,6 @@
     "algoliasearch": "^4.20.0",
     "date-fns": "^2.30.0",
     "downshift": "^8.2.2",
-    "emmet-monaco-es": "^5.3.0",
     "esbuild-wasm": "^0.19.4",
     "idb-keyval": "^6.2.1",
     "js-base64": "^3.7.5",
@@ -84,8 +83,8 @@
     "@types/lodash.set": "^4.3.7",
     "@types/lodash.trim": "4.5.7",
     "@types/prettier": "3.0.0",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/tinycolor2": "^1.4.4",
     "@types/uuid": "9.0.5",
     "@types/vscode": "^1.83.0",

app/web/src/base/page/all.tsx

@@ -1,4 +1,4 @@
-import { page } from "web-init";
+import { page } from "web-utils";
 
 export default page({
   url: "*",

app/web/src/base/page/auth/login.tsx

@@ -1,4 +1,4 @@
-import { page } from "web-init";
+import { page } from "web-utils";
 import { useLocal } from "web-utils";
 import { Loading } from "../../../utils/ui/loading";
 import { formStyle } from "../../../utils/ui/form.style";

app/web/src/base/page/auth/logout.tsx

@@ -1,4 +1,4 @@
-import { page } from "web-init";
+import { page } from "web-utils";
 import { Loading } from "../../../utils/ui/loading";
 
 export default page({

app/web/src/base/page/auth/register.tsx

@@ -1,4 +1,4 @@
-import { page } from "web-init";
+import { page } from "web-utils";
 import { useLocal } from "web-utils";
 import { Loading } from "../../../utils/ui/loading";
 import { formStyle } from "../../../utils/ui/form.style";

app/web/src/base/page/ed.tsx

@@ -1,4 +1,4 @@
-import { page } from "web-init";
+import { page } from "web-utils";
 import { Loading } from "../../utils/ui/loading";
 
 export default page({

app/web/src/base/page/editor.tsx

@@ -1,4 +1,4 @@
-import { page } from "web-init";
+import { page } from "web-utils";
 import { useLocal } from "web-utils";
 import { Loading } from "../../utils/ui/loading";
 import { Suspense, lazy, useEffect } from "react";

app/web/src/base/page/live.tsx

@@ -1,5 +1,5 @@
 import { validate } from "uuid";
-import { page } from "web-init";
+import { page } from "web-utils";
 import { Live } from "../../render/live/live";
 import { defaultLoader } from "../../render/live/logic/default-loader";
 

app/web/src/base/root.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react";
+
+import { useState } from "react";
+import { GlobalContext } from "web-utils";
+
+const w = window as unknown as {
+  prasiContext: any;
+  rootRender: any;
+};
+
+w.prasiContext = {
+  global: {},
+  render() {},
+};
+
+export const Root: FC<{}> = ({}) => {
+  const [_, render] = useState({});
+  w.prasiContext.render = () => {
+    render({});
+  };
+  w.rootRender = w.prasiContext.render;
+
+  const Provider = GlobalContext.Provider as FC<{ value: any; children: any }>;
+  return <Provider value={w.prasiContext}>Hello mantapun alamuko</Provider>;
+};

app/web/src/index.tsx

@@ -1,4 +1,6 @@
+import { createRoot } from "react-dom/client";
 import "./index.css";
+import { Root } from "./base/root";
 
 const registerServiceWorker = async () => {
   if ("serviceWorker" in navigator) {
@@ -17,3 +19,8 @@ const registerServiceWorker = async () => {
 };
 
 registerServiceWorker();
+
+const el = document.getElementById("root");
+if (el) {
+  createRoot(el).render(<Root />);
+}

app/web/src/render/editor/logic/global.ts

@@ -1,5 +1,5 @@
 import { FC, ReactElement, ReactNode } from "react";
-import { createRouter } from "web-init";
+import { createRouter } from "web-utils";
 import { CompDoc } from "../../../base/global/content-editor";
 import { IContent, MContent, MPage } from "../../../utils/types/general";
 import { IItem, MItem } from "../../../utils/types/item";

app/web/src/render/editor/panel/side/ui/FileImageGallery.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { fetchSendApi } from "web-init/src/web/iframe-cors";
+import { fetchSendApi } from "web-utils/src/web/iframe-cors";
 import { useGlobal, useLocal } from "web-utils";
 import { Gallery } from "./Gallery";
 import { Loading } from "../../../../../utils/ui/loading";

app/web/src/render/editor/panel/side/ui/FilePicker.tsx

@@ -1,5 +1,5 @@
 import { FC, useTransition } from "react";
-import { fetchSendApi } from "web-init/src/web/iframe-cors";
+import { fetchSendApi } from "web-utils/src/web/iframe-cors";
 import { useLocal } from "web-utils";
 import { Button } from "./Button";
 export const FilePicker: FC<{

app/web/src/render/editor/panel/side/ui/Gallery.tsx

@@ -1,7 +1,7 @@
 import { format } from "date-fns";
 import get from "lodash.get";
 import { FC, useTransition } from "react";
-import { fetchSendApi } from "web-init/src/web/iframe-cors";
+import { fetchSendApi } from "web-utils/src/web/iframe-cors";
 import { useGlobal, useLocal } from "web-utils";
 import { Loading } from "../../../../../utils/ui/loading";
 import { EditorGlobal } from "../../../logic/global";

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { createRouter } from "web-init";
+import { createRouter } from "web-utils";
 import { CompDoc } from "../../../base/global/content-editor";
 import { IContent, MContent, MPage } from "../../../utils/types/general";
 import { IItem, MItem } from "../../../utils/types/item";

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

@@ -1,5 +1,5 @@
 import { validate } from "uuid";
-import { createRouter, type apiClient } from "web-init";
+import { createRouter, type apiClient } from "web-utils";
 import {
   createAPI,
   createDB,

app/web/src/render/site/site.tsx

@@ -1,8 +1,6 @@
 import { FC, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { defineReact } from "web-init/src/web/define-react";
-import { defineWindow } from "web-init/src/web/define-window";
-import { GlobalContext } from "web-utils";
+import { GlobalContext, defineReact, defineWindow } from "web-utils";
 import { SiteLoader } from "./site-loader";
 
 const w = window as unknown as {
@@ -22,15 +20,16 @@ const Root: FC<{ url: URL; Live: any }> = ({ url, Live }) => {
   };
   w.rootRender = w.prasiContext.render;
 
+  const Provider = GlobalContext.Provider as FC<{ value: any; children: any }>;
   return (
-    <GlobalContext.Provider value={w.prasiContext}>
+    <Provider value={w.prasiContext}>
       <Live
         domain={url.host}
         pathname={location.pathname}
         loader={SiteLoader}
         mode="prod"
       />
-    </GlobalContext.Provider>
+    </Provider>
   );
 };
 

app/web/src/utils/script/init-api.ts

@@ -1,7 +1,7 @@
 import { createStore, get, set } from "idb-keyval";
 import trim from "lodash.trim";
-import { apiClient, dbClient } from "web-init";
-import { createFrameCors } from "web-init/src/web/iframe-cors";
+import { apiClient, dbClient } from "web-utils";
+import { createFrameCors } from "web-utils/src/web/iframe-cors";
 export const w = window as unknown as {
   prasiApi: Record<string, any>;
   apiHeaders: any;

app/web/tsconfig.json

@@ -20,12 +20,5 @@
     "isolatedModules": true,
     // "noEmit": true,
     "jsx": "react-jsx",
-    "baseUrl": "./src",
   },
-  "include": [
-    "./src/**/*",
-    "./jsx-*.ts",
-    "pkgs/coditor",
-    "public/jsx-worker.js",
-  ]
 }

app/web/types/content.ts

@@ -1,3 +0,0 @@
-import * as PAGES from "../../../app/gen/web/page/web";
-
-export const pages = PAGES;

package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "bun run --silent --watch ./pkgs/core/index.ts dev",
+    "clean": "rm -rf app/static && rm -rf app/web/.parcel-cache",
     "prod": "bun run --silent ./pkgs/core/index.ts",
     "pull": "cd app/db && bun prisma db pull && bun prisma generate",
     "pkgs-upgrade": "bun run --silent ./pkgs/core/upgrade.ts"

pkgs/core/utils/global.ts

@@ -1,4 +1,4 @@
-import { Server } from "bun";
+import { Server, Subprocess } from "bun";
 import { Logger } from "pino";
 import { RadixRouter } from "radix3";
 import { PrismaClient } from "../../../app/db/db";
@@ -24,4 +24,5 @@ export const g = global as unknown as {
     js: string;
     etag: string;
   };
+  parcel: Subprocess;
 };

pkgs/core/utils/parcel.ts

@@ -14,13 +14,13 @@ export const parcelBuild = async () => {
     "--dist-dir",
     dir(`app/static`),
   ];
-
-  await removeAsync(dir("app/static"));
-
   g.log.info(`Building web with parcel`);
   if (g.mode !== "dev") {
+    await removeAsync(dir("app/static"));
+    await removeAsync(dir("app/web/.parcel-cache"));
+
     const parcel = spawn({
-      cmd: args,
+      cmd: args, 
       cwd: dir("app/web"),
       stdio: ["ignore", "inherit", "inherit"],
     });
@@ -32,6 +32,8 @@ export const parcelBuild = async () => {
       stdio: ["ignore", "pipe", "pipe"],
     });
 
+    g.parcel = parcel;
+
     let output = true;
     (async () => {
       if (parcel.stdout) {

pkgs/web-utils/package.json

@@ -3,6 +3,7 @@
   "main": "src/export.ts",
   "dependencies": {
     "@paralleldrive/cuid2": "2.2.0",
+    "goober": "^2.1.13",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

pkgs/web-utils/src/define-react.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import JSXDevRuntime from "react/jsx-dev-runtime";
+import JSXRuntime from "react/jsx-runtime";
+
+export const defineReact = () => {
+  const w = typeof window === "object" ? window : (globalThis as any);
+
+  w.React = React;
+  w.ReactDOM = ReactDOM;
+  w.JSXRuntime = JSXRuntime;
+  w.JSXDevRuntime = JSXDevRuntime;
+  w.Fragment = React.Fragment;
+};

pkgs/web-utils/src/define-window.ts

@@ -0,0 +1,93 @@
+import { css, extractCss } from "goober";
+import { waitUntil } from "web-utils";
+
+export const defineWindow = async (awaitServerUrl = true) => {
+  let w = typeof window === "object" ? window : (globalThis as any);
+
+  if (awaitServerUrl) await waitUntil(() => w.__SRV_URL__);
+
+  const location = window["location"];
+
+  const host =
+      0 === location.protocol.indexOf("http") ? location.hostname : "localhost",
+    scheme =
+      "https:" != location.protocol || /localhost|127.0.0.1|0.0.0.0/.test(host)
+        ? "http"
+        : "https";
+
+  if (w.__SRV_URL__) {
+    w.serverurl = w.__SRV_URL__;
+    const serverURL = new URL(w.serverurl);
+    if (
+      serverURL.hostname === "localhost" ||
+      serverURL.hostname === "127.0.0.1"
+    ) {
+      serverURL.hostname = location.hostname;
+      serverURL.pathname = serverURL.pathname === "/" ? "" : serverURL.pathname;
+      w.serverurl = serverURL.toString();
+      if (w.serverurl.endsWith("/")) {
+        w.serverurl = w.serverurl.substring(0, w.serverurl.length - 1);
+      }
+    }
+  }
+
+  const port = location.port;
+  w.baseurl = scheme + "://" + host + (port ? ":" + port : "") + "/";
+  w.basepath = "/";
+  w.css = css;
+  w.extractCss = extractCss;
+  w.pathname = location.pathname;
+
+  w.cx = (...classNames: any[]) => {
+    const result: string[] = [];
+
+    classNames
+      .filter((e) => {
+        if (e) {
+          if (typeof e === "string" && e.trim()) return true;
+          else return true;
+        }
+        return false;
+      })
+      .forEach((e) => {
+        if (Array.isArray(e)) {
+          for (const f of e) {
+            if (typeof f === "string" && f.trim()) {
+              result.push(f.trim());
+            }
+          }
+        } else result.push(e.trim());
+      });
+    return result.join(" ");
+  };
+
+  w.navigate = (href: string) => {
+    let _href = href;
+
+    if (typeof w.navigateOverride === "function") {
+      _href = w.navigateOverride(href);
+      if (!_href) return null;
+    }
+
+    history.pushState({}, "", _href);
+    if (w.rootRes) w.rootRes.pathname = href;
+    w.pathname = href;
+
+    if (w.rootRender) {
+      w.rootRender();
+    }
+  };
+
+  if (typeof window === "object") {
+    window.addEventListener("popstate", () => {
+      if (w.preventPopRender) {
+        w.preventPopRender = false;
+        return;
+      }
+      if (w.rootRender) {
+        w.pathname = location.pathname;
+        w.rootRender();
+      }
+    });
+  }
+};

pkgs/web-utils/src/export.ts

@@ -3,4 +3,8 @@ export * from "./wait-until";
 export * from "./lazify";
 export * from "./use-global";
 import * as _React from "react";
+export * from "./page";
+export * from "./global";
+export * from "./define-react";
+export * from "./define-window";
 export const React = _React;

pkgs/web-utils/src/global.ts

@@ -0,0 +1,4 @@
+declare global {
+  const navigate: (path: string) => void;
+}
+export {};

pkgs/web-utils/src/page.ts

@@ -0,0 +1,5 @@
+import { FC, ReactElement } from "react";
+
+export const page = (arg: { url: string; component: FC<any> }) => {
+  return arg;
+};

pkgs/web-utils/src/use-local.ts

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 
-import "../../web-init/src/types";
 
 export const useLocal = <T extends object>(
   data: T,