fix: ssr issues

mdream-0b101010 · May 9, 2024 · 93f55aa · 93f55aa
1 parent 6ce5f0f
commit 93f55aa
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 77 deletions.
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -13,7 +13,6 @@
     "vite": "^5.2.6"
   },
   "dependencies": {
-    "@sonnetjs/core": "0.0.23",
-    "@sonnetjs/html": "0.0.1"
+    "@sonnetjs/core": "0.0.23"
   }
 }
diff --git a/apps/playground/src/Counter.ts b/apps/playground/src/Counter.ts
@@ -1,5 +1,4 @@
 import { $component, SonnetComponent } from '@sonnetjs/core';
-import { a, button, div, h1, img, p } from '@sonnetjs/html';
 
 class Counter extends SonnetComponent {
   counter = 0;
@@ -15,37 +14,18 @@ class Counter extends SonnetComponent {
   }
 
   public get() {
-    return div()
-      .children(
-        a()
-          .href('https://vitejs.dev')
-          .target('blank')
-          .children(
-            img()
-              .src('https://vitejs.dev/logo.svg')
-              .className('logo')
-              .alt('Vite Logo')
-              .get(),
-          )
-          .get(),
-        h1().innerText('Vite').get(),
-        div()
-          .className('card')
-          .children(
-            button()
-              .id('counter')
-              .type('button')
-              .innerText(`count is ${this.counter}`)
-              .className('btn')
-              .get(),
-          )
-          .get(),
-        p()
-          .innerText('Edit src/main.ts and save to test HMR.')
-          .className('read-the-docs')
-          .get(),
-      )
-      .get();
+    return /*html*/ `
+    <div>
+      <a href="https://vitejs.dev" target="_blank">
+        <img src="https://vitejs.dev/logo.svg" class="logo" alt="Vite Logo" />
+      </a>
+      <h1>Vite</h1>
+      <div class="card">
+        <button id="counter" type="button" class="btn">count is ${this.counter}</button>
+      </div>
+      <p class="read-the-docs">Edit src/main.ts and save to test HMR.</p>
+    </div>
+    `;
   }
 }
 

diff --git a/apps/ssr-playground/package.json b/apps/ssr-playground/package.json
@@ -15,8 +15,7 @@
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "sirv": "^2.0.4",
-    "@sonnetjs/core": "*",
-    "@sonnetjs/html": "0.0.2"
+    "@sonnetjs/core": "*"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",

diff --git a/apps/ssr-playground/src/Counter.ts b/apps/ssr-playground/src/Counter.ts
@@ -1,5 +1,4 @@
 import { $component, SonnetComponent } from '@sonnetjs/core';
-import { a, button, div, h1, img, p } from '@sonnetjs/html';
 
 class Counter extends SonnetComponent {
   counter = 0;
@@ -15,37 +14,18 @@ class Counter extends SonnetComponent {
   }
 
   public get() {
-    return div()
-      .children(
-        a()
-          .href('https://vitejs.dev')
-          .target('blank')
-          .children(
-            img()
-              .src('https://vitejs.dev/logo.svg')
-              .className('logo')
-              .alt('Vite Logo')
-              .get(),
-          )
-          .get(),
-        h1().innerText('Vite').get(),
-        div()
-          .className('card')
-          .children(
-            button()
-              .id('counter')
-              .type('button')
-              .innerText(`count is ${this.counter}`)
-              .className('btn')
-              .get(),
-          )
-          .get(),
-        p()
-          .innerText('Edit src/main.ts and save to test HMR.')
-          .className('read-the-docs')
-          .get(),
-      )
-      .get();
+    return /*html*/ `
+    <div>
+      <a href="https://vitejs.dev" target="_blank">
+        <img src="https://vitejs.dev/logo.svg" class="logo" alt="Vite Logo" />
+      </a>
+      <h1>Vite</h1>
+      <div class="card">
+        <button id="counter" type="button" class="btn">count is ${this.counter}</button>
+      </div>
+      <p class="read-the-docs">Edit src/main.ts and save to test HMR.</p>
+    </div>
+    `;
   }
 }
 

diff --git a/apps/ssr-playground/src/entry-client.ts b/apps/ssr-playground/src/entry-client.ts
@@ -3,6 +3,6 @@ import { createApp } from '@sonnetjs/core';
 import Counter from './Counter';
 
 const app = createApp();
-app.root(Counter());
+app.root(Counter);
 app.ssr();
 app.mount('#app');
diff --git a/packages/sonnet-core/package.json b/packages/sonnet-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonnetjs/core",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "files": [
     "dist"
   ],

diff --git a/packages/sonnet-core/src/core/SonnetApp.ts b/packages/sonnet-core/src/core/SonnetApp.ts
@@ -79,17 +79,19 @@ export class SonnetApp {
       this._mountedId = selector;
       return;
     }
-    if (!this._ssr && isBrowser()) {
+    if (isBrowser()) {
       const el = document.querySelector(selector);
       if (el && this._component) {
         const component = this.initRootComponent();
 
-        const getComponent = await component?.get();
+        if (!this._ssr) {
+          const getComponent = await component?.get();
 
-        if (typeof getComponent === 'string') {
-          el.innerHTML = getComponent as string;
-        } else if (getComponent instanceof Element) {
-          el.appendChild(getComponent);
+          if (typeof getComponent === 'string') {
+            el.innerHTML = getComponent as string;
+          } else if (getComponent instanceof Element) {
+            el.appendChild(getComponent);
+          }
         }
       }
     }

diff --git a/tooling/tailwind/tsconfig.json b/tooling/tailwind/tsconfig.json
@@ -2,4 +2,4 @@
   "extends": "@repo/typescript-config/base.json",
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"]
-}
+}