JSX Formatting on AST level

packages/coli-export-string/core/jsx/jsx-element.ts

@@ -1,7 +1,6 @@
 import { JSXElement } from "coli";
-import { stringfy, stringfy_tokenformatted, StringfyLanguage } from "../..";
-import { indent, KeywordAndTokenStatic } from "@coli.codes/export-string-core";
-import { formatters } from "@coli.codes/ast-formatter";
+import { stringfy, StringfyLanguage } from "../..";
+import { indent } from "@coli.codes/export-string-core";
 import { strfy_jsx_opening_element } from "..";
 export function strfy_jsx_element(c: JSXElement, l: StringfyLanguage): string {
   // const ast = formatters.astfmt_jsx_element(c);
@@ -14,14 +13,12 @@ export function strfy_jsx_element(c: JSXElement, l: StringfyLanguage): string {
     indent.onEachLine(
       stringfy(children, {
         language: l,
-        joinWith: KeywordAndTokenStatic.BreakLineToken,
+        joinWith: "\n",
       })
     );
   const _close = stringfy(closingElement, { language: l });
   if (_children) {
-    return `${_open}
-  ${_children}
-  ${_close}`;
+    return `${_open}\n${_children}\n${_close}`;
   } else {
     return `${_open}${_close}`;
   }

packages/coli-formatter-token/formatters/function-declaration.ts

@@ -11,23 +11,28 @@ export function astfmt_function_declaration(c: FunctionDeclaration) {
   ]);
 
   return [
-    f("\n"),
-    inject.insertBetween(
-      [f(modifiers.export), f(modifiers.default), f(modifiers.async)].filter(
-        Boolean
+    f("\n"), // L-1 pre new line
+    // L1:keywords
+    inject.insertTrailing(
+      inject.insertBetween(
+        [f(modifiers.export), f(modifiers.default), f(modifiers.async)].filter(
+          Boolean
+        ),
+        f(" ")
       ),
       f(" ")
     ),
-    f(" "),
+    // L1: function
     f(SyntaxKind.FunctionKeyword),
     f(" "),
+    // L1: function name
     id,
     f(" "),
+    // L1: function params
     [f(SyntaxKind.OpenParenToken), parameters, f(SyntaxKind.CloseParenToken)],
     returnType ? [f(SyntaxKind.ColonToken), f(" "), returnType] : "",
     f(" "),
-    body,
-    f("\n"),
-    f("\n"),
+    body, // a block statement
+    f("\n\n"), // trailing new line 1
   ];
 }

packages/coli-formatter-token/formatters/jsx/jsx-element.ts

@@ -1,14 +1,13 @@
 import { JSXElement } from "coli";
 import { format, inject } from "../..";
-import { insertBetween } from "../../utils";
 import f from "../../tokens";
 
 export function astfmt_jsx_element(c: JSXElement) {
   const { openingElement, closingElement, children } = c;
   const _children =
     children &&
     Array.isArray(children) &&
-    inject.onEach(insertBetween(format(children), f("\n")), "\t");
+    inject.onEach(inject.insertBetween(format(children), f("\n")), "\t");
   if (_children) {
     return [openingElement, ..._children, closingElement];
   } else {

packages/coli-formatter-token/formatters/jsx/utils/jsx-with-attributes.ts

@@ -19,9 +19,8 @@ export function astfmt_jsx_with_attributes({
   const closing = close_token == "/>" ? "/>" : f(close_token);
 
   if (attributes?.length > 0) {
-    const join_attributes_with = get_jsx_attribute_join_with_by_attributes(
-      attributes
-    );
+    const join_attributes_with =
+      get_jsx_attribute_join_with_by_attributes(attributes);
     let closing_after_new_line =
       join_attributes_with == ["\n", "\t"] ? f("\n") : f("");
 

packages/coli-formatter-token/formatters/return-statement.ts

@@ -12,7 +12,9 @@ export function astfmt_return_statement(c: ReturnStatement) {
       f(SyntaxKind.ReturnKeyword),
       f(" "),
       f(SyntaxKind.OpenParenToken),
-      inject.onEach([f("\n"), argument, f("\n")], f("\t")),
+      // FIXME: do -> inject.indent after formatting (argument)
+      // currently the jsx is not using ast-formatter, so we can't do this the right way. fix the jsx formatter first.
+      inject.indent([f("\n"), argument, f("\n")]),
       f(SyntaxKind.CloseParenToken),
     ];
   }

packages/coli-formatter-token/tokens/index.ts

@@ -5,6 +5,7 @@ export type FormatterTokenLike =
   | SyntaxKind
   | " "
   | "\n"
+  | "\n\n"
   | "\t"
   | "//"
   | "/**" // docstring start

packages/coli-formatter-token/utils/indent.ts

@@ -0,0 +1,36 @@
+import { FormattingToken } from "../tokens";
+export function indent(o: any) {
+  const flattened = flatten(o);
+
+  // loop trhough flattened array, inject the "\t" before the "\n" appears.
+  return flattened.reduce((acc, item, index) => {
+    if (
+      item === "\n" ||
+      (item instanceof FormattingToken && item.kind === "\n")
+    ) {
+      acc.push("\n", "\t");
+    } else {
+      acc.push(item);
+    }
+    return acc;
+  }, []);
+}
+
+/**
+ * deeply flattens the nested array
+ * @param arr
+ * @returns
+ */
+function flatten(arr) {
+  const newArr = arr.reduce((acc, item) => {
+    if (Array.isArray(item)) {
+      acc = acc.concat(flatten(item));
+    } else {
+      acc.push(item);
+    }
+
+    return acc;
+  }, []);
+
+  return newArr;
+}

packages/coli-formatter-token/utils/index.ts

@@ -1,6 +1,8 @@
 export * from "./on-each";
 export * from "./insert-between";
+export * from "./insert-trailing";
 export * from "./wrap-with-matching-type";
 export * from "./wrap-with-double-quote";
 export * from "./wrap-array-with";
 export * from "./extra-trailing-space-by-size";
+export * from "./indent";

packages/coli-formatter-token/utils/insert-trailing.ts

@@ -0,0 +1,6 @@
+/**
+ * inserts the trailing item if the existing arrays are not empty
+ */
+export function insertTrailing(arr: any[], insert: any) {
+  return arr && arr.push(insert) && arr;
+}