Support rules added in JS module v1.4.0

ecocode-rules-specifications/src/main/rules/EC11/EC11.json

@@ -7,9 +7,9 @@
     "constantCost": "5min"
   },
   "tags": [
+    "ecocode",
     "eco-design",
-    "performance",
-    "ecocode"
+    "performance"
   ],
   "defaultSeverity": "Major",
   "compatibleLanguages": [

ecocode-rules-specifications/src/main/rules/EC11/javascript/EC11.asciidoc

@@ -1,20 +1,21 @@
-## Rule details
+This rule aims to reduce DOM access assigning its object to variable when access multiple time.
+It saves CPU cycles.
 
-This rule aims to reduce DOM access assigning its object to variable when access multiple time. It saves CPU cycles.
-
-## Examples
+== Examples
 
 Examples of **incorrect** code for this rule:
 
-```js
+[source,js]
+----
 var el1 = document.getElementById("block1").test1;
 var el2 = document.getElementById("block1").test2;
-```
+----
 
 Examples of **correct** code for this rule:
 
-```js
+[source,js]
+----
 var blockElement = document.getElementById("block1");
 var el1 = blockElement.test1;
 var el2 = blockElement.test2;
-```
+----

ecocode-rules-specifications/src/main/rules/EC12/EC12.json

@@ -7,9 +7,9 @@
     "constantCost": "10min"
   },
   "tags": [
+    "ecocode",
     "eco-design",
-    "performance",
-    "ecocode"
+    "performance"
   ],
   "defaultSeverity": "Major",
   "compatibleLanguages": [

ecocode-rules-specifications/src/main/rules/EC12/javascript/EC12.asciidoc

@@ -1,24 +1,24 @@
-## Rule Details
-
 This rule aims to disallow batching multiple style changes at once.
 
 To limit the number of repaint/reflow, it is advised to batch style modifications by adding a class containing all style changes that will generate a unique reflow.
 
-## Examples
+== Examples
 
 Examples of **non-compliant** code for this rule:
 
-```html
+[source,html]
+----
 <script>
   element.style.height = "800px";
   element.style.width = "600px";
   element.style.color = "red";
 </script>
-```
+----
 
 Examples of **compliant** code for this rule:
 
-```html
+[source,html]
+----
 <style>
   .in-error {
     color: red;
@@ -30,4 +30,4 @@ Examples of **compliant** code for this rule:
 <script>
   element.addClass("in-error");
 </script>
-```
+----

ecocode-rules-specifications/src/main/rules/EC13/EC13.json

@@ -7,13 +7,13 @@
     "constantCost": "30min"
   },
   "tags": [
+    "ecocode",
     "eco-design",
-    "performance",
-    "ecocode"
+    "nestjs",
+    "performance"
   ],
   "defaultSeverity": "Minor",
   "compatibleLanguages": [
-    "JAVASCRIPT",
     "TYPESCRIPT"
   ]
 }

ecocode-rules-specifications/src/main/rules/EC13/javascript/EC13.asciidoc

@@ -1,22 +1,22 @@
-## Rule details
-
 This rule aims to reduce the size and thus the network weight of API returns that may contain many elements. This rule is built for the https://nestjs.com[NestJS framework] but can work with a controller `@Controller()` and a decorated method `@Get()`.
 
-## Examples
+== Examples
 
 Examples of **non-compliant** code for this rule:
 
-```typescript
+[source,typescript]
+----
 @Controller()
 class Test {
   @Get()
   public find(): Promise<string[]> {}
 }
-```
+----
 
 Examples of **compliant** code for this rule:
 
-```typescript
+[source,typescript]
+----
 interface Pagination {
   items: string[];
   currentPage: number;
@@ -28,4 +28,4 @@ class Test {
   @Get()
   public find(): Promise<Pagination> {}
 }
-```
+----

ecocode-rules-specifications/src/main/rules/EC24/EC24.json

@@ -0,0 +1,20 @@
+{
+  "title": "Limit the number of returns for a SQL query",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "ecocode",
+    "eco-design",
+    "performance",
+    "sql"
+  ],
+  "defaultSeverity": "Minor",
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

ecocode-rules-specifications/src/main/rules/EC24/javascript/EC24.asciidoc

@@ -0,0 +1,17 @@
+This rule aims at reducing CPU consumption by limiting the number of returns for a single SQL query.
+
+== Examples
+
+Examples of **non compliant** code for this rule:
+
+[source,js]
+----
+const query = "SELECT * FROM clients";
+----
+
+Examples of **compliant** code for this rule:
+
+[source,js]
+----
+const query = "SELECT columns FROM table_name FETCH FIRST number ROWS ONLY";
+----

ecocode-rules-specifications/src/main/rules/EC25/EC25.json

@@ -0,0 +1,21 @@
+{
+  "title": "Do not use an image with empty source attribute",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "ecocode",
+    "eco-design",
+    "jsx",
+    "performance",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

ecocode-rules-specifications/src/main/rules/EC25/javascript/EC25.asciidoc

@@ -0,0 +1,20 @@
+This rule aims to prohibit the usage of <img/> without specifying its source attribute because it causes extra and unnecessary http requests. This rule is build for the https://react.dev/[react library] and JSX.
+
+== Examples
+
+Examples of **non compliant** code for this rule:
+
+[source,html]
+----
+<img src='' />
+<img/>
+----
+
+Examples of **compliant** code for this rule:
+
+[source,js]
+----
+import imgSvg from './img.svg'
+<img src='./img.svg' />
+<img src={imgSvg} />
+----

ecocode-rules-specifications/src/main/rules/EC26/EC26.json

@@ -0,0 +1,21 @@
+{
+  "title": "Prefer shorthand CSS notations to reduce stylesheets size",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "ecocode",
+    "eco-design",
+    "jsx",
+    "performance",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

ecocode-rules-specifications/src/main/rules/EC26/javascript/EC26.asciidoc

@@ -0,0 +1,51 @@
+This rule aims to encourage the use of shorthand CSS notations to reduce stylesheets size.
+
+== Examples
+
+Examples of **non-compliant** code for this rule:
+
+[source,js]
+----
+<div
+  style={{
+    marginTop: "1em",
+    marginRight: 0,
+    marginBottom: "2em",
+    marginLeft: "0.5em"
+  }}
+>
+  {/* Your content here */}
+</div>
+----
+
+[source,js]
+----
+<div
+  style={{
+    transitionProperty: "width",
+    transitionDuration: "35s",
+    transitionTimingFunction: "ease-in-out",
+    transitionDelay: "0s"
+  }}
+>
+  {/* Your content here */}
+</div>
+----
+
+Examples of **compliant** code for this rule:
+
+[source,js]
+----
+<div style={{ margin: "1em 0 2em 0.5em" }}>{/* Your content here */}</div>
+----
+
+[source,js]
+----
+<div style={{ transition: "width 35s ease-in-out 0s" }}>
+  {/* Your content here */}
+</div>
+----
+
+== Further reading
+
+This recommendation is made by the CNUMR: https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md[Use abbreviated CSS notations]

ecocode-rules-specifications/src/main/rules/EC29/EC29.json

@@ -0,0 +1,21 @@
+{
+  "title": "Avoid usage of CSS animations",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "15min"
+  },
+  "tags": [
+    "ecocode",
+    "eco-design",
+    "jsx",
+    "performance",
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

ecocode-rules-specifications/src/main/rules/EC29/javascript/EC29.asciidoc

@@ -0,0 +1,23 @@
+This rule aims to limit the usage of all types of CSS animations which can be very costly in terms of CPU and memory.
+They must only be used when they are indispensable and should be limited to the CSS properties `opacity` and `transform` with it's associated functions : `translate`, `rotate` and `scale`.
+You can also inform the navigator of upcoming changes with the `will-change` instruction for more optimization.
+
+== Examples
+
+Examples of **non compliant** code for this rule:
+
+[source,js]
+----
+<div style={{ border: "1px solid black", transition: "border 2s ease" }}/>
+----
+
+Examples of **compliant** code for this rule:
+
+[source,js]
+----
+<div style={{ border: "1px solid black" }}/>
+----
+
+== Further details
+
+This recommendation is made by the CNUMR: https://github.com/cnumr/best-practices/blob/main/chapters/BP_039_en.md[Avoid JavaScript / CSS animations]

ecocode-rules-specifications/src/main/rules/EC30/EC30.json

@@ -0,0 +1,21 @@
+{
+  "title": "Provide a print stylesheet",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "30min"
+  },
+  "tags": [
+    "ecocode",
+    "eco-design",
+    "jsx",
+    "performance",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}