Use https://hackmd.io/@qwik-docs/BkxpSz80Y/ to edit the docs in the Qwik. These docs are periodically synced into the main repository. Editing them in HackMD is much more free form. To update the repository

Introduction Welcome to the Qwik Rabbit Store tutorial! A full-featured E-Commerce application where the world can find the most adorable rabbits in the world powered by the speed of Qwik and Qwik City. We will build our website from the ground up and with each step we will learn how we can use Qwik and its primer meta-framework Qwik City to create a real-world application that you can show your mom. But enough yammering, let's begin! Qwik First Steps Before Qwik, there was the emptiness. The emptiness of your favorite terminal, let’s go there and start by creating an empty project using one of the Qwik City presets.

function App () { <Root> <Parent id=a/> WORKS <Root> } function Root() { useContextProvider() context; <Parent id=b/> <Context2>

export const Hero = () => { const cms = useCMS(); return ( <article> <h1>{cms.title}</h1> <h1>{cms.subTitle}</h1> <p>{cms.text}</p> </article> ); };

✅ SOLVE INCREASING APP SIZE + TTI (Break the correlation between High DX and Low UX) ✅ UTILIZE SSR (SSG & MORE) ✅ MATCH (AND UPGRADE) CURRENT DX ✅ BE EDGE COMPATIBLE ✅ HAVE EXTREME "TREE SHAKING" ✅ ABLE TO STREAM HTML ✅ (blow their mind with stuff they didn't even think about... like the clock and more advanced stuff 🤯 ) Demos:

GitHub slides Streaming demo https://qwik-storefront.vendure.io/ micro-frontend personalization demo work in progress https://mitosis.builder.io/ https://partytown.builder.io/ https://qwik.builder.io/ https://github.com/manucorporat/qwik-conference-app

ERROR: Single Root A components in Qwik must have a single JSX root element. Your component has multiple roots on lines: [XXX, XXX]. Rewrite your component with a single root such as (return <>{...}</>.) Multiple JSX root are not allowed inside the same component, instead use a single Fragment node (<>{}</>) and place all the template inside WARNING: props deconstruction component$(({class, thing, stuff}) => { });

Please add topics which you would like to see covered here: Unit Test

README Introduction Overview Getting Started Mental Model Philosophy Resumable Lazy Loading

component Declare a Qwik component that can be used to create UI. Use component (and component$) to declare a Qwik component. A Qwik component is a special kind of component that allows the Qwik framework to lazy load and execute the component independently of other Qwik components as well as lazy load the component's life-cycle hooks and event handlers. Side note: You can also declare regular (standard JSX) components that will have standard synchronous behavior. Qwik component is a facade that describes how the component should be used without forcing the implementation of the component to be eagerly loaded. A minimum Qwik definition consists of: Component onMount method, which needs to return an

useEvent Retrieves the current event which triggered the action. NOTE: The useEvent method can only be used in the synchronous portion of the callback (before any await statements.) @public useHostElement Retrieves the Host Element of the current component.

const A = component$(() => { return $(() => { <B> <div> <button onclick/> </div> </B> }) })

QRL The QRL type represents a lazy-loadable AND serializable resource. QRL stands for Qwik URL. Use QRL when you want to refer to a lazy-loaded resource. QRLs are most often used for code (functions) but can also be used for other resources such as strings in the case of styles. QRL is an opaque token that is generated by the Qwik Optimizer. (Do not rely on any properties in QRL as it may change between versions.) Creating QRL references

onWatch Reruns the watchFn when the observed inputs change. Use onWatch to observe changes on a set of inputs, and then re-execute the watchFn when those inputs change. The watchFn only executes if the observed inputs change. To observe the inputs use the obs function to wrap property reads. This creates subscriptions which will trigger the watchFn to re-run. See: Observer @public

Describes component lifecycle hooks. In typical development, when discussing object lifespan, it is clear that objects either exist or they do not. Either an object has been instantiated, or it has not yet been instantiated (or it has been instantiated and has since been garbage collected. Hence it no longer exists.) When discussing the lifespan of a Qwik component, it is necessary to expand the definition into three states: Void, dehydrated, and Hydrated. Void: Component does not exist. Nothing has been created yet. This is equivalent to an object not being instantiated or an object not existing. Hydrated: Component exists in VM heap and can be passed around as a reference. This is equivalent to how developers normally think of objects. Dehydrated: An in-between state between Void and Hydrated. A component has been created, but it is not represented in the VM heap as an actual object which can be passed around as a reference. In this state, the component state is serialized in the DOM/HTML but does not have the VM heap representation.

Props Props is a mechanism by which components communicate with each other. Imagine a situation where the parent <MyApp> component needs to pass information to a child's ` component. (Here is a code example) import { qComponent, qHook } from '@builder.io/qwik'; export const MyApp = qComponent({ onRender: qHook(() => ( <div>

README.md /core /component COMPONENT.md HOST_ELEMENT.md LIFECYCLE.md STATE.md q-component.md

[](https://hackmd.io/byPxWWAMTmmHCJISBJiNvA) # Host Element

Components are the basic building blocks of Qwik applications. Qwik asks you to breaks up the component into three parts: view: Contains the JSX code which renders the visual portion of the component. state factory: Contains code that creates a new component state. event handlers: Contains code used for component behavior/user interactions. Why break up components into three parts? Most frameworks keep view, state, and handler code together. Here is an example of how a pseudo framework might achieve this: export function Counter(props: {step?:number}) {