Qwik Optimizer

[mhevery]

Goal

Optimizer is a tool that consumes input source files, and generates bundle chunks for the application. Optimizers responsibilities are:

• Perform Extract constant to module scope on any call site of qHook function.
• Leave behind QRLs that point to the extracted constant.
• Generate synthetic import modules so that bundler (rollup) can create an optimal set of chunks.
• Run the result through the bundler to create optimal bundle chunks.

Example

The developer writes:
header.ts:

export const Header = qComponent<{ todos: Todos }, { text: string }>({
  onMount: qHook(() => ({ text: '' })),
  onRender: qHook((_, { text }) => (
      <a on:click={qHook<typeof Footer, { filter: FilterStates }>((props, _, { filter }) =>
              updateFilter(props.todos, filter)
            ).with({ filter })}
          />
  )),
});

Optimizer refactors it to something like so:

export const Header_onMount =  qHook(() => ({ text: '' }));
export const Header_onRender = qHook((_, { text }) => (
      <a on:click={qHook('chunk-pqr#Header_onRender_onClick').with({ filter })}/>
  ))
export const Header_onRender_onClick = 
  qHook<typeof Footer, { filter: FilterStates }>(
    (props, _, { filter }) => updateFilter(props.todos, filter));

export const Header = qComponent<{ todos: Todos }, { text: string }>({
  onMount: qHook('chunk-abc#Header_onMount'),
  onRender: qHook('chunk-xyz#Header_onRender'),
});

chunk-abc:

export {Header_onMount} from './header';

chunk-pqr:

export {Header_onRender_onClick} from './header';

chunk-xyz:

export {Header_onRender} from './header';

https://hackmd.io/lGHH9hjrSNq7yorN2EOBHA (old)
https://hackmd.io/KLG7PrXlQTWO6ZkBPVRAmQ (new)