refactor: sync render and useStore() not recursive (#618)

Author: manucorporat

packages/docs/src/components/content-nav/content-nav.tsx

@@ -3,7 +3,7 @@ import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
 import styles from './content-nav.css?inline';
 
 export const ContentNav = component$(
-  async () => {
+  () => {
     useScopedStyles$(styles);
 
     const page = usePage();

packages/docs/src/components/repl/repl.tsx

@@ -18,7 +18,7 @@ import { getReplVersion } from './repl-version';
 import { updateReplOutput } from './repl-output-update';
 import replServerUrl from '@repl-server-url';
 
-export const Repl = component$(async (props: ReplProps) => {
+export const Repl = component$((props: ReplProps) => {
   useScopedStyles$(styles);
 
   const input = props.input;

packages/docs/src/layouts/builder/builder.tsx

@@ -3,14 +3,14 @@ import { useLocation } from '../../utils/useLocation';
 import { Header } from '../../components/header/header';
 import styles from './builder.css?inline';
 
-export const Builder = component$(async () => {
+export const Builder = component$(() => {
   useStyles$(styles);
   const loc = useLocation();
-  const html = await fetchQwikBuilderContent(loc.pathname);
+  const promise = fetchQwikBuilderContent(loc.pathname);
   return (
     <Host>
       <Header />
-      {html && <main class="builder" dangerouslySetInnerHTML={html} />}
+      {promise.then((html) => html && <main class="builder" dangerouslySetInnerHTML={html} />)}
     </Host>
   );
 });

packages/qwik/src/core/api.md

@@ -68,18 +68,14 @@ export const component$: <PROPS extends {}>(onMount: OnRenderFn<PROPS>, options?
 // @public (undocumented)
 export type Component<PROPS extends {}> = FunctionComponent<PublicProps<PROPS>>;
 
-// @public (undocumented)
-export type ComponentChild = JSXNode<any> | object | string | number | bigint | boolean | null | undefined;
-
-// @public (undocumented)
-export type ComponentChildren = ComponentChild[] | ComponentChild;
-
 // @alpha (undocumented)
 export interface ComponentCtx {
     // (undocumented)
     $hostElement$: Element;
+    // Warning: (ae-forgotten-export) The symbol "ProcessedJSXNode" needs to be exported by the entry point index.d.ts
+    //
     // (undocumented)
-    $slots$: JSXNode[];
+    $slots$: ProcessedJSXNode[];
     // (undocumented)
     $styleClass$: string | undefined;
     // (undocumented)
@@ -323,22 +319,13 @@ export { jsx }
 export { jsx as jsxDEV }
 export { jsx as jsxs }
 
-// @public (undocumented)
-export type JSXFactory<T, PROPS extends {} = any> = (props: PROPS, state?: any) => JSXNode<T>;
-
 // @public (undocumented)
 export interface JSXNode<T = any> {
     // (undocumented)
-    children: JSXNode[];
-    // (undocumented)
-    elm?: Node;
-    // (undocumented)
-    key: string | null;
+    key: string | number | null;
     // (undocumented)
     props: Record<string, any> | null;
     // (undocumented)
-    text?: string;
-    // (undocumented)
     type: T;
 }
 
@@ -361,7 +348,7 @@ export type On$Props<T extends {}> = {
 };
 
 // @public (undocumented)
-export type OnRenderFn<PROPS> = (props: PROPS) => ValueOrPromise<JSXNode<any> | null | (() => JSXNode<any>)>;
+export type OnRenderFn<PROPS> = (props: PROPS) => JSXNode<any> | null | (() => JSXNode<any>);
 
 // @alpha
 export const pauseContainer: (elmOrDoc: Element | Document) => SnapshotResult;
@@ -447,11 +434,6 @@ export interface Ref<T> {
 // @alpha
 export const render: (parent: Element | Document, jsxNode: JSXNode<unknown> | FunctionComponent<any>) => Promise<void>;
 
-// @public (undocumented)
-export type RenderableProps<P, RefType = any> = P & Readonly<{
-    children?: ComponentChildren;
-}>;
-
 // @alpha (undocumented)
 export type ServerFn = () => ValueOrPromise<void | (() => void)>;
 
@@ -499,9 +481,6 @@ export interface Tracker {
     <T extends {}, B extends keyof T>(obj: T, prop: B): T[B];
 }
 
-// @alpha (undocumented)
-export const unwrapSubscriber: <T extends {}>(obj: T) => any;
-
 // @alpha
 export const useCleanup$: (first: () => void) => void;
 
@@ -603,8 +582,10 @@ export const useServerMount$: (first: ServerFn) => void;
 // @public
 export const useServerMountQrl: (mountQrl: QRL<ServerFn>) => void;
 
+// Warning: (ae-forgotten-export) The symbol "UseStoreOptions" needs to be exported by the entry point index.d.ts
+//
 // @public
-export const useStore: <STATE extends object>(initialState: STATE | (() => STATE)) => STATE;
+export const useStore: <STATE extends object>(initialState: STATE | (() => STATE), opts?: UseStoreOptions) => STATE;
 
 // @public
 export const useStyles$: (first: string) => void;
@@ -636,9 +617,6 @@ export const version: string;
 // @alpha (undocumented)
 export type WatchFn = (track: Tracker) => ValueOrPromise<void | (() => void)>;
 
-// @alpha (undocumented)
-export const wrapSubscriber: <T extends {}>(obj: T, subscriber: Subscriber) => any;
-
 // (No @packageDocumentation comment for this package)
 
 ```

packages/qwik/src/core/component/component.public.ts

@@ -2,7 +2,6 @@ import { $, QRL } from '../import/qrl.public';
 import type { JSXNode } from '../render/jsx/types/jsx-node';
 import { OnRenderProp } from '../util/markers';
 import type { ComponentBaseProps } from '../render/jsx/types/jsx-qwik-attributes';
-import type { ValueOrPromise } from '../util/types';
 import type { FunctionComponent } from '../render/jsx/types/jsx-node';
 import { jsx } from '../render/jsx/jsx-runtime';
 import type { MutableWrapper } from '../object/q-object';
@@ -196,9 +195,7 @@ export const component$ = <PROPS extends {}>(
 /**
  * @public
  */
-export type OnRenderFn<PROPS> = (
-  props: PROPS
-) => ValueOrPromise<JSXNode<any> | null | (() => JSXNode<any>)>;
+export type OnRenderFn<PROPS> = (props: PROPS) => JSXNode<any> | null | (() => JSXNode<any>);
 
 export interface RenderFactoryOutput<PROPS> {
   renderQRL: QRL<OnRenderFn<PROPS>>;

packages/qwik/src/core/component/component.unit.tsx

@@ -11,7 +11,7 @@ describe('q-component', () => {
     const fixture = new ElementFixture();
     await render(fixture.host, <HelloWorld></HelloWorld>);
     const Div = 'div' as any;
-    expectDOM(
+    await expectDOM(
       fixture.host,
       <host>
         <Div q:host="">
@@ -24,7 +24,7 @@ describe('q-component', () => {
   it('should render Counter and accept events', async () => {
     const fixture = new ElementFixture();
     await render(fixture.host, <MyCounter step={5} value={15} />);
-    expectDOM(
+    await expectDOM(
       fixture.host,
       <host>
         <my-counter>
@@ -37,7 +37,7 @@ describe('q-component', () => {
       </host>
     );
     await trigger(fixture.host, 'button.decrement', 'click');
-    expectDOM(
+    await expectDOM(
       fixture.host,
       <host>
         <my-counter>
@@ -67,7 +67,7 @@ describe('q-component', () => {
     };
     await render(host, <Items items={items} />);
     await delay(0);
-    expectDOM(
+    await expectDOM(
       host,
       <host>
         <items>

packages/qwik/src/core/error/error.ts

@@ -18,6 +18,7 @@ export const QError_useMethodOutsideContext = 14;
 export const QError_missingRenderCtx = 15;
 export const QError_missingDoc = 16;
 export const QError_immutableProps = 17;
+export const QError_hostCanOnlyBeAtRoot = 18;
 
 export const qError = (code: number, ...parts: any[]): Error => {
   const text = codeToText(code);
@@ -29,23 +30,25 @@ export const qError = (code: number, ...parts: any[]): Error => {
 export const codeToText = (code: number): string => {
   if (qDev) {
     const MAP = [
-      'Can not serialize a HTML Node that is not an Element',
-      'Rruntime but no instance found on element.',
-      'Only primitive and object literals can be serialized',
-      'Crash while rendering',
-      'You can render over a existing q:container. Skipping render().',
-      'Set property',
-      "Only function's and 'string's are supported.",
-      "Only objects can be wrapped in 'QObject'",
-      `Only objects literals can be wrapped in 'QObject'`,
-      'QRL is not a function',
-      'Dynamic import not found',
-      'Unknown type argument',
-      'not found state for useContext',
-      "Q-ERROR: invoking 'use*()' method outside of invocation context.",
-      'Cant access renderCtx for existing context',
-      'Cant access document for existing context',
-      'props are inmutable',
+      'Error while serializing class attribute', // 0
+      'Can not serialize a HTML Node that is not an Element', // 1
+      'Rruntime but no instance found on element.', // 2
+      'Only primitive and object literals can be serialized', // 3
+      'Crash while rendering', // 4
+      'You can render over a existing q:container. Skipping render().', // 5
+      'Set property', // 6
+      "Only function's and 'string's are supported.", // 7
+      "Only objects can be wrapped in 'QObject'", // 8
+      `Only objects literals can be wrapped in 'QObject'`, // 9
+      'QRL is not a function', // 10
+      'Dynamic import not found', // 11
+      'Unknown type argument', // 12
+      'not found state for useContext', // 13
+      "Invoking 'use*()' method outside of invocation context.", // 14
+      'Cant access renderCtx for existing context', // 15
+      'Cant access document for existing context', // 16
+      'props are inmutable', // 17
+      '<Host> component can only be used at the root of a Qwik component$()', // 18
     ];
     return `Code(${code}): ${MAP[code] ?? ''}`;
   } else {

packages/qwik/src/core/import/qrl.ts

@@ -7,7 +7,6 @@ import { getDocument } from '../util/dom';
 import { logError } from '../util/log';
 import { then } from '../util/promises';
 import { getPlatform } from '../platform/platform';
-import { unwrapSubscriber } from '../use/use-subscriber';
 import { tryGetInvokeContext } from '../use/use-core';
 import {
   codeToText,
@@ -18,8 +17,7 @@ import {
   QError_unknownTypeArgument,
 } from '../error/error';
 import { qDev } from '../util/qdev';
-import { getProxyTarget } from '../object/store';
-import { verifySerializable } from '../object/q-object';
+import { getProxyTarget, verifySerializable } from '../object/q-object';
 
 let runtimeSymbolId = 0;
 const RUNTIME_QRL = '/runtimeQRL';
@@ -157,7 +155,6 @@ export const inlinedQrl = <T>(
 const unwrapLexicalScope = (lexicalScope: any[] | null) => {
   if (isArray(lexicalScope)) {
     for (let i = 0; i < lexicalScope.length; i++) {
-      lexicalScope[i] = unwrapSubscriber(lexicalScope[i]);
       if (qDev) {
         verifySerializable(getProxyTarget(lexicalScope[i]) ?? lexicalScope[i]);
       }

packages/qwik/src/core/index.ts

@@ -50,8 +50,6 @@ export { useServerMount$, useServerMountQrl } from './use/use-watch';
 export { useClientMount$, useClientMountQrl } from './use/use-watch';
 export { useMount$, useMountQrl } from './use/use-watch';
 
-export { handleWatch } from './use/use-watch';
-
 //////////////////////////////////////////////////////////////////////////////////////////
 // JSX Runtime
 //////////////////////////////////////////////////////////////////////////////////////////
@@ -61,17 +59,11 @@ export { Slot } from './render/jsx/slot.public';
 export { Fragment, jsx, jsxDEV, jsxs } from './render/jsx/jsx-runtime';
 export type { HTMLAttributes, AriaAttributes } from './render/jsx/types/jsx-generated';
 export type { DOMAttributes } from './render/jsx/types/jsx-qwik-attributes';
-export type {
-  ComponentChild,
-  ComponentChildren,
-  FunctionComponent,
-  JSXFactory,
-  JSXNode,
-  RenderableProps,
-} from './render/jsx/types/jsx-node';
+export type { FunctionComponent, JSXNode } from './render/jsx/types/jsx-node';
 export type { QwikDOMAttributes, QwikJSX } from './render/jsx/types/jsx-qwik';
 export type { QwikIntrinsicElements } from './render/jsx/types/jsx-qwik-elements';
 export { render } from './render/render.public';
+export { handleWatch } from './render/notify-render';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // use API
@@ -80,7 +72,6 @@ export { useHostElement } from './use/use-host-element.public';
 export { useDocument } from './use/use-document.public';
 export { useLexicalScope } from './use/use-lexical-scope.public';
 export { useStore, useRef, useSequentialScope } from './use/use-store.public';
-export { wrapSubscriber, unwrapSubscriber } from './use/use-subscriber';
 export { useContext, useContextProvider, createContext } from './use/use-context';
 export { useWaitOn } from './use/use-core';
 export { useStylesQrl, useStyles$, useScopedStylesQrl, useScopedStyles$ } from './use/use-styles';