Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion packages/docs/public/_redirects
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,4 @@
/docs/components/inline-components/ /docs/core/overview/ 308
/docs/think-qwik/ /docs/concepts/think-qwik/ 308
/docs/env-variables/ /docs/guides/env-variables/ 308
/docs/components/ /docs/core/ 308
/docs/components/* /docs/core/:splat 308
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const makeEditPageUrl = (url: string): string => {
if (index !== -1 && index + 1 >= segments.length) {
// These are directory paths without subpaths, map to their overview pages
if (componentIndex !== -1) {
return 'docs/(qwik)/components/overview';
return 'docs/(qwik)/core/overview';
} else if (conceptIndex !== -1) {
return 'docs/(qwik)/concepts/think-qwik';
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Qwik uses proxies for a few reasons:

Because of the above constraints, Qwik uses proxies to keep track of the reactivity graph.

- Use [`useStore()`](/docs/(qwik)/components/state/index.mdx#usestore) to create a store proxy.
- Use [`useStore()`](/docs/(qwik)/core/state/index.mdx#usestore) to create a store proxy.
- The proxy notices the reads and creates subscriptions that are serializable.
- The proxy notices the writes and uses the subscription information to invalidate the relevant components.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default component$(() => {
```
</CodeSandbox>

You can also use `bind:propertyName` to conveniently have a [two-way binding](/docs/(qwik)/components/rendering/index.mdx#bind-attribute) between a signal and an input element.
You can also use `bind:propertyName` to conveniently have a [two-way binding](/docs/(qwik)/core/rendering/index.mdx#bind-attribute) between a signal and an input element.

Notice that `onClick$` ends with [`$`](/docs/(qwik)/advanced/dollar/index.mdx). This is a hint to both the [Optimizer](/docs/(qwik)/advanced/optimizer/index.mdx) and the developer that a special transformation occurs at this location. The presence of the `$` suffix implies a lazy-loaded boundary here. The code associated with the `click` handler is not loaded into the JavaScript Virtual Machine (VM) until the user activates the click event. However, to avoid delays during the first interaction, it is eagerly loaded into the browser cache.

Expand Down
8 changes: 4 additions & 4 deletions packages/docs/src/routes/docs/(qwik)/core/state/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export default component$(() => {

> **NOTE** For reactivity to work as expected, make sure to keep a reference to the reactive object and not only to its properties. e.g. doing `let { count } = useStore({ count: 0 })` and then mutating `count` won't trigger updates of components that depend on the property.

Because [`useStore()`](/docs/(qwik)/components/state/index.mdx#usestore) tracks deep reactivity, that means that Arrays and Objects inside the store will also be reactive.
Because [`useStore()`](/docs/(qwik)/core/state/index.mdx#usestore) tracks deep reactivity, that means that Arrays and Objects inside the store will also be reactive.

<CodeSandbox src="/src/routes/demo/state/counter-store-deep/index.tsx" style={{ height: '10em' }}>
```tsx
Expand Down Expand Up @@ -225,10 +225,10 @@ In Qwik, there are two ways to create computed values, each with a different use

1. `useComputed$()`: `useComputed$()` is the preferred way of creating computed values. Use it when the computed value can be derived synchronously purely from the source state (current application state). For example, creating a lowercase version of a string or combining first and last names into a full name.

2. [`useResource$()`](/docs/(qwik)/components/state/index.mdx#useresource): `useResource$()` is used when the computed value is asynchronous or the state comes from outside of the application. For example, fetching the current weather (external state) based on a current location (application internal state).
2. [`useResource$()`](/docs/(qwik)/core/state/index.mdx#useresource): `useResource$()` is used when the computed value is asynchronous or the state comes from outside of the application. For example, fetching the current weather (external state) based on a current location (application internal state).


In addition to the two ways of creating computed values described above, there is also a lower-level ([`useTask$()`](/docs/(qwik)/components/tasks/index.mdx#usetask)). This way does not produce a new signal, but rather modifies the existing state or produces a side effect.
In addition to the two ways of creating computed values described above, there is also a lower-level ([`useTask$()`](/docs/(qwik)/core/tasks/index.mdx#usetask)). This way does not produce a new signal, but rather modifies the existing state or produces a side effect.

### `useComputed$()`

Expand Down Expand Up @@ -390,7 +390,7 @@ The state `resource.loading` can be one of the following:
- `false` - the data is not yet available.
- `true` - the data is available. (Either resolved or rejected.)

The callback passed to [`useResource$()`](/docs/(qwik)/components/state/index.mdx#useresource) runs right after the [`useTask$()`](/docs/(qwik)/components/tasks/index.mdx#usetask) callbacks complete. Please refer to the [Lifecycle](../tasks/index.mdx#lifecycle) section for more details.
The callback passed to [`useResource$()`](/docs/(qwik)/core/state/index.mdx#useresource) runs right after the [`useTask$()`](/docs/(qwik)/core/tasks/index.mdx#usetask) callbacks complete. Please refer to the [Lifecycle](../tasks/index.mdx#lifecycle) section for more details.

#### `<Resource />`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -479,7 +479,7 @@ The problem with this approach is that we will load styles twice.
1. The styles are inserted into the HTML as part of the SSR.
2. Then when the component is invalidated and needs to be re-rendered, the styles are loaded again because they are inlined.

What is needed is to load the styles independently from the component. This is what [`useStyles$()`](/docs/(qwik)/components/styles/index.mdx#usestyles) is for. There are two scenarios:
What is needed is to load the styles independently from the component. This is what [`useStyles$()`](/docs/(qwik)/core/styles/index.mdx#usestyles) is for. There are two scenarios:

1. The component is rendered on the server and the styles are inserted into `<head>` as part of the SSR.
- Adding a new instance of a component to the application does not require that we load the styles as they are already included as part of SSR.
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/routes/docs/(qwik)/core/tasks/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ When the user interacts with the application, it resumes on the client-side, con

`useTask$()` registers a hook to be executed upon component creation, it will run at least once either in the server or in the browser, depending on where the component is initially rendered.

Additionally, this task can be reactive and will re-execute when **tracked** [state](/docs/(qwik)/components/state/index.mdx) changes.
Additionally, this task can be reactive and will re-execute when **tracked** [state](/docs/(qwik)/core/state/index.mdx) changes.

**Notice that any subsequent re-execution of the task will always happen in the browser**, because reactivity is a browser-only thing.

Expand Down Expand Up @@ -323,7 +323,7 @@ export default component$(() => {

## `useVisibleTask$()`

Sometimes a task needs to run only on the browser and after rendering, in that case, you should use `useVisibleTask$()`. The `useVisibleTask$()` is similar to `useTask$()` but it only runs on the browser and after initial rendering. `useVisibleTask$()` registers a hook to be executed when the component becomes visible in the viewport, it will run at least once in the browser, and it can be reactive and re-execute when some **tracked** [state](/docs/(qwik)/components/state/index.mdx) changes.
Sometimes a task needs to run only on the browser and after rendering, in that case, you should use `useVisibleTask$()`. The `useVisibleTask$()` is similar to `useTask$()` but it only runs on the browser and after initial rendering. `useVisibleTask$()` registers a hook to be executed when the component becomes visible in the viewport, it will run at least once in the browser, and it can be reactive and re-execute when some **tracked** [state](/docs/(qwik)/core/state/index.mdx) changes.

`useVisibleTask$()` has these properties:

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/routes/docs/(qwik)/faq/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ We also have an interactive [tutorial](../../tutorial/welcome/overview/) to get

## What are all those `$` signs?

You might have noticed there are more [`$`](../advanced/dollar/index.mdx) signs than usual in Qwik apps, such as: [`component$()`](/docs/(qwik)/components/overview/index.mdx#component), [`useTask$()`](/docs/(qwik)/components/tasks/index.mdx#usetask), and `<div onClick$={() => console.log('click')} />`. It serves as a marker for a lazy-load boundary. Qwik breaks your application into small chunks; these pieces are smaller than the component itself. For event handlers, hooks, etc. The `$` signals to both the [optimizer](../advanced/optimizer/index.mdx) and the developer when it's happening.
You might have noticed there are more [`$`](../advanced/dollar/index.mdx) signs than usual in Qwik apps, such as: [`component$()`](/docs/(qwik)/core/overview/index.mdx#component), [`useTask$()`](/docs/(qwik)/core/tasks/index.mdx#usetask), and `<div onClick$={() => console.log('click')} />`. It serves as a marker for a lazy-load boundary. Qwik breaks your application into small chunks; these pieces are smaller than the component itself. For event handlers, hooks, etc. The `$` signals to both the [optimizer](../advanced/optimizer/index.mdx) and the developer when it's happening.

**Example:**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default component$(() => {
>
> - Your `joke` route default component is surrounded by an existing layout. See [Layout](/docs/layout/) for more details on what layouts are and how to work with them.
> - index.tsx, layout.tsx in routes folder, root.tsx and all entry files need **export default**. For other components you can use export const and export function
> - For more details about how to author components, see the [Component API](/docs/(qwik)/components/overview/index.mdx) section.
> - For more details about how to author components, see the [Component API](/docs/(qwik)/core/overview/index.mdx) section.

### 2. Loading Data

Expand Down Expand Up @@ -623,9 +623,9 @@ For more on just how much you can achieve with Qwik, check out the dedicated doc

- [Project structure](/docs/(qwikcity)/project-structure/index.mdx)
- [Directory-based routing](/docs/(qwikcity)/routing/index.mdx#directory-based-routing)
- [Component](/docs/(qwik)/components/overview/index.mdx)
- [Component](/docs/(qwik)/core/overview/index.mdx)
- [Route loaders](/docs/(qwikcity)/route-loader/index.mdx)
- [Form actions](/docs/(qwikcity)/action/index.mdx) && [zod validation](/docs/(qwikcity)/action/index.mdx#validation-and-type-safety)
- [State management](/docs/(qwik)/components/state/index.mdx)
- [Tasks](/docs/(qwik)/components/tasks/index.mdx#use-usetask-when-you-need-to)
- [State management](/docs/(qwik)/core/state/index.mdx)
- [Tasks](/docs/(qwik)/core/tasks/index.mdx#use-usetask-when-you-need-to)
- [Preloading](/docs/(qwikcity)/advanced/speculative-module-fetching/index.mdx)
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Use `menu.md` to declare the menu structure.

## Components

- [Basics](/docs/(qwik)/components/basics/index.mdx)
- [Basics](/docs/(qwik)/core/basics/index.mdx)
```

## Retrieving Menu Structure
Expand All @@ -90,7 +90,7 @@ The example above will return:
items: [
{
text: "Basics",
href: "/docs/(qwik)/components/basics"
href: "/docs/(qwik)/core/basics"
}
],
},
Expand Down
16 changes: 8 additions & 8 deletions packages/docs/src/routes/docs/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@

## Components

- [Overview](</docs/(qwik)/components/overview/index.mdx>)
- [State](</docs/(qwik)/components/state/index.mdx>)
- [Events](</docs/(qwik)/components/events/index.mdx>)
- [Tasks & Lifecycle](</docs/(qwik)/components/tasks/index.mdx>)
- [Context](</docs/(qwik)/components/context/index.mdx>)
- [Slots](</docs/(qwik)/components/slots/index.mdx>)
- [Rendering](</docs/(qwik)/components/rendering/index.mdx>)
- [Styling](</docs/(qwik)/components/styles/index.mdx>)
- [Overview](</docs/(qwik)/core/overview/index.mdx>)
- [State](</docs/(qwik)/core/state/index.mdx>)
- [Events](</docs/(qwik)/core/events/index.mdx>)
- [Tasks & Lifecycle](</docs/(qwik)/core/tasks/index.mdx>)
- [Context](</docs/(qwik)/core/context/index.mdx>)
- [Slots](</docs/(qwik)/core/slots/index.mdx>)
- [Rendering](</docs/(qwik)/core/rendering/index.mdx>)
- [Styling](</docs/(qwik)/core/styles/index.mdx>)
- [API Reference](/api/qwik/)

## Qwik City
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ updated_at: '2023-06-25T19:43:33Z'
created_at: '2022-08-02T12:07:45Z'
---

Components are the building blocks of a Qwik application. Components are declared using [`component$()`](/docs/(qwik)/components/overview/index.mdx#component) and at a minimum need to return a JSX Element.
Components are the building blocks of a Qwik application. Components are declared using [`component$()`](/docs/(qwik)/core/overview/index.mdx#component) and at a minimum need to return a JSX Element.

Create a component that returns `Hello World!`
4 changes: 2 additions & 2 deletions packages/docs/src/routes/tutorial/component/lite/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ created_at: '2023-02-11T08:04:18Z'

One of Qwik's super powers lies in its lazy-loading features. Each component will generate a separate Symbol which is downloaded on demand. This allows you to build a large application with many components and only download the components that are needed for the current view.

But for some cases you may want to load a component together with the parent component. For example, if you have a `<Greeter>` component that is always used with the `<App>` component, you may want to load the `<Greeter>` component with the `<App>` component. This is called an [inline component](/docs/(qwik)/components/overview/index.mdx#inline-components).
But for some cases you may want to load a component together with the parent component. For example, if you have a `<Greeter>` component that is always used with the `<App>` component, you may want to load the `<Greeter>` component with the `<App>` component. This is called an [inline component](/docs/(qwik)/core/overview/index.mdx#inline-components).

In this example, the `<App>` and a `<Greeter>` components are prepared for you. The `<Greeter />` component is declared using the [`component$()`](/docs/(qwik)/components/overview/index.mdx#component) method and is a Qwik component. Remove the [`component$()`](/docs/(qwik)/components/overview/index.mdx#component) to convert `<Greeter>` to a [inline component](/docs/(qwik)/components/overview/index.mdx#inline-components).
In this example, the `<App>` and a `<Greeter>` components are prepared for you. The `<Greeter />` component is declared using the [`component$()`](/docs/(qwik)/core/overview/index.mdx#component) method and is a Qwik component. Remove the [`component$()`](/docs/(qwik)/core/overview/index.mdx#component) to convert `<Greeter>` to a [inline component](/docs/(qwik)/core/overview/index.mdx#inline-components).

Open the `Symbols` tab and notice that the `<Greeter />` component is no longer an independent export, but instead is bundled as part of the `<App>` component.
4 changes: 2 additions & 2 deletions packages/docs/src/routes/tutorial/context/basic/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ The code to use a context is divided into three parts:

- `createContextId()`: this creates a serializable ID for the context. Make sure that this ID is unique within your application.
- `useContextProvider()`: In 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()`](/docs/(qwik)/components/context/index.mdx#usecontext) to retrieve the context and use it in any component.
- [`useContext()`](/docs/(qwik)/core/context/index.mdx#usecontext) to retrieve the context and use it in any component.

In this example, we would like to pass the `TodosStore` to the `<Items>` component. Update the code to use [`useContext()`](/docs/(qwik)/components/context/index.mdx#usecontext) to retrieve the value.
In this example, we would like to pass the `TodosStore` to the `<Items>` component. Update the code to use [`useContext()`](/docs/(qwik)/core/context/index.mdx#usecontext) to retrieve the value.

Contexts typically are stores, and as such, they must be serializable.
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,4 @@ For this reason, we recommended breaking up the event handlers into two parts:



**Your task:** Convert the `onClick$` from asynchronous event to synchronous event by using [`useVisibleTask$`](/docs/(qwik)/components/tasks/index.mdx#usevisibletask) lifecycle and [normal event registration](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
**Your task:** Convert the `onClick$` from asynchronous event to synchronous event by using [`useVisibleTask$`](/docs/(qwik)/core/tasks/index.mdx#usevisibletask) lifecycle and [normal event registration](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@ There are two ways of processing events synchronously:
This example shows how to eagerly execute code and set up a classical event handler with no restrictions but with the cost of eager execution.


**Your task:** Convert the `onClick$` from asynchronous event to synchronous event by using [`useVisibleTask$`](/docs/(qwik)/components/tasks/index.mdx#usevisibletask) lifecycle and [normal event registration](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
**Your task:** Convert the `onClick$` from asynchronous event to synchronous event by using [`useVisibleTask$`](/docs/(qwik)/core/tasks/index.mdx#usevisibletask) lifecycle and [normal event registration](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ updated_at: '2023-06-26T13:18:25Z'
created_at: '2022-11-20T08:50:32Z'
---

Use `useSignal()` to store any single value similar to `useStore()`. `useSignal` is heavily optimized when it comes to re-rendering components. It is able to skip re-renderings of parent components even when the signal itself is defined in the parent. `useSignal` works with all [primitive types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) as well as with not nested / flat objects. If you need to store arrays or complex objects use [useStore](/docs/(qwik)/components/state/index.mdx#usestore) instead.
Use `useSignal()` to store any single value similar to `useStore()`. `useSignal` is heavily optimized when it comes to re-rendering components. It is able to skip re-renderings of parent components even when the signal itself is defined in the parent. `useSignal` works with all [primitive types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) as well as with not nested / flat objects. If you need to store arrays or complex objects use [useStore](/docs/(qwik)/core/state/index.mdx#usestore) instead.

Some examples would be:

Expand Down
Loading