Merge pull request #7432 from QwikDev/v2-refactor-use-id

fix: change client side generated ID to start with build base

Author: wmertens

.changeset/fair-cameras-boil.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: change client side generated ID to start with build base and add convert first character to letter if it is starting from number

packages/qwik/src/core/api.md

@@ -36,8 +36,6 @@ export interface ClientContainer extends Container {
     // (undocumented)
     parseQRL<T = unknown>(qrl: string): QRL<T>;
     // (undocumented)
-    qBase: string;
-    // (undocumented)
     qContainer: string;
     // (undocumented)
     qManifestHash: string;
@@ -211,8 +209,6 @@ class DomContainer extends _SharedContainer implements ClientContainer {
     // (undocumented)
     parseQRL<T = unknown>(qrl: string): QRL<T>;
     // (undocumented)
-    qBase: string;
-    // (undocumented)
     qContainer: string;
     // (undocumented)
     qManifestHash: string;
@@ -846,6 +842,8 @@ export abstract class _SharedContainer implements Container {
     // (undocumented)
     abstract $appendStyle$(content: string, styleId: string, host: HostElement, scoped: boolean): void;
     // (undocumented)
+    $buildBase$: string | null;
+    // (undocumented)
     $currentUniqueId$: number;
     // (undocumented)
     readonly $getObjectById$: (id: number | string) => any;

packages/qwik/src/core/client/dom-container.ts

@@ -30,6 +30,7 @@ import {
   USE_ON_LOCAL_SEQ_IDX,
   getQFuncs,
   QLocaleAttr,
+  QManifestHashAttr,
 } from '../shared/utils/markers';
 import { isPromise } from '../shared/utils/promises';
 import { isSlotProp } from '../shared/utils/prop';
@@ -121,7 +122,6 @@ export const isDomContainer = (container: any): container is DomContainer => {
 export class DomContainer extends _SharedContainer implements IClientContainer {
   public element: ContainerElement;
   public qContainer: string;
-  public qBase: string;
   public qManifestHash: string;
   public rootVNode: ElementVNode;
   public document: QDocument;
@@ -159,10 +159,9 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     ];
     this.document = element.ownerDocument as QDocument;
     this.element = element;
-    this.qBase = element.getAttribute(QBaseAttr)!;
+    this.$buildBase$ = element.getAttribute(QBaseAttr)!;
     this.$instanceHash$ = element.getAttribute(QInstanceAttr)!;
-    // this.containerState = createContainerState(element, this.qBase);
-    this.qManifestHash = element.getAttribute('q:manifest-hash')!;
+    this.qManifestHash = element.getAttribute(QManifestHashAttr)!;
     this.rootVNode = vnode_newUnMaterializedElement(this.element);
     // These are here to initialize all properties at once for single class transition
     this.$rawStateData$ = null!;

packages/qwik/src/core/client/types.ts

@@ -13,7 +13,6 @@ export interface ClientContainer extends Container {
   document: QDocument;
   element: ContainerElement;
   qContainer: string;
-  qBase: string;
   $locale$: string;
   qManifestHash: string;
   rootVNode: ElementVNode;

packages/qwik/src/core/shared/shared-container.ts

@@ -21,6 +21,7 @@ export abstract class _SharedContainer implements Container {
   $serverData$: Record<string, any>;
   $currentUniqueId$ = 0;
   $instanceHash$: string | null = null;
+  $buildBase$: string | null = null;
 
   constructor(
     scheduleDrain: () => void,

packages/qwik/src/core/shared/types.ts

@@ -22,6 +22,7 @@ export interface Container {
   readonly $getObjectById$: (id: number | string) => any;
   readonly $serverData$: Record<string, any>;
   $currentUniqueId$: number;
+  $buildBase$: string | null;
 
   handleError(err: any, $host$: HostElement): void;
   getParentHost(host: HostElement): HostElement | null;

packages/qwik/src/core/ssr/ssr-types.ts

@@ -60,7 +60,6 @@ export interface SSRContainer extends Container {
   readonly prefetchResources: PrefetchResource[];
   readonly serializationCtx: SerializationContext;
   readonly symbolToChunkResolver: SymbolToChunkResolver;
-  readonly buildBase: string;
   additionalHeadNodes: Array<JSXNodeInternal>;
   additionalBodyNodes: Array<JSXNodeInternal>;
   unclaimedProjectionComponentFrameQueue: ISsrComponentFrame[];

packages/qwik/src/core/tests/use-id.spec.tsx

@@ -1,7 +1,6 @@
 import { component$, componentQrl, inlinedQrl, useId } from '@qwik.dev/core';
 import { describe, expect, it } from 'vitest';
-import { domRender, ssrRenderToDom } from '../../testing/rendering.unit-util';
-import '../../testing/vdom-diff.unit-util';
+import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -21,7 +20,7 @@ describe.each([
       inlinedQrl(() => {
         const id = useId();
         return <div id="cmp2">{id}</div>;
-      }, 's_cmp2Hash')
+      }, 's_2cmpHash')
     );
 
     const Parent = component$(() => {
@@ -34,7 +33,12 @@ describe.each([
     });
 
     const { document } = await render(<Parent />, { debug });
-    expect(document.querySelector('#cmp1')?.textContent).toMatch(/^\w*-cmpHash-0*$/);
-    expect(document.querySelector('#cmp2')?.textContent).toMatch(/^\w*-cmp2Hash-1*$/);
+    if (render === ssrRenderToDom) {
+      expect(document.querySelector('#cmp1')?.textContent).toMatch(/^\w{3}cmp0$/);
+      expect(document.querySelector('#cmp2')?.textContent).toMatch(/^\w{3}2cm1$/);
+    } else {
+      expect(document.querySelector('#cmp1')?.textContent).toMatch(/^cmp0$/);
+      expect(document.querySelector('#cmp2')?.textContent).toMatch(/^Ccm1$/);
+    }
   });
 });

packages/qwik/src/core/use/use-id.ts

@@ -1,8 +1,6 @@
 import type { QRL } from '..';
 import { hashCode } from '../shared/utils/hash_code';
 import { OnRenderProp } from '../shared/utils/markers';
-import { isDomContainer } from '../client/dom-container';
-import type { SSRContainer } from '../ssr/ssr-types';
 import { useSequentialScope } from './use-sequential-scope';
 import { getNextUniqueIndex } from '../shared/utils/unique-index-generator';
 
@@ -12,13 +10,20 @@ export const useId = (): string => {
   if (val != null) {
     return val;
   }
-  const containerBase = isDomContainer(iCtx.$container$)
-    ? ''
-    : (iCtx.$container$ as SSRContainer).buildBase || '';
-  const base = containerBase ? hashCode(containerBase) : '';
+  const containerBase = iCtx.$container$.$buildBase$ || '';
+  const base = containerBase ? hashCode(containerBase).substring(0, 3) : '';
   const componentQrl = iCtx.$container$.getHostProp<QRL>(iCtx.$hostElement$, OnRenderProp);
-  const hash = componentQrl?.getHash() || '';
+  const hash = componentQrl?.getHash().substring(0, 3) || '';
   const counter = getNextUniqueIndex(iCtx.$container$) || '';
-  const id = `${base}-${hash}-${counter}`; // If no base and no hash, then "--#"
+  let id = `${base}${hash}${counter}`;
+
+  let firstChar = id.charCodeAt(0);
+  // convert first char to letter if starts with a number, because CSS does not allow class names to start with a number
+  if (firstChar >= 48 /* 0 */ && firstChar <= 57 /* 9 */) {
+    // 48 is char code for '0', 65 is char code for 'A'
+    // 65 - 48 = 17, so we add 17 to the char code of the first char to convert it to a letter
+    firstChar += 17;
+    id = String.fromCharCode(firstChar) + id.substring(1);
+  }
   return set(id);
 };

packages/qwik/src/server/prefetch-implementation.ts

@@ -51,7 +51,7 @@ function prefetchUrlsEvent2(
     scriptAttrs.push('nonce', nonce);
   }
   container.openElement('script', null, scriptAttrs);
-  container.writer.write(prefetchUrlsEventScript(container.buildBase, prefetchResources));
+  container.writer.write(prefetchUrlsEventScript(container.$buildBase$ || '', prefetchResources));
   container.writer.write(
     `;document.dispatchEvent(new CustomEvent('qprefetch', {detail:{links: [location.pathname]}}))`
   );

packages/qwik/src/server/ssr-container.ts

@@ -176,7 +176,6 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
   public tag: string;
   public writer: StreamWriter;
   public timing: RenderToStreamResult['timing'];
-  public buildBase: string;
   public resolvedManifest: ResolvedManifest;
   public symbolToChunkResolver: SymbolToChunkResolver;
   public renderOptions: RenderOptions;
@@ -247,7 +246,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     this.tag = opts.tagName;
     this.writer = opts.writer;
     this.timing = opts.timing;
-    this.buildBase = opts.buildBase;
+    this.$buildBase$ = opts.buildBase;
     this.resolvedManifest = opts.resolvedManifest;
     this.renderOptions = opts.renderOptions;
 
@@ -325,7 +324,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     containerAttributes[QRuntimeAttr] = '2';
     containerAttributes[QVersionAttr] = this.$version$ ?? 'dev';
     containerAttributes[QRenderAttr] = (qRender ? qRender + '-' : '') + (isDev ? 'ssr-dev' : 'ssr');
-    containerAttributes[QBaseAttr] = this.buildBase || '';
+    containerAttributes[QBaseAttr] = this.$buildBase$ || '';
     containerAttributes[QLocaleAttr] = this.$locale$;
     containerAttributes[QManifestHashAttr] = this.resolvedManifest.manifest.manifestHash;
     containerAttributes[QInstanceAttr] = this.$instanceHash$;