fix: ssr hyderation

mdream-0b101010 · Oct 2, 2024 · 2dca28c · 2dca28c
1 parent c97877f
commit 2dca28c
Show file tree

Hide file tree

Showing 19 changed files with 55 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/create-sonnet/package.json b/packages/create-sonnet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-sonnet-app",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "",
   "main": "index.js",
   "type": "module",

diff --git a/packages/create-sonnet/template/code/default-ts/package.json b/packages/create-sonnet/template/code/default-ts/package.json
@@ -9,6 +9,6 @@
     "vite": "^5.2.6"
   },
   "dependencies": {
-    "@sonnetjs/core": "0.0.32"
+    "@sonnetjs/core": "0.0.33"
   }
 }
diff --git a/packages/create-sonnet/template/code/default/package.json b/packages/create-sonnet/template/code/default/package.json
@@ -8,6 +8,6 @@
     "vite": "^5.2.6"
   },
   "dependencies": {
-    "@sonnetjs/core": "0.0.32"
+    "@sonnetjs/core": "0.0.33"
   }
 }
diff --git a/packages/create-sonnet/template/code/router-ts/package.json b/packages/create-sonnet/template/code/router-ts/package.json
@@ -9,7 +9,7 @@
     "vite": "^5.2.6"
   },
   "dependencies": {
-    "@sonnetjs/core": "0.0.32",
+    "@sonnetjs/core": "0.0.33",
     "@sonnetjs/router": "0.0.5"
   }
 }
diff --git a/packages/create-sonnet/template/code/router/package.json b/packages/create-sonnet/template/code/router/package.json
@@ -8,7 +8,7 @@
     "vite": "^5.2.6"
   },
   "dependencies": {
-    "@sonnetjs/core": "0.0.32",
+    "@sonnetjs/core": "0.0.33",
     "@sonnetjs/router": "0.0.5"
   }
 }
diff --git a/packages/create-sonnet/template/code/ssr-ts/package.json b/packages/create-sonnet/template/code/ssr-ts/package.json
@@ -10,7 +10,7 @@
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "sirv": "^2.0.4",
-    "@sonnetjs/core": "0.0.32"
+    "@sonnetjs/core": "0.0.33"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",

diff --git a/packages/create-sonnet/template/code/ssr-ts/server.js b/packages/create-sonnet/template/code/ssr-ts/server.js
@@ -65,10 +65,6 @@ app.use('*', async (req, res) => {
   }
 });
 
-app.get('/', (req, res) => {
-  res.redirect(301, '/home');
-});
-
 // Start http server
 app.listen(port, () => {
   console.log(`Server started at http://localhost:${port}`);

diff --git a/packages/create-sonnet/template/code/ssr-ts/src/vite-env.d.ts b/packages/create-sonnet/template/code/ssr-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/create-sonnet/template/code/ssr/package.json b/packages/create-sonnet/template/code/ssr/package.json
@@ -10,7 +10,7 @@
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "sirv": "^2.0.4",
-    "@sonnetjs/core": "0.0.32"
+    "@sonnetjs/core": "0.0.33"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",

diff --git a/packages/create-sonnet/template/code/ssr/server.js b/packages/create-sonnet/template/code/ssr/server.js
@@ -65,10 +65,6 @@ app.use('*', async (req, res) => {
   }
 });
 
-app.get('/', (req, res) => {
-  res.redirect(301, '/home');
-});
-
 // Start http server
 app.listen(port, () => {
   console.log(`Server started at http://localhost:${port}`);

diff --git a/packages/sonnet-core/package.json b/packages/sonnet-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonnetjs/core",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "files": [
     "dist"
   ],

diff --git a/packages/sonnet-core/src/core/SonnetApp.ts b/packages/sonnet-core/src/core/SonnetApp.ts
@@ -84,9 +84,9 @@ export class SonnetApp {
       if (el && this._component) {
         const component = this.initRootComponent();
 
-        if (!this._ssr) {
-          const getComponent = component?.get();
+        const getComponent = component?.get();
 
+        if (!this._ssr) {
           if (typeof getComponent === 'string') {
             el.innerHTML = getComponent as string;
           } else if (getComponent instanceof Element) {

diff --git a/packages/sonnet-core/src/core/factory.ts b/packages/sonnet-core/src/core/factory.ts
@@ -1,32 +1,34 @@
-import { SonnetHead } from '@sonnetjs/shared';
+import { isBrowser, SonnetHead } from '@sonnetjs/shared';
 
 import { EventEmitter } from './Event';
 import SonnetComponent from '../abstract/SonnetComponent';
 
 const event = EventEmitter.getInstance();
 
 interface Component<T> {
-  new (args?: T): SonnetComponent;
+  new(args?: T): SonnetComponent;
   head?: () => void;
   script?: () => void;
 }
 
 export function $component<T>(component: Component<T>) {
   return (args?: T) => {
     const instance = new component(args);
-    // head tags
-    if (component.head && component.head.toString() !== 'head(){return""}') {
-      event.once<SonnetHead>('head', component.head as () => SonnetHead);
-    }
-    if (instance.head && instance.head.toString() !== 'head(){return""}') {
-      event.on<SonnetHead>('head', instance.head.bind(instance));
-    }
-    // scripts
-    if (component.script && component.script.toString() !== 'script(){}') {
-      event.once('script', component.script);
-    }
-    if (instance.script && instance.script.toString() !== 'script(){}') {
-      event.on('script', instance.script.bind(instance));
+    if (isBrowser()) {
+      // head tags
+      if (component.head && component.head.toString() !== 'head(){return""}') {
+        event.once<SonnetHead>('head', component.head as () => SonnetHead);
+      }
+      if (instance.head && instance.head.toString() !== 'head(){return""}') {
+        event.on<SonnetHead>('head', instance.head.bind(instance));
+      }
+      // scripts
+      if (component.script && component.script.toString() !== 'script(){}') {
+        event.once('script', component.script);
+      }
+      if (instance.script && instance.script.toString() !== 'script(){}') {
+        event.on('script', instance.script.bind(instance));
+      }
     }
 
     return instance as SonnetComponent;

diff --git a/packages/sonnet-router/package.json b/packages/sonnet-router/package.json
@@ -27,7 +27,7 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@sonnetjs/core": "0.0.32"
+    "@sonnetjs/core": "0.0.33"
   },
   "dependencies": {
     "path-to-regexp": "^8.2.0"

diff --git a/playground/ssr/server.js b/playground/ssr/server.js
@@ -3,7 +3,7 @@ import express from 'express';
 
 // Constants
 const isProduction = process.env.NODE_ENV === 'production';
-const port = process.env.PORT || 5174;
+const port = process.env.PORT || 3000;
 const base = process.env.BASE || '/';
 
 // Cached production assets
@@ -65,10 +65,6 @@ app.use('*', async (req, res) => {
   }
 });
 
-app.get('/', (req, res) => {
-  res.redirect(301, '/home');
-});
-
 // Start http server
 app.listen(port, () => {
   console.log(`Server started at http://localhost:${port}`);

diff --git a/playground/ssr/src/App.ts b/playground/ssr/src/App.ts
@@ -0,0 +1,18 @@
+import { $component, SonnetComponent } from '@sonnetjs/core';
+import Counter from './Counter';
+
+class App extends SonnetComponent {
+  public script() {
+    console.log('script');
+  }
+
+  get() {
+    return /*html*/ `
+    <div>
+      ${Counter().get()}
+    </div>
+    `;
+  }
+}
+
+export default $component(App);
diff --git a/playground/ssr/src/entry-client.ts b/playground/ssr/src/entry-client.ts
@@ -1,8 +1,9 @@
 import './style.css';
 import { createApp } from '@sonnetjs/core';
-import Counter from './Counter';
+
+import App from './App';
 
 const app = createApp();
-app.root(Counter);
+app.root(App);
 app.ssr();
-app.mount('#app');
+app.mount('#app');
diff --git a/playground/ssr/src/entry-server.ts b/playground/ssr/src/entry-server.ts
@@ -1,6 +1,6 @@
-import Counter from './Counter';
+import App from './App';
 
 export async function render() {
-  const html = await Counter().get();
+  const html = await App().get();
   return { html };
 }