Fix up examples

examples/macros/components/covid19.tsx

@@ -0,0 +1,33 @@
+import { fetchCSV } from "macro:fetchCSV";
+
+export const Covid19 = () => {
+  const rows = fetchCSV(
+    "https://covid19.who.int/WHO-COVID-19-global-data.csv",
+    {
+      last: 100,
+      columns: ["New_cases", "Date_reported", "Country"],
+    }
+  );
+
+  return (
+    <div>
+      <h2>Covid-19</h2>
+      <h6>last {rows.length} updates from the WHO</h6>
+      <div className="Table">
+        <div className="Header">
+          <div className="Heading">New Cases</div>
+          <div className="Heading">Date</div>
+          <div className="Heading">Country</div>
+        </div>
+
+        {rows.map((row, index) => (
+          <div className="Row" key={index}>
+            <div className="Column">{row[0]}</div>
+            <div className="Column">{row[1]}</div>
+            <div className="Column">{row[2]}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

examples/macros/components/index.tsx

@@ -5,6 +5,7 @@ import { IPAddresses } from "./example";
 const Start = function () {
   const root = document.createElement("div");
   document.body.appendChild(root);
+
   ReactDOM.render(<IPAddresses />, root);
 };
 

examples/macros/fetchCSV.tsx

@@ -1,4 +1,12 @@
 import Pappa from "papaparse";
+// Example usage:
+// const rows = fetchCSV(
+//   "https://covid19.who.int/WHO-COVID-19-global-data.csv",
+//   {
+//     last: 100,
+//     columns: ["New_cases", "Date_reported", "Country"],
+//   }
+// );
 export async function fetchCSV(callExpression) {
   console.time("fetchCSV Total");
   const [

examples/macros/matchInFile.tsx

@@ -1,8 +1,11 @@
 // macro code
-export function matchInFile(callExpression) {
+export function matchInFile(callExpression: BunAST.CallExpression) {
   const [filePathNode, matcherNode] = callExpression.arguments;
-  const filePath: string = filePathNode.get();
-  const matcher: RegExp = matcherNode.get();
+  let filePath: string;
+  filePath = filePathNode.get();
+
+  let matcher: RegExp;
+  matcher = matcherNode.get();
   const file: string = Bun.readFile(Bun.cwd + filePath);
 
   return (
@@ -18,3 +21,81 @@ export function matchInFile(callExpression) {
     </array>
   );
 }
+
+export declare namespace BunAST {
+  export abstract class ASTNode {
+    constructor(...args: any);
+  }
+
+  export interface ASTElement<
+    P = any,
+    T extends string | JSXElementConstructor<any> =
+      | string
+      | JSXElementConstructor<any>
+  > {
+    type: T;
+    props: P;
+    key: Key | null;
+  }
+
+  export abstract class Expression extends ASTNode {}
+
+  export abstract class CallExpression extends Expression {
+    arguments: AnyExpression[];
+    name: string;
+    target: AnyExpression;
+  }
+
+  export abstract class StringExpression extends Expression {
+    get(): string;
+    value: string;
+  }
+
+  export interface StringExpressionElementProps {
+    value: string;
+  }
+
+  export type StringExpressionElement = ASTElement<
+    StringExpressionElementProps,
+    StringExpression
+  >;
+
+  export abstract class RegExpExpression extends Expression {
+    get(): RegExp;
+
+    flags: string;
+    pattern: string;
+    raw: string;
+  }
+
+  export type AnyExpression =
+    | CallExpression
+    | StringExpression
+    | RegExpExpression;
+}
+
+declare global {
+  namespace JSX {
+    interface Element extends BunAST.ASTElement<any, BunAST.AnyExpression> {}
+    interface ElementClass extends BunAST.Expression {}
+    interface ElementAttributesProperty {
+      props: {};
+    }
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+
+    // // We can't recurse forever because `type` can't be self-referential;
+    // // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa
+    // type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+    //     ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U>
+    //         ? ReactManagedAttributes<U, P>
+    //         : ReactManagedAttributes<T, P>
+    //     : ReactManagedAttributes<C, P>;
+
+    interface IntrinsicElements {
+      // HTML
+      string: BunAST.StringExpressionElement;
+    }
+  }
+}

examples/macros/package.json

@@ -5,8 +5,13 @@
   "license": "MIT",
   "dependencies": {
     "moment": "^2.29.1",
+    "papaparse": "^5.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-refresh": "^0.10.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9"
   }
 }

examples/macros/styles.css

@@ -18,9 +18,30 @@ body {
   font-family: monospace;
 }
 
-.Lines {
+.Table {
+  display: grid;
+  width: fit-content;
+}
+
+.Row,
+.Header {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  text-align: right;
+
+  column-gap: 2rem;
+}
+
+.Heading {
+  text-align: right;
+}
+
+.Header {
+  border-bottom: 1px solid rgb(0, 255, 0);
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+}
+
+.Heading:nth-of-type(2) {
   text-align: left;
-  margin: 0 auto;
-  max-width: fit-content;
-  line-height: 1.5;
 }