Merge branch 'main' into patch-2

QwikDev · Nov 17, 2023 · ea0ac65 · ea0ac65
2 parents d240209 + c524a98
commit ea0ac65
Show file tree

Hide file tree

Showing 27 changed files with 184 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qwik-monorepo",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

diff --git a/packages/create-qwik/package.json b/packages/create-qwik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-qwik",
   "description": "Interactive CLI for create Qwik projects and adding features.",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "author": "Builder.io Team",
   "bin": "./create-qwik.cjs",
   "bugs": "https://github.com/BuilderIO/qwik/issues",

diff --git a/packages/docs/src/components/on-this-page/on-this-page.tsx b/packages/docs/src/components/on-this-page/on-this-page.tsx
@@ -37,6 +37,7 @@ const QWIKCITY_GROUP = [
   'endpoints',
   'env-variables',
   'guides',
+  'html-attributes',
   'layout',
   'middleware',
   'pages',
@@ -46,6 +47,7 @@ const QWIKCITY_GROUP = [
   'routing',
   'server$',
   'troubleshooting',
+  'validator',
 ];
 const QWIKCITY_ADVANCED_GROUP = [
   'content-security-policy',

diff --git a/packages/docs/src/media/ecosystem/discord.svg b/packages/docs/src/media/ecosystem/discord.svg
diff --git a/packages/docs/src/routes/api/qwik-city-middleware-request-handler/index.md b/packages/docs/src/routes/api/qwik-city-middleware-request-handler/index.md
@@ -261,7 +261,7 @@ export interface RequestEventBase<PLATFORM = QwikCityPlatform>
 | Property          | Modifiers             | Type                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | ----------------- | --------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | [basePathname](#) | <code>readonly</code> | string                                                                                | The base pathname of the request, which can be configured at build time. Defaults to <code>/</code>.                                                                                                                                                                                                                                                                                                                                                                           |
-| [cacheControl](#) | <code>readonly</code> | (cacheControl: [CacheControl](#cachecontrol), target?: CacheControlTarget) =&gt; void | <p>Convenience method to set the Cache-Control header. Depending on your CDN, you may want to add another cacheControl with the second argument set to <code>CDN-Cache-Control</code> or any other value (we provide the most common values for auto-complete, but you can use any string you want).</p><p>See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control and https://qwik.builder.io/docs/caching/#CDN-Cache-Controls for more information.</p> |
+| [cacheControl](#) | <code>readonly</code> | (cacheControl: [CacheControl](#cachecontrol), target?: CacheControlTarget) =&gt; void | <p>Convenience method to set the Cache-Control header. Depending on your CDN, you may want to add another cacheControl with the second argument set to <code>CDN-Cache-Control</code> or any other value (we provide the most common values for auto-complete, but you can use any string you want).</p><p>See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control and https://qwik.builder.io/docs/caching/\#CDN-Cache-Controls for more information.</p> |
 | [clientConn](#)   | <code>readonly</code> | [ClientConn](#clientconn)                                                             | Provides information about the client connection, such as the IP address and the country the request originated from.                                                                                                                                                                                                                                                                                                                                                          |
 | [cookie](#)       | <code>readonly</code> | [Cookie](#cookie)                                                                     | <p>HTTP request and response cookie. Use the <code>get()</code> method to retrieve a request cookie value. Use the <code>set()</code> method to set a response cookie value.</p><p>https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies</p>                                                                                                                                                                                                                               |
 | [env](#)          | <code>readonly</code> | [EnvGetter](#envgetter)                                                               | Platform provided environment variables.                                                                                                                                                                                                                                                                                                                                                                                                                                       |

diff --git a/packages/docs/src/routes/api/qwik/api.json b/packages/docs/src/routes/api/qwik/api.json
@@ -1848,7 +1848,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface QwikKeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent> \n```\n**Extends:** SyntheticEvent&lt;T, [NativeKeyboardEvent](#nativekeyboardevent)<!-- -->&gt;\n\n\n|  Property | Modifiers | Type | Description |\n|  --- | --- | --- | --- |\n|  [altKey](#) |  | boolean |  |\n|  [charCode](#) |  | number |  |\n|  [ctrlKey](#) |  | boolean |  |\n|  [isComposing](#) |  | boolean |  |\n|  [key](#) |  | string | See the \\[DOM Level 3 Events spec\\](https://www.w3.org/TR/uievents-key/\\#named-key-attribute-values). for possible values |\n|  [keyCode](#) |  | number |  |\n|  [locale](#) |  | string |  |\n|  [location](#) |  | number |  |\n|  [metaKey](#) |  | boolean |  |\n|  [repeat](#) |  | boolean |  |\n|  [shiftKey](#) |  | boolean |  |\n|  [which](#) |  | number |  |\n\n\n|  Method | Description |\n|  --- | --- |\n|  [getModifierState(key)](#qwikkeyboardevent-getmodifierstate) | See \\[DOM Level 3 Events spec\\](https://www.w3.org/TR/uievents-key/\\#keys-modifier). for a list of valid (case-sensitive) arguments to this method. |",
+      "content": "```typescript\nexport interface QwikKeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent> \n```\n**Extends:** SyntheticEvent&lt;T, [NativeKeyboardEvent](#nativekeyboardevent)<!-- -->&gt;\n\n\n|  Property | Modifiers | Type | Description |\n|  --- | --- | --- | --- |\n|  [altKey](#) |  | boolean |  |\n|  [charCode](#) |  | number |  |\n|  [code](#) |  | string |  |\n|  [ctrlKey](#) |  | boolean |  |\n|  [isComposing](#) |  | boolean |  |\n|  [key](#) |  | string | See the \\[DOM Level 3 Events spec\\](https://www.w3.org/TR/uievents-key/\\#named-key-attribute-values). for possible values |\n|  [keyCode](#) |  | number |  |\n|  [locale](#) |  | string |  |\n|  [location](#) |  | number |  |\n|  [metaKey](#) |  | boolean |  |\n|  [repeat](#) |  | boolean |  |\n|  [shiftKey](#) |  | boolean |  |\n|  [which](#) |  | number |  |\n\n\n|  Method | Description |\n|  --- | --- |\n|  [getModifierState(key)](#qwikkeyboardevent-getmodifierstate) | See \\[DOM Level 3 Events spec\\](https://www.w3.org/TR/uievents-key/\\#keys-modifier). for a list of valid (case-sensitive) arguments to this method. |",
       "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/render/jsx/types/jsx-qwik-events.ts",
       "mdFile": "qwik.qwikkeyboardevent.md"
     },

diff --git a/packages/docs/src/routes/api/qwik/index.md b/packages/docs/src/routes/api/qwik/index.md
@@ -1924,7 +1924,7 @@ At times it is necessary to store values on a store that are non-serializable. N
 
 You can use `noSerialize()` to mark a value as non-serializable. The value is persisted in the Store but does not survive serialization. The implication is that when your application is resumed, the value of this object will be `undefined`. You will be responsible for recovering from this.
 
-See: [noSerialize Tutorial](http://qwik.builder.io/tutorial/store/no-serialize)
+See: [noSerialize Tutorial](https://qwik.builder.io/tutorial/store/no-serialize)
 
 ```typescript
 noSerialize: <T extends object | undefined>(input: T) => NoSerialize<T>;
@@ -2385,6 +2385,7 @@ export interface QwikKeyboardEvent<T = Element> extends SyntheticEvent<T, Native
 | ---------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
 | [altKey](#)      |           | boolean |                                                                                                                        |
 | [charCode](#)    |           | number  |                                                                                                                        |
+| [code](#)        |           | string  |                                                                                                                        |
 | [ctrlKey](#)     |           | boolean |                                                                                                                        |
 | [isComposing](#) |           | boolean |                                                                                                                        |
 | [key](#)         |           | string  | See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values |

diff --git a/packages/docs/src/routes/docs/(qwik)/components/context/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/context/index.mdx
@@ -120,6 +120,7 @@ export const Parent = component$(() => {
 ### Caveats
 
 - The provided value will not be globally available across the whole render tree, but only to descendant components in the tree.
+- If the context isn't used during SSR, it will not be serialized. So if you want to have the context available in the client even though you don't use it during SSR, you can call `useContext()` in the parent component to force it to be serialized.
 
 ## `useContext()`
 

diff --git a/packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx
@@ -235,3 +235,11 @@ The two approaches can best be described as declarative vs imperative. They both
 Qwik uses the declarative projection approach. The reason for this is that Qwik needs to be able to render parent/children components independently from each other. With an imperative (`children`) approach, the child component can modify the `children` in countless ways. If a child component relied on `children`, it would be forced to re-render whenever a parent component would re-render to reapply the imperative transformation to the `children`. The extra rendering goes explicitly against the goals of Qwik components rendering in isolation.
 
 > **Note**: Due to Slots being declarative in Qwik, projection with `<Slot>` will only work if the parent component is wrapped in `component$()`. If parent component is not wrapped in `component$()`, it is considered an [inline component](/docs/components/overview/#inline-components) and `<Slot>` will not work.
+
+### Advanced: Slots and Context
+
+Slotted components have access to the [Context](../context/) of their parent component, even while they aren't being projected. Furthermore, if the parent is projecting the `<Slot />` inside another component, the slotted components will also have access to the Contexts of that deeper component.
+
+However, if a component hasn't been projected yet because the `<Slot />` are rendered conditionally, it's impossible to know about the deeper Context, and then the slotted component will only see the Context of the immediate parent.
+
+As such, it's safest to avoid these situations; if you are providing Contexts, don't conditionally render your `<Slot />`.
diff --git a/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx
@@ -438,6 +438,20 @@ const Clock = component$<{ isRunning: Signal<boolean> }>(({ isRunning }) => {
 
 > In this example the clock starts running immediately on the browser regardless of whether it is visible or not.
 
+### Advanced: Time of running, and managing visibility with CSS
+
+Internally, `useVisibleTask$` is implemented by adding an attribute on the first rendered component (either the returned component or in case of a Fragment, its first child).  With the standard `eagerness`, this means that if the first rendered component is hidden, the task will not run.
+
+This means that you can use CSS to influence when the task runs. For example, if the task should only run on a mobile device, you can return a `<div class="md:invisible" />` (in the case of Tailwind CSS).
+
+This also means you cannot unhide a component using a visible task; for that you can return a Fragment:
+
+```tsx
+return (<>
+  <div />
+  <MyHiddenComponent hidden={!showSignal.value} />
+</>)
+```
 
 ## Use Hook Rules
 

diff --git a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx
@@ -23,6 +23,7 @@ contributors:
   - dustinsgoodman
   - nsdonato
   - seqshem
+  - daniela-bonvini
 ---
 
 import CodeSandbox from '../../../../components/code-sandbox/index.tsx';
@@ -48,7 +49,7 @@ To get started with Qwik locally, you need the following:
 
 First, create a Qwik application with the Qwik CLI, which generates a blank starter so that you can quickly familiarize yourself with it.
 
-Run the Qwik CLI in your shell. Qwik supports NPM, yarn and pnpm. Choose the package manager you prefer and run one of the following commands:
+Run the Qwik CLI in your shell. Qwik supports npm, yarn, pnpm and bun. Choose the package manager you prefer and run one of the following commands:
 
 ```shell
 npm create qwik@latest

diff --git a/packages/docs/src/routes/docs/(qwikcity)/middleware/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/middleware/index.mdx
@@ -5,6 +5,7 @@ contributors:
   - manucorporat
   - mhevery
   - CoralWombat
+  - harishkrishnan24
 ---
 
 import CodeSandbox from '../../../../components/code-sandbox/index.tsx';
@@ -47,7 +48,7 @@ Each middleware function is passed a [`RequestEvent`](#requestevent) object whic
 
 ## Order of invocation
 
-The order middleware function chain is determined by their location. Starting from the topmost `layout.tsx` and ending at the `index.tsx` for a given route. (Same resolution logic as the order of layout and route component as defined by the route path.)
+The order of middleware function chain is determined by their location. Starting from the topmost `layout.tsx` and ending at the `index.tsx` for a given route. (Same resolution logic as the order of layout and route component as defined by the route path.)
 
 For example, if the request is `/api/greet/` in the following folder structure, the invocation order is as follows:
 

diff --git a/packages/docs/src/routes/docs/(qwikcity)/validator/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/validator/index.mdx
@@ -2,6 +2,7 @@
 title: Validators | QwikCity
 contributors:
   - wtlin1228
+  - harishkrishnan24
 ---
 
 # Data Validators
@@ -75,7 +76,7 @@ export const useAction = routeAction$(
 );
 ```
 
-If `validator3` has a `data` property in its success return object, this data will be passed to the next validator, `validator2`. If your don't want to override the original submitted data, avoid putting the `data` property in the success return object.
+If `validator3` has a `data` property in its success return object, this data will be passed to the next validator, `validator2`. If you don't want to override the original submitted data, avoid putting the `data` property in the success return object.
 
 ```tsx /message: "hi, I am validator3"/#a /message: "hi, I am validator2"/#b /message: "hi, I am validator1"/#c
 export const useAction = routeAction$(
@@ -174,4 +175,4 @@ export const useAction = routeAction$(
   validator$(/*...*/),
   validator$(/*...*/),
 );
-```
+```
diff --git a/packages/docs/src/routes/docs/integrations/authjs/index.mdx b/packages/docs/src/routes/docs/integrations/authjs/index.mdx
@@ -5,6 +5,7 @@ contributors:
   - the-r3aper7
   - ulic75
   - jakovljevic-mladen
+  - VarPDev
 ---
 
 # Auth.js

diff --git a/packages/docs/src/routes/docs/labs/insights/index.mdx b/packages/docs/src/routes/docs/labs/insights/index.mdx
@@ -52,7 +52,7 @@ export default component$(() => {
 });
 ```
 
-You can get `PUBLIC_QWIK_INSIGHTS_KEY` by asking in the [Qwik Discord server](https://qwik.builder.io/chat).
+You can get `PUBLIC_QWIK_INSIGHTS_KEY` by visiting [Qwik Insight](https://qwik-insights.builder.io/app/add/).
 
 The `<Insights>` component collects this data:
 - Timing information of symbols.

diff --git a/packages/docs/src/routes/tutorial/events/synchronous/solution/app.tsx b/packages/docs/src/routes/tutorial/events/synchronous/solution/app.tsx
@@ -2,13 +2,13 @@ import { component$, useVisibleTask$, useSignal } from '@builder.io/qwik';
 
 export default component$(() => {
   const aHref = useSignal<Element>();
-  useVisibleTask$(() => {
+  useVisibleTask$(({ cleanup }) => {
     const handler = (event: Event) => {
       event.preventDefault();
       window.open('http://qwik.builder.io');
     };
     aHref.value!.addEventListener('click', handler);
-    return () => aHref.value!.removeEventListener('click', handler);
+    cleanup(() => aHref.value!.removeEventListener('click', handler));
   });
 
   return (

diff --git a/packages/eslint-plugin-qwik/package.json b/packages/eslint-plugin-qwik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-qwik",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "author": "Builder Team",
   "bugs": "https://github.com/BuilderIO/qwik/issues",
   "dependencies": {

diff --git a/packages/qwik-city/package.json b/packages/qwik-city/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/qwik-city",
   "description": "The meta-framework for Qwik.",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "bugs": "https://github.com/BuilderIO/qwik/issues",
   "dependencies": {
     "@mdx-js/mdx": "2.3.0",

diff --git a/packages/qwik/package.json b/packages/qwik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/qwik",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "bin": "./dist/qwik.cjs",
   "bugs": "https://github.com/BuilderIO/qwik/issues",
   "contributors": [