Merge branch 'main' into build-assets-path

packages/docs/src/components/docsearch/stored-searches.ts

@@ -7,7 +7,6 @@ function isLocalStorageSupported() {
  try {
  localStorage.setItem(key, '');
  localStorage.removeItem(key);
-
  return true;
  } catch (error) {
  return false;
@@ -26,12 +25,21 @@ function createStorage<TItem>(key: string) {
 
  return {
  setItem(item: TItem[]) {
- return window.localStorage.setItem(key, JSON.stringify(item));
+ try {
+ return window.localStorage.setItem(key, JSON.stringify(item));
+ } catch (err) {
+ //
+ }
  },
  getItem(): TItem[] {
- const item = window.localStorage.getItem(key);
-
- return item ? JSON.parse(item) : [];
+ let item = [];
+ try {
+ const value = window.localStorage.getItem(key) || '[]';
+ item = JSON.parse(value);
+ } catch (err) {
+ //
+ }
+ return item;
  },
  };
 }

packages/docs/src/components/router-head/theme-script.tsx

@@ -2,10 +2,12 @@ export const themeStorageKey = 'theme-preference';
 
 export const ThemeScript = () => {
  const themeScript = `
- document.firstElementChild
- .setAttribute('data-theme',
- localStorage.getItem('${themeStorageKey}') ??
- (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
- )`;
+ try {
+ document.firstElementChild
+ .setAttribute('data-theme',
+ localStorage.getItem('${themeStorageKey}') ??
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+ );
+ } catch (err) { }`;
  return <script dangerouslySetInnerHTML={themeScript} />;
 };

packages/docs/src/components/sidebar/sidebar.tsx

@@ -70,19 +70,23 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
  useOnDocument(
  'DOMContentLoaded',
  sync$(() => {
- const val = sessionStorage.getItem('qwik-sidebar');
- const savedScroll = !val || /null|NaN/.test(val) ? 0 : +val;
- const el = document.getElementById('qwik-sidebar');
- if (el) {
- el.scrollTop = savedScroll;
- el.style.visibility = 'visible';
+ try {
+ const val = sessionStorage.getItem('qwik-sidebar');
+ const savedScroll = !val || /null|NaN/.test(val) ? 0 : +val;
+ const el = document.getElementById('qwik-sidebar');
+ if (el) {
+ el.scrollTop = savedScroll;
+ el.style.visibility = 'visible';
+ }
+ } catch (err) {
+ //
  }
  })
  );
 
  return (
  <aside class="sidebar">
- <nav id="qwik-sidebar" class="menu" style="visibility: hidden">
+ <nav id="qwik-sidebar" class="menu">
  <button
  class="menu-close lg:hidden"
  onClick$={() => (globalStore.sideMenuOpen = !globalStore.sideMenuOpen)}
@@ -96,8 +100,12 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
  allOpen={allOpen}
  markdownItems={markdownItems.value}
  onClick$={sync$(() => {
- const scrollTop = document.getElementById('qwik-sidebar')!.scrollTop;
- sessionStorage.setItem('qwik-sidebar', String(scrollTop));
+ try {
+ const scrollTop = document.getElementById('qwik-sidebar')!.scrollTop;
+ sessionStorage.setItem('qwik-sidebar', String(scrollTop));
+ } catch (err) {
+ //
+ }
  })}
  />
  </nav>

packages/docs/src/components/theme-toggle/theme-toggle.tsx

@@ -28,8 +28,14 @@ export const reflectPreference = (theme: ThemePreference) => {
 };
 
 export const getColorPreference = (): ThemePreference => {
- if (localStorage.getItem(themeStorageKey)) {
- return localStorage.getItem(themeStorageKey) as ThemePreference;
+ let theme;
+ try {
+ theme = localStorage.getItem(themeStorageKey);
+ } catch (err) {
+ //
+ }
+ if (theme) {
+ return theme as ThemePreference;
  } else {
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

packages/docs/src/routes/api/qwik-city/api.json

@@ -450,6 +450,20 @@
  "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts",
  "mdFile": "qwik-city.pathparams.md"
  },
+ {
+ "name": "QWIK_CITY_SCROLLER",
+ "id": "qwik_city_scroller",
+ "hierarchy": [
+ {
+ "name": "QWIK_CITY_SCROLLER",
+ "id": "qwik_city_scroller"
+ }
+ ],
+ "kind": "Variable",
+ "content": "```typescript\nQWIK_CITY_SCROLLER = \"_qCityScroller\"\n```",
+ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/qwik-city-component.tsx",
+ "mdFile": "qwik-city.qwik_city_scroller.md"
+ },
  {
  "name": "QwikCityMockProps",
  "id": "qwikcitymockprops",

packages/docs/src/routes/api/qwik-city/index.md

@@ -1681,6 +1681,14 @@ export declare type PathParams = Record<string, string>;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts)
 
+## QWIK_CITY_SCROLLER
+
+```typescript
+QWIK_CITY_SCROLLER = "_qCityScroller";
+```
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/qwik-city-component.tsx)
+
 ## QwikCityMockProps
 
 ```typescript

packages/docs/src/routes/api/qwik/api.json

@@ -1704,7 +1704,7 @@
  }
  ],
  "kind": "Function",
- "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n}) => import(\"@builder.io/qwik/jsx-runtime\").JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; manifestHash?: string; manifestURL?: string; }\n\n\n</td><td>\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to `/build/`<!-- -->. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`<!-- -->. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nimport(\"@builder.io/qwik/jsx-runtime\").[JSXNode](#jsxnode)<!-- -->&lt;\"script\"&gt;",
+ "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n}) => import(\"@builder.io/qwik/jsx-runtime\").JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; manifestHash?: string; manifestURL?: string; }\n\n\n</td><td>\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to `/build/`<!-- -->. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`<!-- -->. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nimport(\"@builder.io/qwik/jsx-runtime\").JSXNode&lt;\"script\"&gt;",
  "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
  "mdFile": "qwik.prefetchgraph.md"
  },
@@ -1718,7 +1718,7 @@
  }
  ],
  "kind": "Function",
- "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n}) => import(\"@builder.io/qwik/jsx-runtime\").JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker. - `path` - Path to the service worker.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nimport(\"@builder.io/qwik/jsx-runtime\").[JSXNode](#jsxnode)<!-- -->&lt;\"script\"&gt;",
+ "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n}) => import(\"@builder.io/qwik/jsx-runtime\").JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker. - `path` - Path to the service worker.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nimport(\"@builder.io/qwik/jsx-runtime\").JSXNode&lt;\"script\"&gt;",
  "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
  "mdFile": "qwik.prefetchserviceworker.md"
  },

packages/docs/src/routes/api/qwik/index.md

@@ -1515,9 +1515,9 @@ A unique ID for the context.
 
 Low-level API for platform abstraction.
 
-Different platforms (browser, node, service workers) may have different ways of handling things such as `requestAnimationFrame` and imports. To make Qwik platform independent, the `CorePlatform` API is used to access platform specific APIs.
+Different platforms (browser, node, service workers) may have different ways of handling things such as `requestAnimationFrame` and imports. To make Qwik platform-independent Qwik uses the `CorePlatform` API to access the platform API.
 
-`CorePlatform` is also responsible for importing symbols. Because the import map is different on the client (browser) than on the server, the server uses a manifest to map symbols to javascript chunks. Since this manifest is encapsulated in `CorePlatform`, `CorePlatform` cannot be global as there may be multiple applications running on the server concurrently.
+`CorePlatform` also is responsible for importing symbols. The import map is different on the client (browser) then on the server. For this reason, the server has a manifest that is used to map symbols to javascript chunks. The manifest is encapsulated in `CorePlatform`, for this reason, the `CorePlatform` can't be global as there may be multiple applications running at server concurrently.
 
 This is a low-level API and there should not be a need for you to access this.
 
@@ -1694,7 +1694,7 @@ Create a context ID to be used in your application. The name should be written w
 
 Context is a way to pass stores to the child components without prop-drilling.
 
-Use `createContextId()` to create a `ContextId`. A `ContextId` is just a serializable identifier for the context. It is not the context value itself. See `useContextProvider()` and `useContext()` for the values. Qwik needs a serializable ID for the context so that it can track context providers and consumers in a way that survives resumability.
+Use `createContextId()` to create a `ContextId`. A `ContextId` is just a serializable identifier for the context. It is not the context value itself. See `useContextProvider()` and `useContext()` for the values. Qwik needs a serializable ID for the context so that the it can track context providers and consumers in a way that survives resumability.
 
 ### Example
 

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
@@ -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 */

packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx

@@ -61,7 +61,8 @@ export default component$(() => {
 </CodeSandbox>
 
 > 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
 

packages/docs/src/routes/docs/(qwik)/components/state/index.mdx

@@ -33,6 +33,7 @@ contributors:
  - julianobrasil
  - aivarsliepa
  - Balastrong
+ - Jemsco
 updated_at: '2023-10-04T21:48:45Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
@@ -159,7 +160,16 @@ const shallowStore = useStore(
  { deep: false }
 );
 ```
-
+> **Handling Dynamic Object Mutations**
+>
+> When dynamically manipulating object properties, such as deleting them while they are being rendered somewhere in the app, you may encounter issues. This could happen if the component renders values dependent on an object's property that is currently being removed. To prevent this situation, use optional chaining when accessing properties. For example, if attempting to remove a property:
+> ```tsx
+> delete store.propertyName;
+> ```
+> Be sure to access this property cautiously in the componet by using optional chaining ( ?. ):
+> ```tsx
+> const propertyValue = store.propertyName?.value;
+> ```
 ### Methods
 
 To provide methods on the store, you must make them into QRLs and refer to the store with `this`, like so:

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';