feat: enable ipv4 in dev server

compiler/build.ts

@@ -24,6 +24,7 @@ export async function RollupBuild({
   generate = "dom",
   plugins = [],
   production = false,
+  ipv4,
 }: RollupBuildProps) {
   const base = toFileUrl(Deno.cwd()).href;
 
@@ -35,7 +36,6 @@ export async function RollupBuild({
           maps: "./import_map.json",
         }),
         ...plugins,
-        (await DevServer())!,
         Svelte({ generate }),
         postcss(),
         terser(),
@@ -45,7 +45,7 @@ export async function RollupBuild({
           maps: "./import_map.json",
         }),
         ...plugins,
-        (await DevServer())!,
+        (await DevServer(ipv4))!,
         Svelte({ generate, dev: true }),
         postcss(),
       ];

compiler/types.ts

@@ -112,4 +112,5 @@ export interface RollupBuildProps {
   generate?: "dom" | "ssg" | "ssr";
   plugins?: Plugin[];
   production?: boolean;
+  ipv4?: string;
 }

src/cli/commands/start.ts

@@ -26,7 +26,7 @@ export default async function StartDev() {
     .split(Deno.build.os === "windows" ? "\\" : "/")
     .pop()!;
 
-  const ip = await ipv4(port);
+  const { str: ip, ipv4: ipV4 } = await ipv4(port);
   const localNet = ip
     ? `${colors.bold("On Your Network:")}  ${ip}:${colors.bold(port.toString())}`
     : "";
@@ -37,6 +37,7 @@ export default async function StartDev() {
     dir: outDir,
     generate: mode,
     plugins,
+    ipv4: ipV4!,
   });
 
   if (mode === "ssg" || mode === "ssr") {
@@ -51,6 +52,7 @@ export default async function StartDev() {
       plugins,
       dirName,
       localNet,
+      ipv4: ipV4!,
     });
   }
 
@@ -83,6 +85,7 @@ export default async function StartDev() {
         dir: outDir,
         generate: mode,
         plugins,
+        ipv4: ipV4!,
       });
     });
   }

src/dev_server/hotReloadingClient.js

@@ -1,8 +1,10 @@
-export default () => {
+export default (__SNEL__HOST__) => {
   const __SNEL__HOT__PORT__ = Number(window.location.port) + 1;
 
   if ("WebSocket" in window) {
-    const socket = new WebSocket(`ws://localhost:${__SNEL__HOT__PORT__}`);
+    const socket = new WebSocket(
+      `ws://${__SNEL__HOST__}:${__SNEL__HOT__PORT__}`
+    );
 
     const css = `p code{border-radius:2px;background-color:#eee;color:#111}#editing,#highlighting{margin:10px;padding:10px;border:0;width:calc(100% - 32px);height:150px}#editing,#highlighting,#highlighting *{font-size:15pt;font-family:monospace;line-height:20pt}#editing,#highlighting{position:absolute;top:0;left:0}#editing{z-index:1}#highlighting{z-index:0}#editing{color:transparent;background:transparent;caret-color:white}#editing,#highlighting{overflow:auto}#editing{resize:none}code[class*="language-"],pre[class*="language-"]{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:.4em .8em;margin:.5em 0;overflow:auto;background:#242829;border-radius:5px}code[class*="language-"]{background:#242829;color:white}:not(pre)>code[class*="language-"]{padding:.2em;border-radius:.3em;box-shadow:none;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#aaa}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#0cf}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin{color:yellow}.token.operator,.token.entity,.token.url,.language-css .token.string,.token.variable,.token.inserted{color:yellowgreen}.token.atrule,.token.attr-value,.token.keyword{color:deeppink}.token.regex,.token.important{color:orange}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red}pre.diff-highlight.diff-highlight>code .token.deleted:not(.prefix),pre>code.diff-highlight.diff-highlight .token.deleted:not(.prefix){background-color:rgba(255,0,0,0.3);display:inline}pre.diff-highlight.diff-highlight>code .token.inserted:not(.prefix),pre>code.diff-highlight.diff-highlight .token.inserted:not(.prefix){background-color:rgba(0,255,128,0.3);display:inline}`;
 
@@ -69,15 +71,8 @@ export default () => {
             "background:transparent"
           );
         } else {
-          const {
-            type,
-            message,
-            file,
-            filepath,
-            code,
-            errorName,
-            start,
-          } = JSON.parse(JSON.parse(event.data).message);
+          const { type, message, file, filepath, code, errorName, start } =
+            JSON.parse(JSON.parse(event.data).message);
 
           const styles = document.createElement("style");
           styles.innerText = css;
@@ -95,7 +90,9 @@ export default () => {
                 </h1>
                 <hr />
                 <div>
-                  <span>/${file.split("/").pop()}: ${message.toString()} ( ${start?.line}:${start?.column} )</span>
+                  <span>/${file.split("/").pop()}: ${message.toString()} ( ${
+            start?.line
+          }:${start?.column} )</span>
                   <br />
                 </div>
                 <br>

src/dev_server/server.ts

@@ -20,6 +20,7 @@ export interface ServeOptions<T = unknown> {
   verbose: boolean;
   open: boolean;
   historyApiFallback?: string | boolean;
+  ipv4?: string;
 }
 
 export type Defined<T> = Exclude<T, undefined>;
@@ -60,6 +61,7 @@ class BuildServer {
     defaultType: "text/plain",
     verbose: true,
     onListening() {},
+    ipv4: undefined,
   };
 
   server: Server;
@@ -97,7 +99,7 @@ class BuildServer {
       headers.set("Content-Type", "application/javascript");
 
       const response: Response = {
-        body: `(${HotClient.toString()})()`,
+        body: `(${HotClient.toString()})("${this.options.ipv4 ?? "localhost"}")`,
         headers,
       }
 

src/server_side/BuilderWorker.js

@@ -6,7 +6,7 @@ import { Application } from "./imports/oak.ts";
 import { htmlBody } from "./templates.ts";
 
 self.onmessage = async (event) => {
-  const { port, clientPath, path, mode, start, end } = event.data;
+  const { port, clientPath, path, mode, start, end, ipv4 } = event.data;
 
   const serverSide = new Application();
   const controller = new AbortController();
@@ -31,7 +31,7 @@ self.onmessage = async (event) => {
           } if (request.url.pathname === "/__SNEL__HOT__RELOADING.js") {
             response.headers.set("content-type", "application/javascript");
 
-            const client = `(${ClientHot.toString()})();`
+            const client = `(${ClientHot.toString()})("${(ipv4) ?? "localhost" }");`
 
             response.status = 200;
             response.body = client;

src/server_side/server.ts

@@ -120,7 +120,8 @@ export async function DevServer({
   outDir,
   plugins,
   dirName,
-   localNet
+  localNet,
+  ipv4
 }: DevServerProps) {
 
   const compiler = new Worker(
@@ -144,7 +145,8 @@ export async function DevServer({
     port: Number(port),
     path,
     mode,
-    start: true
+    start: true,
+    ipv4
   });
 
   serverLog({ port, dirName, localNet });

src/server_side/types.ts

@@ -31,4 +31,5 @@ export interface DevServerProps extends Omit<ServerProps, "dist">{
   plugins: Plugin[];
   dirName: string;
   localNet: string;
+  ipv4?: string;
 }

src/shared/internal_plugins.ts

@@ -15,7 +15,7 @@ export { terser } from "https://deno.land/x/[email protected]+0.18.2/plugins/terser
 export { default as Svelte } from "./bundler.js";
 export * from "./import_map.ts";
 
-export async function DevServer() {
+export async function DevServer(ipv4?: string) {
   const { port, mode } = await loadConfig<snelConfig>(
     await resolverConfigFile()
   )!;
@@ -28,6 +28,7 @@ export async function DevServer() {
         host: "0.0.0.0",
         verbose: false,
         historyApiFallback: true,
+        ipv4,
       });
     } catch (error) {
       if (!(error instanceof Deno.errors.AddrInUse)) {

src/shared/utils.ts

@@ -83,12 +83,16 @@ export async function getIP() {
 export async function ipv4(port: string | number) {
   const ipv4 = await getIP()!;
 
-  return ipv4?.split(" ").length === 1
-    ? `http://${ipv4}`
-    : ipv4
-        ?.split(" ")
-        .map((ip) => `http://${ip}:${port}`)
-        .join(" or ");
+  return {
+    str:
+      ipv4?.split(" ").length === 1
+        ? `http://${ipv4}`
+        : ipv4
+            ?.split(" ")
+            .map((ip) => `http://${ip}:${port}`)
+            .join(" or "),
+    ipv4,
+  };
 }
 
 export function showHelp() {
@@ -209,18 +213,18 @@ export async function resolverConfigFile(): Promise<string> {
   const js = await exists("./snel.config.js");
 
   if (js && ts) {
-    throw new Error(colors.red("you only can have one snel config file, snel.config.js or snel.config.ts")).message;
-  }
-
-  else if (js) {
+    throw new Error(
+      colors.red(
+        "you only can have one snel config file, snel.config.js or snel.config.ts"
+      )
+    ).message;
+  } else if (js) {
     return "./snel.config.js";
-  }
-
-  else if (ts) {
+  } else if (ts) {
     return "./snel.config.ts";
-  }
-
-  else {
-    throw new Error(colors.red("can't load snel config file, not found in the root project")).message;
+  } else {
+    throw new Error(
+      colors.red("can't load snel config file, not found in the root project")
+    ).message;
   }
 }