refactor(framework): move style module to core

Author: ije

framework/core/style.ts

@@ -0,0 +1,39 @@
+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) => {
+        if (el.getAttribute('data-module-id') === id) {
+            document.head.removeChild(el)
+        }
+    })
+}
+
+export function applyCSS(id: string, css: string) {
+    if (util.inDeno()) {
+        serverStyles.set(id, css)
+    } else {
+        const { document } = window as any
+        const ssrStyle = Array.from<any>(document.head.children).find((el: any) => {
+            return el.getAttribute('data-module-id') === id && el.hasAttribute('ssr')
+        })
+        if (ssrStyle) {
+            ssrStyle.removeAttribute('ssr')
+        } else {
+            const prevStyleEls = Array.from(document.head.children).filter((el: any) => {
+                return el.getAttribute('data-module-id') === id
+            })
+            const styleEl = document.createElement('style')
+            styleEl.type = 'text/css'
+            styleEl.appendChild(document.createTextNode(css))
+            styleEl.setAttribute('data-module-id', id)
+            document.head.appendChild(styleEl)
+            if (prevStyleEls.length > 0) {
+                prevStyleEls.forEach(el => document.head.removeChild(el))
+            }
+            return styleEl
+        }
+    }
+}

framework/react/context.ts

@@ -10,13 +10,6 @@ export const RouterContext = createNamedContext<RouterURL>({
     query: new URLSearchParams(),
 }, 'RouterContext')
 
-type SuspenseContextProps = {
-    loading: boolean
-}
-export const SuspenseContext = createNamedContext<SuspenseContextProps>({
-    loading: false
-}, 'SuspenseContext')
-
 type RendererContextProps = {
     headElements: Map<string, { type: string, props: Record<string, any> }>
     scriptsElements: Map<string, { type: string, props: Record<string, any> }>

framework/react/renderer.ts

@@ -4,10 +4,10 @@ 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'
-import { serverStyles } from './style.ts'
 import { isLikelyReactComponent } from './util.ts'
 
 export async function render(

framework/react/style.ts

@@ -1,8 +1,6 @@
 import type { StyleHTMLAttributes } from 'https://esm.sh/react'
 import { useEffect } from 'https://esm.sh/react'
-import util from '../../shared/util.ts'
-
-export const serverStyles: Map<string, string> = new Map()
+import { applyCSS, removeCSS } from "../core/style.ts"
 
 export default function Style({ children, ...rest }: StyleHTMLAttributes<{}>) {
     const css = children?.toLocaleString()
@@ -16,39 +14,3 @@ export default function Style({ children, ...rest }: StyleHTMLAttributes<{}>) {
 
     return null
 }
-
-export function removeCSS(id: string) {
-    const { document } = window as any
-    Array.from(document.head.children).forEach((el: any) => {
-        if (el.getAttribute('data-module-id') === id) {
-            document.head.removeChild(el)
-        }
-    })
-}
-
-export function applyCSS(id: string, css: string) {
-    if (util.inDeno()) {
-        serverStyles.set(id, css)
-    } else {
-        const { document } = window as any
-        const ssrStyle = Array.from<any>(document.head.children).find((el: any) => {
-            return el.getAttribute('data-module-id') === id && el.hasAttribute('ssr')
-        })
-        if (ssrStyle) {
-            ssrStyle.removeAttribute('ssr')
-        } else {
-            const prevStyleEls = Array.from(document.head.children).filter((el: any) => {
-                return el.getAttribute('data-module-id') === id
-            })
-            const styleEl = document.createElement('style')
-            styleEl.type = 'text/css'
-            styleEl.appendChild(document.createTextNode(css))
-            styleEl.setAttribute('data-module-id', id)
-            document.head.appendChild(styleEl)
-            if (prevStyleEls.length > 0) {
-                prevStyleEls.forEach(el => document.head.removeChild(el))
-            }
-            return styleEl
-        }
-    }
-}

server/app.ts

@@ -1021,7 +1021,7 @@ export class Appliaction {
             if (loader === 'css') {
                 const css = await this.preprocessCSS(sourceCode)
                 sourceCode = [
-                    `import { applyCSS } from "${alephPkgUrl}/framework/${this.config.framework}/style.ts";`,
+                    `import { applyCSS } from "${alephPkgUrl}/framework/core/style.ts";`,
                     `export default function __applyCSS() {`,
                     `  applyCSS(${JSON.stringify(url)}, ${JSON.stringify(css)});`,
                     `}`,