qwikifiers · maiieul · Apr 20, 2026 · Apr 20, 2026 · Apr 20, 2026 · Apr 20, 2026
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -10,6 +10,22 @@
       "name": "Launch Chrome against localhost",
       "url": "http://localhost:8080",
       "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "node",
+      "name": "Debug website SSR (preview)",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
+      "args": ["preview", "--config", "apps/website/vite.config.ts", "--open"],
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal",
+      "stopOnEntry": true,
+      "sourceMaps": true,
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ],
+      "skipFiles": ["<node_internals>/**"]
     }
   ]
 }
diff --git a/apps/component-tests/package.json b/apps/component-tests/package.json
@@ -1,3 +1,4 @@
 {
-  "name": "componentTests"
-}
+  "name": "componentTests",
+  "type": "module"
+}
diff --git a/apps/component-tests/project.json b/apps/component-tests/project.json
@@ -8,7 +8,7 @@
       "executor": "qwik-nx:build",
       "options": {
         "runSequence": ["component-tests:build.client", "component-tests:build.ssr"],
-        "outputPath": "dist/apps/component-tests"
+        "outputPath": "dist/apps/component-tests/client"
       },
       "configurations": {
         "preview": {}
@@ -17,15 +17,15 @@
     "build.client": {
       "executor": "@nx/vite:build",
       "options": {
-        "outputPath": "dist/apps/component-tests",
+        "outputPath": "dist/apps/component-tests/client",
         "configFile": "apps/component-tests/vite.config.ts"
       }
     },
     "build.ssr": {
       "executor": "@nx/vite:build",
       "defaultConfiguration": "preview",
       "options": {
-        "outputPath": "dist/apps/component-tests"
+        "outputPath": "dist/apps/component-tests/server"
       },
       "configurations": {
         "preview": {

diff --git a/apps/component-tests/src/components/router-head/router-head.tsx b/apps/component-tests/src/components/router-head/router-head.tsx
@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik';
-import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+import { component$ } from '@qwik.dev/core';
+import { useDocumentHead, useLocation } from '@qwik.dev/router';
 
 /**
  * The RouterHead component is placed inside of the document `<head>` element.

diff --git a/apps/component-tests/src/components/showcase-test/showcase-test.tsx b/apps/component-tests/src/components/showcase-test/showcase-test.tsx
@@ -1,5 +1,5 @@
-import { Component, component$, useSignal, useTask$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { Component, component$, useSignal, useTask$ } from '@qwik.dev/core';
+import { useLocation } from '@qwik.dev/router';
 import { metaGlobComponents } from './component-imports';
 
 export const ShowcaseTest = component$(() => {

diff --git a/apps/component-tests/src/entry.dev.tsx b/apps/component-tests/src/entry.dev.tsx
@@ -9,7 +9,7 @@
  * - More code is transferred to the browser than in SSR mode.
  * - Optimizer/Serialization/Deserialization code is not exercised!
  */
-import { render, RenderOptions } from '@builder.io/qwik';
+import { render, RenderOptions } from '@qwik.dev/core';
 import Root from './root';
 
 export default function (opts: RenderOptions) {

diff --git a/apps/component-tests/src/entry.preview.tsx b/apps/component-tests/src/entry.preview.tsx
@@ -10,12 +10,11 @@
  * - https://vitejs.dev/config/preview-options.html#preview-options
  *
  */
-import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
+import { createQwikRouter } from '@qwik.dev/router/middleware/node';
 // The `render` import must stay after `qwikCityPlan` import: https://github.com/BuilderIO/qwik/issues/3634
-import qwikCityPlan from '@qwik-city-plan';
 import render from './entry.ssr';
 
 /**
  * The default export is the QwikCity adaptor used by Vite preview.
  */
-export default createQwikCity({ render, qwikCityPlan });
+export default createQwikRouter({ render });
diff --git a/apps/component-tests/src/entry.ssr.tsx b/apps/component-tests/src/entry.ssr.tsx
@@ -10,7 +10,7 @@
  * - npm run build
  *
  */
-import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
+import { renderToStream, RenderToStreamOptions } from '@qwik.dev/core/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
 

diff --git a/apps/component-tests/src/root.tsx b/apps/component-tests/src/root.tsx
@@ -1,8 +1,8 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
+import { component$, useStyles$ } from '@qwik.dev/core';
+import { QwikRouterProvider, RouterOutlet } from '@qwik.dev/router';
 
 import { RouterHead } from './components/router-head/router-head';
-import globalStyles from './global.css?inline';
+import global from './global.css?inline';
 
 import { ThemeProvider } from '@qwik-ui/themes';
 
@@ -22,10 +22,10 @@ export default component$(() => {
    *
    * Don't remove the `<head>` and `<body>` elements.
    */
-  useStyles$(globalStyles);
+  useStyles$(global);
 
   return (
-    <QwikCityProvider>
+    <QwikRouterProvider>
       <head>
         <meta charset="utf-8" />
         <link rel="manifest" href="/manifest.json" />
@@ -47,6 +47,6 @@ export default component$(() => {
           <RouterOutlet />
         </ThemeProvider>
       </body>
-    </QwikCityProvider>
+    </QwikRouterProvider>
   );
 });
diff --git a/apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx b/apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { ShowcaseTest } from '../../../../components/showcase-test/showcase-test';
 
 export default component$(() => {

diff --git a/apps/component-tests/src/routes/index.tsx b/apps/component-tests/src/routes/index.tsx
@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
+import { component$ } from '@qwik.dev/core';
+import type { DocumentHead } from '@qwik.dev/router';
 
 export default component$(() => {
   return <div>kit/component/example</div>;

diff --git a/apps/component-tests/src/routes/service-worker.ts b/apps/component-tests/src/routes/service-worker.ts
diff --git a/apps/component-tests/src/routes/test-route/index.tsx b/apps/component-tests/src/routes/test-route/index.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 
 export default component$(() => {
   return <div>Test Route</div>;

diff --git a/apps/component-tests/tsconfig.json b/apps/component-tests/tsconfig.json
@@ -6,7 +6,7 @@
     "module": "ES2022",
     "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
     "jsx": "react-jsx",
-    "jsxImportSource": "@builder.io/qwik",
+    "jsxImportSource": "@qwik.dev/core",
     "strict": true,
     "resolveJsonModule": true,
     "moduleResolution": "bundler",

diff --git a/apps/component-tests/vite.config.ts b/apps/component-tests/vite.config.ts
@@ -1,13 +1,15 @@
-import { qwikVite } from '@builder.io/qwik/optimizer';
-import { qwikCity } from '@builder.io/qwik-city/vite';
+import { qwikVite } from '@qwik.dev/core/optimizer';
+import { qwikRouter } from '@qwik.dev/router/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
 
+const qwikLibs = ['@qwikest/icons'];
 export default defineConfig({
   root: 'apps/component-tests',
   cacheDir: '../../node_modules/.vite/apps/component-tests',
   plugins: [
-    qwikCity(),
+    qwikRouter(),
     qwikVite({
       client: {
         outDir: '../../dist/apps/component-tests/client',
@@ -18,7 +20,15 @@ export default defineConfig({
       tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
+    tailwindcss(),
   ],
+
+  optimizeDeps: {
+    exclude: [...qwikLibs],
+  },
+  ssr: {
+    noExternal: [...qwikLibs],
+  },
   server: {
     fs: {
       // Allow serving files from the project root

diff --git a/apps/website/adapters/static/vite.config.ts b/apps/website/adapters/static/vite.config.ts
@@ -1,13 +1,13 @@
-import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite';
-import { extendConfig } from '@builder.io/qwik-city/vite';
+import { staticAdapter } from '@qwik.dev/router/adapters/static/vite';
+import { extendConfig } from '@qwik.dev/router/vite';
 import baseConfig from '../../vite.config';
 
-export default extendConfig(baseConfig, () => {
+export default extendConfig(baseConfig as any, () => {
   return {
     build: {
       ssr: true,
       rollupOptions: {
-        input: ['@qwik-city-plan'],
+        input: ['@qwik-router-config'],
       },
     },
     plugins: [

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -3,4 +3,4 @@
   "description": "The Qwik UI Website",
   "private": true,
   "type": "module"
-}
+}
diff --git a/apps/website/project.json b/apps/website/project.json
@@ -8,7 +8,7 @@
       "executor": "qwik-nx:build",
       "options": {
         "runSequence": ["website:build.client", "website:build.ssr"],
-        "outputPath": "dist/apps/website"
+        "outputPath": "dist/apps/website/client"
       },
       "configurations": {
         "preview": {},
@@ -31,15 +31,15 @@
     "build.client": {
       "executor": "@nx/vite:build",
       "options": {
-        "outputPath": "dist/apps/website",
+        "outputPath": "dist/apps/website/client",
         "configFile": "apps/website/vite.config.ts"
       }
     },
     "build.ssr": {
       "executor": "@nx/vite:build",
       "defaultConfiguration": "preview",
       "options": {
-        "outputPath": "dist/apps/website"
+        "outputPath": "dist/apps/website/server"
       },
       "configurations": {
         "preview": {

diff --git a/apps/website/recma-provide-components.ts b/apps/website/recma-provide-components.ts
@@ -105,7 +105,7 @@ export const recmaProvideComponents: Plugin<any, Program> = () => {
           local: { type: 'Identifier', name: '_inlinedQrl' },
         },
       ],
-      source: { type: 'Literal', value: '@builder.io/qwik' },
+      source: { type: 'Literal', value: '@qwik.dev/core' },
     });
   };
 };
diff --git a/apps/website/src/_state/MDXProvider.tsx b/apps/website/src/_state/MDXProvider.tsx
@@ -1,11 +1,11 @@
+import type { Component } from '@qwik.dev/core';
 import {
-  Component,
+  Slot,
   component$,
   createContextId,
   useContext,
-  Slot,
   useContextProvider,
-} from '@builder.io/qwik';
+} from '@qwik.dev/core';
 
 export const MDXContext = createContextId<Components>('MDXContext');
 

diff --git a/apps/website/src/_state/app-state-context-id.ts b/apps/website/src/_state/app-state-context-id.ts
@@ -1,4 +1,4 @@
-import { createContextId } from '@builder.io/qwik';
+import { createContextId } from '@qwik.dev/core';
 import { AppState } from './app-state.type';
 
 export const APP_STATE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');
diff --git a/apps/website/src/_state/use-app-state.ts b/apps/website/src/_state/use-app-state.ts
@@ -1,4 +1,4 @@
-import { useContext } from '@builder.io/qwik';
+import { useContext } from '@qwik.dev/core';
 import { APP_STATE_CONTEXT_ID } from './app-state-context-id';
 
 export const useAppState = () => {

diff --git a/apps/website/src/components/anatomy-table/anatomy-table.tsx b/apps/website/src/components/anatomy-table/anatomy-table.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 
 type AnatomyTableProps = {
   firstColumnLabel?: string;

diff --git a/apps/website/src/components/animations/caveats.tsx b/apps/website/src/components/animations/caveats.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure
 
 export const TopLayerAnimationsCaveats = component$(() => {

diff --git a/apps/website/src/components/animations/compatability.tsx b/apps/website/src/components/animations/compatability.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure
 
 export const BrowserAnimationsCompatability = component$(() => {

diff --git a/apps/website/src/components/api-table/api-table.tsx b/apps/website/src/components/api-table/api-table.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { InfoPopup } from '../info-popup/info-popup';
 export type APITableProps = {
   propDescriptors: {

diff --git a/apps/website/src/components/api-table/auto-api.tsx b/apps/website/src/components/api-table/auto-api.tsx
@@ -1,4 +1,4 @@
-import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik';
+import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@qwik.dev/core';
 import { APITable, type APITableProps } from './api-table';
 
 //This is a workaround for not being able to export across packages due to nx rule:

diff --git a/apps/website/src/components/code-copy/code-copy.tsx b/apps/website/src/components/code-copy/code-copy.tsx
@@ -1,4 +1,4 @@
-import { PropsOf, component$, useSignal } from '@builder.io/qwik';
+import { PropsOf, component$, useSignal } from '@qwik.dev/core';
 import { Button } from '~/components/ui';
 import { cn } from '@qwik-ui/utils';
 import copy from 'clipboard-copy';

diff --git a/apps/website/src/components/code-snippet/code-snippet.tsx b/apps/website/src/components/code-snippet/code-snippet.tsx
@@ -1,4 +1,4 @@
-import { PropsOf, component$ } from '@builder.io/qwik';
+import { PropsOf, component$ } from '@qwik.dev/core';
 import { Highlight } from '../highlight/highlight';
 
 type CodeSnippetProps = PropsOf<'div'> & {

diff --git a/apps/website/src/components/component-status-badge/component-status-badge.tsx b/apps/website/src/components/component-status-badge/component-status-badge.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Badge } from '~/components/ui';
 import { ComponentStatus } from '~/_state/component-status.type';
 

diff --git a/apps/website/src/components/copy-css-config/copy-css-config.tsx b/apps/website/src/components/copy-css-config/copy-css-config.tsx
@@ -1,4 +1,4 @@
-import { component$, useSignal } from '@builder.io/qwik';
+import { component$, useSignal } from '@qwik.dev/core';
 import { Modal } from '@qwik-ui/headless';
 import { Button } from '~/components/ui';
 import { extractThemeCSS } from '@qwik-ui/utils';

diff --git a/apps/website/src/components/faq/faq.tsx b/apps/website/src/components/faq/faq.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Accordion } from '@qwik-ui/styled';
 
 export const FAQ = component$(() => {

diff --git a/apps/website/src/components/feature-list/feature-list.tsx b/apps/website/src/components/feature-list/feature-list.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Note } from '../note/note';
 import { LuBadge, LuBadgeAlert, LuBadgeCheck } from '@qwikest/icons/lucide';
 

diff --git a/apps/website/src/components/footer/footer.tsx b/apps/website/src/components/footer/footer.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { GitHubIcon } from '../icons/GitHubIcon';
 import { DiscordIcon } from '../icons/discord';
 import { cn } from '@qwik-ui/utils';