feat: image performance dev tools (#4424)

Author: manucorporat

.github/workflows/ci.yml

@@ -75,7 +75,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 
@@ -142,7 +142,7 @@ jobs:
         if: ${{ needs.changes.outputs.fullbuild == 'true' }}
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 
@@ -236,7 +236,7 @@ jobs:
         if: ${{ needs.changes.outputs.fullbuild == 'true' }}
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 
@@ -324,7 +324,7 @@ jobs:
         if: ${{ needs.changes.outputs.fullbuild == 'true' }}
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 
@@ -408,7 +408,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 
@@ -469,10 +469,10 @@ jobs:
         settings:
           - host: ubuntu-latest
             browser: chromium
-            node: 16.x
+            node: 18.x
           - host: macos-latest
             browser: webkit
-            node: 16.x
+            node: 18.x
 
     runs-on: ${{ matrix.settings.host }}
 
@@ -544,7 +544,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 
@@ -634,7 +634,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 

.node-version

@@ -0,0 +1 @@
+18

package.json

@@ -130,7 +130,7 @@
       "url": "https://twitter.com/manucorporat"
     }
   ],
-  "packageManager": "pnpm@8.3.1",
+  "packageManager": "pnpm@8.6.1",
   "engines": {
     "node": ">=16.8.0 <18.0.0 || >=18.11",
     "npm": "please-use-pnpm",
@@ -142,5 +142,8 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "esbuild-plugin-raw": "^0.1.7"
+  }
 }

packages/docs/.node-version

@@ -1 +1 @@
-16
+18

packages/docs/package.json

@@ -59,8 +59,12 @@
   "bugs": {
     "url": "https://github.com/BuilderIO/qwik"
   },
+  "packageManager": "pnpm@8.6.1",
   "engines": {
-    "node": ">=16"
+    "node": ">=18.11",
+    "npm": "please-use-pnpm",
+    "yarn": "please-use-pnpm",
+    "pnpm": ">=8.0.0"
   },
   "license": "MIT",
   "private": true,

packages/qwik/package.json

@@ -143,6 +143,7 @@
   ],
   "devDependencies": {
     "@builder.io/qwik-dom": "workspace:*",
+    "image-size": "^1.0.2",
     "kleur": "4.1.5"
   },
   "contributors": [

packages/qwik/src/core/render/dom/render-dom.ts

@@ -3,7 +3,7 @@ import { type InvokeContext, newInvokeContext, invoke } from '../../use/use-core
 import { EMPTY_ARRAY, EMPTY_OBJ } from '../../util/flyweight';
 import { logWarn } from '../../util/log';
 import { isNotNullable, isPromise, promiseAll, then } from '../../util/promises';
-import { qDev, seal } from '../../util/qdev';
+import { qDev, qInspector, seal } from '../../util/qdev';
 import { isArray, isFunction, isObject, isString, type ValueOrPromise } from '../../util/types';
 import { domToVnode, smartUpdateChildren } from './visitor';
 import { SkipRender } from '../jsx/utils.public';
@@ -69,6 +69,7 @@ export class ProcessedJSXNodeImpl implements ProcessedJSXNode {
   $text$: string = '';
   $signal$: Signal<any> | null = null;
   $id$: string;
+  $dev$: DevJSX | undefined;
 
   constructor(
     public $type$: string,
@@ -79,6 +80,9 @@ export class ProcessedJSXNodeImpl implements ProcessedJSXNode {
     public $key$: string | null
   ) {
     this.$id$ = $type$ + ($key$ ? ':' + $key$ : '');
+    if (qDev && qInspector) {
+      this.$dev$ = undefined;
+    }
     seal(this);
   }
 }
@@ -108,17 +112,32 @@ export const processNode = (
       if (result !== undefined) {
         convertedChildren = isArray(result) ? result : [result];
       }
-      return new ProcessedJSXNodeImpl(
+      const vnode = new ProcessedJSXNodeImpl(
         textType,
         props,
         immutableProps,
         convertedChildren,
         flags,
         key
       );
+      if (qDev && qInspector) {
+        vnode.$dev$ = node.dev;
+      }
+      return vnode;
     });
   } else {
-    return new ProcessedJSXNodeImpl(textType, props, immutableProps, convertedChildren, flags, key);
+    const vnode = new ProcessedJSXNodeImpl(
+      textType,
+      props,
+      immutableProps,
+      convertedChildren,
+      flags,
+      key
+    );
+    if (qDev && qInspector) {
+      vnode.$dev$ = node.dev;
+    }
+    return vnode;
   }
 };
 

packages/qwik/src/core/render/dom/visitor.ts

@@ -691,7 +691,7 @@ const createElm = (
         directSetAttribute(
           elm,
           'data-qwik-inspector',
-          `${encodeURIComponent(dev.fileName)}:${dev.lineNumber}:${dev.columnNumber}`
+          `${dev.fileName}:${dev.lineNumber}:${dev.columnNumber}`
         );
       }
     }