Merge pull request #2 from getgrit/whatev-th

fix: statement order
getgrit · Dec 8, 2023 · 4d265aa · 4d265aa
2 parents cb51dfa + 27dad33
commit 4d265aa
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 14 deletions.
diff --git a/.grit/patterns/js/react_hooks.grit b/.grit/patterns/js/react_hooks.grit
@@ -45,12 +45,18 @@ private pattern handle_one_statement($class_name, $statements, $states_statement
                 and {
                     $name <: js"constructor",
                     $body <: maybe contains bubble($constructor_statements) {
-                        lexical_declaration($declarations) as $decl where $declarations <:
-                            variable_declarator($name, $value) where {
-                                $name <: not contains js"this.state",
-                                $value <: not contains js"this.state",
-                                $constructor_statements += $decl
-                            }
+                        or {
+                            lexical_declaration($declarations) as $decl where $declarations <:
+                                variable_declarator($name, $value) where {
+                                    $name <: not contains js"this.state",
+                                    $value <: not contains js"this.state",
+                                    $constructor_statements += $decl
+                                },
+                            expression_statement() as $decl where {
+                                $decl <: not contains `super($props)`,
+                                $constructor_statements += $decl,
+                            },
+                        }
                     },
                     $body <: change_this($states_statements, is_constructor=true),
                 },
@@ -87,9 +93,9 @@ private pattern handle_one_statement($class_name, $statements, $states_statement
                     $statement <: prepend_comment($statements),
                     $async <: `async`,
                     if ($handler_callback_suffix <: .) {
-                    $statements += `const $name = async ($parameters) => $body;`
+                        $statements += `const $name = async ($parameters) => $body;`
                     } else {
-                    $statements += `const $[name]$[handler_callback_suffix] = useCallback(async ($parameters) => $body, []);`
+                        $statements += `const $[name]$[handler_callback_suffix] = useCallback(async ($parameters) => $body, []);`
                     }
                 },
                 and {
@@ -105,9 +111,9 @@ private pattern handle_one_statement($class_name, $statements, $states_statement
                 and {
                     $statement <: prepend_comment($statements),
                     if ($handler_callback_suffix <: .) {
-                    $statements += `const $name = ($parameters) => $body;`
+                        $statements += `const $name = ($parameters) => $body;`
                     } else {
-                    $statements += `const $[name]$[handler_callback_suffix] = useCallback(($parameters) => $body, []);`
+                        $statements += `const $[name]$[handler_callback_suffix] = useCallback(($parameters) => $body, []);`
                     }
                 }
             },
@@ -426,7 +432,7 @@ pattern first_step($use_ref_from, $handler_callback_suffix) {
         $states_statements = join(list = $states_statements, $separator),
         $statements = join(list = $statements, $separator),
         $constructor_statements = join(list = $constructor_statements, $separator),
-        $the_function = `($args) => {\n$constructor_statements\n\n    $states_statements\n\n    $statements\n\n    $render_statements \n}`,
+        $the_function = `($args) => {\n    $states_statements\n\n    $statements\n\n    $constructor_statements\n\n    $render_statements \n}`,
 
         // Construct the final class name
         $original_name = $class_name,

diff --git a/.grit/patterns/js/react_to_hooks.md b/.grit/patterns/js/react_to_hooks.md
@@ -684,25 +684,35 @@ import { Component } from 'react';
 class MyComponent extends Component {
   constructor(props: Props) {
     const five = 2 + 3;
+    this.saySomething();
     this.state = {
       secret: five,
     };
   }
 
+  saySomething() {
+    console.log('hi');
+  }
+
   render() {
     return <></>;
   }
 }
 ```
 
 ```ts
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 const MyComponent = () => {
-  const five = 2 + 3;
-
   const [secret, setSecret] = useState(five);
 
+  const saySomethingHandler = useCallback(() => {
+    console.log('hi');
+  }, []);
+
+  const five = 2 + 3;
+  saySomethingHandler();
+
   return <></>;
 };
 ```
@@ -1189,3 +1199,40 @@ const Loader = () => {
 
 export default Loader;
 ```
+
+## Preserves non-return render statements
+
+```js
+import { Component } from 'base';
+
+export default class Loader extends Component {
+  async componentDidMount() {
+    await loadSomething();
+  }
+
+  render() {
+    console.log('hi');
+    console.info('hello');
+    return null;
+  }
+}
+```
+
+```ts
+import { Component } from 'base';
+import { useEffect } from 'react';
+
+const Loader = () => {
+  useEffect(() => {
+    (async () => {
+      await loadSomething();
+    })();
+  }, []);
+
+  console.log('hi');
+  console.info('hello');
+  return null;
+};
+
+export default Loader;
+```