type your notes here. https://github.com/mhevery/qwik-workshop/tree/main/LESSONS#readme

import { component$, useSignal, useComputed$ } from "@builder.io/qwik"; import { type DocumentHead, routeLoader$ } from "@builder.io/qwik-city"; interface UserData { first_name: string; last_name: string; email: string; } export const useGetUsers = routeLoader$(async () => {

export const useLoginAction = action$(() => { if (password !== validPassword) { return { username: username, password: '' } } else throw redirect(...); });

[ HackMD | #2767 ] Goal Have an ergonomic way of styling components where the styles are: lazy-loadable: Load the styles on as needed basis. type-safe: Developer should not worry that they have miss placed a style, or should feel that refactoring / renaming styles is hard. tree-shakable: System should be able to remove unneeded styles. Scalable: It should work on small as well as large projects. Should work with MFE composition.

Actions Called explicitly Data is returned export const action = serverAction$((params: {name: string}) => { // add to DB return 42; });

https://github.com/BuilderIO/qwik/issues/1460 Overview The goal is to implement two things: An Image REST API which would be part of the Qwik-City which would allow <Image> component which will take a URL and optimize it for the current window size. General overview:

https://github.com/mhevery/frontend-masters-contacts FILE: fake-db.ts export interface Contact { id: string; name: string; avatar?: string; github?: string; twitter?: string;

Principles Should path-params and search-params be merged? PROS merged: simplified mental model It is not possible to augment the JSX, this will have to rely on the route function. Question is where does the route function come from? single global route function generated by the Qwik-City:

Use cases Third party CustomClass implements something important and requires methods to work with the data. Simplest possible usage PROBLEM export default component$(() => { const url = new URL(); // works! const value = new CustomClass(3434); // breaks serialization return (

Moved to PR#2266 Or Habits which people bring to Resumable frameworks from Hydration mindset. Or "Dehydrate Your Habits for Faster Apps with Less Work" <- trying to surface the benefit / why they should care Don't register events eagerly with useClientEffect$() ⚠ Use useClientEffect$() with caution ⚠ Instead => useOn() methods

source -> extracted: qExtract extracted -> optimized: qEntry optimized -> prod_import: Bundler prod_import -> prod_qrl: qPost prod_import -> extracted: symbol-mfst (runtime) prod_import -> prod_qrl: symbol-mfst prod_qrl -> browser: JS extracted -> browser: SSR - HTML browser -> usage_log: Load Order usage_log -> optimized: priority-mfst (iterative feedback)

State is part of the tree In SSR the same app runs for multiple users, globally declared state works great in the browser but have several problems specially in SSR: Difficult to test (it can not be easily replaced and mocked) Global is hard to serialize, Qwik is HTML-centric Qwik Render in async, meaning that several apps can run at the same time, a global state would just not work. Even without async, having state declared outside the tree can be a security vulnerability in SSR, since some data might leaks between runs. The reactive primitive is the store For Qwik is critically important to serialize, so applications can resume.

Overview The purpose of this demo is to showcase Qwik and Cloudflare capabilities building a new class of applications and personalization. The demo shows how easy it can be to build that which is considered hard currently in the industry. It is also to showcase a new server paradigm of multiple workers cooperating on a single response, bringing parallelism to the server. Demo's Goals Showcase: Micro-frontend in the browser Resumability => instant on applications Advance caching strategies where sub-parts of the applications can be cached at CDN.

Looms: https://www.loom.com/share/9d722f70ad77435d838742e38b17b613 direct composed computed

I have some prior writing about this topic you can steal from as much as you like: The weirdly obscure art of Streamed HTML Handling mid-stream errors reduxjs/redux-tookit: How to incrementally hydrate Redux across page fragments during initial load? My comment on sveltejs/kit: Supporting streaming SSR in the future Authors: Misko Hevery, Taylor Hunt, Ryan Corniato Streaming is transmitting data as it’s created. Most pertinently on the Web, you can stream HTML to a browser as your server generates it.

Overview Let's assume you have a slow service that retrieves a Book. How can we stream the content of the page before the Book is retrieved? Code interface Book { title: string; author: string; } export const onGet = () => {

Folder based I want a route the matches: /examples /examples/ /examples/something /examples/something/else /examples/something/else/thing /src/routes/examples/[[...slug]]/index.tsx

import { component$, useStore, QRL } from "@builder.io/qwik"; export const App = component$(() => { const store1 = useStore({ count: 0 }); const store2 = useStore({ count: 0 }); return ( <button onClick$={() => store1.count++}> // PROBLEM: Root should always re-render // because we don't know that `store` is constant <CountStore store={Math.random() > 0.5 ? store1 : store2} />

https://github.com/BuilderIO/qwik/issues/435 export Static = component$((props) => { return <div> {props.a}/{props.b.c} <Child/> </div> }); export Child = component$(() => {

What we would like: const UrlCounter = component$(() => { const params = useUrlParams({ count: 0 }); return ( <button onClick$={() => params.count++}> {params.count} </button> );