refactor(framework): improve style ssr

Author: ije

framework/core/style.ts

@@ -1,7 +1,5 @@
 import util from '../../shared/util.ts'
 
-export const serverStyles: Map<string, string> = new Map()
-
 export function removeCSS(id: string) {
   const { document } = window as any
   Array.from(document.head.children).forEach((el: any) => {
@@ -13,7 +11,7 @@ export function removeCSS(id: string) {
 
 export function applyCSS(id: string, css: string) {
   if (util.inDeno()) {
-    serverStyles.set(id, css)
+    return { id, css }
   } else {
     const { document } = window as any
     const ssrStyle = Array.from<any>(document.head.children).find((el: any) => {

framework/react/renderer.ts

@@ -4,7 +4,6 @@ import { renderToString } from 'https://esm.sh/react-dom/server'
 import util from '../../shared/util.ts'
 import type { RenderResult, RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
-import { serverStyles } from "../core/style.ts"
 import { RendererContext, RouterContext } from './context.ts'
 import { AsyncUseDenoError, E400MissingComponent, E404Page } from './error.ts'
 import { createPageProps } from './pageprops.ts'
@@ -15,7 +14,7 @@ export async function render(
   App: ComponentType<any> | undefined,
   E404: ComponentType | undefined,
   pageComponentChain: { url: string, Component?: any }[],
-  styles?: { url: string, hash: string }[]
+  styles: { url: string, hash: string }[]
 ) {
   const global = globalThis as any
   const ret: Omit<RenderResult, 'url' | 'status'> = {
@@ -139,18 +138,18 @@ export async function render(
   })
   scriptsElements.clear()
 
-  // get inline-styles
-  const rets = await Promise.all(styles?.filter(({ url }) => !url.startsWith('#inline-style-')).map(({ url, hash }) => {
-    const path = util.isLikelyHttpURL(url) ? '/-/' + url.split('://')[1] : `${url}.${util.shortHash(hash)}`
-    return import('file://' + util.cleanPath(`${Deno.cwd()}/.aleph/${buildMode}/${path}.js`))
-  }) || [])
-  rets.forEach(({ default: def }) => util.isFunction(def) && def())
-  styles?.forEach(({ url }) => {
-    if (serverStyles.has(url)) {
-      const css = serverStyles.get(url)!
-      ret.head.push(`<style type="text/css" data-module-id=${JSON.stringify(url)} ssr>${css}</style>`)
+  // apply styles
+  await Promise.all(styles.map(async ({ url, hash }) => {
+    if (!url.startsWith('#inline-style-')) {
+      const pathname = util.isLikelyHttpURL(url) ? '/-/' + url.split('://')[1] : `${url}.${util.shortHash(hash)}`
+      const importUrl = 'file://' + util.cleanPath(`${Deno.cwd()}/.aleph/${buildMode}/${pathname}.js`)
+      const { default: applyCSS } = await import(importUrl)
+      if (util.isFunction(applyCSS)) {
+        const { css } = applyCSS()
+        ret.head.push(`<style type="text/css" data-module-id=${JSON.stringify(url)} ssr>${css}</style>`)
+      }
     }
-  })
+  }))
 
   defer()
   return ret

server/app.ts

@@ -864,7 +864,7 @@ export class Application {
         sourceCode = [
           `import { applyCSS } from "${alephModuleUrl}/framework/core/style.ts";`,
           `export default function __applyCSS() {`,
-          `  applyCSS(${JSON.stringify(url)}, ${JSON.stringify(css)});`,
+          `  return applyCSS(${JSON.stringify(url)}, ${JSON.stringify(css)});`,
           `}`,
           bundleMode && `__ALEPH.pack[${JSON.stringify(url)}] = { default: __applyCSS };`
         ].filter(Boolean).join('\n')
@@ -1566,21 +1566,21 @@ export class Application {
   }
 
   /** lookup deps recurively. */
-  private lookupDeps(url: string, __deps: DependencyDescriptor[] = [], __tracing: Set<string> = new Set()) {
+  private lookupDeps(url: string, deps: DependencyDescriptor[] = [], tracing: Set<string> = new Set()) {
     const mod = this.getModule(url)
     if (!mod) {
-      return __deps
+      return deps
     }
-    if (__tracing.has(url)) {
-      return __deps
+    if (tracing.has(url)) {
+      return deps
     }
-    __tracing.add(url)
-    __deps.push(...mod.deps.filter(({ url }) => __deps.findIndex(i => i.url === url) === -1))
+    tracing.add(url)
+    deps.push(...mod.deps.filter(({ url }) => deps.findIndex(i => i.url === url) === -1))
     mod.deps.forEach(({ url }) => {
       if (isModuleURL(url) && !util.isLikelyHttpURL(url)) {
-        this.lookupDeps(url, __deps, __tracing)
+        this.lookupDeps(url, deps, tracing)
       }
     })
-    return __deps
+    return deps
   }
 }