diff options
| author |  Jarred Sumner <jarred@jarredsumner.com>
| 2021-09-27 01:33:15 -0700 |
|---|---|---|
| committer | Jarred Sumner <jarred@jarredsumner.com>
| 2021-09-27 01:33:15 -0700 |
| commit | 86109dcfd008baf8778cc221cc25f90dd77121e9 (patch) | |
| tree | f04bf172b671fcfa09b6c53a4f9d1143e405bb0b /examples | |
| parent | adf22db8b675c482c7f0a5ac4e659ea5374aa8fc (diff) | |
| download | bun-86109dcfd008baf8778cc221cc25f90dd77121e9.tar.gz bun-86109dcfd008baf8778cc221cc25f90dd77121e9.tar.zst bun-86109dcfd008baf8778cc221cc25f90dd77121e9.zip | |
Add a few macros examples
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/macros/components/example.jsx | 17 | ||||
| -rw-r--r-- | examples/macros/components/index.tsx | 11 | ||||
| -rw-r--r-- | examples/macros/matchInFile.tsx | 20 | ||||
| -rw-r--r-- | examples/macros/mystery-box.tsx | 15 | ||||
| -rw-r--r-- | examples/macros/now.tsx | 10 | ||||
| -rw-r--r-- | examples/macros/package.json | 12 | ||||
| -rw-r--r-- | examples/macros/public/index.html | 14 | ||||
| -rw-r--r-- | examples/macros/styles.css | 26 | ||||
| -rw-r--r-- | examples/macros/tsconfig.json | 7 |
9 files changed, 117 insertions, 15 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(); 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" + } +} |