intellisense support for fragment and lazy fixed

codeAdityagithub · codeAdityagithub · commit 5cfb7db6477e · 2025-03-12T12:14:03.000+05:30
diff --git a/build/index.d.ts b/build/index.d.ts
@@ -7,6 +7,7 @@ import { JSXInternal } from './jsx';
 export * from './jsx';
 declare global {
     export import JSX = JSXInternal;
+    const FRAGMENT = "FRAGMENT";
 }
 export * from './types';
 export { cleanUp, createEffect, createSignal, render, createPromise, createRef, computed, createElement, lazy, ArraySignal, BaseSignal, ObjectSignal, PrimitiveSignal, PublicArraySignal, PublicObjectSignal, PublicSignal, Ref, };
diff --git a/build/jsx.d.ts b/build/jsx.d.ts
@@ -1,5 +1,4 @@
 import { Ref } from './index';
-import { Fiber } from './types';
 type Defaultize<Props, Defaults> = Props extends any ? Partial<Pick<Props, Extract<keyof Props, keyof Defaults>>> & // Include the remaining properties from Props
 Pick<Props, Exclude<keyof Props, keyof Defaults>> : never;
 type Booleanish = boolean | "true" | "false";
@@ -64,7 +63,7 @@ export declare namespace JSXInternal {
     export type ElementType<P = any> = {
         [K in keyof IntrinsicElements]: P extends IntrinsicElements[K] ? K : never;
     }[keyof IntrinsicElements] | ComponentType<P>;
-    export type Element = Fiber;
+    export type Element = ComponentChild;
     export type ElementClass = ComponentType<any>;
     export interface ElementAttributesProperty {
         props: any;
@@ -81,13 +80,7 @@ export declare namespace JSXInternal {
     export interface CSSProperties extends AllCSSProperties, DOMCSSProperties {
         cssText?: string | null;
     }
-    export interface SignalLike<T> {
-        value: T;
-        peek(): T;
-        subscribe(fn: (value: T) => void): () => void;
-    }
-    export type Signalish<T> = T | SignalLike<T>;
-    export type UnpackSignal<T> = T extends SignalLike<infer V> ? V : T;
+    export type Signalish<T> = T | (() => T);
     export interface SVGAttributes<Target extends EventTarget = SVGElement> extends HTMLAttributes<Target> {
         accentHeight?: Signalish<number | string | undefined>;
         accumulate?: Signalish<"none" | "sum" | undefined>;
diff --git a/build/lazy/Lazyloading.d.ts b/build/lazy/Lazyloading.d.ts
@@ -1,8 +1,9 @@
+import { ComponentChildren } from '../index';
 type PropsOf<T extends (...args: any) => any> = Parameters<T> extends [] ? {} : Parameters<T>[0];
 export declare function lazy<T extends (props: any) => any>(importFn: () => Promise<{
     default: T;
 }>): (props: PropsOf<T> & {
-    fallback?: string | Node;
-    errorFallback?: string | Node | ((error: Error) => Node);
+    fallback?: ComponentChildren;
+    errorFallback?: ComponentChildren | ((error: Error) => ComponentChildren);
 }) => ReturnType<T>;
 export {};
diff --git a/build/refract.es.js b/build/refract.es.js
@@ -1208,7 +1208,10 @@ function ot(e) {
       throw new Error(
         "Invalid errorFallback: Expected a string, a valid JSX node, or a function returning a JSX node."
       );
-    return /* @__PURE__ */ oe("FRAGMENT", null, () => o.value ? r.fallback : l.value !== null ? r.errorFallback ? typeof r.errorFallback == "function" ? r.errorFallback(l.value) : r.errorFallback : "Unknown error occurred while lazy loading component, use errorFallback prop to override" : t && /* @__PURE__ */ oe(t, { ...r }));
+    return /* @__PURE__ */ oe("FRAGMENT", null, () => o.value ? r.fallback : l.value !== null ? r.errorFallback ? typeof r.errorFallback == "function" ? r.errorFallback(l.value) : r.errorFallback : "Unknown error occurred while lazy loading component, use errorFallback prop to override" : (
+      // @ts-expect-error
+      t && /* @__PURE__ */ oe(t, { ...r })
+    ));
   };
 }
 export {
diff --git a/src/components/FC1.tsx b/src/components/FC1.tsx
@@ -21,19 +21,19 @@ const FC1 = () => {
     });
     // const compText = computed(() => "FC1" + str.value);
     return (
-        <>
+        <div>
             This is FC1 {() => textSignal.value + str.value}
             <h2>This is {() => str.value}</h2>
             <button
                 onClick={() => {
-                    clicked.value = !clicked.value;
-                    str.value = clicked.value ? "FC1 Clicked" : "FC1";
+                    clicked.update((prev) => !prev);
+                    str.update(clicked.value ? "FC1 Clicked" : "FC1");
                 }}
                 className={() => (textSignal.value ? "clicked" : "")}
             >
                 Click
             </button>
-        </>
+        </div>
     );
 };
 export default FC1;
diff --git a/src/components/IntellisenseTest.tsx b/src/components/IntellisenseTest.tsx
@@ -0,0 +1,63 @@
+import {
+    createSignal,
+    createPromise,
+    createRef,
+    createEffect,
+    cleanUp,
+    computed,
+    lazy,
+} from "../index";
+
+const LazyFC = lazy(() => import("./FC1"));
+
+const IntellisenseTest = () => {
+    const count = createSignal<number>(0);
+    const arr = createSignal<number[]>([1, 2]);
+    const obj = createSignal({ a: 1, b: 2 });
+
+    createEffect(() => {
+        count.update((prev) => prev + 1);
+        arr.update((prev) => prev.push(1));
+        obj.update((prev) => prev.a++);
+    });
+    const comp = computed(() => arr.value[0]);
+    const promise = createPromise(async () => {
+        return await fetch("fakeapi");
+    });
+    const ref = createRef<HTMLDivElement>();
+
+    cleanUp(() => {
+        console.log("cleanup");
+    });
+    return (
+        <div ref={ref}>
+            IntellisenseTest
+            <LazyFC
+                fallback="hello"
+                errorFallback={"error"}
+            />
+            <LazyFC
+                fallback={"hello"}
+                errorFallback={(err) => "hello" + err.message}
+            />
+            <LazyFC fallback={<div>hello</div>} />
+            <LazyFC fallback={<Test />} />
+            <LazyFC fallback={() => <Test />} />
+            {() => {
+                promise.value.status === "resolved"
+                    ? promise.value.data
+                    : promise.value.error;
+            }}
+            <div
+                className={() => count.value.toString()}
+                data-test="test"
+            ></div>
+            <>Fragment</>
+        </div>
+    );
+};
+
+const Test = () => {
+    return <div>test</div>;
+};
+export default IntellisenseTest;
diff --git a/src/components/Test.tsx b/src/components/Test.tsx
@@ -23,7 +23,7 @@ const Test = () => {
     setTimeout(() => {
         showTextSignal.update((prev) => !prev);
     }, 2000);
-    const h1ref = createRef();
+    const h1ref = createRef<HTMLHeadingElement>();
     // console.log("hello");
     return (
         <div>
diff --git a/src/index.ts b/src/index.ts
@@ -21,10 +21,12 @@ import type {
 } from "./signals/signal";
 
 export * from "./jsx";
-import { JSXInternal } from "./jsx";
+import { JSXInternal, FRAGMENT as Fragment } from "./jsx";
 declare global {
     // @ts-expect-error
     export import JSX = JSXInternal;
+    // @ts-expect-error
+    const FRAGMENT = "FRAGMENT";
 }
 export * from "./types";
 export {
diff --git a/src/jsx.ts b/src/jsx.ts
@@ -130,7 +130,7 @@ export namespace JSXInternal {
                   : never;
           }[keyof IntrinsicElements]
         | ComponentType<P>;
-    export type Element = Fiber;
+    export type Element = ComponentChild;
     export type ElementClass = ComponentType<any>;
 
     export interface ElementAttributesProperty {
@@ -158,15 +158,7 @@ export namespace JSXInternal {
         cssText?: string | null;
     }
 
-    export interface SignalLike<T> {
-        value: T;
-        peek(): T;
-        subscribe(fn: (value: T) => void): () => void;
-    }
-
-    export type Signalish<T> = T | SignalLike<T>;
-
-    export type UnpackSignal<T> = T extends SignalLike<infer V> ? V : T;
+    export type Signalish<T> = T | (() => T);
 
     export interface SVGAttributes<Target extends EventTarget = SVGElement>
         extends HTMLAttributes<Target> {
diff --git a/src/lazy/Lazyloading.tsx b/src/lazy/Lazyloading.tsx
@@ -1,4 +1,4 @@
-import { createSignal, PublicSignal } from "../index";
+import { ComponentChildren, createSignal, Fiber, PublicSignal } from "../index";
 
 declare const FRAGMENT = "FRAGMENT";
 
@@ -11,8 +11,10 @@ export function lazy<T extends (props: any) => any>(
     importFn: () => Promise<{ default: T }>
 ): (
     props: PropsOf<T> & {
-        fallback?: string | Node;
-        errorFallback?: string | Node | ((error: Error) => Node);
+        fallback?: ComponentChildren;
+        errorFallback?:
+            | ComponentChildren
+            | ((error: Error) => ComponentChildren);
     }
 ) => ReturnType<T> {
     let Component: T | null = null;
@@ -95,7 +97,8 @@ export function lazy<T extends (props: any) => any>(
                                 ? props.errorFallback(error.value)
                                 : props.errorFallback
                             : "Unknown error occurred while lazy loading component, use errorFallback prop to override"
-                        : Component && <Component {...props} />
+                        : // @ts-expect-error
+                          Component && <Component {...props} />
                 }
             </>
         ) as unknown as ReturnType<T>;

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ import { JSXInternal } from './jsx';`
`7`	`7`	`export * from './jsx';`
`8`	`8`	`declare global {`
`9`	`9`	`export import JSX = JSXInternal;`
	`10`	`+ const FRAGMENT = "FRAGMENT";`
`10`	`11`	`}`
`11`	`12`	`export * from './types';`
`12`	`13`	`export { cleanUp, createEffect, createSignal, render, createPromise, createRef, computed, createElement, lazy, ArraySignal, BaseSignal, ObjectSignal, PrimitiveSignal, PublicArraySignal, PublicObjectSignal, PublicSignal, Ref, };`