From 86109dcfd008baf8778cc221cc25f90dd77121e9 Mon Sep 17 00:00:00 2001
From: Jarred Sumner <jarred@jarredsumner.com>
Date: Mon, 27 Sep 2021 01:33:15 -0700
Subject: Add a few macros examples

---
 examples/macros/components/example.jsx | 17 +++++++++++++++++
 examples/macros/components/index.tsx   | 11 +++++++++++
 examples/macros/matchInFile.tsx        | 20 ++++++++++++++++++++
 examples/macros/mystery-box.tsx        | 15 ---------------
 examples/macros/now.tsx                | 10 ++++++++++
 examples/macros/package.json           | 12 ++++++++++++
 examples/macros/public/index.html      | 14 ++++++++++++++
 examples/macros/styles.css             | 26 ++++++++++++++++++++++++++
 examples/macros/tsconfig.json          |  7 +++++++
 9 files changed, 117 insertions(+), 15 deletions(-)
 create mode 100644 examples/macros/components/example.jsx
 create mode 100644 examples/macros/components/index.tsx
 create mode 100644 examples/macros/matchInFile.tsx
 delete mode 100644 examples/macros/mystery-box.tsx
 create mode 100644 examples/macros/now.tsx
 create mode 100644 examples/macros/package.json
 create mode 100644 examples/macros/public/index.html
 create mode 100644 examples/macros/styles.css
 create mode 100644 examples/macros/tsconfig.json

(limited to 'examples')

diff --git a/examples/macros/components/example.jsx b/examples/macros/components/example.jsx
new file mode 100644
index 000000000..ad80ce9e1
--- /dev/null
+++ b/examples/macros/components/example.jsx
@@ -0,0 +1,17 @@
+// source code
+import { matchInFile } from "macro:matchInFile";
+
+export const IPAddresses = () => (
+  <div>
+    <h2>recent ip addresses</h2>
+    <div className="Lines">
+      {matchInFile("access.log", /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}/).map(
+        (ipAddress, index) => (
+          <div className="Line" key={index}>
+            {ipAddress}
+          </div>
+        )
+      )}
+    </div>
+  </div>
+);
diff --git a/examples/macros/components/index.tsx b/examples/macros/components/index.tsx
new file mode 100644
index 000000000..6c3e39be7
--- /dev/null
+++ b/examples/macros/components/index.tsx
@@ -0,0 +1,11 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
+import { IPAddresses } from "./example";
+
+const Start = function () {
+  const root = document.createElement("div");
+  document.body.appendChild(root);
+  ReactDOM.render(<IPAddresses />, root);
+};
+
+Start();
diff --git a/examples/macros/matchInFile.tsx b/examples/macros/matchInFile.tsx
new file mode 100644
index 000000000..a73f7ee8b
--- /dev/null
+++ b/examples/macros/matchInFile.tsx
@@ -0,0 +1,20 @@
+// macro code
+export function matchInFile(callExpression) {
+  const [filePathNode, matcherNode] = callExpression.arguments;
+  const filePath: string = filePathNode.get();
+  const matcher: RegExp = matcherNode.get();
+  const file: string = Bun.readFile(Bun.cwd + filePath);
+
+  return (
+    <array>
+      {file
+        .split("\n")
+        .map((line) => line.match(matcher))
+        .filter(Boolean)
+        .reverse()
+        .map((line) => (
+          <string value={line[0]} />
+        ))}
+    </array>
+  );
+}
diff --git a/examples/macros/mystery-box.tsx b/examples/macros/mystery-box.tsx
deleted file mode 100644
index 9e72ee1c0..000000000
--- a/examples/macros/mystery-box.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// macro code:
-export function mysteryBox(node) {
-  const dice = Math.round(Math.random() * 100);
-  if (dice < 25) {
-    return <number value={5} />;
-  } else if (dice < 50) {
-    return <true />;
-  } else if (dice < 75) {
-    return <false />;
-  } else if (dice < 90) {
-    return <string value="a string" />;
-  } else {
-    return <string value={"a very rare string " + dice.toString(10)} />;
-  }
-}
diff --git a/examples/macros/now.tsx b/examples/macros/now.tsx
new file mode 100644
index 000000000..d5a9e7912
--- /dev/null
+++ b/examples/macros/now.tsx
@@ -0,0 +1,10 @@
+import moment from "moment";
+export function now(node) {
+  var fmt = "HH:mm:ss";
+  const args = node.arguments;
+  if (args[0] instanceof <string />) {
+    fmt = args[0].get();
+  }
+  const time = moment().format(fmt);
+  return <string value={time}></string>;
+}
diff --git a/examples/macros/package.json b/examples/macros/package.json
new file mode 100644
index 000000000..de4e26453
--- /dev/null
+++ b/examples/macros/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "macros",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "moment": "^2.29.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-refresh": "^0.10.0"
+  }
+}
diff --git a/examples/macros/public/index.html b/examples/macros/public/index.html
new file mode 100644
index 000000000..a2a985b72
--- /dev/null
+++ b/examples/macros/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Macro test</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="stylesheet" href="/styles.css" type="text/css" />
+  </head>
+
+  <body>
+    <script async type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/macros/styles.css b/examples/macros/styles.css
new file mode 100644
index 000000000..87f0ef1a8
--- /dev/null
+++ b/examples/macros/styles.css
@@ -0,0 +1,26 @@
+html {
+  font-size: 4rem;
+  margin: 0;
+  padding: 0;
+  background-color: black;
+
+  color: rgb(0, 255, 0);
+  font-family: "Courier";
+}
+
+body {
+  margin: 48px auto;
+  text-align: center;
+}
+
+.Line {
+  font-size: 0.5rem;
+  font-family: monospace;
+}
+
+.Lines {
+  text-align: left;
+  margin: 0 auto;
+  max-width: fit-content;
+  line-height: 1.5;
+}
diff --git a/examples/macros/tsconfig.json b/examples/macros/tsconfig.json
new file mode 100644
index 000000000..4a98f5cad
--- /dev/null
+++ b/examples/macros/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {},
+    "jsx": "preserve"
+  }
+}
-- 
cgit v1.2.3