Merge pull request #7974 from QwikDev/fix-css-properties

fix: repl and tutorial improvements

Author: wmertens

packages/docs/src/repl/bundler/repl-ssr-worker.ts

@@ -1,6 +1,7 @@
 // SSR Worker - handles server-side rendering execution
 // MUST be served from /repl/ so that its imports are intercepted by the REPL service worker
 import type { QwikManifest } from '@builder.io/qwik/optimizer';
+import type { RenderToString } from '@builder.io/qwik/server';
 import type { ReplEvent } from '../types';
 
 // Worker message types
@@ -80,7 +81,7 @@ async function executeSSR(message: InitSSRMessage): Promise<{ html: string; even
   const module = await importFrom(`/repl/ssr/${replId}/${entry}`);
   const server = module.default;
 
-  const render = typeof server === 'function' ? server : server?.render;
+  const render: RenderToString = typeof server === 'function' ? server : server?.render;
   if (typeof render !== 'function') {
     throw new Error(`Server module ${entry} does not export default render function`);
   }
@@ -109,6 +110,7 @@ async function executeSSR(message: InitSSRMessage): Promise<{ html: string; even
     base: baseUrl,
     manifest,
     prefetchStrategy: null,
+    preloader: false,
   });
 
   events.push({

packages/docs/src/repl/bundler/rollup-plugins.ts

@@ -35,13 +35,14 @@ export const replResolver = (
     return srcInputs.find((i) => i.path === id)?.path;
   };
 
-  const getQwik = (id: string, external?: true) => {
+  const resolveQwik = (id: string, external?: true) => {
     const path = deps[QWIK_PKG_NAME_V1][id];
     if (!path) {
       throw new Error(`Unknown Qwik path: ${id}`);
     }
     return {
-      id: `\0@qwik${id}`,
+      // Make sure this matches the regexes in manifest.ts
+      id: `/node_modules/@qwik.dev/core${id}`,
       sideEffects: false,
       // It would be nice to load qwik as external, but
       // we import core and core/build so we need processing
@@ -58,30 +59,30 @@ export const replResolver = (
       if (id.startsWith('http')) {
         return { id, external: true };
       }
-      if (id.startsWith('\0@qwik/')) {
+      if (id.startsWith('/node_modules/@qwik.dev/core/')) {
         return id;
       }
       const match = id.match(/(@builder\.io\/qwik|@qwik\.dev\/core)(.*)/);
       if (match) {
         const pkgName = match[2];
 
         if (pkgName === '/build') {
-          return `\0@qwik/build`;
+          return `/node_modules/@qwik.dev/core/build`;
         }
         if (!pkgName || pkgName === '/jsx-runtime' || pkgName === '/jsx-dev-runtime') {
-          return getQwik('/dist/core.mjs');
+          return resolveQwik('/dist/core.mjs');
         }
         if (pkgName === '/server') {
-          return getQwik('/dist/server.mjs');
+          return resolveQwik('/dist/server.mjs');
         }
         if (pkgName.includes('/preloader')) {
-          return getQwik('/dist/preloader.mjs');
+          return resolveQwik('/dist/preloader.mjs');
         }
         if (pkgName.includes('/qwikloader')) {
-          return getQwik('/dist/qwikloader.js');
+          return resolveQwik('/dist/qwikloader.js');
         }
         if (pkgName.includes('/handlers')) {
-          return getQwik('/handlers.mjs');
+          return resolveQwik('/handlers.mjs');
         }
       }
       // Simple relative file resolution
@@ -107,8 +108,8 @@ export const replResolver = (
       if (input && typeof input.code === 'string') {
         return input.code;
       }
-      if (id.startsWith('\0@qwik/')) {
-        const path = id.slice('\0@qwik'.length);
+      if (id.startsWith('/node_modules/@qwik.dev/core/')) {
+        const path = id.slice('/node_modules/@qwik.dev/core'.length);
         if (path === '/build') {
           // Virtual module for Qwik build
           const isDev = options.buildMode === 'development';

packages/docs/src/routes/examples/apps/reactivity/auto-complete/app.tsx

@@ -7,7 +7,7 @@ export default component$(() => {
       <br />
       <br />
       Go ahead, search for Star Wars characters such as "Luke Skywalker", it uses the{' '}
-      <a href="https://swapi-node.vercel.app/">Star Wars API</a>:
+      <a href="https://swapi.py4e.com/">Star Wars API</a>:
       <br />
       <br />
       <AutoComplete></AutoComplete>
@@ -68,16 +68,16 @@ export const SuggestionsListComponent = (props: { state: IState }) => {
 };
 
 const getPeople = (searchInput: string, controller?: AbortController): Promise<string[]> =>
-  fetch(`https://swapi-node.vercel.app/api/people/?search=${searchInput}`, {
+  fetch(`https://swapi.py4e.com/api/people/?search=${searchInput}`, {
     signal: controller?.signal,
   })
     .then((response) => {
       return response.json();
     })
     .then((parsedResponse) => {
-      debugger;
-      return parsedResponse.results.map((people: any) => people.fields.name);
-    });
+      return parsedResponse.results.map((people: { name: string }) => people.name);
+    })
+    .catch((e) => console.error('fetch failed', e));
 
 function debounce<F extends (...args: any) => any>(fn: F, delay = 500) {
   let timeoutId: ReturnType<typeof setTimeout>;

packages/docs/src/routes/tutorial/events/synchronous-sync/index.mdx

@@ -15,17 +15,24 @@ created_at: '2022-08-02T12:07:45Z'
 
 While not a common use case, you may occasionally need to process events synchronously.
 
-Since Qwik processes asynchronously by default, your code must be explicitly configured for synchronous calls. 
+The two most common use cases are to call `event.preventDefault()` or `event.stopPropagation()` on a DOM event. Those are handled by adding the `preventdefault:eventname` or `stoppropagation:eventname` in addition to your event handler.
 
-There are two ways of processing events synchronously:
-1. preferred way: use `sync$()` to load code synchronously. Fast, resumable but with **significant restrictions** on event handler size. 
-2. eager registration: use `useVisibleTask$()` to load code synchronously. No restrictions, but requires eager code execution, which goes against resumability.
+```tsx
+  <a href="/" preventdefault:click onClick$={() => {
+    console.log('clicked');
+  }}>
+    link
+  </a>
+```
 
-This example shows how to use synchronous code blocks using `sync$()`.
+When you have other use cases that require synchronous event processing, you can use either `sync$()` or `useVisibleTask$()`.
+1. preferred way: use `sync$()` to embed the code in the HTML. Fast, resumable, but with some restrictions (see below).
+2. eager registration: use `useVisibleTask$()` to register a handler. No restrictions, but it will not handle events until the visible task has executed, and it will cause of course run extra javaScript while the page is loading.
 
 ```tsx
   <a href="/" 
     onClick$={sync$((event, target) => {
+      // Only prevent default if the ctrl key is pressed.
       if (event.ctrlKey) {
         event.preventDefault();
       }
@@ -34,7 +41,7 @@ This example shows how to use synchronous code blocks using `sync$()`.
   </a>
 ```
 
-## `sync$()` Restrictions (BETA)
+## `sync$()` Restrictions
 
 The `sync$()` function is a resumable way to process events synchronously. However, it has some significant restrictions. The `sync$()` **can't close over anything**. The implications are that you can't:
 - access any state: The recommended way to get the state into function is to place on element attributes.
@@ -63,6 +70,23 @@ For this reason, we recommended breaking up the event handlers into two parts:
   </a>
 ```
 
+You can also dispatch a custom event from the `sync$()` handler and handle it asynchronously:
 
+```tsx
+  <a href="/" 
+    onClick$={sync$((event, target) => {
+      if (event.ctrlKey) {
+        event.preventDefault();
+      }
+      // Dispatch a custom event to be handled asynchronously.
+      target.dispatchEvent(new CustomEvent('myclick', { bubbles: true }));
+    })}
+    onMyclick$={() => {
+      // This part can be asynchronous and can close over anything.
+      console.log('clicked');
+    }}>
+    link
+  </a>
+```
 
- **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).
+ **Your task:** Convert the `onClick$` from asynchronous event to synchronous event by using [`sync$`](/docs/(qwik)/core/tasks/index.mdx#usevisibletask).

packages/docs/src/routes/tutorial/hooks/use-un-mount/index.mdx

@@ -11,6 +11,8 @@ created_at: '2022-08-02T12:07:45Z'
 
 Fallback content allows the child component to display fallback content in case the parent component did not provide content. The fallback content can be done with CSS, it is necessary to add a CSS selector (and the appropriate CSS) on the named Slot in case it is empty.
 
+Note that in the upcoming Qwik 2.0, a Slot can embed fallback content directly, without needing CSS.
+
 ### Example
 
 In this example, we show three cards, but some of them are not filled with content. Use the right CSS selector to specify the fallback content.