zova-module-a-style 5.0.24 → 5.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-style",
-  "version": "5.0.24",
+  "version": "5.0.26",
   "title": "a-style",
   "zovaModule": {
     "capabilities": {
@@ -37,5 +37,5 @@
     "tsc:publish": "npm run clean && tsc -b",
     "prepublishOnly": "npm run tsc:publish"
   },
-  "gitHead": "38b917802862663cf6c2e6829857de9a2a742dcd"
+  "gitHead": "6ab950f2066f8feb2dfddb94575fcbb2cf07afe7"
 }

package/src/bean/bean.theme.ts

@@ -21,43 +21,29 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
   private _onMediaDarkChange?;
 
   protected async __init__() {
-    this.name = this.$useQueryCookie({
+    // support admin
+    const useQueryMethod = this.app.config.ssr.cookieThemeName ? '$useQueryCookie' : '$useQueryLocal';
+    this.name = this[useQueryMethod]({
       queryKey: ['themename'],
-      meta: {
-        defaultData: this.scope.config.defaultTheme,
-      },
-    });
-    this.darkMode = this.$useQueryCookie({
-      queryKey: ['themedarkmode'],
       meta: {
         persister: {
-          deserialize: value => {
-            value = value === 'true' ? true : value === 'false' ? false : !value ? undefined : value;
-            return this.$deserializeCookie(value);
-          },
+          maxAge: this.scope.config.model.themename.persister.maxAge,
         },
-        defaultData: 'auto',
+        defaultData: this.scope.config.defaultTheme,
       },
     });
-    this._dark = this.$useQueryCookie({
+    this.darkMode = this.$useQueryLocal({
       queryKey: ['themedark'],
       meta: {
-        persister: {
-          deserialize: value => {
-            value = value === 'true' ? true : value === 'false' ? false : !value ? undefined : value;
-            return this.$deserializeCookie(value);
-          },
-        },
-        defaultData: () => {
-          return this._getDarkFromDarkMode(this.darkMode);
-        },
+        defaultData: 'auto',
       },
     });
+    this._updateDark();
 
     watch(
       () => this.darkMode,
       () => {
-        this._dark = this._getDarkFromDarkMode(this.darkMode);
+        this._updateDark();
       },
     );
 
@@ -72,6 +58,10 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
     this._listenMediaDarkChange(false);
   }
 
+  private _updateDark() {
+    this._dark = this._getDarkFromDarkMode(this.darkMode);
+  }
+
   async _applyTheme() {
     const name = this.name;
     const dark = this._dark;
@@ -101,10 +91,12 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
   }
 
   _listenMediaDarkChange(listen: boolean) {
+    if (process.env.SERVER) return;
     if (listen) {
       if (!this._mediaDark) {
         this._mediaDark = window.matchMedia('(prefers-color-scheme: dark)');
         this._onMediaDarkChange = async () => {
+          this._updateDark();
           this._applyTheme();
         };
         this._mediaDark.addEventListener('change', this._onMediaDarkChange);

package/src/config/config.ts

@@ -5,5 +5,12 @@ export const config = (_app: ZovaApplication) => {
     defaultStyle: 'home-style.style.default' as keyof IBeanRecord,
     defaultTheme: 'home-theme.theme.default' as keyof IBeanRecord,
     defaultThemeHandler: '' as keyof IBeanRecord,
+    model: {
+      themename: {
+        persister: {
+          maxAge: Infinity,
+        },
+      },
+    },
   };
 };

package/src/monkey.ts

@@ -1,4 +1,4 @@
-import { style } from 'typestyle';
+import { style, createTypeStyle, TypeStyle } from 'typestyle';
 import { BeanBase, BeanContainer, BeanSimple, IMonkeySystem, SymbolModuleName, useComputed } from 'zova';
 import { ScopeModule, __ThisModule__ } from './resource/this.js';
 import { BeanTheme } from './bean/bean.theme.js';
@@ -6,8 +6,23 @@ import { BeanTheme } from './bean/bean.theme.js';
 export class Monkey extends BeanSimple implements IMonkeySystem {
   private _beanTheme: BeanTheme;
   private _beanStyleDefault: any;
+  private _styleInstance: TypeStyle;
 
-  async appInitialize(_bean: BeanContainer) {}
+  async appInitialize(_bean: BeanContainer) {
+    if (process.env.SERVER) {
+      this._styleInstance = createTypeStyle();
+      this.ctx.meta.ssr.context.onRendered(() => {
+        const styles = this._styleInstance.getStyles();
+        this.ctx.meta.ssr.context._meta.endingHeadTags += `<style id="styles-target">${styles}</style>`;
+      });
+    }
+    if (process.env.CLIENT && this.ctx.meta.ssr.isRuntimeSsrPreHydration) {
+      this._styleInstance = createTypeStyle();
+      this.ctx.meta.ssr.onHydrated(() => {
+        this._styleInstance.setStylesTarget(document.getElementById('styles-target')!);
+      });
+    }
+  }
   async appInitialized(bean: BeanContainer) {
     // theme
     this._beanTheme = await bean._getBean(BeanTheme, true);
@@ -54,9 +69,15 @@ export class Monkey extends BeanSimple implements IMonkeySystem {
   beanDisposed(_bean: BeanContainer, _beanInstance: BeanBase) {}
 
   _patchStyle(beanInstance: BeanBase, props, ...args) {
-    if (props && typeof props === 'object') {
-      props = Object.assign({ $debugName: beanInstance[SymbolModuleName] }, props);
+    if (process.env.dev) {
+      if (props && typeof props === 'object') {
+        props = Object.assign({ $debugName: beanInstance[SymbolModuleName] }, props);
+      }
+    }
+    if (this._styleInstance) {
+      return this._styleInstance.style(props, ...args);
+    } else {
+      return style(props, ...args);
     }
-    return style(props, ...args);
   }
 }