Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Introduce $ as a marker for Optimizer transformation #143

Merged
merged 2 commits into from
Jan 28, 2022
Merged

refactor: Introduce $ as a marker for Optimizer transformation #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e6b229
refactor: Introduce `$` as a marker for Optimizer transformation
mhevery Jan 27, 2022
c4b8534
fixup! refactor: Introduce `$` as a marker for Optimizer transformation
mhevery Jan 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions integration/architecture/architecture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import {
Fragment,
h,
Host,
qComponent,
component,
Slot,
PropsOf,
qProps,
getProps,
useEvent,
onRender,
useState,
Expand All @@ -22,7 +22,7 @@ export interface Cmp {

type ArchMode = 'monolith' | 'island' | 'uIslet';

export const ArchApp = qComponent((props: { monolith: Cmp; islands: Cmp; uIslets: Cmp }) => {
export const ArchApp = component((props: { monolith: Cmp; islands: Cmp; uIslets: Cmp }) => {
return onRender(() => (
<>
<h1>Monolith</h1>
Expand Down Expand Up @@ -59,7 +59,7 @@ export const ArchApp = qComponent((props: { monolith: Cmp; islands: Cmp; uIslets
));
});

export const Browser = qComponent('browser', () => {
export const Browser = component('browser', () => {
return onRender(() => (
<div class="browser">
<div class="browser-url">
Expand All @@ -73,7 +73,7 @@ export const Browser = qComponent('browser', () => {
));
});

export const Component = qComponent('component', (props: { cmp: Cmp; arch: ArchMode }) => {
export const Component = component('component', (props: { cmp: Cmp; arch: ArchMode }) => {
return onRender(() => (
<Host class={getCmpClass(props.cmp)} on:click={Component_click}>
{props.cmp.children &&
Expand All @@ -85,11 +85,11 @@ export const Component = qComponent('component', (props: { cmp: Cmp; arch: ArchM

export const Component_click = async () => {
// TODO(misko): Workaround for the fact that the click listener is sitting on `<Host>` and hence
// has parent visibility. Correct solution is to have HOST mode when writing to qProps which would
// has parent visibility. Correct solution is to have HOST mode when writing to getProps which would
// take these issues into account.
const element = useEvent().target as Element;
const event = useEvent();
const props = qProps<PropsOf<typeof Component>>(element);
const props = getProps<PropsOf<typeof Component>>(element);
switch (props.arch) {
case 'island':
if (props.cmp.isLazy) {
Expand All @@ -116,7 +116,7 @@ function getCmpClass(cmp: Cmp, ...additionalClasses: string[]) {
return classes.join(' ');
}

export const MonolithScrubber = qComponent((props: { cmp: Cmp }) => {
export const MonolithScrubber = component((props: { cmp: Cmp }) => {
const state = useState({ step: 1 });
return onRender(() => (
<>
Expand Down
6 changes: 3 additions & 3 deletions integration/architecture/my-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { qRender, qDehydrate, h, qObject, QObject } from '@builder.io/qwik';
import { render, dehydrate, h, qObject, QObject } from '@builder.io/qwik';
import { ArchApp, Cmp } from './architecture';
/* eslint no-console: ["off"] */

const monolith = createApp();
const islands = createApp();
const uIslets = createApp();

qRender(document.querySelector('#app')!, h(ArchApp, { monolith, islands, uIslets })).then(() => {
qDehydrate(document);
render(document.querySelector('#app')!, h(ArchApp, { monolith, islands, uIslets })).then(() => {
dehydrate(document);
console.clear();
});

Expand Down
4 changes: 2 additions & 2 deletions integration/hello_server/Greeter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
*/

import { qComponent, h, useEvent, onRender } from '@builder.io/qwik';
import { component, h, useEvent, onRender } from '@builder.io/qwik';

/**
* Declares the public component `<Greeter>` to be used in parent component.
Expand All @@ -24,7 +24,7 @@ import { qComponent, h, useEvent, onRender } from '@builder.io/qwik';
*
* ```
*/
export const Greeter = qComponent((props: { name: string }) => {
export const Greeter = component((props: { name: string }) => {
return onRender(() => (
<div>
<div>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"test.watch": "jest --watch",
"test.e2e": "npm run test.e2e.chromium && npm run test.e2e.firefox && npm run test.e2e.webkit",
"test.e2e.chromium": "playwright test starters --browser=chromium --config starters/playwright.config.ts",
"test.e2e.chromium.debug": "PWDEBUG=1 playwright test starters --browser=chromium --config starters/playwright.config.ts",
"test.e2e.firefox": "playwright test starters --browser=firefox --config starters/playwright.config.ts",
"test.e2e.webkit": "playwright test starters --browser=webkit --config starters/playwright.config.ts",
"serve": "node --inspect starters/dev-server.cjs 3300",
Expand Down
115 changes: 73 additions & 42 deletions src/core/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@

```ts

// @public (undocumented)
export function $<T>(value: T): QRL<T>;

// @public
export function Async<T>(props: {
resolve: ValueOrPromise<T>;
Expand All @@ -18,6 +21,20 @@ export function Async<T>(props: {
onError?: (error: any) => any;
}): any;

// @public (undocumented)
export function bubble<PAYLOAD>(eventType: string, payload?: PAYLOAD): void;

// Warning: (ae-forgotten-export) The symbol "OnMountFn" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
export function component$<PROPS>(onMount: OnMountFn<PROPS>): (props: PROPS) => JSXNode<PROPS>;

// @public (undocumented)
export function component<PROPS extends {}>(tagName: string, onMount: QRL<(props: PROPS) => ReturnType<typeof onRender>>): (props: PROPS) => JSXNode<PROPS>;

// @public (undocumented)
export function component<PROPS extends {}>(onMount: QRL<(props: PROPS) => ReturnType<typeof onRender>>): (props: PROPS) => JSXNode<PROPS>;

// @public (undocumented)
export type ComponentChild = JSXNode<any> | object | string | number | bigint | boolean | null | undefined;

Expand All @@ -31,6 +48,9 @@ export interface CorePlatform {
queueStoreFlush: (flushStore: (doc: Document) => Promise<any>) => Promise<any>;
}

// @public (undocumented)
export function dehydrate(document: Document): void;

// @public (undocumented)
export const Fragment: any;

Expand All @@ -43,6 +63,9 @@ export interface FunctionComponent<P = {}> {
// @public (undocumented)
export const getPlatform: (docOrNode: Document | Node) => CorePlatform;

// @public (undocumented)
export function getProps<T>(element: Element): Props<T>;

// @public (undocumented)
export function h<PROPS extends {} = {}>(type: string | FunctionComponent<PROPS>, props: PROPS | null, ...children: any[]): JSXNode;

Expand Down Expand Up @@ -84,6 +107,9 @@ export namespace h {
// @public
export const Host: FunctionComponent<Record<string, any>>;

// @public (undocumented)
export function implicit$FirstArg<FIRST, REST extends any[], RET>(fn: (first: QRL<FIRST>, ...rest: REST) => RET): (first: FIRST, ...rest: REST) => RET;

// @public (undocumented)
function jsx(type: string | FunctionComponent, props: QwikDOMAttributes & Record<string, any> & {
children?: ComponentChild[] | ComponentChild;
Expand All @@ -107,34 +133,53 @@ export interface JSXNode<T extends string | null | JSXFactory | unknown = unknow
type: T;
}

// Warning: (ae-forgotten-export) The symbol "TypeOrQRL" needs to be exported by the entry point index.d.ts
//
// @public
export function notifyRender(hostElement: Element): Promise<void>;

// @public (undocumented)
export function on(event: string, eventFn: QRL<() => void>): QRL<() => void>;

// @public (undocumented)
export const onDehydrate$: (first: () => void) => void;

// @public (undocumented)
export function onDehydrate(dehydrateFn: QRL<() => void>): void;

// @public (undocumented)
export function onDocument(event: string, eventFn: QRL<() => void>): QRL<() => void>;

// @public (undocumented)
export const onHalt$: (first: () => void) => void;

// @public (undocumented)
export function on(event: string, eventFn: TypeOrQRL<() => void>): QRL<() => void>;
export function onHalt(haltFn: QRL<() => void>): void;

// @public (undocumented)
export function onDehydrate(dehydrateFn: TypeOrQRL<() => void>): QRL<() => void>;
export const onHydrate$: (first: () => void) => void;

// @public (undocumented)
export function onDocument(event: string, eventFn: TypeOrQRL<() => void>): QRL<() => void>;
export function onHydrate(hydrateFn: QRL<() => void>): void;

// @public (undocumented)
export function onHalt(haltFn: TypeOrQRL<() => void>): QRL<() => void>;
export const onRender$: (first: () => JSXNode) => QRL<() => JSXNode>;

// @public (undocumented)
export function onHydrate(hydrateFn: TypeOrQRL<() => void>): QRL<() => void>;
export function onRender(renderFn: QRL<() => JSXNode>): QRL<() => JSXNode>;

// @public (undocumented)
export function onRender(renderFn: TypeOrQRL<() => JSXNode>): QRL<() => JSXNode>;
export const onResume$: (first: () => void) => void;

// @public (undocumented)
export function onResume(resumeFn: TypeOrQRL<() => void>): QRL<() => void>;
export function onResume(resumeFn: QRL<() => void>): void;

// @public (undocumented)
export function onUnmount(unmountFn: TypeOrQRL<() => void>): QRL<() => void>;
export const onUnmount$: (first: () => void) => void;

// @public (undocumented)
export function onWindow(event: string, eventFn: TypeOrQRL<() => void>): QRL<() => void>;
export function onUnmount(unmountFn: QRL<() => void>): void;

// @public (undocumented)
export function onWindow(event: string, eventFn: QRL<() => void>): QRL<() => void>;

// @public
export type PromiseValue<T> = {
Expand All @@ -158,36 +203,10 @@ export type PromiseValue<T> = {
};

// @public (undocumented)
export type PropsOf<COMP extends (props: any) => JSXNode> = COMP extends (props: infer PROPS) => JSXNode<any> ? PROPS : never;

// @public (undocumented)
export function qBubble<PAYLOAD>(eventType: string, payload?: PAYLOAD): void;

// Warning: (ae-forgotten-export) The symbol "PossiblyPromise" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
export function qComponent<PROPS extends {}>(tagName: string, onMount: TypeOrQRL<(props: PROPS) => PossiblyPromise<ReturnType<typeof onRender>>>): (props: PROPS) => JSXNode<PROPS>;
export type Props<T extends {} = {}> = Record<string, any> & T;

// @public (undocumented)
export function qComponent<PROPS extends {}>(onMount: TypeOrQRL<(props: PROPS) => PossiblyPromise<ReturnType<typeof onRender>>>): (props: PROPS) => JSXNode<PROPS>;

// @public (undocumented)
export function qDehydrate(document: Document): void;

// @public
export function qImport<T>(element: Element, qrl: QRL<T>): Promise<T>;

// @public
export function qNotifyRender(hostElement: Element): Promise<void>;

// @public (undocumented)
export type QProps<T extends {} = {}> = Record<string, any> & T;

// @public (undocumented)
export function qProps<T>(element: Element): QProps<T>;

// @public
export function qRender(parent: Element | Document, jsxNode: JSXNode<unknown>): Promise<HTMLElement[]>;
export type PropsOf<COMP extends (props: any) => JSXNode> = COMP extends (props: infer PROPS) => JSXNode<any> ? PROPS : never;

// @public (undocumented)
export interface QRL<TYPE = any> {
Expand All @@ -210,7 +229,10 @@ export interface QRL<TYPE = any> {
}

// @public (undocumented)
export function qrl<T = any>(chunkOrFn: string | (() => Promise<any>), symbol: string, lexicalScopeCapture?: any[]): QRL<T>;
export const qrl: <T = any>(chunkOrFn: string | (() => Promise<any>), symbol: string, lexicalScopeCapture?: any[]) => QRL<T>;

// @public
export function qrlImport<T>(element: Element, qrl: QRL<T>): Promise<T>;

// Warning: (ae-forgotten-export) The symbol "DOMAttributes" needs to be exported by the entry point index.d.ts
//
Expand Down Expand Up @@ -248,6 +270,9 @@ export namespace QwikJSX {
}
}

// @public
export function render(parent: Element | Document, jsxNode: JSXNode<unknown>): Promise<HTMLElement[]>;

// @public (undocumented)
export type RenderableProps<P, RefType = any> = P & Readonly<{
children?: ComponentChildren;
Expand Down Expand Up @@ -291,10 +316,16 @@ export type ValueOrPromise<T> = T | Promise<T>;
export const version: string;

// @public (undocumented)
export function withScopedStyles(styles: TypeOrQRL<string>): void;
export const withScopedStyles$: (first: string) => void;

// @public (undocumented)
export function withScopedStyles(styles: QRL<string>): void;

// @public (undocumented)
export const withStyles$: (first: string) => void;

// @public (undocumented)
export function withStyles(styles: TypeOrQRL<string>): void;
export function withStyles(styles: QRL<string>): void;

// (No @packageDocumentation comment for this package)

Expand Down
Loading