Linting changes

[github-actions]

This pull request includes linting changes based on the target branch.

Please review and merge if everything looks good.

Additional suggestions:

./tests/index.tsx organizeImports ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

i Import statements could be sorted:

  1     │ - import·{·createCustomElement,·h,·Host·}·from·"../src";
      1 │ + import·{·Host,·createCustomElement,·h·}·from·"../src";
  2   2 │   import { ColorSelector } from "./ColorSelector";
  3   3 │   import { Router } from "./routes";

./tests/index.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

i Formatter would have printed the following content:

  6   6 │   
  7   7 │   createCustomElement("root-test-element", {
  8     │ - ··reflectedAttributes:·{
  9     │ - ····//·arrayTest:·new·ElementList(0,·1,·2,·3,·4,·5,·6),
 10     │ - ····arrayTest:·[0,·1,·2,·3,·4,·5],
 11     │ - ··},
 12     │ - ··shadow:·false,
 13     │ - ··transactions:·{
 14     │ - ····onClickArray()·{
 15     │ - ······this.arrayTest.push(7,·8);
 16     │ - ······//·this.arrayTest·=·[0,·1,·2,·3,·6]
 17     │ - ······//·this.arrayTest.reverse();
 18     │ - ······//·this.arrayTest.pop();
 19     │ - ······//·this.arrayTest.shift();
 20     │ - ······//·Scenario
 21     │ - ······//·this.arrayTest·=·[6,·3,·2,·1,·0]
 22     │ - ····},
 23     │ - ··},
 24     │ - ··fakeRoot:·false,
 25     │ - ··observe:·{
 26     │ - ····"arrayTest.6"()·{
 27     │ - ······console.log("6·Added");
 28     │ - ····},
 29     │ - ··},
 30     │ - ··render()·{
 31     │ - ····return·(
 32     │ - ······<Host>
 33     │ - ········<Router·/>
 34     │ - ········<math·display="block">
 35     │ - ··········<mfrac>
 36     │ - ············<mn>{this.arrayTest.length}</mn>
 37     │ - ············<msqrt>
 38     │ - ··············<mn>2</mn>
 39     │ - ············</msqrt>
 40     │ - ··········</mfrac>
 41     │ - ········</math>
 42     │ - ········{/*·<List
      8 │ + → reflectedAttributes:·{
      9 │ + → → //·arrayTest:·new·ElementList(0,·1,·2,·3,·4,·5,·6),
     10 │ + → → arrayTest:·[0,·1,·2,·3,·4,·5],
     11 │ + → },
     12 │ + → shadow:·false,
     13 │ + → transactions:·{
     14 │ + → → onClickArray()·{
     15 │ + → → → this.arrayTest.push(7,·8);
     16 │ + → → → //·this.arrayTest·=·[0,·1,·2,·3,·6]
     17 │ + → → → //·this.arrayTest.reverse();
     18 │ + → → → //·this.arrayTest.pop();
     19 │ + → → → //·this.arrayTest.shift();
     20 │ + → → → //·Scenario
     21 │ + → → → //·this.arrayTest·=·[6,·3,·2,·1,·0]
     22 │ + → → },
     23 │ + → },
     24 │ + → fakeRoot:·false,
     25 │ + → observe:·{
     26 │ + → → "arrayTest.6"()·{
     27 │ + → → → console.log("6·Added");
     28 │ + → → },
     29 │ + → },
     30 │ + → render()·{
     31 │ + → → return·(
     32 │ + → → → <Host>
     33 │ + → → → → <Router·/>
     34 │ + → → → → <math·display="block">
     35 │ + → → → → → <mfrac>
     36 │ + → → → → → → <mn>{this.arrayTest.length}</mn>
     37 │ + → → → → → → <msqrt>
     38 │ + → → → → → → → <mn>2</mn>
     39 │ + → → → → → → </msqrt>
     40 │ + → → → → → </mfrac>
     41 │ + → → → → </math>
     42 │ + → → → → {/*·<List
 43  43 │             as='div'
 44  44 │             data={this.arrayTest}
 45  45 │             renderItem={item => <div key={item} onclick={this.onClickArray}>{item}</div>}
 46  46 │           /> */}
 47     │ - ········<ColorSelector·/>
 48     │ - ········{this.arrayTest.map((item)·=>·(
 49     │ - ··········<div·key={item}·onclick={this.onClickArray}>
 50     │ - ············{item}
 51     │ - ··········</div>
 52     │ - ········))}
 53     │ - ········{/*·<this.arrayTest.List
     47 │ + → → → → <ColorSelector·/>
     48 │ + → → → → {this.arrayTest.map((item)·=>·(
     49 │ + → → → → → <div·key={item}·onclick={this.onClickArray}>
     50 │ + → → → → → → {item}
     51 │ + → → → → → </div>
     52 │ + → → → → ))}
     53 │ + → → → → {/*·<this.arrayTest.List
 54  54 │             renderItem={(item) => <div onclick={this.onClickArray}>{item}</div>}
 55  55 │           /> */}
 56     │ - ······</Host>
 57     │ - ····);
 58     │ - ··},
     56 │ + → → → </Host>
     57 │ + → → );
     58 │ + → },
 59  59 │   });
 60  60 │   

./tests/index.tsx check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× The file contains diagnostics that needs to be addressed.

./tasks/generateTypes.ts organizeImports ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

i Import statements could be sorted:

 1    │ - import·{
    1 │ + import·{·mkdirSync,·rmSync,·writeFileSync·}·from·"fs";
    2 │ + import·{
 2  3 │     supportedHTMLElements,
 3  4 │     supportedMathMLElements,
 4  5 │     supportedSVGElements,
 5    │ - }·from·"@michijs/htmltype/supported";
 6    │ - import·{·writeFileSync,·rmSync,·mkdirSync·}·from·"fs";
    6 │ + }·from·"@michijs/htmltype/supported";
 7  7 │   
 8  8 │   const elements = new Map<

./tests/ColorSelector.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

i Formatter would have printed the following content:

14 14 │   
15 15 │   export const ColorSelector = createCustomElement("color-selector", {
16    │ - ··reflectedCssVariables:·{
17    │ - ····color:·"#ff0000"·as·`#${string}`,
18    │ - ··},
19    │ - ··computedStyleSheet()·{
20    │ - ····return·{
21    │ - ······color:·"white",
22    │ - ······"--example":·this.color·===·"#ff0000"·?·'"red"'·:·'"not·red"',
23    │ - ····};
24    │ - ··},
25    │ - ··adoptedStyleSheets:·[style],
26    │ - ··render()·{
27    │ - ····return·(
28    │ - ······<span>
29    │ - ········<input
30    │ - ··········type="color"
31    │ - ··········value={this.color}
32    │ - ··········oninput={(ev)·=>·{
33    │ - ············this.color·=·ev.target?.value·as·`#${string}`;
34    │ - ··········}}
35    │ - ········/>
36    │ - ······</span>
37    │ - ····);
38    │ - ··},
   16 │ + → reflectedCssVariables:·{
   17 │ + → → color:·"#ff0000"·as·`#${string}`,
   18 │ + → },
   19 │ + → computedStyleSheet()·{
   20 │ + → → return·{
   21 │ + → → → color:·"white",
   22 │ + → → → "--example":·this.color·===·"#ff0000"·?·'"red"'·:·'"not·red"',
   23 │ + → → };
   24 │ + → },
   25 │ + → adoptedStyleSheets:·[style],
   26 │ + → render()·{
   27 │ + → → return·(
   28 │ + → → → <span>
   29 │ + → → → → <input
   30 │ + → → → → → type="color"
   31 │ + → → → → → value={this.color}
   32 │ + → → → → → oninput={(ev)·=>·{
   33 │ + → → → → → → this.color·=·ev.target?.value·as·`#${string}`;
   34 │ + → → → → → }}
   35 │ + → → → → />
   36 │ + → → → </span>
   37 │ + → → );
   38 │ + → },
39 39 │   });
40 40 │   

./tasks/generateTypes.ts format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

i Formatter would have printed the following content:

 1  1 │   import {
 2    │ - ··supportedHTMLElements,
 3    │ - ··supportedMathMLElements,
 4    │ - ··supportedSVGElements,
    2 │ + → supportedHTMLElements,
    3 │ + → supportedMathMLElements,
    4 │ + → supportedSVGElements,
 5  5 │   } from "@michijs/htmltype/supported";
 6  6 │   import { writeFileSync, rmSync, mkdirSync } from "fs";
 7  7 │   
 8  8 │   const elements = new Map<
 9    │ - ··string,
10    │ - ··{
11    │ - ····attributes:·string[];
12    │ - ····elementInterfaces:·string[];
13    │ - ··}
    9 │ + → string,
   10 │ + → {
   11 │ + → → attributes:·string[];
   12 │ + → → elementInterfaces:·string[];
   13 │ + → }
14 14 │   >();
15 15 │   
16 16 │   supportedHTMLElements.forEach((x) => {
17    │ - ··elements.set(x.tagName,·{
18    │ - ····attributes:·[`HTMLElements["${x.tagName}"]`],
19    │ - ····elementInterfaces:·[x.elementInterface],
20    │ - ··});
   17 │ + → elements.set(x.tagName,·{
   18 │ + → → attributes:·[`HTMLElements["${x.tagName}"]`],
   19 │ + → → elementInterfaces:·[x.elementInterface],
   20 │ + → });
21 21 │   });
22 22 │   supportedMathMLElements.forEach((x) => {
23    │ - ··elements.set(x.tagName,·{
24    │ - ····attributes:·[`MathMLElements["${x.tagName}"]`],
25    │ - ····elementInterfaces:·[x.elementInterface],
26    │ - ··});
   23 │ + → elements.set(x.tagName,·{
   24 │ + → → attributes:·[`MathMLElements["${x.tagName}"]`],
   25 │ + → → elementInterfaces:·[x.elementInterface],
   26 │ + → });
27 27 │   });
28 28 │   supportedSVGElements.forEach((x) => {
29    │ - ··const·attributes·=·`SVGElements["${x.tagName}"]`;
30    │ - ··const·elementInterface·=·x.elementInterface;
31    │ - ··const·element·=·elements.get(x.tagName);
32    │ - ··if·(element)·{
33    │ - ····element.attributes.push(attributes);
34    │ - ····element.elementInterfaces.push(elementInterface);
35    │ - ··}·else·{
36    │ - ····elements.set(x.tagName,·{
37    │ - ······attributes:·[attributes],
38    │ - ······elementInterfaces:·[x.elementInterface],
39    │ - ····});
40    │ - ··}
   29 │ + → const·attributes·=·`SVGElements["${x.tagName}"]`;
   30 │ + → const·elementInterface·=·x.elementInterface;
   31 │ + → const·element·=·elements.get(x.tagName);
   32 │ + → if·(element)·{
   33 │ + → → element.attributes.push(attributes);
   34 │ + → → element.elementInterfaces.push(elementInterface);
   35 │ + → }·else·{
   36 │ + → → elements.set(x.tagName,·{
   37 │ + → → → attributes:·[attributes],
   38 │ + → → → elementInterfaces:·[x.elementInterface],
   39 │ + → → });
   40 │ + → }
41 41 │   });
42 42 │   
····· │ 
45 45 │   
46 46 │   writeFileSync(
47    │ - ··"./src/michijs/h/generated/JSX.ts",
48    │ - ··`·import·{·HTMLElements·as·HTMLElementsHTMLType,·MathMLElements,·SVGElements·as·SVGElementsHTMLType·}·from·"@michijs/htmltype";
   47 │ + → "./src/michijs/h/generated/JSX.ts",
   48 │ + → `·import·{·HTMLElements·as·HTMLElementsHTMLType,·MathMLElements,·SVGElements·as·SVGElementsHTMLType·}·from·"@michijs/htmltype";
49 49 │     import { MichiAttributes } from "../MichiAttributes";
50 50 │     import { SingleJSXElement } from '../../types';
····· │ 
52 52 │     interface ElementsInterfaceOverride {
53 53 │       ${Array.from(elements)
54    │ - ······.filter(([_name,·x])·=>·x.elementInterfaces.length·>·1)
55    │ - ······.map(([name,·x])·=>·`${name}:·${x.elementInterfaces.join("·&·")}`)
56    │ - ······.join(",\n")}
   54 │ + → → → .filter(([_name,·x])·=>·x.elementInterfaces.length·>·1)
   55 │ + → → → .map(([name,·x])·=>·`${name}:·${x.elementInterfaces.join("·&·")}`)
   56 │ + → → → .join(",\n")}
57 57 │     }
58 58 │     type HTMLElements = HTMLElementsHTMLType<ElementsInterfaceOverride>;
····· │ 
67 67 │         interface IntrinsicElements extends HTMLElements, MathMLElements, SVGElements {
68 68 │           ${Array.from(elements)
69    │ - ··········.sort()
70    │ - ··········.map(
71    │ - ············([key,·{·attributes,·elementInterfaces·}])·=>
72    │ - ··············`${key}:·${attributes.join(
73    │ - ················"·&·",
74    │ - ··············)}·&·MichiAttributes<${elementInterfaces.join("·&·")}>;`,
75    │ - ··········)
76    │ - ··········.join("\n")}
   69 │ + → → → → → .sort()
   70 │ + → → → → → .map(
   71 │ + → → → → → → ([key,·{·attributes,·elementInterfaces·}])·=>
   72 │ + → → → → → → → `${key}:·${attributes.join(
   73 │ + → → → → → → → → "·&·",
   74 │ + → → → → → → → )}·&·MichiAttributes<${elementInterfaces.join("·&·")}>;`,
   75 │ + → → → → → )
   76 │ + → → → → → .join("\n")}
77 77 │         }
78 78 │       }

./tests/ColorSelector.tsx check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× The file contains diagnostics that needs to be addressed.

./tasks/generateTypes.ts check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× The file contains diagnostics that needs to be addressed.

./src/michijs/routing/wait.ts format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

i Formatter would have printed the following content:

1 1 │   export const wait = (time: number) =>
2   │ - ··new·Promise<void>((resolve)·=>·{
3   │ - ····setTimeout(()·=>·{
4   │ - ······resolve();
5   │ - ····},·time);
6   │ - ··});
  2 │ + → new·Promise<void>((resolve)·=>·{
  3 │ + → → setTimeout(()·=>·{
  4 │ + → → → resolve();
  5 │ + → → },·time);
  6 │ + → });
7 7 │   

./src/michijs/routing/wait.ts check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× The file contains diagnostics that needs to be addressed.

./tests/benchmark/michijs/src/index.tsx:128:15 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide a href attribute for the a element.

126 │             <td _={{ className: "col-md-1" }}>{id}</td>
127 │             <td _={{ className: "col-md-4" }}>

128 │ <a _={{ onclick: () => select(id) }}>{label}
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
129 │
130 │ <td _={{ className: "col-md-1" }}>

i An anchor element should always have a href

i Check this thorough explanation to better understand the context.

./tests/benchmark/michijs/src/index.tsx:131:15 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide a href attribute for the a element.

129 │             </td>
130 │             <td _={{ className: "col-md-1" }}>

131 │ <a onclick={() => deleteItem(id)}>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
132 │ <span
133 │ _={{

i An anchor element should always have a href

i Check this thorough explanation to better understand the context.

./tests/benchmark/michijs/src/index.tsx:158:11 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide an explicit type prop for the button element.

156 │       <div _={{ className: "row" }}>
157 │         <div _={{ className: "col-sm-6 smallpad" }}>

158 │ <button
│ ^^^^^^^
159 │ _={{
...
164 │ }}
165 │ >
│ ^
166 │ Create 1,000 rows
167 │

i The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.

i Allowed button types are: submit, button or reset

./tests/benchmark/michijs/src/index.tsx:170:11 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide an explicit type prop for the button element.

168 │         </div>
169 │         <div _={{ className: "col-sm-6 smallpad" }}>

170 │ <button
│ ^^^^^^^
171 │ _={{
...
176 │ }}
177 │ >
│ ^
178 │ Create 10,000 rows
179 │

i The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.

i Allowed button types are: submit, button or reset

./tests/benchmark/michijs/src/index.tsx:182:11 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide an explicit type prop for the button element.

180 │         </div>
181 │         <div _={{ className: "col-sm-6 smallpad" }}>

182 │ <button
│ ^^^^^^^
183 │ _={{
...
188 │ }}
189 │ >
│ ^
190 │ Append 1,000 rows
191 │

i The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.

i Allowed button types are: submit, button or reset

./tests/benchmark/michijs/src/index.tsx:194:11 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide an explicit type prop for the button element.

192 │         </div>
193 │         <div _={{ className: "col-sm-6 smallpad" }}>

194 │ <button
│ ^^^^^^^
195 │ _={{
...
200 │ }}
201 │ >
│ ^
202 │ Update every 10th row
203 │

i The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.

i Allowed button types are: submit, button or reset

./tests/benchmark/michijs/src/index.tsx:206:11 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide an explicit type prop for the button element.

204 │         </div>
205 │         <div _={{ className: "col-sm-6 smallpad" }}>

206 │ <button
│ ^^^^^^^
207 │ _={{
...
212 │ }}
213 │ >
│ ^
214 │ Clear
215 │

i The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.

i Allowed button types are: submit, button or reset

./tests/benchmark/michijs/src/index.tsx:218:11 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Provide an explicit type prop for the button element.

216 │         </div>
217 │         <div _={{ className: "col-sm-6 smallpad" }}>

218 │ <button
│ ^^^^^^^
219 │ _={{
...
224 │ }}
225 │ >
│ ^
226 │ Swap Rows
227 │

i The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.

i Allowed button types are: submit, button or reset

./tests/benchmark/michijs/src/index.tsx lint ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× The file contains diagnostics that needs to be addressed.

./tests/benchmark/michijs/src/index.tsx organizeImports ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

i Import statements could be sorted:

  1     │ - import·{·h,·createCustomElement,·ElementList·}·from·"../../../../src";
      1 │ + import·{·ElementList,·createCustomElement,·h·}·from·"../../../../src";
  2   2 │   
  3   3 │   function _random(max: number) {

The number of diagnostics exceeds the number allowed by Biome.
Diagnostics not shown: 523.
Checked 147 file(s) in 95ms
Found 210 error(s)
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

× Some errors were emitted while running checks.