feat: support react (QwikDev#397)

Mouvedia · Apr 23, 2022 · c7d00ce · c7d00ce
1 parent 016388c
commit c7d00ce
Show file tree

Hide file tree

Showing 72 changed files with 2,247 additions and 1,509 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/docs/pages/api/cheat-sheet.mdx b/docs/pages/api/cheat-sheet.mdx
@@ -37,7 +37,6 @@ HTML attributes with the following syntax have a special meaning to Qwik.
 | `on:qInit="<QRL>"`     | Fired when the DOM is first loaded |
 | `on:qInterval="<QRL>"` | TODO: document                     |
 | `on:qTimeout="<QRL>"`  | TODO: document                     |
-| `on:qRender="<QRL>"`   | TODO: document                     |
 
 ### Binding syntax
 

diff --git a/package.json b/package.json
@@ -58,6 +58,11 @@
     "@types/path-browserify": "1.0.0",
     "@types/prompts": "2.0.14",
     "@types/semver": "^7.3.9",
+    "node-fetch": "^3.2.3",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "@types/source-map-support": "0.5.4",
     "@typescript-eslint/eslint-plugin": "5.20.0",
     "@typescript-eslint/parser": "5.20.0",

diff --git a/src/core/api.md b/src/core/api.md
@@ -12,6 +12,12 @@ export function $<T>(expression: T): QRL<T>;
 // @public
 export function Async<T>(props: AsyncProps<T>): JSXNode<any>;
 
+// @public (undocumented)
+const Comment_2: FunctionComponent<{
+    text?: string;
+}>;
+export { Comment_2 as Comment }
+
 // Warning: (ae-forgotten-export) The symbol "Component" needs to be exported by the entry point index.d.ts
 //
 // @public
@@ -137,41 +143,9 @@ export type NoSerialize<T> = (T & {
 // @alpha (undocumented)
 export function noSerialize<T extends {}>(input: T): NoSerialize<T>;
 
-// @public
-export interface Observer {
-    <T extends {}>(obj: T): T;
-}
-
-// @public
-export function on(event: string, eventFn: QRL<() => void>): void;
-
-// @public
-export function onDocument(event: string, eventFn: QRL<() => void>): void;
-
-// @public
-export const onPause$: (first: () => void) => void;
-
-// @public
-export function onPauseQrl(dehydrateFn: QRL<() => void>): void;
-
 // @public (undocumented)
 export type OnRenderFn<PROPS> = (props: PROPS) => ValueOrPromise<JSXNode<any> | null>;
 
-// @public
-export const onResume$: (first: () => void) => void;
-
-// @public
-export function onResumeQrl(resumeFn: QRL<() => void>): void;
-
-// @public
-export const onUnmount$: (first: () => void) => void;
-
-// @public
-export function onUnmountQrl(unmountFn: QRL<() => void>): void;
-
-// @public
-export function onWindow(event: string, eventFn: QRL<() => void>): void;
-
 // @public
 export function pauseContainer(elmOrDoc: Element | Document): void;
 
@@ -288,35 +262,66 @@ export const Slot: FunctionComponent<{
     children?: any;
 }>;
 
+// @public
+export interface Tracker {
+    <T extends {}>(obj: T): T;
+    // (undocumented)
+    <T extends {}, B extends keyof T>(obj: T, prop: B): T[B];
+}
+
+// @alpha (undocumented)
+export function untrack<T>(proxy: T): T;
+
 // @alpha (undocumented)
 export function unwrapSubscriber<T extends {}>(obj: T): any;
 
-// @public (undocumented)
-export function useDocument(): Document;
+// @public
+export const useCleanup$: (first: () => void) => void;
 
-// @alpha (undocumented)
-export const useEffect$: (first: (obs: Observer) => void | (() => void)) => void;
+// @public
+export function useCleanupQrl(unmountFn: QRL<() => void>): void;
 
-// @alpha (undocumented)
-export function useEffectQrl(watchQrl: QRL<(obs: Observer) => void | (() => void)>): void;
+// @public (undocumented)
+export function useDocument(): Document;
 
 // @public
 export function useHostElement(): Element;
 
 // @public
 export function useLexicalScope<VARS extends any[]>(): VARS;
 
+// @public
+export function useOn(event: string, eventFn: QRL<() => void>): void;
+
+// @public
+export function useOnDocument(event: string, eventFn: QRL<() => void>): void;
+
+// @public
+export function useOnWindow(event: string, eventFn: QRL<() => void>): void;
+
+// @public
+export const usePause$: (first: () => void) => void;
+
+// @public
+export function usePauseQrl(dehydrateFn: QRL<() => void>): void;
+
 // @alpha (undocumented)
 export function useRef<T = Element>(current?: T): Ref<T>;
 
+// @public
+export const useResume$: (first: () => void) => void;
+
+// @public
+export function useResumeQrl(resumeFn: QRL<() => void>): void;
+
 // @alpha (undocumented)
 export const useScopedStyles$: (first: string) => void;
 
 // @alpha (undocumented)
 export function useScopedStylesQrl(styles: QRL<string>): void;
 
 // @public
-export function useStore<STATE extends {}>(initialState: STATE): STATE;
+export function useStore<STATE extends object>(initialState: STATE | (() => STATE)): STATE;
 
 // @alpha
 export const useStyles$: (first: string) => void;
@@ -327,11 +332,19 @@ export function useStylesQrl(styles: QRL<string>): void;
 // @alpha (undocumented)
 export function useSubscriber<T extends {}>(obj: T): T;
 
+// Warning: (ae-forgotten-export) The symbol "WatchFn" needs to be exported by the entry point index.d.ts
+//
 // @public
-export const useWatch$: (first: (obs: Observer) => void | (() => void)) => void;
+export const useWatch$: (first: WatchFn) => void;
+
+// @alpha (undocumented)
+export const useWatchEffect$: (first: WatchFn) => void;
+
+// @alpha (undocumented)
+export function useWatchEffectQrl(watchQrl: QRL<WatchFn>): void;
 
 // @public
-export function useWatchQrl(watchQrl: QRL<(obs: Observer) => void | (() => void)>): void;
+export function useWatchQrl(watchQrl: QRL<WatchFn>): void;
 
 // @public
 export type ValueOrPromise<T> = T | Promise<T>;

diff --git a/src/core/component/component-ctx.ts b/src/core/component/component-ctx.ts
@@ -9,7 +9,7 @@ import { getProps, QContext } from '../props/props';
 import { processNode } from '../render/jsx/jsx-runtime';
 import { wrapSubscriber } from '../use/use-subscriber';
 import { logDebug } from '../util/log';
-import type { ValueOrPromise } from '..';
+import type { ValueOrPromise } from '../util/types';
 import { removeSub } from '../object/q-object';
 
 export const firstRenderComponent = (rctx: RenderContext, ctx: QContext): ValueOrPromise<void> => {

diff --git a/src/core/component/component.public.ts b/src/core/component/component.public.ts
@@ -9,7 +9,7 @@ import { styleKey } from './qrl-styles';
 import type { ComponentBaseProps } from '../render/jsx/types/jsx-qwik-attributes';
 import type { ValueOrPromise } from '../util/types';
 import { getContext } from '../props/props';
-import type { FunctionComponent } from '../index';
+import type { FunctionComponent } from '../render/jsx/types/jsx-node';
 import { jsx } from '../render/jsx/jsx-runtime';
 import { useSequentialScope } from '../use/use-store.public';
 
@@ -24,8 +24,8 @@ import { useSequentialScope } from '../use/use-store.public';
  * @public
  */
 // </docs>
-export function onUnmountQrl(unmountFn: QRL<() => void>): void {
-  throw new Error('IMPLEMENT: onUnmount' + unmountFn);
+export function useCleanupQrl(unmountFn: QRL<() => void>): void {
+  throw new Error('IMPLEMENT: useCleanupQrl' + unmountFn);
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onUnmount">
@@ -39,7 +39,7 @@ export function onUnmountQrl(unmountFn: QRL<() => void>): void {
  * @public
  */
 // </docs>
-export const onUnmount$ = implicit$FirstArg(onUnmountQrl);
+export const useCleanup$ = implicit$FirstArg(useCleanupQrl);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onResume">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -53,8 +53,8 @@ export const onUnmount$ = implicit$FirstArg(onUnmountQrl);
  * @public
  */
 // </docs>
-export function onResumeQrl(resumeFn: QRL<() => void>): void {
-  onWindow('load', resumeFn);
+export function useResumeQrl(resumeFn: QRL<() => void>): void {
+  useOnWindow('qInit', resumeFn);
 }
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#onHydrate">
@@ -69,7 +69,13 @@ export function onResumeQrl(resumeFn: QRL<() => void>): void {
  * @public
  */
 // </docs>
-export const onResume$ = implicit$FirstArg(onResumeQrl);
+export const useResume$ = implicit$FirstArg(useResumeQrl);
+
+export function useVisibleQrl(resumeFn: QRL<() => void>): void {
+  useOn('qVisible', resumeFn);
+}
+
+export const useVisible$ = implicit$FirstArg(useVisibleQrl);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#OnPause">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -85,7 +91,7 @@ export const onResume$ = implicit$FirstArg(onResumeQrl);
  * @public
  */
 // </docs>
-export function onPauseQrl(dehydrateFn: QRL<() => void>): void {
+export function usePauseQrl(dehydrateFn: QRL<() => void>): void {
   throw new Error('IMPLEMENT: onPause' + dehydrateFn);
 }
 
@@ -103,7 +109,7 @@ export function onPauseQrl(dehydrateFn: QRL<() => void>): void {
  * @public
  */
 // </docs>
-export const onPause$ = implicit$FirstArg(onPauseQrl);
+export const usePause$ = implicit$FirstArg(usePauseQrl);
 
 // <docs markdown="https://hackmd.io/c_nNpiLZSYugTU0c5JATJA#on">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -119,7 +125,7 @@ export const onPause$ = implicit$FirstArg(onPauseQrl);
  * @public
  */
 // </docs>
-export function on(event: string, eventFn: QRL<() => void>) {
+export function useOn(event: string, eventFn: QRL<() => void>) {
   const el = useHostElement();
   const ctx = getContext(el);
   qPropWriteQRL(undefined, ctx, `on:${event}`, eventFn);
@@ -139,7 +145,7 @@ export function on(event: string, eventFn: QRL<() => void>) {
  * @public
  */
 // </docs>
-export function onDocument(event: string, eventFn: QRL<() => void>) {
+export function useOnDocument(event: string, eventFn: QRL<() => void>) {
   const el = useHostElement();
   const ctx = getContext(el);
   qPropWriteQRL(undefined, ctx, `on-document:${event}`, eventFn);
@@ -159,7 +165,7 @@ export function onDocument(event: string, eventFn: QRL<() => void>) {
  * @public
  */
 // </docs>
-export function onWindow(event: string, eventFn: QRL<() => void>) {
+export function useOnWindow(event: string, eventFn: QRL<() => void>) {
   const el = useHostElement();
   const ctx = getContext(el);
   qPropWriteQRL(undefined, ctx, `on-window:${event}`, eventFn);

diff --git a/src/core/import/qrl.examples.tsx b/src/core/import/qrl.examples.tsx
@@ -1,17 +1,17 @@
-import { onDocument, QRL, $, qrl, useStore, implicit$FirstArg } from '@builder.io/qwik';
+import { useOnDocument, QRL, $, qrl, useStore, implicit$FirstArg } from '@builder.io/qwik';
 /* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 // <docs anchor="qrl-usage-$">
-onDocument(
+useOnDocument(
   'mousemove',
   $(() => console.log('mousemove'))
 );
 // </docs>
 
 // <docs anchor="qrl-usage-$-optimized">
 // FILE: <current file>
-onDocument('mousemove', qrl('./chunk-abc.js', 'onMousemove'));
+useOnDocument('mousemove', qrl('./chunk-abc.js', 'onMousemove'));
 
 // FILE: chunk-abc.js
 export const onMousemove = () => console.log('mousemove');
@@ -22,7 +22,7 @@ export const onMousemove = () => console.log('mousemove');
 export function useMyFunction(callback: QRL<() => void>) {
   doExtraStuff();
   // The callback passed to `onDocument` requires `QRL`.
-  onDocument('mousemove', callback);
+  useOnDocument('mousemove', callback);
 }
 // </docs>
 

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -4,15 +4,15 @@
 export {
   componentQrl,
   component$,
-  onUnmountQrl,
-  onUnmount$,
-  onPauseQrl,
-  onPause$,
-  onResumeQrl,
-  onResume$,
-  on,
-  onDocument,
-  onWindow,
+  useCleanupQrl,
+  useCleanup$,
+  usePauseQrl,
+  usePause$,
+  useResumeQrl,
+  useResume$,
+  useOn,
+  useOnDocument,
+  useOnWindow,
   useStylesQrl,
   useStyles$,
   useScopedStylesQrl,
@@ -43,8 +43,8 @@ export type { CorePlatform } from './platform/types';
 // Watch
 //////////////////////////////////////////////////////////////////////////////////////////
 export { useWatch$, useWatchQrl } from './watch/watch.public';
-export { useEffect$, useEffectQrl } from './watch/watch.public';
-export type { Observer } from './watch/watch.public';
+export { useWatchEffect$, useWatchEffectQrl } from './watch/watch.public';
+export type { Tracker } from './watch/watch.public';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // JSX Support
@@ -58,7 +58,7 @@ export type { PromiseValue } from './render/jsx/async.public';
 export { h } from './render/jsx/factory';
 export { Host, SkipRerender } from './render/jsx/host.public';
 export { Slot } from './render/jsx/slot.public';
-export { Fragment, jsx, jsxDEV, jsxs } from './render/jsx/jsx-runtime';
+export { Fragment, jsx, jsxDEV, jsxs, Comment } from './render/jsx/jsx-runtime';
 export type {
   ComponentChild,
   ComponentChildren,
@@ -85,6 +85,8 @@ export type { Ref } from './use/use-store.public';
 //////////////////////////////////////////////////////////////////////////////////////////
 export type { ValueOrPromise } from './util/types';
 export type { NoSerialize } from './object/q-object';
+export { unwrapProxy as untrack } from './object/q-object';
+
 export { noSerialize } from './object/q-object';
 
 export { version } from './version';