chore: upgrade Qwik tooling and add Picture demo

.eslintrc.json

@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -23,12 +23,12 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {

.gitignore

@@ -10,6 +10,7 @@ node_modules
 .mf
 .rollup.cache
 tsconfig.tsbuildinfo
+**/dummy-non-existing-folder/
 
 # IDE - VSCode
 .vscode/*
@@ -64,4 +65,4 @@ testem.log
 .DS_Store
 Thumbs.db
 
-.nx
+.nx

apps/qwik-demo-app-e2e/cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: nxE2EPreset(__dirname, {

apps/qwik-demo-app-e2e/project.json

@@ -1,15 +1,15 @@
 {
   "name": "qwik-demo-app-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/qwik-demo-app-e2e/src",
+  "sourceRoot": "apps/qwik-demo-app-e2e/src",
   "projectType": "application",
   "tags": [],
   "implicitDependencies": ["qwik-demo-app"],
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "packages/qwik-demo-app-e2e/cypress.config.ts",
+        "cypressConfig": "apps/qwik-demo-app-e2e/cypress.config.ts",
         "devServerTarget": "qwik-demo-app:serve",
         "testingType": "e2e"
       },
@@ -20,10 +20,10 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["packages/qwik-demo-app-e2e/**/*.{js,ts}"]
+        "lintFilePatterns": ["apps/qwik-demo-app-e2e/**/*.{js,ts}"]
       }
     }
   }

apps/qwik-demo-app/.eslintrc.cjs

@@ -13,7 +13,7 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ["./tsconfig.json"],
+    project: ["./tsconfig.app.json", "./tsconfig.spec.json"],
     ecmaVersion: 2021,
     sourceType: "module",
     ecmaFeatures: {

apps/qwik-demo-app/package.json

@@ -1,3 +1,4 @@
 {
-  "name": "qwik-demo-app"
+  "name": "qwik-demo-app",
+  "type": "module"
 }

apps/qwik-demo-app/project.json

@@ -2,7 +2,7 @@
   "name": "qwik-demo-app",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "sourceRoot": "packages/qwik-demo-app/src",
+  "sourceRoot": "apps/qwik-demo-app/src",
   "tags": [],
   "targets": {
     "build": {
@@ -19,41 +19,44 @@
       }
     },
     "build.client": {
-      "executor": "@nrwl/vite:build",
+      "executor": "@nx/vite:build",
       "options": {
-        "outputPath": "dist/packages/qwik-demo-app",
-        "configFile": "packages/qwik-demo-app/vite.config.ts"
+        "outputPath": "dist/packages/qwik-demo-app/client",
+        "configFile": "apps/qwik-demo-app/vite.config.ts",
+        "emptyOutDir": true
       }
     },
     "build.ssr": {
-      "executor": "@nrwl/vite:build",
+      "executor": "@nx/vite:build",
       "defaultConfiguration": "preview",
       "options": {
-        "outputPath": "dist/packages/qwik-demo-app"
+        "outputPath": "dist/packages/qwik-demo-app/server",
+        "configFile": "apps/qwik-demo-app/vite.config.ts",
+        "emptyOutDir": true
       },
       "configurations": {
         "preview": {
-          "ssr": "src/entry.preview.tsx",
+          "ssr": "apps/qwik-demo-app/src/entry.preview.tsx",
           "mode": "production"
         }
       }
     },
     "preview": {
-      "executor": "@nrwl/vite:preview-server",
+      "executor": "@nx/vite:preview-server",
       "options": {
         "buildTarget": "qwik-demo-app:build"
       }
     },
     "test": {
-      "executor": "@nrwl/vite:test",
-      "outputs": ["../coverage/packages/qwik-demo-app"],
+      "executor": "nx:run-commands",
+      "outputs": [],
       "options": {
-        "passWithNoTests": true,
-        "reportsDirectory": "../../coverage/packages/qwik-demo-app"
+        "cwd": "apps/qwik-demo-app",
+        "command": "vitest run --config vite.config.ts --passWithNoTests"
       }
     },
     "serve": {
-      "executor": "@nrwl/vite:dev-server",
+      "executor": "@nx/vite:dev-server",
       "options": {
         "buildTarget": "qwik-demo-app:build.client",
         "mode": "ssr"
@@ -63,14 +66,14 @@
       "executor": "nx:run-commands",
       "options": {
         "command": "node --inspect-brk ../../node_modules/vite/bin/vite.js --mode ssr --force",
-        "cwd": "packages/qwik-demo-app"
+        "cwd": "apps/qwik-demo-app"
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["packages/qwik-demo-app/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": ["apps/qwik-demo-app/**/*.{ts,tsx,js,jsx}"]
       }
     }
   }

apps/qwik-demo-app/src/components/image.spec.tsx

@@ -7,7 +7,7 @@ import {
   ImageTransformerProps,
   useImageProvider,
 } from 'qwik-image';
-import { $, Slot, component$, useSignal } from '@qwik.dev/core';
+import { $, Slot, component$, useStore } from '@qwik.dev/core';
 import { providers, selectedProvider } from '../providers';
 
 const TransformerProvider = component$(() => {
@@ -212,25 +212,19 @@ test(`should render a fixed img`, async () => {
 
 const DynamicImage = component$(
   (props: { before: ImageProps; after: ImageProps }) => {
-    const width = useSignal(props.before.width);
-    const height = useSignal(props.before.height);
-    const layout = useSignal(props.before.layout);
-    const src = useSignal(props.before.src);
+    const state = useStore({ ...props.before });
 
     return (
       <>
         <Image
-          width={width.value}
-          height={height.value}
-          layout={layout.value}
-          src={src.value}
+          width={state.width}
+          height={state.height}
+          layout={state.layout}
+          src={state.src}
         />
         <button
           onClick$={() => {
-            width.value = props.after.width;
-            height.value = props.after.height;
-            layout.value = props.after.layout;
-            src.value = props.after.src;
+            Object.assign(state, props.after);
           }}
         ></button>
       </>

apps/qwik-demo-app/src/components/router-head/router-head.tsx

@@ -12,7 +12,7 @@ export const RouterHead = component$(() => {
     <>
       <title>{head.title}</title>
 
-      <link rel="canonical" href={loc.href} />
+      <link rel="canonical" href={loc.url.href} />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 

apps/qwik-demo-app/src/entry.preview.tsx

@@ -10,11 +10,10 @@
  * - https://vitejs.dev/config/preview-options.html#preview-options
  *
  */
-import { createQwikCity } from '@qwik.dev/router/middleware/node';
+import { createQwikRouter } from '@qwik.dev/router/middleware/node';
 import render from './entry.ssr';
-import qwikCityPlan from '@qwik-city-plan';
 
 /**
  * The default export is the QwikCity adaptor used by Vite preview.
  */
-export default createQwikCity({ render, qwikCityPlan });
+export default createQwikRouter({ render });

apps/qwik-demo-app/src/entry.ssr.tsx

@@ -11,12 +11,12 @@
  *
  */
 import { renderToStream, RenderToStreamOptions } from '@qwik.dev/core/server';
-import { manifest } from '@qwik-client-manifest';
+import { getClientManifest } from '@qwik.dev/core';
 import Root from './root';
 
 export default function (opts: RenderToStreamOptions) {
   return renderToStream(<Root />, {
-    manifest,
+    manifest: getClientManifest(),
     ...opts,
     // Use container attributes to set attributes on the html tag.
     containerAttributes: {

apps/qwik-demo-app/src/routes/index.css

@@ -0,0 +1,26 @@
+.examples {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.examples article {
+  min-width: 0;
+}
+
+.examples h2 {
+  margin-bottom: 10px;
+}
+
+.examples picture,
+.examples img {
+  display: block;
+  width: 100%;
+}
+
+@media (max-width: 640px) {
+  .examples {
+    grid-template-columns: 1fr;
+  }
+}

apps/qwik-demo-app/src/routes/index.tsx

@@ -1,26 +1,58 @@
-import { component$, useSignal } from '@qwik.dev/core';
+import { component$, useStylesScoped$ } from '@qwik.dev/core';
 import { providers, selectedProvider } from '../providers';
-import { Image } from 'qwik-image';
+import { Image, Picture } from 'qwik-image';
+import styles from './index.css?inline';
 
 export default component$(() => {
-  const ref = useSignal<HTMLImageElement>();
+  const src = providers[selectedProvider].src;
+
+  useStylesScoped$(styles);
 
   return (
     <>
       Selected Provider<h1>{selectedProvider}</h1>
-      <Image
-        ref={ref}
-        onLoad$={() => {
-          console.log('loaded');
-        }}
-        width={400}
-        height={400}
-        style={{ border: '2px solid red' }}
-        placeholder="#e6e6e6"
-        layout="constrained"
-        src={providers[selectedProvider].src}
-        priority
-      />
+      <div class="examples">
+        <article>
+          <h2>Image</h2>
+          <Image
+            width={400}
+            height={400}
+            style={{ border: '2px solid red' }}
+            placeholder="#e6e6e6"
+            layout="constrained"
+            src={src}
+            alt="Qwik Image example"
+            priority
+          />
+        </article>
+
+        <article>
+          <h2>Picture</h2>
+          <Picture
+            width={400}
+            height={400}
+            style={{ border: '2px solid var(--qwik-dark-purple)' }}
+            placeholder="#e6e6e6"
+            layout="constrained"
+            src={src}
+            alt="Qwik Picture example"
+            sources={[
+              {
+                src,
+                media: '(max-width: 600px)',
+                width: 600,
+                height: 600,
+              },
+              {
+                src,
+                media: '(min-width: 601px)',
+                width: 400,
+                height: 400,
+              },
+            ]}
+          />
+        </article>
+      </div>
     </>
   );
 });

apps/qwik-demo-app/src/routes/service-worker.ts

@@ -1,18 +1,10 @@
 /*
  * WHAT IS THIS FILE?
  *
- * The service-worker.ts file is used to have state of the art prefetching.
- * https://qwik.qwik.dev/corecity/prefetching/overview/
- *
- * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
- * You can also use this file to add more functionality that runs in the service worker.
+ * Custom service-worker lifecycle handling.
  */
-import { setupServiceWorker } from '@qwik.dev/router/service-worker';
-
-setupServiceWorker();
-
-addEventListener('install', () => self.skipWaiting());
+const serviceWorker = globalThis as unknown as ServiceWorkerGlobalScope;
 
-addEventListener('activate', () => self.clients.claim());
+serviceWorker.addEventListener('install', () => serviceWorker.skipWaiting());
 
-declare const self: ServiceWorkerGlobalScope;
+serviceWorker.addEventListener('activate', () => serviceWorker.clients.claim());