qwikifiers · gioboa · Jan 30, 2024 · Jan 30, 2024
diff --git a/apps/website/src/components/utils/Controls.tsx b/apps/website/src/components/utils/Controls.tsx
@@ -1,10 +1,4 @@
-import {
-  $,
-  QwikChangeEvent,
-  component$,
-  useContext,
-  useSignal,
-} from '@builder.io/qwik';
+import { $, component$, useContext, useSignal } from '@builder.io/qwik';
 import {
   SfButton,
   SfButtonSize,
@@ -26,22 +20,20 @@ export const Controls = component$<any>(() => {
     };
   });
 
-  const handleJsonOnChangeValue = $(
-    (e: QwikChangeEvent<HTMLTextAreaElement>, name: string) => {
-      examplesState.data.state = {
-        ...examplesState.data.state,
-        [name]: JSON.parse(e.target.value),
-      };
-    }
-  );
+  const handleJsonOnChangeValue = $((el: HTMLTextAreaElement, name: string) => {
+    examplesState.data.state = {
+      ...examplesState.data.state,
+      [name]: JSON.parse(el.value),
+    };
+  });
 
   const handleCheckbox = $(
     (
-      e: QwikChangeEvent<HTMLInputElement>,
+      el: HTMLInputElement,
       name: string,
       currentValue: string | boolean | []
     ) => {
-      const { value } = e.target;
+      const { value } = el;
       if (Array.isArray(currentValue)) {
         const newValue: string[] = [...currentValue];
         const valueItemIndex = newValue.indexOf(value);
@@ -161,11 +153,8 @@ export const Controls = component$<any>(() => {
                       <select
                         value={examplesState.data.state[control.modelName]}
                         aria-labelledby={control.modelName}
-                        onChange$={(e) => {
-                          handleOnChangeValue(
-                            control.modelName,
-                            e.target.value
-                          );
+                        onChange$={(_: Event, el: HTMLSelectElement) => {
+                          handleOnChangeValue(control.modelName, el.value);
                         }}
                       >
                         {(
@@ -224,9 +213,12 @@ export const Controls = component$<any>(() => {
                                           2
                                         ) as string
                                       }
-                                      onChange$={(e) => {
+                                      onChange$={(
+                                        _: Event,
+                                        el: HTMLTextAreaElement
+                                      ) => {
                                         handleJsonOnChangeValue(
-                                          e,
+                                          el,
                                           control.modelName
                                         );
                                       }}
@@ -266,18 +258,21 @@ export const Controls = component$<any>(() => {
                                       value={checkboxValue(option)}
                                       type={control.type}
                                       aria-labelledby={control.modelName}
-                                      onChange$={(e) => {
+                                      onChange$={(
+                                        _: Event,
+                                        el: HTMLInputElement
+                                      ) => {
                                         control.type === 'checkbox'
                                           ? handleCheckbox(
-                                              e,
+                                              el,
                                               control.modelName,
                                               examplesState.data.state[
                                                 control.modelName
                                               ]
                                             )
                                           : handleOnChangeValue(
                                               control.modelName,
-                                              e.target.value
+                                              el.value
                                             );
                                       }}
                                       name={`${control.modelName}-${index}`}

diff --git a/apps/website/src/routes/examples/SfCheckbox/index.tsx b/apps/website/src/routes/examples/SfCheckbox/index.tsx
@@ -79,8 +79,8 @@ export default component$(() => {
         );
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
+  const onChange = $((_: Event, el: HTMLInputElement) => {
+    const { value } = el;
     examplesState.data.state =
       examplesState.data.state.checkedValue.indexOf(value) > -1
         ? {

diff --git a/apps/website/src/routes/examples/SfInput/index.tsx b/apps/website/src/routes/examples/SfInput/index.tsx
@@ -96,10 +96,10 @@ export default component$(() => {
     };
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
+  const onChange = $((_: Event, el: HTMLInputElement) => {
     examplesState.data.state = {
       ...examplesState.data.state,
-      value: event.target.value,
+      value: el.value,
     };
   });
   const isAboveLimit = examplesState.data.state.characterLimit

diff --git a/apps/website/src/routes/examples/SfRadio/index.tsx b/apps/website/src/routes/examples/SfRadio/index.tsx
@@ -81,8 +81,8 @@ export default component$(() => {
               checked={examplesState.data.state.checked === value}
               disabled={examplesState.data.state.disabled}
               invalid={examplesState.data.state.invalid}
-              onChange$={(event) => {
-                onChangeHandler(event.target.value);
+              onChange$={(_: Event, el: HTMLInputElement) => {
+                onChangeHandler(el.value);
               }}
             />
             <span class="ml-2 text-base font-normal leading-6 font-body">

diff --git a/apps/website/src/routes/examples/SfSwitch/index.tsx b/apps/website/src/routes/examples/SfSwitch/index.tsx
@@ -1,5 +1,6 @@
 import {
   $,
+  InputHTMLAttributes,
   QwikChangeEvent,
   component$,
   useContext,
@@ -49,8 +50,8 @@ export default component$(() => {
     };
   });
 
-  const onChange = $((event: QwikChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
+  const onChange = $((_: Event, el: HTMLInputElement) => {
+    const { checked } = el;
     examplesState.data.state = { ...examplesState.data.state, checked };
   });
 

diff --git a/apps/website/src/routes/showcases/Banners/Hero/index.tsx b/apps/website/src/routes/showcases/Banners/Hero/index.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
   return (
     <div class="relative min-h-[600px]">
       <picture>
-        <source srcSet={desktopBackground} media="(min-width: 768px)" />
+        <source src-set={desktopBackground} media="(min-width: 768px)" />
         <img
           src={mobileBackground}
           class="absolute w-full h-full z-[-1] md:object-cover"

diff --git a/apps/website/src/routes/showcases/Drawer/Placement/index.tsx b/apps/website/src/routes/showcases/Drawer/Placement/index.tsx
@@ -1,4 +1,3 @@
-import type { QwikChangeEvent } from '@builder.io/qwik';
 import { $, component$, useSignal } from '@builder.io/qwik';
 import type { SfDrawerProps } from 'qwik-storefront-ui';
 import { SfButton, SfDrawer, SfDrawerPlacement } from 'qwik-storefront-ui';
@@ -9,8 +8,8 @@ export default component$(() => {
     SfDrawerPlacement.left
   );
 
-  const changePlacement = $((event: QwikChangeEvent<HTMLSelectElement>) => {
-    placementSignal.value = event.target.value as SfDrawerProps['placement'];
+  const changePlacement = $((_: Event, el: HTMLSelectElement) => {
+    placementSignal.value = el.value as SfDrawerProps['placement'];
   });
 
   return (

diff --git a/apps/website/src/routes/showcases/Filters/Color/index.tsx b/apps/website/src/routes/showcases/Filters/Color/index.tsx
@@ -89,8 +89,8 @@ export default component$(() => {
                   checked={colorListSignal.value.includes(value)}
                   class="appearance-none peer"
                   type="checkbox"
-                  onChange$={(event) => {
-                    handleColorSelection(event.target.value);
+                  onChange$={(_, el) => {
+                    handleColorSelection(el.value);
                   }}
                 />
                 <span class="inline-flex items-center justify-center p-1 transition duration-300 rounded-full cursor-pointer ring-1 ring-neutral-200 ring-inset outline-offset-2 outline-secondary-600 peer-checked:ring-2 peer-checked:ring-primary-700 peer-hover:bg-primary-100 peer-hover:ring-primary-200 peer-active:bg-primary-200 peer-active:ring-primary-300 peer-disabled:cursor-not-allowed peer-disabled:bg-disabled-100 peer-disabled:opacity-50 peer-disabled:ring-1 peer-disabled:ring-disabled-200 peer-disabled:hover:ring-disabled-200 peer-checked:hover:ring-primary-700 peer-checked:active:ring-primary-700 peer-focus:outline">

diff --git a/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx b/apps/website/src/routes/showcases/Filters/FiltersPanel/index.tsx
@@ -302,8 +302,8 @@ export default component$(() => {
                         value={value}
                         name="radio-price"
                         checked={selectedFiltersSignal.value.includes(value)}
-                        onChange$={(event) => {
-                          handleRadioSelection(event.target.value);
+                        onChange$={(_: Event, el: HTMLInputElement) => {
+                          handleRadioSelection(el.value);
                         }}
                       />
                     </div>

diff --git a/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx b/apps/website/src/routes/showcases/Input/InputCharacters/index.tsx
@@ -48,8 +48,8 @@ export default component$(() => {
               : ''
           }`}
           value={valueSignal.value}
-          onChange$={(event) => {
-            valueSignal.value = event.target.value;
+          onChange$={(_: Event, el: HTMLInputElement) => {
+            valueSignal.value = el.value;
           }}
         />
       </label>

diff --git a/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx b/apps/website/src/routes/showcases/Input/InputReadonly/index.tsx
@@ -9,8 +9,8 @@ export default component$(() => {
         <span class="text-sm font-medium">Label</span>
         <SfInput
           value={valueSignal.value}
-          onChange$={(event) => {
-            valueSignal.value = event.target.value;
+          onChange$={(_: Event, el: HTMLInputElement) => {
+            valueSignal.value = el.value;
           }}
           wrapperClass="!bg-disabled-100 !ring-disabled-300 !ring-1"
           readOnly

diff --git a/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx b/apps/website/src/routes/showcases/Input/InputWithoutLabel/index.tsx
@@ -6,7 +6,7 @@ export default component$(() => {
     <div class="flex flex-col gap-y-5">
       <SfInput size="sm" aria-label="Label size sm" />
       <SfInput aria-label="Label size base" />
-      <SfInput size="lg" aria-label="Label size lg" />
+      <SfInput size={'lg'} aria-label="Label size lg" />
     </div>
   );
 });
diff --git a/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx b/apps/website/src/routes/showcases/MegaMenu/BaseMegaMenu/index.tsx
@@ -145,7 +145,7 @@ export default component$(() => {
           >
             <picture>
               <source
-                srcSet={'/images/vsf_logo_white.svg'}
+                src-set={'/images/vsf_logo_white.svg'}
                 media="(min-width: 767px)"
               />
               <img

diff --git a/apps/website/src/routes/showcases/NavbarTop/NavbarTop/index.tsx b/apps/website/src/routes/showcases/NavbarTop/NavbarTop/index.tsx
@@ -40,7 +40,7 @@ export default component$(() => {
           >
             <picture>
               <source
-                srcSet={'/images/vsf_logo.svg'}
+                src-set={'/images/vsf_logo.svg'}
                 media="(min-width: 767px)"
               />
               <img

diff --git a/apps/website/src/routes/showcases/NavbarTop/NavbarTopFilled/index.tsx b/apps/website/src/routes/showcases/NavbarTop/NavbarTopFilled/index.tsx
@@ -36,7 +36,7 @@ export default component$(() => {
           <a href="/" aria-label="SF Homepage" class="inline-block text-white">
             <picture>
               <source
-                srcSet={'/images/vsf_logo_white.svg'}
+                src-set={'/images/vsf_logo_white.svg'}
                 media="(min-width: 767px)"
               />
               <img

diff --git a/apps/website/src/routes/showcases/NewsletterBox/NewsletterBox/index.tsx b/apps/website/src/routes/showcases/NewsletterBox/NewsletterBox/index.tsx
@@ -52,8 +52,8 @@ export default component$(() => {
             type="email"
             wrapperClass="grow"
             placeholder="Type your email"
-            onChange$={(event) => {
-              inputValueSignal.value = event.target.value;
+            onChange$={(_: Event, el: HTMLInputElement) => {
+              inputValueSignal.value = el.value;
             }}
           />
           <SfButton type="submit" size="lg">

diff --git a/apps/website/src/routes/showcases/OrderSummary/OrderSummary/index.tsx b/apps/website/src/routes/showcases/OrderSummary/OrderSummary/index.tsx
@@ -91,8 +91,8 @@ export default component$(() => {
             value={inputValueSignal.value}
             placeholder="Enter promo code"
             wrapperClass="grow"
-            onChange$={(event) => {
-              inputValueSignal.value = event.target.value;
+            onChange$={(_: Event, el: HTMLInputElement) => {
+              inputValueSignal.value = el.value;
             }}
           />
           <SfButton variant="secondary" onClick$={checkPromoCode}>

diff --git a/apps/website/src/routes/showcases/ProgressCircular/ProgressCircularFloatingLabel/index.tsx b/apps/website/src/routes/showcases/ProgressCircular/ProgressCircularFloatingLabel/index.tsx
@@ -9,8 +9,8 @@ export default component$(() => {
       <SfProgressCircular size="2xl" value={value}>
         <text
           class="font-medium"
-          textAnchor="middle"
-          alignmentBaseline="central"
+          text-anchor="middle"
+          alignment-baseline="central"
           x="100%"
           y="100%"
         >
@@ -20,8 +20,8 @@ export default component$(() => {
       <SfProgressCircular size="3xl" value={value}>
         <text
           class="font-medium fill-neutral-400"
-          textAnchor="middle"
-          alignmentBaseline="central"
+          text-anchor="middle"
+          alignment-baseline="central"
           x="100%"
           y="100%"
         >
@@ -31,8 +31,8 @@ export default component$(() => {
       <SfProgressCircular size="3xl" value={value}>
         <text
           class="font-medium text-2xs"
-          textAnchor="middle"
-          alignmentBaseline="central"
+          text-anchor="middle"
+          alignment-baseline="central"
           x="100%"
           y="100%"
         >

diff --git a/apps/website/src/routes/showcases/Radio/RadioLeading/index.tsx b/apps/website/src/routes/showcases/Radio/RadioLeading/index.tsx
@@ -25,8 +25,8 @@ export default component$(() => {
               name={name}
               value={value}
               checked={checkedStateSignal.value === value}
-              onChange$={(event) => {
-                checkedStateSignal.value = event.target.value;
+              onChange$={(_, el) => {
+                checkedStateSignal.value = el.value;
               }}
             />
             <span class="ml-2 text-base font-normal leading-6 font-body">

diff --git a/apps/website/src/routes/showcases/Radio/RadioTrailing/index.tsx b/apps/website/src/routes/showcases/Radio/RadioTrailing/index.tsx
@@ -27,8 +27,8 @@ export default component$(() => {
               name={name}
               value={value}
               checked={checkedStateSignal.value === value}
-              onChange$={(event) => {
-                checkedStateSignal.value = event.target.value;
+              onChange$={(_, el) => {
+                checkedStateSignal.value = el.value;
               }}
             />
             <span class="ml-2 text-base font-normal leading-5 font-body">

diff --git a/apps/website/src/routes/showcases/Radio/RadioWithoutLabel/index.tsx b/apps/website/src/routes/showcases/Radio/RadioWithoutLabel/index.tsx
@@ -22,8 +22,8 @@ export default component$(() => {
           value={value}
           class="block mb-4"
           checked={checkedStateSignal.value === value}
-          onChange$={(event) => {
-            checkedStateSignal.value = event.target.value;
+          onChange$={(_, el) => {
+            checkedStateSignal.value = el.value;
           }}
         />
       ))}

diff --git a/apps/website/src/routes/showcases/Switch/SwitchLeading/index.tsx b/apps/website/src/routes/showcases/Switch/SwitchLeading/index.tsx
@@ -9,8 +9,8 @@ export default component$(() => {
         <SfSwitch
           checked={checkedStateSignal.value}
           value="value-1"
-          onChange$={(event) => {
-            checkedStateSignal.value = event.target.checked;
+          onChange$={(_, el) => {
+            checkedStateSignal.value = el.checked;
           }}
         />
         <span class="text-base ml-[10px] text-gray-900 cursor-pointer font-body">

diff --git a/apps/website/src/routes/showcases/Switch/SwitchTrailing/index.tsx b/apps/website/src/routes/showcases/Switch/SwitchTrailing/index.tsx
@@ -12,8 +12,8 @@ export default component$(() => {
         <SfSwitch
           checked={checkedStateSignal.value}
           value="value-1"
-          onChange$={(event) => {
-            checkedStateSignal.value = event.target.checked;
+          onChange$={(_, el) => {
+            checkedStateSignal.value = el.checked;
           }}
         />
       </label>

diff --git a/apps/website/src/routes/showcases/Switch/SwitchWithoutLabel/index.tsx b/apps/website/src/routes/showcases/Switch/SwitchWithoutLabel/index.tsx
@@ -7,8 +7,8 @@ export default component$(() => {
     <SfSwitch
       checked={checkedStateSignal.value}
       value="value-1"
-      onChange$={(event) => {
-        checkedStateSignal.value = event.target.checked;
+      onChange$={(_, el) => {
+        checkedStateSignal.value = el.checked;
       }}
     />
   );

diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts
@@ -1,8 +1,8 @@
-import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { qwikNxVite } from 'qwik-nx/plugins';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import { qwikNxVite } from 'qwik-nx/plugins';
 
 export default defineConfig({
   plugins: [
@@ -29,12 +29,4 @@ export default defineConfig({
       'Cache-Control': 'public, max-age=600',
     },
   },
-  test: {
-    globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
-    environment: 'node',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-  },
 });