0.0.13

examples/live-reload/src/pages/index.tsx

@@ -3,6 +3,6 @@ export default () => (
     <h1>Live Reload Demo</h1>
     <p>Run this with <code>bun run dev</code>, then edit this file.</p>
     <p>The browser will automatically refresh — no manual reload needed.</p>
-    <p class="hint">Try changing this text and saving!</p>
+    <p class="hint">OMG! Try changing this text and saving!</p>
   </section>
 )

examples/live-reload/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx",
+    "allowJs": true,
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "baseUrl": ".",
+    "paths": {
+      "#*": [
+        "src/*"
+      ]
+    },
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@because/hype",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "module": "src/index.tsx",
   "type": "module",
   "exports": {

src/index.tsx

@@ -146,6 +146,7 @@ export class Hype<
     // live reload endpoint (dev mode only)
     if (process.env.NODE_ENV !== 'production') {
       this.sse('/__hype/reload', () => {})
+      this.get('/__hype/ping', c => c.text('ok'))
     }
 
     // healthcheck

src/layout.tsx

@@ -23,7 +23,7 @@ const Layout: FC = ({ children, title, props }) =>
     </body>
   </html>
 
-const RELOAD_SCRIPT = '{let c=false;const e=new EventSource("/__hype/reload");e.onopen=()=>{if(c)location.reload();c=true};e.onerror=()=>{e.close();let d=50;setTimeout(function r(){fetch("/__hype/reload").then(()=>location.reload()).catch(()=>{d=Math.min(d*1.5,2000);setTimeout(r,d)})},d)}}'
+const RELOAD_SCRIPT = '{let c=false;const e=new EventSource("/__hype/reload");e.onopen=()=>{if(c)location.reload();c=true};e.onerror=()=>{e.close();let d=50;setTimeout(function r(){fetch("/__hype/ping").then(()=>location.reload()).catch(()=>{d=Math.min(d*1.5,2000);setTimeout(r,d)})},d)}}'
 
 export const ReloadScript: FC = () =>
   isDev ? <script dangerouslySetInnerHTML={{ __html: RELOAD_SCRIPT }} /> : null