Add support for customized snowpack port

noahlh · May 28, 2024 · d425cfe · d425cfe
1 parent f6057c1
commit d425cfe
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 28 deletions.
diff --git a/src/celestite/config.cr b/src/celestite/config.cr
@@ -2,13 +2,14 @@ module Celestite
   class Config
     getter env : String
     getter port : Int32
+    getter snowpack_port : Int32
     getter engine : Celestite::Engine
     getter root_dir : String?
     getter component_dir : String?
     getter layout_dir : String?
     getter build_dir : String?
 
-    def initialize(@env = "development", @port = 4000, @engine = Celestite::Engine::Svelte, @root_dir = nil, @component_dir = nil, @layout_dir = nil, @build_dir = nil)
+    def initialize(@env = "development", @port = 4000, @snowpack_port = 8080, @engine = Celestite::Engine::Svelte, @root_dir = nil, @component_dir = nil, @layout_dir = nil, @build_dir = nil)
     end
   end
 end
diff --git a/src/celestite/renderer.cr b/src/celestite/renderer.cr
@@ -32,6 +32,7 @@ module Celestite
           common_args = String.build do |args|
             args << "NODE_ENV=#{@config.env} "
             args << "NODE_PORT=#{@config.port} " if @config.port
+            args << "SNOWPACK_PORT=#{@config.snowpack_port} " if @config.snowpack_port
             args << "ROOT_DIR=#{@config.root_dir} " if @config.root_dir
             args << "COMPONENT_DIR=#{@config.component_dir} " if @config.component_dir
             args << "LAYOUT_DIR=#{@config.layout_dir} " if @config.layout_dir

diff --git a/src/celestite/version.cr b/src/celestite/version.cr
@@ -1,3 +1,3 @@
 module Celestite
-  VERSION = "0.1.4"
+  VERSION = "0.1.5"
 end
diff --git a/src/svelte-scripts/Makefile b/src/svelte-scripts/Makefile
@@ -23,10 +23,10 @@ COMPONENT_FILES := $(wildcard $(COMPONENT_DIR_TRIMMED)/*/*.js $(COMPONENT_DIR_TR
 
 # Rules
 development:
-	NODE_PATH=$(NODE_PATH) NODE_ENV=$(NODE_ENV) NODE_PORT=$(NODE_PORT) ROOT_DIR=$(ROOT_DIR_TRIMMED) COMPONENT_DIR=$(COMPONENT_DIR_TRIMMED) LAYOUT_DIR=$(LAYOUT_DIR_TRIMMED) BUILD_DIR=$(BUILD_DIR_TRIMMED) node svelte-render-server
+	NODE_PATH=$(NODE_PATH) NODE_ENV=$(NODE_ENV) NODE_PORT=$(NODE_PORT) SNOWPACK_PORT=$(SNOWPACK_PORT) ROOT_DIR=$(ROOT_DIR_TRIMMED) COMPONENT_DIR=$(COMPONENT_DIR_TRIMMED) LAYOUT_DIR=$(LAYOUT_DIR_TRIMMED) BUILD_DIR=$(BUILD_DIR_TRIMMED) node svelte-render-server
 
 production:
-	NODE_PATH=$(NODE_PATH) NODE_ENV=$(NODE_ENV) NODE_PORT=$(NODE_PORT) ROOT_DIR=$(ROOT_DIR_TRIMMED) COMPONENT_DIR=$(COMPONENT_DIR_TRIMMED) LAYOUT_DIR=$(LAYOUT_DIR_TRIMMED) BUILD_DIR=$(BUILD_DIR_TRIMMED) node svelte-render-server
+	NODE_PATH=$(NODE_PATH) NODE_ENV=$(NODE_ENV) NODE_PORT=$(NODE_PORT) SNOWPACK_PORT=$(SNOWPACK_PORT) ROOT_DIR=$(ROOT_DIR_TRIMMED) COMPONENT_DIR=$(COMPONENT_DIR_TRIMMED) LAYOUT_DIR=$(LAYOUT_DIR_TRIMMED) BUILD_DIR=$(BUILD_DIR_TRIMMED) node svelte-render-server
 
 
 
diff --git a/src/svelte-scripts/svelte-render-server.js b/src/svelte-scripts/svelte-render-server.js
@@ -7,8 +7,7 @@ import pkg from "body-parser";
 const { json } = pkg;
 
 // Bring out yer environment vars...(*ding*)!
-const { NODE_ENV, NODE_PORT, ROOT_DIR, COMPONENT_DIR, LAYOUT_DIR, BUILD_DIR } =
-  process.env;
+const { NODE_ENV, NODE_PORT, SNOWPACK_PORT, ROOT_DIR, COMPONENT_DIR, LAYOUT_DIR, BUILD_DIR } = process.env;
 
 const dev = NODE_ENV == "development";
 
@@ -62,7 +61,7 @@ const clientConfig = createConfiguration({
   },
   devOptions: {
     hmr: true,
-    port: 8080,
+    port: parseInt(SNOWPACK_PORT, 10),
     open: "none",
     output: "stream",
   },
@@ -81,9 +80,7 @@ const clientConfig = createConfiguration({
 // Simple logging middleware
 function logger(req, res, next) {
   console.log(
-    `[node] ${req.method} ${req.path} ${res.statusCode} - ${(
-      performance.now() - req.startTime
-    ).toPrecision(3)}ms`
+    `[node] ${req.method} ${req.path} ${res.statusCode} - ${(performance.now() - req.startTime).toPrecision(3)}ms`
   );
   res.end();
 }
@@ -120,9 +117,7 @@ let svelteRenderHandler;
 
 clearCache();
 
-NODE_ENV == "production"
-  ? await build({ config: clientConfig })
-  : await startServer({ config: clientConfig });
+NODE_ENV == "production" ? await build({ config: clientConfig }) : await startServer({ config: clientConfig });
 
 const snowpackServer = await startServer({ config: serverConfig });
 const snowpackRuntime = snowpackServer.getServerRuntime();
@@ -133,20 +128,13 @@ svelteRenderHandler = initializeSvelteRenderHandler({
   env: NODE_ENV,
 });
 
-function initializeSvelteRenderHandler({
-  snowpackServer,
-  snowpackRuntime,
-  layoutFiles,
-  env,
-}) {
+function initializeSvelteRenderHandler({ snowpackServer, snowpackRuntime, layoutFiles, env }) {
   return async (req, res, next) => {
     const { pathname, layoutRequested } = parseUrl(req.url);
     const layout = getFile(layoutRequested, layoutFiles);
     let component;
 
-    let componentURL = snowpackServer.getUrlForFile(
-      join(COMPONENT_DIR, pathname)
-    );
+    let componentURL = snowpackServer.getUrlForFile(join(COMPONENT_DIR, pathname));
     let importedComponent;
 
     try {
@@ -184,7 +172,7 @@ function initializeSvelteRenderHandler({
     if (env == "development") {
       clientJs = (({ pathname, body }) => {
         return ` 
-          import App from "http://localhost:8080${pathname}.js";  
+          import App from "http://localhost:${SNOWPACK_PORT}${pathname}.js";  
           const app = new App({
             target: document.querySelector("#celestite-app"),
             hydrate: true,
@@ -203,8 +191,8 @@ function initializeSvelteRenderHandler({
       })({ pathname, body: req.body });
 
       injectClient = `
-        <script>window.HMR_WEBSOCKET_URL = 'ws://localhost:8080';</script>
-        <script type="module" src="http://localhost:8080/_snowpack/hmr-client.js"></script>
+        <script>window.HMR_WEBSOCKET_URL = 'ws://localhost:${SNOWPACK_PORT}';</script>
+        <script type="module" src="http://localhost:${SNOWPACK_PORT}/_snowpack/hmr-client.js"></script>
         <script type='module'>${clientJs}</script>
       `;
     } else {
@@ -259,7 +247,5 @@ polka()
   .post("*", startTimer, json({ limit: "50mb" }), svelteRenderHandler, logger)
   .listen(NODE_PORT, (err) => {
     if (err) console.error("error: ", err);
-    console.log(
-      `[node] Svelte SSR renderer listening in ${NODE_ENV} mode on port ${NODE_PORT}`
-    );
+    console.log(`[node] Svelte SSR renderer listening in ${NODE_ENV} mode on port ${NODE_PORT}`);
   });