1 files changed, 52 insertions, 33 deletions
diff --git a/src/http.ffi.mjs b/src/http.ffi.mjs
index d1989bf..aad5e3d 100644
--- a/src/http.ffi.mjs
+++ b/src/http.ffi.mjs
@@ -9,29 +9,14 @@ const root = Path.join(cwd, "build/dev/javascript");
 const toml = readFileSync(Path.join(cwd, "gleam.toml"), "utf-8");
 const name = toml.match(/name *= *"(.+)"/)[1];
 
-const html = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Lustre preview server</title>
-
-  <script type="module">
-    import { main } from "./${name}/${name}.mjs"
-
-    document.addEventListener("DOMContentLoaded", () => {
-      main();
-    });
-  </script>
-</head>
-<body>
-  <div data-lustre-app></div>
-</body>
-</html>`;
+let html;
 
 const server = Http.createServer((req, res) => {
-  res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, private');
-  res.setHeader('Pragma', 'no-cache');
+  res.setHeader(
+    "Cache-Control",
+    "no-store, no-cache, must-revalidate, private"
+  );
+  res.setHeader("Pragma", "no-cache");
 
   switch (true) {
     case req.url === "/": {
@@ -88,17 +73,51 @@ const server = Http.createServer((req, res) => {
   }
 });
 
-export const serve = (host, port, on_start, on_port_taken) => {
-  let tries = 1;
-  server.on("error", (error) => {
-    if (error.code === "EADDRINUSE") {
-      let is_first_try = tries === 1;
-      if (is_first_try) {
-        on_port_taken(port);
+export const serve = (
+  { host, port, include_styles },
+  on_start,
+  on_port_taken
+) => {
+  let is_first_try = true;
+
+  html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lustre preview server</title>
+
+  ${
+    include_styles
+      ? `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lustre-labs/ui/priv/styles.css">`
+      : ""
+  }
+
+  <script type="module">
+    import { main } from "./${name}/${name}.mjs"
+
+    document.addEventListener("DOMContentLoaded", () => {
+      main();
+    });
+  </script>
+</head>
+<body>
+  <div data-lustre-app></div>
+</body>
+</html>`;
+
+  server
+    .on("error", (error) => {
+      if (error.code === "EADDRINUSE") {
+        if (is_first_try) {
+          on_port_taken(port);
+          is_first_try = false;
+        }
+
+        server.listen(++port, host);
       }
-      tries++;
-      port++;
-      server.listen(port, host);
-    }
-  }).listen(port, host, () => { on_start(port) });
+    })
+    .listen(port, host, () => {
+      on_start(port);
+    });
 };