chore: convert string to numeric props

Author: Varixo

packages/qwik/src/core/api.md

@@ -231,6 +231,8 @@ export class _EffectData {
     data: NodePropData;
 }
 
+// Warning: (ae-forgotten-export) The symbol "NumericPropKey" needs to be exported by the entry point index.d.ts
+//
 // @internal (undocumented)
 export type _ElementVNode = [
 _VNodeFlags.Element,
@@ -247,7 +249,7 @@ _VNode | null | undefined,
 Element,
 //////////////////// 6 - Element
 string | undefined,
-(string | null)[]
+(NumericPropKey | string | null)[]
 ] & {
     __brand__: 'ElementVNode';
 };
@@ -416,11 +418,11 @@ export interface JSXNode<T extends string | FunctionComponent | unknown = unknow
 // @internal
 export interface JSXNodeInternal<T extends string | FunctionComponent | unknown = unknown> extends JSXNode<T> {
     // (undocumented)
-    constProps: Record<any, unknown> | null;
+    constProps: Record<NumericPropKey, unknown> | null;
     // (undocumented)
     flags: number;
     // (undocumented)
-    varProps: Record<any, unknown>;
+    varProps: Record<NumericPropKey, unknown>;
 }
 
 // @public
@@ -1712,7 +1714,7 @@ _VNode | null,
 _VNode | null,
 /////////////// 4 - First child
 _VNode | null,
-(string | null | boolean)[]
+(NumericPropKey | string | null | boolean)[]
 ] & {
     __brand__: 'FragmentNode' & 'HostElement';
 };

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

@@ -32,7 +32,7 @@ import {
   QLocaleAttr,
 } from '../shared/utils/markers';
 import { isPromise } from '../shared/utils/promises';
-import { isSlotProp } from '../shared/utils/prop';
+import { getPropId, isSlotProp, type NumericPropKey } from '../shared/utils/prop';
 import { qDev } from '../shared/utils/qdev';
 import {
   convertScopedStyleIdsToArray,
@@ -228,14 +228,14 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     if (!ctx) {
       this.setHostProp(host, QCtxAttr, (ctx = []));
     }
-    mapArray_set(ctx, context.id, value, 0);
+    mapArray_set(ctx, getPropId(context.id), value, 0);
   }
 
   resolveContext<T>(host: HostElement, contextId: ContextId<T>): T | undefined {
     while (host) {
       const ctx = this.getHostProp<Array<string | unknown>>(host, QCtxAttr);
       if (ctx) {
-        const value = mapArray_get(ctx, contextId.id, 0) as T;
+        const value = mapArray_get(ctx, getPropId(contextId.id), 0) as T;
         if (value) {
           return value as T;
         }
@@ -319,7 +319,7 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
       vNode[VNodeProps.flags] |= VNodeFlags.Resolved;
       const props = vnode_getProps(vNode);
       for (let i = 0; i < props.length; i = i + 2) {
-        const prop = props[i] as string;
+        const prop = props[i] as NumericPropKey;
         if (isSlotProp(prop)) {
           const value = props[i + 1];
           if (typeof value == 'string') {

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

@@ -2,11 +2,11 @@
 
 import type { QRL } from '../shared/qrl/qrl.public';
 import type { Container } from '../shared/types';
+import type { NumericPropKey } from '../shared/utils/prop';
 import type { VNodeJournal } from './vnode';
 
-export type ClientAttrKey = string;
-export type ClientAttrValue = string | null;
-export type ClientAttrs = Array<ClientAttrKey | ClientAttrValue>;
+export type ClientAttrValue = unknown | null;
+export type ClientAttrs = Array<NumericPropKey | ClientAttrValue>;
 
 /** @internal */
 export interface ClientContainer extends Container {
@@ -128,7 +128,7 @@ export type ElementVNode = [
   Element, //////////////////// 6 - Element
   string | undefined, ///////// 7 - tag
   /// Props
-  (string | null)[], /////// 8 - attrs
+  (NumericPropKey | string | null)[], /////// 8 - attrs
 ] & { __brand__: 'ElementVNode' };
 
 export const enum TextVNodeProps {
@@ -165,7 +165,7 @@ export type VirtualVNode = [
   VNode | null, /////////////// 4 - First child
   VNode | null, /////////////// 5 - Last child
   /// Props
-  (string | null | boolean)[], /////// 6 - attrs
+  (NumericPropKey | string | null | boolean)[], /////// 6 - attrs
 ] & { __brand__: 'FragmentNode' & 'HostElement' };
 
 /** @internal */

packages/qwik/src/core/client/util-mapArray.ts

@@ -1,12 +1,17 @@
 import { assertTrue } from '../shared/error/assert';
+import type { NumericPropKey } from '../shared/utils/prop';
 
-export const mapApp_findIndx = <T>(array: (T | null)[], key: string, start: number): number => {
+export const mapApp_findIndx = <T>(
+  array: (T | null)[],
+  key: NumericPropKey,
+  start: number = 0
+): number => {
   assertTrue(start % 2 === 0, 'Expecting even number.');
   let bottom = (start as number) >> 1;
   let top = (array.length - 2) >> 1;
   while (bottom <= top) {
     const mid = bottom + ((top - bottom) >> 1);
-    const midKey = array[mid << 1] as string;
+    const midKey = array[mid << 1] as NumericPropKey;
     if (midKey === key) {
       return mid << 1;
     }
@@ -21,23 +26,27 @@ export const mapApp_findIndx = <T>(array: (T | null)[], key: string, start: numb
 
 export const mapArray_set = <T>(
   array: (T | null)[],
-  key: string,
-  value: T | null,
-  start: number
+  key: NumericPropKey,
+  value: unknown | null,
+  start: number = 0
 ) => {
   const indx = mapApp_findIndx(array, key, start);
   if (indx >= 0) {
     if (value == null) {
       array.splice(indx, 2);
     } else {
-      array[indx + 1] = value;
+      array[indx + 1] = value as T;
     }
   } else if (value != null) {
-    array.splice(indx ^ -1, 0, key as any, value);
+    array.splice(indx ^ -1, 0, key as any, value as T);
   }
 };
 
-export const mapApp_remove = <T>(array: (T | null)[], key: string, start: number): T | null => {
+export const mapApp_remove = <T>(
+  array: (T | null)[],
+  key: NumericPropKey,
+  start: number = 0
+): T | null => {
   const indx = mapApp_findIndx(array, key, start);
   let value: T | null = null;
   if (indx >= 0) {
@@ -48,7 +57,11 @@ export const mapApp_remove = <T>(array: (T | null)[], key: string, start: number
   return value;
 };
 
-export const mapArray_get = <T>(array: (T | null)[], key: string, start: number): T | null => {
+export const mapArray_get = <T>(
+  array: (T | null)[],
+  key: NumericPropKey,
+  start: number = 0
+): T | null => {
   const indx = mapApp_findIndx(array, key, start);
   if (indx >= 0) {
     return array[indx + 1] as T | null;
@@ -57,6 +70,10 @@ export const mapArray_get = <T>(array: (T | null)[], key: string, start: number)
   }
 };
 
-export const mapArray_has = <T>(array: (T | null)[], key: string, start: number): boolean => {
+export const mapArray_has = <T>(
+  array: (T | null)[],
+  key: NumericPropKey,
+  start: number = 0
+): boolean => {
   return mapApp_findIndx(array, key, start) >= 0;
 };