From 1313f6e2865b693ead91aa9467195be62890281f Mon Sep 17 00:00:00 2001 From: Jay Brass <92528213+Jemsco@users.noreply.github.com> Date: Mon, 6 May 2024 11:54:31 -0400 Subject: [PATCH 01/24] docs: Update components/styles index.mdx verbiage and phrasing (#6245) Co-authored-by: PatrickJS --- .../routes/docs/(qwik)/components/styles/index.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx index 157f8d8c9e7..d5f98b17742 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx @@ -50,7 +50,7 @@ export default component$(() => { Remember that Qwik uses `class` instead of `className` for CSS classes. -To assign multiple classes qwik accepts also Arrays, Objects or a mix of them: +Qwik also accepts arrays, objects, or a combination of them to assign multiple classes: ```tsx title="src/components/MyComponent/MyComponent.tsx" import { component$ } from '@builder.io/qwik'; import styles from './MyComponent.module.css'; @@ -72,9 +72,9 @@ export default component$((props) => { }); ``` -## Global styles +## Global Styles -Many apps use a global stylesheet to do browser resets and/or defining global styles. This is a good practice, but it is not recommended to use it for styling your components. Qwik is optimized to let the browser just download the styles that are needed for the current view. If you use a global stylesheet, all the styles will be downloaded on the first load, even if they are not needed for the current view. +Many apps use a global stylesheet for browser resets and defining global styles. This is a good practice, but it is not recommended to use it for styling your components. Qwik is optimized to let the browser download the styles that are needed for the current view. If you use a global stylesheet, all of the styles will be downloaded on the first load, even if they are not needed for the current view. ```tsx import './global.css'; @@ -84,7 +84,7 @@ import './global.css'; ## CSS-in-JS -Qwik has first-class CSS-in-JS support using [styled-vanilla-extract](https://github.com/wmertens/styled-vanilla-extract), which provides a extremely efficient css-in-js solution without any runtime! +Qwik has first-class CSS-in-JS support using [styled-vanilla-extract](https://github.com/wmertens/styled-vanilla-extract), which provides an extremely efficient css-in-js solution without any runtime! ```tsx title="style.css.ts" import { style } from 'styled-vanilla-extract/qwik'; @@ -116,7 +116,7 @@ Please refer to the [docs of our official integration](/docs/integrations/styled ## Styled-components -Styled components is a popular tool in React-land to write CSS-in-JS. Thanks to the same [styled-vanilla-extract](https://github.com/wmertens/styled-vanilla-extract) plugin, you can write your styles with styled-components syntax in Qwik with zero-runtime cost! +The styled-components library is a popular tool in React-land for writing CSS-in-JS. Thanks to the same [styled-vanilla-extract](https://github.com/wmertens/styled-vanilla-extract) plugin, you can write your styles with styled-components syntax in Qwik with zero-runtime cost! ```shell npm run qwik add styled-vanilla-extract @@ -216,7 +216,7 @@ This will render a css selector of `.list.⭐️8vzca0-0 > *:nth-child(3)`, allo A lazy-loadable reference to component's styles. -Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.) +Component styles allow Qwik to lazy load the style information for the component only when needed, which avoids double loading during SSR hydration. ```tsx import { useStyles$, component$ } from '@builder.io/qwik'; From 32f94fb28dff6eab4a490b140d733f1d2992c026 Mon Sep 17 00:00:00 2001 From: Georgi Parlakov Date: Mon, 6 May 2024 19:47:12 +0300 Subject: [PATCH 02/24] docs: advanced dollar (#6244) Co-authored-by: PatrickJS --- packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx b/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx index d1f85c8d454..cc7b0c93b18 100644 --- a/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx @@ -263,6 +263,8 @@ The original file: const MyComp = component(qrl('./chunk-a.js', 'MyComp_onMount')); ``` +and a chunk + ```tsx title="chunk-a.js" export const MyComp_onMount = () => { /* my component definition */ From 02fb3aeed337c698bee6ae52669473cab7d14bb5 Mon Sep 17 00:00:00 2001 From: Georgi Parlakov Date: Mon, 6 May 2024 19:49:24 +0300 Subject: [PATCH 03/24] docs: advanced/dollar correct button (#6243) Co-authored-by: PatrickJS --- .../src/routes/docs/(qwik)/advanced/dollar/index.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx b/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx index cc7b0c93b18..970e701ebe8 100644 --- a/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/advanced/dollar/index.mdx @@ -57,18 +57,18 @@ import { jsx as _jsx } from '@builder.io/qwik/jsx-runtime'; import { qrl } from '@builder.io/qwik'; export const App_component_AkbU84a8zes = () => { console.log('render'); - return /*#__PURE__*/ _jsx('p', { + return /*#__PURE__*/ _jsx('button', { onClick$: qrl( - () => import('./app_component_p_onclick_01pegc10cpw'), - 'App_component_p_onClick_01pEgC10cpw' + () => import('./app_component_button_onclick_01pegc10cpw'), + 'App_component_button_onClick_01pEgC10cpw' ), children: 'Hello Qwik', }); }; ``` -```js title="app_component_p_onclick_01pegc10cpw.js" -export const App_component_p_onClick_01pEgC10cpw = () => console.log('hello'); +```js title="app_component_button_onclick_01pegc10cpw.js" +export const App_component_button_onClick_01pEgC10cpw = () => console.log('hello'); ``` ## Rules From ae759fd515c9560e072855d16627602972c20cf9 Mon Sep 17 00:00:00 2001 From: Jay Brass <92528213+Jemsco@users.noreply.github.com> Date: Mon, 6 May 2024 12:53:51 -0400 Subject: [PATCH 04/24] docs: Update qwikcity index.mdx verbiage and phrasing (#6248) Co-authored-by: PatrickJS --- packages/docs/src/routes/docs/(qwikcity)/qwikcity/index.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs/src/routes/docs/(qwikcity)/qwikcity/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/qwikcity/index.mdx index 1152cf2d93d..7b72b65fcd8 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/qwikcity/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/qwikcity/index.mdx @@ -23,7 +23,7 @@ import ImgRoutingFiles from '~/media/docs/qwikcity/routing-files.png?jsx'; # Qwik City -While Qwik focuses on Component API, Qwik City contains API to support the component with common server focused features: +While Qwik focuses on the Component API, Qwik City provides APIs that support components with common server-focused features, including the following: - [routing](/docs/routing/): Define your application routes with directory based routing. (Supports both MPA and SPA routing models.) - [pages](/docs/pages): Render application pages, the main feature of an application. - [layouts](/docs/layout/): Define common shared page layouts to be reused across pages. @@ -45,9 +45,9 @@ While Qwik focuses on Component API, Qwik City contains API to support the compo We call it a **meta-framework** for Qwik. Qwik City is to Qwik, what [Next.js](https://nextjs.org/) is to React, what [Nuxt](https://nuxt.com/) is to Vue, [SvelteKit](https://kit.svelte.dev/) to Svelte and [Analog](https://analogjs.org/) is to Angular. -Qwik (core) and Qwik City (routing) solve problems at two layers of abstraction. **Qwik**, focuses on component and state management primitives, while Qwik City brings an **opinionated and performant way to build sites at scale**. We don't want to lock the ecosystem into a single correct way of building sites, in fact we encourage the community to build alternative solutions on top of Qwik. +**Qwik** (core) and **Qwik City** (routing) solve problems at two layers of abstraction. **Qwik**, focuses on component and state management primitives, while **Qwik City** brings an **opinionated and performant way to build sites at scale**. We don't want to lock the ecosystem into a single correct way of building sites; in fact, we encourage the community to build alternative solutions on top of **Qwik**. -> While Qwik City is full of useful functionality, thanks to Qwik's resumability and JavaScript streaming, there is no additional cost to the end user from Qwik City. (zero JavaScript); +> While Qwik City is full of useful functionality, thanks to Qwik's resumability and JavaScript streaming, there is no additional cost to the end user from Qwik City. (zero JavaScript). Use Qwik City to build an e-commerce website, blog site, or any other website that needs routing, layouts, or data retrieval/updates. Qwik City is built on Qwik, and therefore Qwik City sites are resumable and only download the minimal amount of JavaScript with fine-grained lazy loading. From f186afc5ce73943048c260f461249ae9e8dba005 Mon Sep 17 00:00:00 2001 From: Jay Brass <92528213+Jemsco@users.noreply.github.com> Date: Mon, 6 May 2024 13:56:12 -0400 Subject: [PATCH 05/24] docs: Update components/overview index.mdx to add export default(#6250) Co-authored-by: PatrickJS --- .../docs/src/routes/docs/(qwik)/components/overview/index.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx index e6df14fb094..6febd422135 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx @@ -61,7 +61,8 @@ export default component$(() => { > The `component$` function, marked by the trailing `$`, enables the Optimizer to split components into separate chunks. -This allows each chunk to be loaded independently as needed, rather than loading all components whenever the parent component is loaded. +This allows each chunk to be loaded independently as needed, rather than loading all components whenever the parent component is loaded. +> Note: 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. ### Composing Components From afc1189349767ceac63413d1be0f98fc7ad63ab6 Mon Sep 17 00:00:00 2001 From: Jay Brass <92528213+Jemsco@users.noreply.github.com> Date: Mon, 6 May 2024 14:03:40 -0400 Subject: [PATCH 06/24] docs: Update getting-started index.mdx to add export default (#6251) Co-authored-by: PatrickJS --- packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx index f87551142e7..1b8fdf46cbf 100644 --- a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx @@ -107,6 +107,7 @@ export default component$(() => { > NOTE: > > - 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. ### 2. Loading Data From 83ca896480b26ae2ed9bd078d4d35275eba648b5 Mon Sep 17 00:00:00 2001 From: Jay Brass <92528213+Jemsco@users.noreply.github.com> Date: Mon, 6 May 2024 14:52:53 -0400 Subject: [PATCH 07/24] docs: Update authjs index.mdx add environment vars for node (#6253) Co-authored-by: PatrickJS --- .../src/routes/docs/integrations/authjs/index.mdx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/docs/src/routes/docs/integrations/authjs/index.mdx b/packages/docs/src/routes/docs/integrations/authjs/index.mdx index c23d4d8ad9c..872a8b731c0 100644 --- a/packages/docs/src/routes/docs/integrations/authjs/index.mdx +++ b/packages/docs/src/routes/docs/integrations/authjs/index.mdx @@ -70,6 +70,19 @@ export default defineConfig(() => { }); ``` +> **Note on Manual Deployments with Node** + +> When deploying applications manually using Node.js, particularly with frameworks like Express, the server or Node process does not inherently know if it's being served under HTTP or HTTPS. +> Unlike hosting services like Vercel, Netlify, or Cloudflare, where the ORIGIN configuration is automatically managed, manual setups require explicit specification. To ensure that your Node.js application recognizes the correct protocol and host it is being served under, set the following **environment variables**: + +> - ORIGIN: Set this to the URL of your application. For example: +> ORIGIN=https://your-app-name.example.com +> - PROTOCOL_HEADER: This is used to indicate the original protocol requested by the client. Commonly, this is specified in proxy configurations. Set this variable to: +> PROTOCOL_HEADER=X-Forwarded-Proto +> - HOST_HEADER: This header helps identify the original host requested by the client. It is particularly necessary when your Node environment is behind a proxy or load balancer. Set this variable to: +> HOST_HEADER=X-Forwarded-Host + + ## Qwik API ### useAuthSession From 7ed839f4cc1aa8cba1833d811a82d8a62d5865cf Mon Sep 17 00:00:00 2001 From: Jay Brass <92528213+Jemsco@users.noreply.github.com> Date: Mon, 6 May 2024 15:43:37 -0400 Subject: [PATCH 08/24] docs: Update components/tasks index.mdx useVisibleTask$ (#6255) Co-authored-by: PatrickJS --- .../docs/src/routes/docs/(qwik)/components/tasks/index.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx index 954095c727b..5b7adef4be4 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx @@ -405,7 +405,10 @@ const Clock = component$<{ isRunning: Signal }>(({ isRunning }) => { ``` -> Notice how the clock's `useVisibleTask$()` does not run until the `` component becomes visible. The default behavior of `useVisibleTask$()` is to run the task when the component becomes visible. This behavior is implemented through [intersection observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). +> Notice how the clock's `useVisibleTask$()` does not run until the `` component becomes visible. The default behavior of `useVisibleTask$()` is to run the task when the component becomes visible. This behavior is implemented through [intersection observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). + +> **Note**: +> The [intersection observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) will not run on components that are not considered visible such as `