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>
+```

.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
 }

Makefile

@@ -30,7 +30,9 @@ test:
 
 test-update:
 	if ! cargo test --manifest-path packages/qwik/src/optimizer/core/Cargo.toml; then \
-		cd packages/qwik/src/optimizer/core/src/snapshots/ && for i in *.new; do f=$$(basename $$i .new); mv $$i $$f; done; \
+		cd packages/qwik/src/optimizer/core/src/snapshots/; \
+		for i in *.new; do f=$$(basename $$i .new); mv $$i $$f; done; \
+		cd -; \
 		cargo test --manifest-path packages/qwik/src/optimizer/core/Cargo.toml; \
 	fi
 

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": [
@@ -132,6 +125,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",
@@ -154,7 +148,6 @@
     "terser": "5.31.3",
     "tsm": "2.3.0",
     "typescript": "5.4.5",
-    "undici": "*",
     "vfile": "6.0.1",
     "vite": "5.3.5",
     "vite-imagetools": "7.0.4",
@@ -166,12 +159,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",
@@ -240,6 +233,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.8.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-update.ts

@@ -6,7 +6,9 @@ const deepUpdate = (prev: any, next: any) => {
     if (prev[key] && typeof next[key] === 'object' && typeof prev[key] === 'object') {
       deepUpdate(prev[key], next[key]);
     } else {
-      prev[key] = next[key];
+      if (prev[key] !== next[key]) {
+        prev[key] = next[key];
+      }
     }
   }
   for (const key in prev) {
@@ -17,10 +19,12 @@ const deepUpdate = (prev: any, next: any) => {
 };
 
 export const updateReplOutput = async (store: ReplStore, result: ReplResult) => {
-  store.diagnostics = result.diagnostics;
+  deepUpdate(store.diagnostics, result.diagnostics);
 
-  if (store.diagnostics.length === 0) {
-    store.html = result.html;
+  if (result.diagnostics.length === 0) {
+    if (store.html !== result.html) {
+      store.html = result.html;
+    }
     deepUpdate(store.transformedModules, result.transformedModules);
     deepUpdate(store.clientBundles, result.clientBundles);
     deepUpdate(store.ssrModules, result.ssrModules);

packages/docs/src/repl/types.ts

@@ -129,3 +129,7 @@ export type OutputPanel =
   | 'diagnostics';
 
 export type OutputDetail = 'options' | 'console';
+
+export interface PathInView {
+  selectedPath: string;
+}

packages/docs/src/repl/worker/app-bundle-client.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-console */
-import type { InputOptions, OutputAsset, OutputChunk } from 'rollup';
 import type { Diagnostic, QwikRollupPluginOptions } from '@builder.io/qwik/optimizer';
+import type { InputOptions, OutputAsset, OutputChunk } from 'rollup';
 import type { ReplInputOptions, ReplModuleOutput, ReplResult } from '../types';
-import type { QwikWorkerGlobal } from './repl-service-worker';
 import { replCss, replMinify, replResolver } from './repl-plugins';
+import type { QwikWorkerGlobal } from './repl-service-worker';
 
 export const appBundleClient = async (
   options: ReplInputOptions,
@@ -19,7 +19,7 @@ export const appBundleClient = async (
     srcInputs: getInputs(options),
     // Older versions don't support `segment`
     entryStrategy:
-      options.entryStrategy.type === 'segment' ? { type: 'hook' } : options.entryStrategy,
+      options.entryStrategy?.type === 'segment' ? { type: 'hook' } : options.entryStrategy,
     manifestOutput: (m) => {
       result.manifest = m;
     },

packages/docs/src/repl/worker/repl-request-handler.ts

@@ -169,5 +169,5 @@ const injectDevHtml = (clientId: string, html?: string) => {
   }, true);
 })();`;
 
-  return `<script>${s}</script>${html || ''}`;
+  return `<script :>${s}</script>${html || ''}`;
 };