refactor: v2 release

.REFACTOR_NOTES.md

@@ -0,0 +1,44 @@
+1 << 0 | 001 | static listeners
+1 << 1 | 002 | static subtree
+
+## Slots
+
+```typescript
+const Parent = component$(() => {
+  return (
+    <Child>
+      Projection Content
+      <span q:slot="secondary">Secondary Content</span>
+      <span q:slot="other">Other Content</span>
+    </Child>
+  };
+});
+
+const Child = component$(() => {
+  return (
+    <div>
+      <Slot>Default Primary</Slot>
+      <Slot name="secondary">Default Secondary</Slot>
+    </div>
+  );
+});
+```
+
+```html
+<Fragment Parent>
+  <Fragment Child>
+    <div>
+      <Fragment Slot ptr:Child>
+        Projected Content
+        <template>Default Primary</template>
+      </Fragment>
+      <Fragment Slot ptr:Child>
+        <span q:slot="secondary">Secondary Content</span>
+      </Fragment>
+    </div>
+  </Fragment>
+  <template>
+    <span q:slot="other">Other Content</span>
+  </template>
+</Fragment>
+```

.changeset/five-kangaroos-matter.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+BREAKING: `useComputed$` no longer accepts Promise results. Instead, use `useSignal` and `useTask$` together to perform async signal updates

.devcontainer/devcontainer.json

@@ -33,5 +33,6 @@
       "label": "Serve",
       "onAutoForward": "openPreview"
     }
-  }
+  },
+  "postCreateCommand": "./.devcontainer/post-create.sh"
 }

.devcontainer/post-create.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+git config --global alias.co checkout
+git config --global alias.br branch
+git config --global alias.ci commit
+git config --global alias.st status
+git config --global alias.lg "log --oneline"

.github/ISSUE_TEMPLATE/bug.yaml

@@ -53,7 +53,7 @@ body:
     id: system-info
     attributes:
       label: System Info
-      description: Output of `npx envinfo --system --npmPackages '{vite,undici,typescript,@builder.io/*}' --binaries --browsers`
+      description: Output of `npx envinfo --system --npmPackages '{vite,typescript,@builder.io/*}' --binaries --browsers`
       render: shell
       placeholder: System, Binaries, Browsers
     validations:

.github/workflows/cancel.yml

@@ -0,0 +1,15 @@
+# Workaround to cancel workflow runs from forked repositories
+name: Cancel
+on:
+  workflow_run:
+    workflows: ['ci']
+    types:
+      - requested
+jobs:
+  cancel:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: styfle/[email protected]
+        if: github.event_name == 'pull_request'
+        with:
+          workflow_id: ${{ github.event.workflow.id }}

.github/workflows/labeling-issues.yml

@@ -1,4 +1,4 @@
-name: Labling Issues
+name: Labeling Issues
 
 on:
   issues:

.vscode/launch.json

@@ -58,7 +58,7 @@
       "internalConsoleOptions": "neverOpen",
       "program": "${workspaceFolder}/./node_modules/vitest/vitest.mjs",
       "cwd": "${workspaceFolder}",
-      "args": ["${file}"]
+      "args": ["--test-timeout", "999999", "--minWorkers", "1", "--maxWorkers", "1", "${file}"]
     }
   ]
 }

.vscode/settings.json

@@ -7,8 +7,10 @@
     "**/cypress/**",
     "**/.{idea,git,cache,output,temp}/**"
   ],
+  "cSpell.words": ["bucketize", "Stringifiable"],
   "javascript.preferences.autoImportFileExcludePatterns": ["node:test"],
   "typescript.preferences.preferTypeOnlyAutoImports": true,
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "makefile.configureOnOpen": false
 }

package.json

@@ -56,13 +56,6 @@
           ],
           "pinVersion": "1.40.0"
         },
-        {
-          "label": "Undici should always be * until we remove it",
-          "dependencies": [
-            "undici"
-          ],
-          "range": "*"
-        },
         {
           "label": "use exact version numbers for devDependencies",
           "dependencyTypes": [
@@ -109,7 +102,7 @@
     "@napi-rs/triples": "1.2.0",
     "@node-rs/helper": "1.6.0",
     "@octokit/action": "6.1.0",
-    "@playwright/test": "1.40.0",
+    "@playwright/test": "1.47.2",
     "@types/brotli": "1.3.4",
     "@types/bun": "1.1.6",
     "@types/cross-spawn": "6.0.6",
@@ -133,6 +126,7 @@
     "dotenv": "16.4.5",
     "esbuild": "0.20.2",
     "eslint": "8.57.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-qwik": "workspace:^",
     "execa": "8.0.1",
@@ -157,7 +151,6 @@
     "tree-kill": "1.2.2",
     "tsm": "2.3.0",
     "typescript": "5.4.5",
-    "undici": "*",
     "vfile": "6.0.1",
     "vite": "5.3.5",
     "vite-imagetools": "7.0.4",
@@ -169,12 +162,12 @@
     "zod": "3.22.4"
   },
   "engines": {
-    "node": ">=16.8.0 <18.0.0 || >=18.11",
+    "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
     "npm": "please-use-pnpm",
     "yarn": "please-use-pnpm",
     "pnpm": ">=9.0.5"
   },
-  "packageManager": "pnpm@9.0.5",
+  "packageManager": "pnpm@9.1.2",
   "pnpm": {
     "overrides": {
       "typescript": "5.4.5",
@@ -243,6 +236,7 @@
     "test.e2e.chromium": "playwright test starters --browser=chromium --config starters/playwright.config.ts",
     "test.e2e.chromium.debug": "PWDEBUG=1 playwright test starters --browser=chromium --config starters/playwright.config.ts",
     "test.e2e.city": "playwright test starters/e2e/qwikcity --browser=chromium --config starters/playwright.config.ts",
+    "test.e2e.cli": "tsm scripts/e2e-cli.ts",
     "test.e2e.firefox": "playwright test starters --browser=firefox --config starters/playwright.config.ts",
     "test.e2e.webkit": "playwright test starters --browser=webkit --config starters/playwright.config.ts",
     "test.rust": "make test",

packages/create-qwik/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-qwik",
   "description": "Interactive CLI for create Qwik projects and adding features.",
-  "version": "1.9.0",
+  "version": "2.0.0-0",
   "author": "Builder.io Team",
   "bin": "./create-qwik.cjs",
   "bugs": "https://github.com/QwikDev/qwik/issues",

packages/docs/check-qwik-build.ts

@@ -4,8 +4,9 @@
 import fs from 'fs';
 import path from 'path';
 import { spawnSync } from 'child_process';
+import { fileURLToPath } from 'url';
 
-const __dirname = path.dirname(new URL(import.meta.url).pathname);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const qwikPkgDir = path.join(__dirname, '..', 'qwik', 'dist');
 
 if (!fs.existsSync(path.join(qwikPkgDir, 'core.d.ts'))) {

packages/docs/contributors.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import { fetch } from 'undici';
 import fs from 'node:fs';
 import path from 'node:path';
 import url from 'node:url';

packages/docs/package.json

@@ -40,7 +40,7 @@
     "prism-themes": "1.9.0",
     "prismjs": "1.29.0",
     "puppeteer": "22.13.1",
-    "qwik-image": "0.0.10",
+    "qwik-image": "0.0.14-alpha",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rehype-pretty-code": "0.11.0",
@@ -58,7 +58,7 @@
     "wrangler": "3.65.1"
   },
   "engines": {
-    "node": ">=18.11",
+    "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
     "npm": "please-use-pnpm",
     "yarn": "please-use-pnpm",
     "pnpm": ">=8.6.12"

packages/docs/scripts/showcase.js

@@ -134,7 +134,6 @@ async function captureMultipleScreenshots() {
 }
 
 async function getPagespeedData(url) {
-  const { fetch } = await import('undici');
   const requestURL = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(
     url
   )}&key=AIzaSyApBC9gblaCzWrtEBgHnZkd_B37OF49BfM&category=PERFORMANCE&strategy=MOBILE`;

packages/docs/src/components/builder-content/index.tsx

@@ -1,6 +1,5 @@
 import { component$, Resource, useResource$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
-import { getBuilderSearchParams, fetchOneEntry, Content } from '@builder.io/sdk-qwik';
 import { QWIK_MODEL } from '../../constants';
 
 export default component$<{
@@ -17,52 +16,24 @@ export default component$<{
         ? query.get(name)
         : (query as unknown as Record<string, string>)[name];
 
-    const render = queryGet('render');
     const contentId = props.model === QWIK_MODEL ? queryGet('content') : undefined;
-    const isSDK = render === 'sdk';
     cache('immutable');
-    if (isSDK) {
-      return getCachedValue(
-        {
-          model: props.model!,
-          apiKey: props.apiKey!,
-          options: getBuilderSearchParams(query),
-          userAttributes: {
-            urlPath: location.url.pathname,
-            site: 'qwik.dev',
-          },
-          ...(contentId && {
-            query: {
-              id: contentId,
-            },
-          }),
-        },
-        fetchOneEntry
-      );
-    } else {
-      return getCachedValue(
-        {
-          apiKey: props.apiKey,
-          model: props.model,
-          urlPath: location.url.pathname,
-          contentId: contentId,
-        },
-        getBuilderContent
-      );
-    }
+    return getCachedValue(
+      {
+        apiKey: props.apiKey,
+        model: props.model,
+        urlPath: location.url.pathname,
+        contentId: contentId,
+      },
+      getBuilderContent
+    );
   });
 
   return (
     <Resource
       value={builderContentRsrc}
       onPending={() => <div>Loading...</div>}
-      onResolved={(content) =>
-        content.html ? (
-          <props.tag class="builder" dangerouslySetInnerHTML={content.html} />
-        ) : (
-          <Content model={props.model} content={content} apiKey={props.apiKey} />
-        )
-      }
+      onResolved={(content) => <props.tag class="builder" dangerouslySetInnerHTML={content.html} />}
     />
   );
 });

packages/docs/src/components/docsearch/results-screen.tsx

@@ -21,7 +21,8 @@ export const ResultsScreen = component$((props: { state: DocSearchState }) => {
             <ul role="listbox" aria-labelledby="docsearch-label" id="docsearch-list">
               {collection.items.map((item, index) => {
                 return (
-                  <Result state={props.state} item={item} key={item.objectID}>
+                  // TODO: the key should be {item.objectID}, but for now in v2 there is a bug
+                  <Result state={props.state} item={item} key={item.__autocomplete_id}>
                     {item.__docsearch_parent && (
                       <svg q:slot="start-action" class="DocSearch-Hit-Tree" viewBox="0 0 24 54">
                         <g

packages/docs/src/repl/monaco.tsx

@@ -148,7 +148,11 @@ const checkDiagnostics = async (
 ) => {
   if (!monacoCtx.tsWorker) {
     const getTsWorker = await monaco.languages.typescript.getTypeScriptWorker();
-    monacoCtx.tsWorker = await getTsWorker(editor.getModel()!.uri);
+    const uri = editor.getModel()?.uri;
+    if (!uri) {
+      return;
+    }
+    monacoCtx.tsWorker = await getTsWorker(uri);
   }
   const tsWorker = monacoCtx.tsWorker;
 

packages/docs/src/repl/repl-console.tsx

@@ -7,9 +7,10 @@ export interface ReplConsoleProps {
 export const ReplConsole = component$(({ store }: ReplConsoleProps) => {
   return (
     <div class="detail-logs">
-      {store.events.map((ev) => (
-        <ReplLog log={ev} key={ev.start} />
-      ))}
+      {
+        // for some reason ev can be null, just skip it
+        store.events.map((ev) => ev && <ReplLog log={ev} key={ev.start} />)
+      }
     </div>
   );
 });

packages/docs/src/repl/repl-output-panel.tsx

@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useComputed$ } from '@builder.io/qwik';
 import { CodeBlock } from '../components/code-block/code-block';
 import { ReplOutputModules } from './repl-output-modules';
 import { ReplOutputSymbols } from './repl-output-symbols';
@@ -7,7 +7,9 @@ import { ReplTabButtons } from './repl-tab-buttons';
 import type { ReplAppInput, ReplStore } from './types';
 
 export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProps) => {
-  const diagnosticsLen = store.diagnostics.length + store.monacoDiagnostics.length;
+  const diagnosticsLen = useComputed$(
+    () => store.diagnostics.length + store.monacoDiagnostics.length
+  );
 
   return (
     <div class="repl-panel repl-output-panel">
@@ -61,8 +63,8 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
         ) : null}
 
         <ReplTabButton
-          text={`Diagnostics${diagnosticsLen > 0 ? ` (${diagnosticsLen})` : ``}`}
-          cssClass={{ 'repl-tab-diagnostics': true, 'has-errors': diagnosticsLen > 0 }}
+          text={`Diagnostics${diagnosticsLen.value > 0 ? ` (${diagnosticsLen.value})` : ``}`}
+          cssClass={{ 'repl-tab-diagnostics': true, 'has-errors': diagnosticsLen.value > 0 }}
           isActive={store.selectedOutputPanel === 'diagnostics'}
           onClick$={async () => {
             store.selectedOutputPanel = 'diagnostics';
@@ -120,7 +122,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
 
         {store.selectedOutputPanel === 'diagnostics' ? (
           <div class="output-result output-diagnostics">
-            {diagnosticsLen === 0 ? (
+            {diagnosticsLen.value === 0 ? (
               <p class="no-diagnostics">- No Reported Diagnostics -</p>
             ) : (
               [...store.diagnostics, ...store.monacoDiagnostics].map((d, key) => (