+ + + ); +}); + +export const DESCRIPTION = ` +Qwik is designed for the fastest possible page load time, +by delivering pure HTML with near 0 JavaScript for your +pages to become interactive, regardless of how complex +your site or app is. It achieves this via resumability +of code.`; diff --git a/packages/docs/src/pages/tutorial/component/binding/solution/app.tsx b/packages/docs/src/pages/tutorial/component/binding/solution/app.tsx new file mode 100644 index 00000000000..a426889039c --- /dev/null +++ b/packages/docs/src/pages/tutorial/component/binding/solution/app.tsx @@ -0,0 +1,25 @@ +import { component$ } from '@builder.io/qwik'; + +export const App = component$(() => { + const data = { + name: 'Qwik', + description: DESCRIPTION, + }; + + return ( + <> + +
+ + + ); +}); + +export const DESCRIPTION = ` +Qwik is designed for the fastest possible page load time, +by delivering pure HTML with near 0 JavaScript for your +pages to become interactive, regardless of how complex +your site or app is. It achieves this via resumability +of code.`; diff --git a/packages/docs/src/pages/tutorial/component/composition/index.mdx b/packages/docs/src/pages/tutorial/component/composition/index.mdx new file mode 100644 index 00000000000..babaaa4d2a3 --- /dev/null +++ b/packages/docs/src/pages/tutorial/component/composition/index.mdx @@ -0,0 +1,8 @@ +--- +title: Component Composition +layout: tutorial +--- + +Components can be composed together to build applications. + +In this example we have pre-declared an `
+ Insert Greeter component here. By composing components together large applications can be
+ written without putting all of the code into a single file/component.
+
+ );
+});
+
+export const Greeter = component$(() => {
+ return Hello World!
;
+});
diff --git a/packages/docs/src/pages/tutorial/component/composition/solution/app.tsx b/packages/docs/src/pages/tutorial/component/composition/solution/app.tsx
new file mode 100644
index 00000000000..47c6d7e7cb7
--- /dev/null
+++ b/packages/docs/src/pages/tutorial/component/composition/solution/app.tsx
@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+
+export const App = component$(() => {
+ return (
+
+
+ );
+});
+
+export const Greeter = component$(() => {
+ return Hello World!
;
+});
diff --git a/packages/docs/src/pages/tutorial/component/inline/index.mdx b/packages/docs/src/pages/tutorial/component/inline/index.mdx
new file mode 100644
index 00000000000..fd77934ab3b
--- /dev/null
+++ b/packages/docs/src/pages/tutorial/component/inline/index.mdx
@@ -0,0 +1,10 @@
+---
+title: Light Component
+layout: tutorial
+---
+
+Qwik comports are lazy-loadable. This is achieved through `component$()` method. The presence of `$` crates a lazy-loaded boundary. The `$` will be discussed later. Qwik also supports inline components. Inline components are not by themselves lazy loadable and instead load as part of the parent component where they are used. (Inline components are equivalent to regular components in most other frameworks.)
+
+In this example we have pre-declared an `
+
+ );
+});
+
+export const Greeter = component$(() => {
+ return Hello World!
;
+});
diff --git a/packages/docs/src/pages/tutorial/component/inline/solution/app.tsx b/packages/docs/src/pages/tutorial/component/inline/solution/app.tsx
new file mode 100644
index 00000000000..c577ffd6750
--- /dev/null
+++ b/packages/docs/src/pages/tutorial/component/inline/solution/app.tsx
@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+
+export const App = component$(() => {
+ return (
+
+
+ );
+});
+
+export const Greeter = () => {
+ return Hello World!
;
+};
diff --git a/packages/docs/src/pages/tutorial/composing/dollar/index.mdx b/packages/docs/src/pages/tutorial/composing/dollar/index.mdx
new file mode 100644
index 00000000000..502b9cee5dd
--- /dev/null
+++ b/packages/docs/src/pages/tutorial/composing/dollar/index.mdx
@@ -0,0 +1,68 @@
+---
+title: Creating APIs with $
+layout: tutorial
+---
+
+The powerful, part of Optimizer is that you can create your own APIs with `$` suffix.
+
+Imagine that we would like to have a delay method that lazy loads its callback. Normally we would have to write something like this:
+
+```typescript
+setTimeout(() => {
+ // I am eagerly loaded, but it would be better if I was lazy-loaded.
+ ...
+}, timeout);
+```
+
+The issue with the example above is that the callback has to be downloaded and created eagerly. This may be an issue if the closure is large or if the callback is never executed (or only executed later.)
+
+A better solution would be to have `delay$` method that can lazy-load the closure associated with the callback. Something like this.
+
+```typescript
+delay$(() => {
+ // I am lazy-loaded only when I need to be executed.
+ ...
+}, 1000)
+```
+
+In the above solution, the callback is only downloaded when `delay$` is ready to execute it.
+
+## Creating your APIs with `$` suffix
+
+Qwik runtime works with `QRL`s. For this reason we define a method like so:
+```typescript
+export function delayQrl+ Delay: {store.delay}
+ + + ); +}); diff --git a/packages/docs/src/pages/tutorial/composing/dollar/solution/app.tsx b/packages/docs/src/pages/tutorial/composing/dollar/solution/app.tsx new file mode 100644 index 00000000000..2fd9ccf8407 --- /dev/null +++ b/packages/docs/src/pages/tutorial/composing/dollar/solution/app.tsx @@ -0,0 +1,29 @@ +import { component$, QRL, implicit$FirstArg, useStore } from '@builder.io/qwik'; + +export function delayQrl
+ Delay: {store.delay}
+ + + ); +}); diff --git a/packages/docs/src/pages/tutorial/composing/use/index.mdx b/packages/docs/src/pages/tutorial/composing/use/index.mdx new file mode 100644 index 00000000000..08bbde895e9 --- /dev/null +++ b/packages/docs/src/pages/tutorial/composing/use/index.mdx @@ -0,0 +1,11 @@ +--- +title: Composing use Hooks +layout: tutorial +--- + +Hooks are a way to abstract common logic away from the components that use it. They are a way to share logic between components. While Qwik provides many hooks, there will always be one that is not provided out of the box. This tutorial will show you how to create your own hook. + +In this example, the registering of `mousemove` events is something that could be shared between multiple components. Refactor the code by pulling out the code before JSX into its own `useMousePosition()` function. + +Congratulations, you have successfully created your own hook! You can now use it in any component that needs to listen to the mouse position. + diff --git a/packages/docs/src/pages/tutorial/composing/use/problem/app.tsx b/packages/docs/src/pages/tutorial/composing/use/problem/app.tsx new file mode 100644 index 00000000000..f3c65847ec5 --- /dev/null +++ b/packages/docs/src/pages/tutorial/composing/use/problem/app.tsx @@ -0,0 +1,17 @@ +import { component$, useOnDocument, useStore, $ } from '@builder.io/qwik'; + +export const App = component$(() => { + const mousePosition = useStore({ x: 0, y: 0 }); + useOnDocument( + 'mousemove', + $((event: Event) => { + mousePosition.x = (event as MouseEvent).clientX; + mousePosition.y = (event as MouseEvent).clientY; + }) + ); + return ( +
+ (x: {mousePosition.x}, y: {mousePosition.y})
+
+ );
+});
diff --git a/packages/docs/src/pages/tutorial/composing/use/solution/app.tsx b/packages/docs/src/pages/tutorial/composing/use/solution/app.tsx
new file mode 100644
index 00000000000..a772374c3db
--- /dev/null
+++ b/packages/docs/src/pages/tutorial/composing/use/solution/app.tsx
@@ -0,0 +1,22 @@
+import { component$, useOnDocument, useStore, $ } from '@builder.io/qwik';
+
+export function useMousePosition() {
+ const mousePosition = useStore({ x: 0, y: 0 });
+ useOnDocument(
+ 'mousemove',
+ $((event: Event) => {
+ mousePosition.x = (event as MouseEvent).clientX;
+ mousePosition.y = (event as MouseEvent).clientY;
+ })
+ );
+ return mousePosition;
+}
+
+export const App = component$(() => {
+ const mousePosition = useMousePosition();
+ return (
+
+ (x: {mousePosition.x}, y: {mousePosition.y})
+
+ );
+});
diff --git a/packages/docs/src/pages/tutorial/context/basic/index.mdx b/packages/docs/src/pages/tutorial/context/basic/index.mdx
new file mode 100644
index 00000000000..1a7695d14be
--- /dev/null
+++ b/packages/docs/src/pages/tutorial/context/basic/index.mdx
@@ -0,0 +1,15 @@
+---
+title: Context
+layout: tutorial
+---
+
+Use context to pass data to child components without explicitly passing it through components (known as prop drilling). Context is useful to share data that is needed throughout the application components. For example styling information, application state, or currently logged-in user.
+
+To use context you need three parts:
+- `createContext()`: this creates a serializable ID for the context. Make sure that this id is unique within your application.
+- `useContextProvider()`: At a parent component call this method to publish the context value. All children (and grandchildren) that are descendants of this component will be able to retrieve the context.
+- `useContext()` to retrieve the context and use it in any component.
+
+In this example, we would like to pass the `TodosStore` to the `-
+ {todos.items.map((item) => (
+
- {item} + ))} +
-
+ {todos.items.map((item) => (
+
- {item} + ))} +