fix

app/srv/api/code-site.ts

@@ -46,9 +46,8 @@ export const _ = {
           `\
 import React from "react";
 import {
-  FC as ReactFC,
+  ReactNode,
-  ReactNode as RNode,
+  ReactElement,
-  ReactElement as RElement,
 } from "react";
 import * as prisma from "./prisma";
 ${iftext(

app/srv/ws/sync/code/parts/init/typings.ts

@@ -29,21 +29,26 @@ export const initTypings = async (
     const typings_file = Bun.file(typings_path);
 
     if (!(await typings_file.exists())) {
-      return false;
+      await Bun.write(typings_file, "");
     }
+
+    const typings_log = Bun.file(
+      dir.data(`/code/${id_site}/site/src/typings.log`)
+    );
+    await Bun.write(typings_log, "");
     code.internal.typings[id_site] = {
       timeout: Date.now(),
       watch: watch(typings_path),
       spawn: Bun.spawn({
         cmd: [
           ...`${dir.path(
-            "node_modules/tsc"
+            "node_modules/.bin/tsc"
           )} --watch --moduleResolution node --emitDeclarationOnly --outFile ../typings.d.ts --declaration --noEmit false`.split(
             " "
           ),
         ],
         cwd: dir.data(`/code/${id_site}/site/src`),
-        stdio: ["ignore", "ignore", "ignore"],
+        stdio: [typings_log, typings_log, "ignore"],
       }),
     };
     let timeout = null as any;

app/srv/ws/sync/code/templates/_gitignore

@@ -0,0 +1,4 @@
+*.log
+node_modules
+lib
+typings

app/web/src/utils/script/mount.tsx

@@ -1,9 +1,9 @@
 import type { OnMount } from "@monaco-editor/react";
 import trim from "lodash.trim";
-import {
+// import {
-  MonacoJsxSyntaxHighlight,
+//   MonacoJsxSyntaxHighlight,
-  getWorker,
+//   getWorker,
-} from "monaco-jsx-syntax-highlight-v2";
+// } from "monaco-jsx-syntax-highlight-v2";
 import { PG, active } from "../../nova/ed/logic/ed-global";
 import { jscript } from "./jscript";
 
@@ -16,28 +16,28 @@ type CompilerOptions = Parameters<
 export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
   const m = monaco as any;
 
-  if (editor.getModel()) {
+  // if (editor.getModel()) {
-    const jsxHgController = new MonacoJsxSyntaxHighlight(getWorker(), monaco);
+  //   const jsxHgController = new MonacoJsxSyntaxHighlight(getWorker(), monaco);
-    const { highlighter } = jsxHgController.highlighterBuilder({
+  //   const { highlighter } = jsxHgController.highlighterBuilder({
-      editor: editor,
+  //     editor: editor,
-    });
+  //   });
 
-    if (typeof editor.getModel === "function") {
+  //   if (typeof editor.getModel === "function") {
-      highlighter();
+  //     highlighter();
-    }
+  //   }
-    editor.onDidChangeModelContent(() => {
+  //   editor.onDidChangeModelContent(() => {
-      if (typeof editor.getModel === "function") {
+  //     if (typeof editor.getModel === "function") {
-        try {
+  //       try {
-          highlighter();
+  //         highlighter();
-        } catch (e) {}
+  //       } catch (e) {}
-      }
+  //     }
-    });
+  //   });
-  }
+  // }
-  if (!m.customJSMounted) {
+  // if (!m.customJSMounted) {
-    m.customJSMounted = true;
+  //   m.customJSMounted = true;
-  } else {
+  // } else {
-    return;
+  //   return;
-  }
+  // }
 
   const compilerOptions: CompilerOptions = {
     jsx: monaco.languages.typescript.JsxEmit.ReactJSX,

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

@@ -1,10 +1,10 @@
 export const baseTypings = `
-  type FC<T> = ReactFC<T>;
+  type FC<T> = React.FC<T>;
   const Fragment: typeof React.Fragment;
-  const ReactNode: RNode;
+  const ReactNode: typeo React.ReactNode;
   const useCallback: typeof React.useCallback;
   const useMemo: typeof React.useMemo;
-  const ReactElement: RElement;
+  const ReactElement: typeof React.ReactElement;
   const isValidElement: typeof React.isValidElement;
   const useEffect: typeof React.useEffect;
   const useState: typeof React.useState;
@@ -45,7 +45,7 @@ export const baseTypings = `
       className: string
     }
   };
-  const children: RElement;
+  const children: ReactElement;
 
   type IItem = {
     id: string;
@@ -101,7 +101,7 @@ export const baseTypings = `
 
   const _item: undefined | PrasiItem;
   
-  const PassProp: (arg:Record<string, any> & { children: RNode }>) => RElement;
+  const PassProp: (arg:Record<string, any> & { children: ReactNode }>) => ReactElement;
   const mobile: {
     notif: {
       register: (user_id: string) => void;
@@ -140,5 +140,5 @@ export const baseTypings = `
       local: T & { render: () => void }
     ) => void | (() => void) | Promise<void | (() => void)>;
     cache?: boolean;
-  }) => RElement
+  }) => ReactElement
 `;

app/web/src/utils/script/typings.ts

@@ -111,46 +111,18 @@ declare module "ts:prisma_ext" {
 
   monaco.languages.typescript.typescriptDefaults.setExtraLibs([
     {
-      filePath: "jsx-runtime.d.ts",
+      filePath: "csstype.d.ts",
-      content: `declare module "react/jsx-runtime" {
+      content: `declare module "csstype" {
-import * as React from "react";
+${await loadText("https://cdn.jsdelivr.net/npm/csstype@3.1.3/index.d.ts")}
-export { Fragment } from "react";
+}`,
-
+    },
-export namespace JSX {
+    {
-    type ElementType = React.JSX.ElementType;
+      filePath: "prop-types.d.ts",
-    interface Element extends React.JSX.Element {}
+      content: `declare module "prop-types" {
-    interface ElementClass extends React.JSX.ElementClass {}
+${await loadText(
-    interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
+  "https://cdn.jsdelivr.net/npm/@types/prop-types@15.7.12/index.d.ts"
-    interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
+)}
-    type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
+}`,
-    interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
-    interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
-    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
-}
-
-/**
- * Create a React element.
- *
- * You should not use this function directly. Use JSX and a transpiler instead.
- */
-export function jsx(
-    type: React.ElementType,
-    props: unknown,
-    key?: React.Key,
-): React.ReactElement;
-
-/**
- * Create a React element.
- *
- * You should not use this function directly. Use JSX and a transpiler instead.
- */
-export function jsxs(
-    type: React.ElementType,
-    props: unknown,
-    key?: React.Key,
-): React.ReactElement;
-}
-`,
     },
     {
       filePath: "react.d.ts",
@@ -158,6 +130,39 @@ export function jsxs(
 ${await loadText("https://cdn.jsdelivr.net/npm/@types/react@18.3.1/index.d.ts")}
 }`,
     },
+    {
+      filePath: "jsx-runtime.d.ts",
+      content: `declare module "react/jsx-runtime" {
+import * as React from "react";
+export { Fragment } from "react";
+
+export namespace JSX {
+  type ElementType = React.JSX.ElementType;
+}
+
+/**
+* Create a React element.
+*
+* You should not use this function directly. Use JSX and a transpiler instead.
+*/
+export function jsx(
+  type: React.ElementType,
+  props: unknown,
+  key?: React.Key,
+): React.ReactElement;
+
+/**
+* Create a React element.
+*
+* You should not use this function directly. Use JSX and a transpiler instead.
+*/
+export function jsxs(
+  type: React.ElementType,
+  props: unknown,
+  key?: React.Key,
+): React.ReactElement;
+`,
+    },
   ]);
 
   const propText = extractProp({
@@ -177,12 +182,7 @@ ${await loadText("https://cdn.jsdelivr.net/npm/@types/react@18.3.1/index.d.ts")}
   register(
     monaco,
     `\
-import React from "react";
+import * as React from "react";
-import {
-  FC as ReactFC,
-  ReactNode as RNode,
-  ReactElement as RElement,
-} from "react";
 import prisma from 'ts:prisma';
 import { PrismaExtend } from "ts:prisma_ext"
 
@@ -210,7 +210,7 @@ declare global {
 }
 
   `,
-    "ts:global.d.ts"
+    "ts:prasi-global.d.ts"
   );
 
   register(monaco, propText.join("\n"), "ts:typings.d.ts");