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

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';