Merge pull request #32 from shoonia/dev-4

Dev

package.json

@@ -12,7 +12,7 @@
     "serve": "python3 -m http.server -d dist"
   },
   "dependencies": {
-    "jsx-dom-runtime": "^0.59.0",
+    "jsx-dom-runtime": "^0.60.0",
     "rgb-hex": "^4.1.0",
     "storeon-velo": "^5.0.0-rc.0",
     "tinykeys": "^2.1.0",

src/components/ColorPicker/index.tsx

@@ -1,3 +1,4 @@
+import type { RefCallback } from 'jsx-dom-runtime';
 import { HexAlphaBase } from 'vanilla-colorful/lib/entrypoints/hex-alpha';
 
 import s from './styles.css';
@@ -9,7 +10,7 @@ customElements.define('color-picker', HexAlphaBase);
 export const ColorPicker: JSX.FC = () => {
   const isBigScreen = /*#__PURE__*/ matchMedia('(min-width:700px)').matches;
 
-  const ready = (node: HexAlphaBase) => {
+  const ready: RefCallback<HexAlphaBase> = (node) => {
     connect('hex', (state) => {
       node.color = '#' + state.hex;
     });

src/components/Download/index.tsx

@@ -1,4 +1,4 @@
-import type { RefCallback } from 'jsx-dom-runtime';
+import type { MouseEventHandler } from 'jsx-dom-runtime';
 
 import s from './styles.css';
 import { getState } from '../../store';
@@ -22,14 +22,13 @@ const content = (
 );
 
 export const Download: JSX.FC = () => {
-  const linkHandler: RefCallback<HTMLAnchorElement> = (link) =>
-    link.addEventListener('click', () => {
-      const { hex, a } = getState();
-      const canvas = createCanvas(hex, a);
+  const linkHandler: MouseEventHandler<HTMLAnchorElement> = ({ currentTarget: link }) => {
+    const { hex, a } = getState();
+    const canvas = createCanvas(hex, a);
 
-      link.download = createName(hex);
-      link.href = canvas.toDataURL(TYPE, QUALITY);
-    });
+    link.download = createName(hex);
+    link.href = canvas.toDataURL(TYPE, QUALITY);
+  };
 
   const buttonHandler: EventListener = async () => {
     const { hex, a } = getState();
@@ -57,7 +56,7 @@ export const Download: JSX.FC = () => {
         {content}
       </button>
     ) : (
-      <a ref={linkHandler} role="button" class={s.btn} href="#">
+      <a onclick={linkHandler} role="button" class={s.btn} href="#">
         {content}
       </a>
     );

src/components/HexInputs/index.tsx

@@ -1,11 +1,13 @@
+import type { RefCallback } from 'jsx-dom-runtime';
+
 import s from './styles.css';
 import { Group } from '../Group';
 import { DataList } from './DataList';
 import { NOT_HEXADECIMAL, getHex } from '../../utils';
 import { connect, dispatch } from '../../store';
 
 export const HexInputs: JSX.FC = () => {
-  const readyColor = (color: HTMLInputElement) => {
+  const readyColor: RefCallback<HTMLInputElement> = (color) => {
     color.addEventListener('change', () => {
       const hex = getHex(color.value);
 
@@ -19,7 +21,7 @@ export const HexInputs: JSX.FC = () => {
     });
   };
 
-  const readyAlpha = (alpha: HTMLInputElement) => {
+  const readyAlpha: RefCallback<HTMLInputElement> = (alpha) => {
     alpha.addEventListener('change', () => {
       const val = alpha.value
         .trim()

src/components/Output/RadixSelect.tsx

@@ -1,17 +1,15 @@
-import type { RefCallback } from 'jsx-dom-runtime';
+import type { GenericEventHandler } from 'jsx-dom-runtime';
 
 import s from './RadixSelect.css';
 import { setState } from '../../store';
 
 export const RadixSelect: JSX.FC = () => {
-  const ready: RefCallback<HTMLSelectElement> = (node) =>
-    node.addEventListener('change', () =>
-      setState({ radix: ~~node.value }),
-    );
+  const change: GenericEventHandler<HTMLSelectElement> = (event) =>
+    setState({ radix: ~~event.currentTarget.value });
 
   return (
     <select
-      ref={ready}
+      onchange={change}
       class={s.radix}
       aria-label="byte base"
     >

src/components/Output/TextInput.tsx

@@ -1,4 +1,4 @@
-import type { RefObject } from 'jsx-dom-runtime';
+import type { RefObject, MouseEventHandler } from 'jsx-dom-runtime';
 
 import s from './TextInput.css';
 import { setState } from '../../store';
@@ -8,11 +8,9 @@ interface Props {
   ref: RefObject<HTMLInputElement>;
 }
 
-const copy: EventListener = (event) => {
-  const el = event.target as HTMLInputElement;
-
-  el.select();
-  navigator.clipboard.writeText(el.value);
+const copy: MouseEventHandler<HTMLInputElement> = ({ currentTarget: input }) => {
+  input.select();
+  navigator.clipboard.writeText(input.value);
   setState({ toast: true });
 };
 

src/components/RgbaInputs/PairInputs.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'jsx-dom-runtime';
+import { useRef, type InputEventHandler } from 'jsx-dom-runtime';
 
 import s from './PairInputs.css';
 import type { TRgba } from '../../store/types';
@@ -13,9 +13,8 @@ export const PairInputs: JSX.FC<Props> = ({ param }) => {
   const range = useRef<HTMLInputElement>();
   const label = `color channel "${param}"`;
 
-  const input: EventListener = (event) => {
-    const el = event.target as HTMLInputElement;
-    const val = ~~el.valueAsNumber;
+  const input: InputEventHandler<HTMLInputElement> = (event) => {
+    const val = ~~event.currentTarget.valueAsNumber;
 
     dispatch('rgba', [param, val > 255 ? 255 : val]);
   };