temp

snippets/no-react/h.ts

@@ -0,0 +1,94 @@
+// import { nanoid } from 'nanoid';
+import { RefObject, SyntheticEvent } from 'react';
+const randomId = () => {
+  return crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
+};
+const loadChidren = (element: any, children: any[]) => {
+  children.forEach((child) => {
+    if (typeof child === 'boolean') {
+      return;
+    }
+    if (typeof child === 'function') {
+      // console.log('child', child);
+      return;
+    }
+    if (typeof child === 'undefined') {
+      return;
+    }
+    // console.log('child', child);
+    element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  });
+};
+// 在项目中定义 h 函数
+export function h(type: string | Function, props: any, ...children: any[]): HTMLElement {
+  if (typeof type === 'function') {
+    const element = type(props);
+    loadChidren(element, children);
+    return element;
+  }
+  const element = document.createElement(type);
+  const filterKeys = ['onLoad', 'onUnload', 'key'];
+  const key = props?.key || randomId();
+  Object.entries(props || {}).forEach(([key, value]) => {
+    if (filterKeys.includes(key)) {
+      return;
+    }
+    if (key === 'className') {
+      element.setAttribute('class', value as string);
+      return;
+    }
+    if (key.startsWith('on')) {
+      element.addEventListener(key.slice(2).toLowerCase(), value as EventListener);
+      return;
+    }
+    if (key === 'ref' && value) {
+      (value as any).current = element;
+      return;
+    }
+    if (typeof value === 'object') {
+      console.log('error', element, type, value);
+    } else {
+      element.setAttribute(key, value as string);
+    }
+  });
+  const onLoad = props?.onLoad;
+  const checkConnect = () => {
+    if (element.isConnected) {
+      onLoad?.({ el: element, key, _props: props });
+      // console.log('onLoad', element, key);
+      return true;
+    }
+    return false;
+  };
+  setTimeout(() => {
+    const res = checkConnect();
+    if (!res) {
+      setTimeout(() => {}, 1000);
+    }
+  }, 20);
+
+  loadChidren(element, children);
+  return element;
+}
+
+declare global {
+  namespace JSX {
+    // type Element = HTMLElement; // 将 JSX.Element 设置为 HTMLElement
+    interface Element extends HTMLElement {
+      class?: string;
+    }
+  }
+  namespace React {
+    interface FormEvent<T = Element> extends SyntheticEvent<T> {
+      target: EventTarget & (T extends HTMLInputElement ? HTMLInputElement : T);
+    }
+  }
+}
+
+export const useRef = <T = HTMLDivElement>(initialValue: T | null = null): RefObject<T | null> => {
+  return { current: initialValue };
+};
+
+export const useEffect = (callback: () => void) => {
+  setTimeout(callback, 0);
+};