Annoying Lint PR™ (#3)

* Add Prettier + ESLint

* Format files

1 files changed, 121 insertions, 149 deletions

diff --git a/src/transform2.ts b/src/transform2.ts
index 485c575c6..ab516deac 100644
--- a/src/transform2.ts
+++ b/src/transform2.ts
@@ -1,15 +1,15 @@
-import type { TemplateNode } from "./@types/compiler/interfaces";
-
-import path from "path";
-import astring from "astring";
-import esbuild from "esbuild";
-import eslexer from "es-module-lexer";
-import micromark from "micromark";
-import gfmSyntax from "micromark-extension-gfm";
-import matter from "gray-matter";
+import type { TemplateNode } from './@types/compiler/interfaces';
+
+import path from 'path';
+import astring from 'astring';
+import esbuild from 'esbuild';
+import eslexer from 'es-module-lexer';
+import micromark from 'micromark';
+import gfmSyntax from 'micromark-extension-gfm';
+import matter from 'gray-matter';
 // @ts-ignore
-import gfmHtml from "micromark-extension-gfm/html.js";
-import { walk, parse } from "./compiler.js";
+import gfmHtml from 'micromark-extension-gfm/html.js';
+import { walk, parse } from './compiler.js';
 import markdownEncode from './markdown-encode.js';
 import { preparse } from './parser.js';
 
@@ -18,18 +18,20 @@ const { transformSync } = esbuild;
 interface Attribute {
   start: 574;
   end: 595;
-  type: "Attribute";
-  name: "class";
+  type: 'Attribute';
+  name: 'class';
   value: any;
 }
 
 interface CompileOptions {
-  resolve: (p: string) => string
+  resolve: (p: string) => string;
 }
 
 const defaultCompileOptions: CompileOptions = {
-  resolve(p: string) { return p; }
-}
+  resolve(p: string) {
+    return p;
+  },
+};
 
 function internalImport(internalPath: string) {
   return `/__hmx_internal__/${internalPath}`;
@@ -47,7 +49,7 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
     }
     if (attr.value.length > 1) {
       result[attr.name] =
-        "(" +
+        '(' +
         attr.value
           .map((v: TemplateNode) => {
             if (v.expression) {
@@ -56,21 +58,21 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
               return JSON.stringify(getTextFromAttribute(v));
             }
           })
-          .join("+") +
-        ")";
+          .join('+') +
+        ')';
       continue;
     }
     const val: TemplateNode = attr.value[0];
     switch (val.type) {
-      case "MustacheTag":
-        result[attr.name] = "(" + val.expression + ")";
+      case 'MustacheTag':
+        result[attr.name] = '(' + val.expression + ')';
         continue;
-      case "Text":
+      case 'Text':
         result[attr.name] = JSON.stringify(getTextFromAttribute(val));
         continue;
       default:
         console.log(val);
-        throw new Error("UNKNOWN V");
+        throw new Error('UNKNOWN V');
     }
   }
   return result;
@@ -84,24 +86,20 @@ function getTextFromAttribute(attr: any): string {
     return attr.data;
   }
   console.log(attr);
-  throw new Error("UNKNOWN attr");
+  throw new Error('UNKNOWN attr');
 }
 
 function generateAttributes(attrs: Record<string, string>): string {
-  let result: string = "{";
+  let result: string = '{';
   for (const [key, val] of Object.entries(attrs)) {
-    result += JSON.stringify(key) + ":" + val + ",";
+    result += JSON.stringify(key) + ':' + val + ',';
   }
-  return result + "}";
+  return result + '}';
 }
 
-function getComponentWrapper(
-  _name: string,
-  { type, url }: { type: string; url: string },
-  { resolve }: CompileOptions
-) {
-  const [name, kind] = _name.split(":");
-  switch(type) {
+function getComponentWrapper(_name: string, { type, url }: { type: string; url: string }, { resolve }: CompileOptions) {
+  const [name, kind] = _name.split(':');
+  switch (type) {
     case '.hmx': {
       if (kind) {
         throw new Error(`HMX does not support :${kind}`);
@@ -112,11 +110,9 @@ function getComponentWrapper(
       };
     }
     case '.jsx': {
-      if (kind === "dynamic") {
+      if (kind === 'dynamic') {
         return {
-          wrapper: `__preact_dynamic(${name}, new URL(${JSON.stringify(
-            url.replace(/\.[^.]+$/, ".js")
-          )}, \`http://TEST\${import.meta.url}\`).pathname, '${resolve('preact')}')`,
+          wrapper: `__preact_dynamic(${name}, new URL(${JSON.stringify(url.replace(/\.[^.]+$/, '.js'))}, \`http://TEST\${import.meta.url}\`).pathname, '${resolve('preact')}')`,
           wrapperImport: `import {__preact_dynamic} from '${internalImport('render/preact.js')}';`,
         };
       } else {
@@ -127,26 +123,22 @@ function getComponentWrapper(
       }
     }
     case '.svelte': {
-      if(kind === "dynamic") {
+      if (kind === 'dynamic') {
         return {
-          wrapper: `__svelte_dynamic(${name}, new URL(${JSON.stringify(
-            url.replace(/\.[^.]+$/, ".svelte.js")
-          )}, \`http://TEST\${import.meta.url}\`).pathname)`,
+          wrapper: `__svelte_dynamic(${name}, new URL(${JSON.stringify(url.replace(/\.[^.]+$/, '.svelte.js'))}, \`http://TEST\${import.meta.url}\`).pathname)`,
           wrapperImport: `import {__svelte_dynamic} from '${internalImport('render/svelte.js')}';`,
         };
       } else {
         return {
           wrapper: `__svelte_static(${name})`,
-          wrapperImport: `import {__svelte_static} from '${internalImport('render/svelte.js')}';`
+          wrapperImport: `import {__svelte_static} from '${internalImport('render/svelte.js')}';`,
         };
       }
     }
     case '.vue': {
-      if(kind === "dynamic") {
+      if (kind === 'dynamic') {
         return {
-          wrapper: `__vue_dynamic(${name}, new URL(${JSON.stringify(
-            url.replace(/\.[^.]+$/, ".vue.js")
-          )}, \`http://TEST\${import.meta.url}\`).pathname, '${resolve('vue')}')`,
+          wrapper: `__vue_dynamic(${name}, new URL(${JSON.stringify(url.replace(/\.[^.]+$/, '.vue.js'))}, \`http://TEST\${import.meta.url}\`).pathname, '${resolve('vue')}')`,
           wrapperImport: `import {__vue_dynamic} from '${internalImport('render/vue.js')}';`,
         };
       } else {
@@ -154,42 +146,44 @@ function getComponentWrapper(
           wrapper: `__vue_static(${name})`,
           wrapperImport: `
             import {__vue_static} from '${internalImport('render/vue.js')}';
-          `
+          `,
         };
       }
     }
   }
-  throw new Error("Unknown Component Type: " + name);
+  throw new Error('Unknown Component Type: ' + name);
 }
 
 function runPreparser(template: string): string {
-  const doc = preparse(template, tag => {
-    if(tag.tagName === 'script') {
+  const doc = preparse(template, (tag) => {
+    if (tag.tagName === 'script') {
       let isSetup = false;
-      for(let attr of tag.attributes) {
-        if(attr.name === 'hmx' && attr.value === 'setup') {
+      for (let attr of tag.attributes) {
+        if (attr.name === 'hmx' && attr.value === 'setup') {
           isSetup = true;
           break;
         }
       }
-      if(isSetup && typeof tag.children[0] === 'string') {
+      if (isSetup && typeof tag.children[0] === 'string') {
         debugger;
 
         const content = tag.children[0];
         let { code } = transformSync(content, {
-          loader: "tsx",
-          jsxFactory: "h",
-          jsxFragment: "Fragment",
-          charset: "utf8",
+          loader: 'tsx',
+          jsxFactory: 'h',
+          jsxFragment: 'Fragment',
+          charset: 'utf8',
         });
         return {
           ...tag,
-          children: [{
-            type: 0,
-            data: code,
-            start: 0,
-            end: 0
-          }]
+          children: [
+            {
+              type: 0,
+              data: code,
+              start: 0,
+              end: 0,
+            },
+          ],
         };
       }
     }
@@ -209,9 +203,9 @@ async function convertHmxToJsx(template: string, compileOptions: CompileOptions)
 
   const ast = parse(template, {});
   // Todo: Validate that `h` and `Fragment` aren't defined in the script
-  const script = ast.instance ? astring.generate(ast.instance.content) : "";
+  const script = ast.instance ? astring.generate(ast.instance.content) : '';
 
-  const [scriptImports] = eslexer.parse(script, "optional-sourcename");
+  const [scriptImports] = eslexer.parse(script, 'optional-sourcename');
   const components = Object.fromEntries(
     scriptImports.map((imp) => {
       const componentType = path.posix.extname(imp.n!);
@@ -222,7 +216,7 @@ async function convertHmxToJsx(template: string, compileOptions: CompileOptions)
 
   const additionalImports = new Set<string>();
   let items: { name: string; jsx: string }[] = [];
-  let mode: "JSX" | "SCRIPT" | "SLOT" = "JSX";
+  let mode: 'JSX' | 'SCRIPT' | 'SLOT' = 'JSX';
   let collectionItem: { name: string; jsx: string } | undefined;
   let currentItemName: string | undefined;
   let currentDepth = 0;
@@ -230,14 +224,14 @@ async function convertHmxToJsx(template: string, compileOptions: CompileOptions)
   walk(ast.html as any, {
     // @ts-ignore
     enter(node: TemplateNode, parent, prop, index) {
-    //   console.log("enter", node.type);
+      //   console.log("enter", node.type);
       switch (node.type) {
-        case "MustacheTag":
+        case 'MustacheTag':
           let { code } = transformSync(node.expression, {
-            loader: "jsx",
-            jsxFactory: "h",
-            jsxFragment: "Fragment",
-            charset: "utf8",
+            loader: 'jsx',
+            jsxFactory: 'h',
+            jsxFragment: 'Fragment',
+            charset: 'utf8',
           });
 
           let matches: RegExpExecArray[] = [];
@@ -249,142 +243,127 @@ async function convertHmxToJsx(template: string, compileOptions: CompileOptions)
           }
           for (const match of matches.reverse()) {
             const name = match[1];
-            const [componentName, componentKind] = name.split(":");
+            const [componentName, componentKind] = name.split(':');
             if (!components[componentName]) {
               throw new Error(`Unknown Component: ${componentName}`);
             }
-            const { wrapper, wrapperImport } = getComponentWrapper(
-              name,
-              components[componentName],
-              compileOptions
-            );
+            const { wrapper, wrapperImport } = getComponentWrapper(name, components[componentName], compileOptions);
             if (wrapperImport) {
               additionalImports.add(wrapperImport);
             }
             if (wrapper !== name) {
-              code =
-                code.slice(0, match.index + 2) +
-                wrapper +
-                code.slice(match.index + match[0].length - 1);
+              code = code.slice(0, match.index + 2) + wrapper + code.slice(match.index + match[0].length - 1);
             }
           }
-          collectionItem!.jsx += `,(${code.trim().replace(/\;$/, "")})`;
+          collectionItem!.jsx += `,(${code.trim().replace(/\;$/, '')})`;
           return;
-        case "Slot":
-          mode = "SLOT";
+        case 'Slot':
+          mode = 'SLOT';
           collectionItem!.jsx += `,child`;
           return;
-        case "Comment":
+        case 'Comment':
           return;
-        case "Fragment":
+        case 'Fragment':
           // Ignore if its the top level fragment
           // This should be cleaned up, but right now this is how the old thing worked
           if (!collectionItem) {
             return;
           }
-        case "InlineComponent":
-        case "Element":
+        case 'InlineComponent':
+        case 'Element':
           const name: string = node.name;
           if (!name) {
             console.log(node);
-            throw new Error("AHHHH");
+            throw new Error('AHHHH');
           }
           const attributes = getAttributes(node.attributes);
           currentDepth++;
           currentItemName = name;
           if (!collectionItem) {
-            collectionItem = { name, jsx: "" };
+            collectionItem = { name, jsx: '' };
             items.push(collectionItem);
           }
-          collectionItem.jsx += collectionItem.jsx === "" ? "" : ",";
+          collectionItem.jsx += collectionItem.jsx === '' ? '' : ',';
           const COMPONENT_NAME_SCANNER = /^[A-Z]/;
           if (!COMPONENT_NAME_SCANNER.test(name)) {
-            collectionItem.jsx += `h("${name}", ${
-              attributes ? generateAttributes(attributes) : "null"
-            }`;
+            collectionItem.jsx += `h("${name}", ${attributes ? generateAttributes(attributes) : 'null'}`;
             return;
           }
           if (name === 'Component') {
             collectionItem.jsx += `h(Fragment, null`;
             return;
           }
-          const [componentName, componentKind] = name.split(":");
+          const [componentName, componentKind] = name.split(':');
           const componentImportData = components[componentName];
           if (!componentImportData) {
             throw new Error(`Unknown Component: ${componentName}`);
           }
-          const { wrapper, wrapperImport } = getComponentWrapper(
-            name,
-            components[componentName],
-            compileOptions
-          );
+          const { wrapper, wrapperImport } = getComponentWrapper(name, components[componentName], compileOptions);
           if (wrapperImport) {
             additionalImports.add(wrapperImport);
           }
-          collectionItem.jsx += `h(${wrapper}, ${
-            attributes ? generateAttributes(attributes) : "null"
-          }`;
+          collectionItem.jsx += `h(${wrapper}, ${attributes ? generateAttributes(attributes) : 'null'}`;
           return;
-        case "Attribute": {
+        case 'Attribute': {
           this.skip();
           return;
         }
-        case "Text": {
+        case 'Text': {
           const text = getTextFromAttribute(node);
-          if (mode === "SLOT") {
+          if (mode === 'SLOT') {
             return;
           }
           if (!text.trim()) {
             return;
           }
           if (!collectionItem) {
-            throw new Error("Not possible! TEXT:" + text);
+            throw new Error('Not possible! TEXT:' + text);
           }
-          if (currentItemName === "script" || currentItemName === "code") {
-            collectionItem.jsx += "," + JSON.stringify(text);
+          if (currentItemName === 'script' || currentItemName === 'code') {
+            collectionItem.jsx += ',' + JSON.stringify(text);
             return;
           }
-          collectionItem.jsx += "," + JSON.stringify(text);
+          collectionItem.jsx += ',' + JSON.stringify(text);
           return;
         }
         default:
           console.log(node);
-          throw new Error("Unexpected node type: " + node.type);
+          throw new Error('Unexpected node type: ' + node.type);
       }
     },
     // @ts-ignore
     leave(node: TemplateNode, parent, prop, index) {
-    //   console.log("leave", node.type);
+      //   console.log("leave", node.type);
       switch (node.type) {
-        case "Text":
-        case "MustacheTag":
-        case "Attribute":
-        case "Comment":
+        case 'Text':
+        case 'MustacheTag':
+        case 'Attribute':
+        case 'Comment':
           return;
-        case "Slot": {
+        case 'Slot': {
           const name = node.name;
-          if (name === "slot") {
-            mode = "JSX";
+          if (name === 'slot') {
+            mode = 'JSX';
           }
           return;
         }
-        case "Fragment":
+        case 'Fragment':
           if (!collectionItem) {
             return;
           }
-        case "Element":
-        case "InlineComponent":
+        case 'Element':
+        case 'InlineComponent':
           if (!collectionItem) {
-            throw new Error("Not possible! CLOSE " + node.name);
+            throw new Error('Not possible! CLOSE ' + node.name);
           }
-          collectionItem.jsx += ")";
+          collectionItem.jsx += ')';
           currentDepth--;
           if (currentDepth === 0) {
             collectionItem = undefined;
           }
           return;
         default:
-          throw new Error("Unexpected node type: " + node.type);
+          throw new Error('Unexpected node type: ' + node.type);
       }
     },
   });
@@ -398,7 +377,7 @@ async function convertHmxToJsx(template: string, compileOptions: CompileOptions)
   */
 
   return {
-    script: script + "\n" + Array.from(additionalImports).join("\n"),
+    script: script + '\n' + Array.from(additionalImports).join('\n'),
     items,
   };
 }
@@ -427,36 +406,31 @@ async function convertMdToJsx(contents: string, compileOptions: CompileOptions)
     },
   };
 
-  return convertHmxToJsx(`<script hmx="setup">export function setup() {
+  return convertHmxToJsx(
+    `<script hmx="setup">export function setup() {
       return ${JSON.stringify(setupData)};
-  }</script><head></head><body>${mdHtml}</body>`, compileOptions);
+  }</script><head></head><body>${mdHtml}</body>`,
+    compileOptions
+  );
 }
 
-async function transformFromSource(
-  contents: string,
-  filename: string,
-  compileOptions: CompileOptions
-): Promise<ReturnType<typeof convertHmxToJsx>> {
+async function transformFromSource(contents: string, filename: string, compileOptions: CompileOptions): Promise<ReturnType<typeof convertHmxToJsx>> {
   switch (path.extname(filename)) {
-    case ".hmx":
+    case '.hmx':
       return convertHmxToJsx(contents, compileOptions);
-    case ".md":
+    case '.md':
       return convertMdToJsx(contents, compileOptions);
     default:
-      throw new Error("Not Supported!");
+      throw new Error('Not Supported!');
   }
 }
 
 export async function compilePage(source: string, filename: string, opts: CompileOptions = defaultCompileOptions) {
   const sourceJsx = await transformFromSource(source, filename, opts);
-  const headItem = sourceJsx.items.find((item) => item.name === "head");
-  const bodyItem = sourceJsx.items.find((item) => item.name === "body");
-  const headItemJsx = !headItem
-    ? "null"
-    : headItem.jsx.replace('"head"', 'isRoot ? "head" : Fragment');
-  const bodyItemJsx = !bodyItem
-    ? "null"
-    : bodyItem.jsx.replace('"head"', 'isRoot ? "body" : Fragment');
+  const headItem = sourceJsx.items.find((item) => item.name === 'head');
+  const bodyItem = sourceJsx.items.find((item) => item.name === 'body');
+  const headItemJsx = !headItem ? 'null' : headItem.jsx.replace('"head"', 'isRoot ? "head" : Fragment');
+  const bodyItemJsx = !bodyItem ? 'null' : bodyItem.jsx.replace('"head"', 'isRoot ? "body" : Fragment');
 
   const modJsx = `
 ${sourceJsx.script}
@@ -473,9 +447,7 @@ export function body({title, description, props}, child, isRoot) { return (${bod
 
 export async function compileComponent(source: string, filename: string, opts: CompileOptions = defaultCompileOptions) {
   const sourceJsx = await transformFromSource(source, filename, opts);
-  const componentJsx = sourceJsx.items.find(
-    (item) => item.name === "Component"
-  );
+  const componentJsx = sourceJsx.items.find((item) => item.name === 'Component');
   if (!componentJsx) {
     throw new Error(`${filename} <Component> expected!`);
   }