Add a few macros examples

2 files changed, 28 insertions, 0 deletions

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();