refactor: use QRL instead of PropsFunction

mz0in · Jan 9, 2024 · 0847358 · 0847358
1 parent 29c312b
commit 0847358
Show file tree

Hide file tree

Showing 19 changed files with 55 additions and 79 deletions.
diff --git a/packages/docs/src/components/docsearch/search-box.tsx b/packages/docs/src/components/docsearch/search-box.tsx
@@ -1,10 +1,4 @@
-import {
-  component$,
-  useVisibleTask$,
-  useContext,
-  type Signal,
-  type PropFunction,
-} from '@builder.io/qwik';
+import { component$, useVisibleTask$, useContext, type Signal, type QRL } from '@builder.io/qwik';
 
 import { MAX_QUERY_SIZE } from './constants';
 import { SearchContext } from './context';
@@ -23,7 +17,7 @@ interface SearchBoxProps {
   state: DocSearchState;
   autoFocus: boolean;
   inputRef: Signal<HTMLInputElement | null>;
-  onClose$: PropFunction<() => void>;
+  onClose$: QRL<() => void>;
 }
 
 export const SearchBox = component$((props: SearchBoxProps) => {

diff --git a/packages/docs/src/repl/editor.tsx b/packages/docs/src/repl/editor.tsx
@@ -1,7 +1,7 @@
 import {
   component$,
   type NoSerialize,
-  type PropFunction,
+  type QRL,
   useVisibleTask$,
   useContext,
   useSignal,
@@ -78,7 +78,7 @@ export interface EditorProps {
   input: ReplAppInput;
   ariaLabel: string;
   lineNumbers: 'on' | 'off';
-  onChange$: PropFunction<(path: string, code: string) => void>;
+  onChange$: QRL<(path: string, code: string) => void>;
   wordWrap: 'on' | 'off';
   store: ReplStore;
 }

diff --git a/packages/docs/src/repl/repl-input-panel.tsx b/packages/docs/src/repl/repl-input-panel.tsx
@@ -1,4 +1,4 @@
-import type { PropFunction } from '@builder.io/qwik';
+import type { QRL } from '@builder.io/qwik';
 import { Editor } from './editor';
 import { ReplCommands } from './repl-commands';
 import { ReplTabButton } from './repl-tab-button';
@@ -65,8 +65,8 @@ const formatFilePath = (path: string) => {
 interface ReplInputPanelProps {
   input: ReplAppInput;
   store: ReplStore;
-  onInputChange$: PropFunction<(path: string, code: string) => void>;
-  onInputDelete$: PropFunction<(path: string) => void>;
+  onInputChange$: QRL<(path: string, code: string) => void>;
+  onInputDelete$: QRL<(path: string) => void>;
   enableDownload?: boolean;
   enableCopyToPlayground?: boolean;
   enableInputDelete?: boolean;

diff --git a/packages/docs/src/repl/repl-tab-button.tsx b/packages/docs/src/repl/repl-tab-button.tsx
@@ -1,7 +1,7 @@
-import type { PropFunction } from '@builder.io/qwik';
+import type { PropsOf, Component } from '@builder.io/qwik';
 import { CloseIcon } from '../components/svgs/close-icon';
 
-export const ReplTabButton = (props: ReplTabButtonProps) => {
+export const ReplTabButton: Component<ReplTabButtonProps> = (props) => {
   return (
     <div
       key={props.text}
@@ -32,8 +32,8 @@ export const ReplTabButton = (props: ReplTabButtonProps) => {
 interface ReplTabButtonProps {
   text: string;
   isActive: boolean;
-  onClick$: PropFunction<() => void>;
-  onClose$?: PropFunction<() => void>;
+  onClick$: PropsOf<'button'>['onClick$'];
+  onClose$?: PropsOf<'button'>['onClick$'];
   cssClass?: Record<string, boolean>;
   enableInputDelete?: boolean;
 }
diff --git a/packages/docs/src/routes/demo/resumability/component.tsx b/packages/docs/src/routes/demo/resumability/component.tsx
@@ -1,5 +1,5 @@
 import {
-  type QwikIntrinsicElements,
+  type PropsOf,
   component$,
   useStylesScoped$,
   Slot,
@@ -214,7 +214,7 @@ export const UnderstandingResumability = component$(() => {
   );
 });
 
-export function ReadyIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function ReadyIcon(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/docs/src/routes/docs/(qwik)/components/events/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/events/index.mdx
@@ -292,9 +292,9 @@ export const Button = component$<ButtonProps>(({ onTripleClick$ }) => {
 ```
 </CodeSandbox>
 
-⚠️ When using type annotations, we need to wrap the event type with `PropFunction` in order to tell TypeScript that the function can't be called synchronously.
+⚠️ When using type annotations, we need to wrap the event type with `QRL` in order to tell TypeScript that the function can't be called synchronously.
 ```tsx
-component$(({ onTripleClick$ } : { onTripleClick$?: PropFunction<() => void> }) => {
+component$(({ onTripleClick$ } : { onTripleClick$?: QRL<() => void> }) => {
   ...
 });
 ```

diff --git a/packages/docs/src/routes/docs/integrations/icons/index.mdx b/packages/docs/src/routes/docs/integrations/icons/index.mdx
@@ -69,9 +69,9 @@ Icones is powered by [iconify](https://iconify.design/) which allows to easy add
 Click the `Qwik` button to copy the icon code to your clipboard, then paste it into your project.
 
 ```tsx
-import type { QwikIntrinsicElements } from '@builder.io/qwik'
+import type { PropsOf } from '@builder.io/qwik'
 
-export function OcticonAlertFill12(props: QwikIntrinsicElements['svg'], key: string) {
+export function OcticonAlertFill12(props: PropsOf<'svg'>, key: string) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 12 12" {...props} key={key}><path fill="#888888" d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z"></path></svg>
   )

diff --git a/packages/docs/src/routes/tutorial/props/closures/index.mdx b/packages/docs/src/routes/tutorial/props/closures/index.mdx
@@ -32,12 +32,12 @@ Most of the time we use the first form as it allows us to inline our callbacks d
 A component can declare a callback in its props by:
 
 - Property that ends in `$` (as in `goodbye$`)
-- The type of the property is `PropFunction<T>` where `T` is the lazy reference type that the QRL points to (function signature).
+- The type of the property is `QRL<T>` where `T` is the lazy reference type that the QRL points to (function signature).
 
 ```tsx
 interface MyComponentProps {
-  goodbye$: PropFunction<() => void>;
-  hello$: PropFunction<() => void>;
+  goodbye$: QRL<() => void>;
+  hello$: QRL<() => void>;
 }
 
 export const MyComponent = component$((props: MyComponentProps) => { ... });

diff --git a/packages/docs/src/routes/tutorial/props/closures/problem/app.tsx b/packages/docs/src/routes/tutorial/props/closures/problem/app.tsx
@@ -1,4 +1,4 @@
-import { component$, $, type PropFunction } from '@builder.io/qwik';
+import { component$, $, type QRL } from '@builder.io/qwik';
 
 export default component$(() => {
   const goodbye$ = $(() => alert('Good Bye!'));
@@ -10,8 +10,8 @@ export default component$(() => {
 });
 
 interface MyComponentProps {
-  goodbye$: PropFunction<() => void>;
-  hello$: PropFunction<(name: string) => void>;
+  goodbye$: QRL<() => void>;
+  hello$: QRL<(name: string) => void>;
 }
 export const MyComponent = component$((props: MyComponentProps) => {
   return (

diff --git a/packages/docs/src/routes/tutorial/props/closures/solution/app.tsx b/packages/docs/src/routes/tutorial/props/closures/solution/app.tsx
@@ -1,4 +1,4 @@
-import { component$, $, type PropFunction } from '@builder.io/qwik';
+import { component$, $, type QRL } from '@builder.io/qwik';
 
 export default component$(() => {
   const goodbye$ = $(() => alert('Good Bye!'));
@@ -10,8 +10,8 @@ export default component$(() => {
 });
 
 interface MyComponentProps {
-  goodbye$: PropFunction<() => void>;
-  hello$: PropFunction<(name: string) => void>;
+  goodbye$: QRL<() => void>;
+  hello$: QRL<(name: string) => void>;
 }
 export const MyComponent = component$((props: MyComponentProps) => {
   return (

diff --git a/packages/eslint-plugin-qwik/src/validLexicalScope.ts b/packages/eslint-plugin-qwik/src/validLexicalScope.ts
@@ -183,7 +183,7 @@ export const validLexicalScope = createRule({
                       node: firstArg.expression,
                       data: {
                         varName: firstArg.expression.name,
-                        solution: `Fix the type of ${firstArg.expression.name} to be PropFunction`,
+                        solution: `Fix the type of ${firstArg.expression.name} to be QRL`,
                       },
                     });
                   }

diff --git a/packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-component-prop-function.tsx b/packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-component-prop-function.tsx
@@ -1,6 +1,6 @@
-import { component$, type PropFunction } from '@builder.io/qwik';
+import { component$, type QRL } from '@builder.io/qwik';
 
-export default component$<{ onClick$: PropFunction<() => void> }>(({ onClick$ }) => {
+export default component$<{ onClick$: QRL<() => void> }>(({ onClick$ }) => {
   return (
     <button
       onClick$={() => {

diff --git a/packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-component-props.tsx b/packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-component-props.tsx
@@ -1,17 +1,9 @@
-import { component$ } from '@builder.io/qwik';
-
-export interface PropFnInterface<ARGS extends any[], RET> {
-  (...args: ARGS): Promise<RET>;
-}
-
-export type PropFunction<T extends Function> = T extends (...args: infer ARGS) => infer RET
-  ? PropFnInterface<ARGS, RET>
-  : never;
+import { type QRL, component$ } from '@builder.io/qwik';
 
 export interface Props {
-  method$: PropFunction<() => void>;
-  method1$: PropFunction<() => void>;
-  method2$: PropFunction<() => void> | null;
+  method$: QRL<() => void>;
+  method1$: QRL<() => void>;
+  method2$: QRL<() => void> | null;
   method3$: any;
 }
 

diff --git a/packages/insights/src/components/icons/copy.tsx b/packages/insights/src/components/icons/copy.tsx
@@ -1,8 +1,8 @@
-import { component$, useSignal, type PropFunction, useStylesScoped$ } from '@builder.io/qwik';
+import { component$, useSignal, type QRL, useStylesScoped$ } from '@builder.io/qwik';
 
 interface CopyIconProps {
   class?: string;
-  onClick$: PropFunction<() => void>;
+  onClick$: QRL<() => void>;
 }
 
 export const CopyIcon = component$<CopyIconProps>(({ onClick$, ...props }) => {

diff --git a/packages/qwik-city/runtime/src/error-boundary.tsx b/packages/qwik-city/runtime/src/error-boundary.tsx
@@ -1,9 +1,9 @@
-import { component$, useErrorBoundary, Slot, type PropFunction } from '@builder.io/qwik';
+import { component$, useErrorBoundary, Slot, type QRL } from '@builder.io/qwik';
 
 /** @public */
 export interface ErrorBoundaryProps {
   children: any;
-  fallback$: PropFunction<(ev: any) => any>;
+  fallback$: QRL<(ev: any) => any>;
 }
 
 /** @public */

diff --git a/packages/qwik-react/src/react/qwikify.tsx b/packages/qwik-react/src/react/qwikify.tsx
@@ -14,14 +14,14 @@ import {
 
 import { isBrowser, isServer } from '@builder.io/qwik/build';
 import type { Root } from 'react-dom/client';
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent as ReactFC } from 'react';
 import * as client from './client';
 import { renderFromServer } from './server-render';
 import { getHostProps, main, mainExactProps, useWakeupSignal } from './slot';
 import type { Internal, QwikifyOptions, QwikifyProps } from './types';
 
-export function qwikifyQrl<PROPS extends {}>(
-  reactCmp$: QRL<FunctionComponent<PROPS & { children?: any }>>,
+export function qwikifyQrl<PROPS extends Record<any, any>>(
+  reactCmp$: QRL<ReactFC<PROPS & { children?: any }>>,
   opts?: QwikifyOptions
 ) {
   return component$((props: QwikifyProps<PROPS>) => {

diff --git a/packages/qwik-react/src/react/types.ts b/packages/qwik-react/src/react/types.ts
@@ -1,10 +1,10 @@
-import type { PropFunction, Signal } from '@builder.io/qwik';
-import type { FunctionComponent } from 'react';
+import type { QRL, Signal } from '@builder.io/qwik';
+import type { FunctionComponent as ReactFC } from 'react';
 import type { Root } from 'react-dom/client';
 
 export interface Internal<PROPS> {
   root: Root | undefined;
-  cmp: FunctionComponent<PROPS>;
+  cmp: ReactFC<PROPS>;
 }
 
 export interface QwikifyBase {
@@ -65,44 +65,34 @@ export interface QwikifyBase {
    * Adds a `click` event listener to the host element, this event will be dispatched even if the
    * react component is not hydrated.
    */
-  'host:onClick$'?: PropFunction<(ev: Event) => void>;
+  'host:onClick$'?: QRL<(ev: Event) => void>;
 
   /**
    * Adds a `blur` event listener to the host element, this event will be dispatched even if the
    * react component is not hydrated.
    */
-  'host:onBlur$'?: PropFunction<(ev: Event) => void>;
+  'host:onBlur$'?: QRL<(ev: Event) => void>;
 
   /**
    * Adds a `focus` event listener to the host element, this event will be dispatched even if the
    * react component is not hydrated.
    */
-  'host:onFocus$'?: PropFunction<(ev: Event) => void>;
+  'host:onFocus$'?: QRL<(ev: Event) => void>;
 
   /**
    * Adds a `mouseover` event listener to the host element, this event will be dispatched even if
    * the react component is not hydrated.
    */
-  'host:onMouseOver$'?: PropFunction<(ev: Event) => void>;
+  'host:onMouseOver$'?: QRL<(ev: Event) => void>;
 
   children?: any;
 }
 
-export type TransformProps<PROPS extends {}> = {
-  [K in keyof PROPS as TransformKey<K>]: TransformProp<K, PROPS[K]>;
+export type TransformProps<PROPS extends Record<any, any>> = {
+  [K in keyof PROPS as K extends `on${string}` ? `${K}$` : K]: PROPS[K];
 };
 
-export type TransformKey<K extends string | number | symbol> = K extends `on${string}`
-  ? `${K}$`
-  : K;
-
-export type TransformProp<K extends string | number | symbol, V> = K extends `on${string}`
-  ? V extends Function
-    ? PropFunction<V>
-    : never
-  : V;
-
-export type QwikifyProps<PROPS extends {}> = TransformProps<PROPS> & QwikifyBase;
+export type QwikifyProps<PROPS extends Record<any, any>> = TransformProps<PROPS> & QwikifyBase;
 
 export interface QwikifyOptions {
   tagName?: string;

diff --git a/starters/apps/e2e/src/components/events/events.tsx b/starters/apps/e2e/src/components/events/events.tsx
@@ -1,7 +1,7 @@
 import {
   component$,
   useStore,
-  type PropFunction,
+  type QRL,
   useSignal,
   useOnWindow,
   $,
@@ -58,8 +58,8 @@ export const Events = component$(() => {
 });
 
 interface ButtonProps {
-  onTransparentClick$?: PropFunction<(ev: Event) => any>;
-  onWrappedClick$?: PropFunction<(nu: number) => void>;
+  onTransparentClick$?: QRL<(ev: Event) => any>;
+  onWrappedClick$?: QRL<(nu: number) => void>;
 }
 
 export const Buttons = component$((props: ButtonProps) => {

diff --git a/starters/apps/e2e/src/components/render/render.tsx b/starters/apps/e2e/src/components/render/render.tsx
@@ -1,7 +1,6 @@
 import {
   component$,
   type JSXNode,
-  type PropFunction,
   useSignal,
   useStore,
   useStylesScoped$,
@@ -14,6 +13,7 @@ import {
   HTMLFragment,
   type PropsOf,
   Slot,
+  type QRL,
 } from "@builder.io/qwik";
 import { delay } from "../streaming/demo";
 import { isServer } from "@builder.io/qwik/build";
@@ -373,7 +373,7 @@ export const Issue2889 = component$(() => {
 type Product = string;
 
 export type ProductRelationProps = {
-  render$: PropFunction<(products: Product[]) => JSXNode>;
+  render$: QRL<(products: Product[]) => JSXNode>;
 };
 
 export const ProductRelations = component$((props: ProductRelationProps) => {