fix: fix document is not defined

Author: Je

cli.ts

@@ -160,17 +160,43 @@ async function main() {
         }
     }
 
-    import(`./cli/${command}.ts`).then(({ default: cmd }) => {
-        if (command === 'upgrade') {
-            cmd(argOptions.v || argOptions.version || 'latest')
-        } else {
-            const appDir = path.resolve(args[0] || '.')
-            if (command !== 'init' && !existsDirSync(appDir)) {
-                log.fatal('No such directory:', appDir)
-            }
-            cmd(appDir, argOptions)
+    // add virtual browser global objects
+    if (command !== 'init' && command !== 'upgrade') {
+        const { createHTMLDocument } = await import('./vendor/deno-dom/document.ts')
+        Object.assign(globalThis, {
+            document: createHTMLDocument(),
+            location: {
+                protocol: 'http:',
+                host: 'localhost',
+                hostname: 'localhost',
+                port: '',
+                href: 'https://localhost/',
+                origin: 'https://localhost',
+                pathname: '/',
+                search: '',
+                hash: '',
+                reload() { },
+                replace() { },
+                toString() { return this.href },
+            },
+            innerWidth: 1920,
+            innerHeight: 1080,
+            devicePixelRatio: 1,
+            $RefreshReg$: () => { },
+            $RefreshSig$: () => (type: any) => type,
+        })
+    }
+
+    const { default: cmd } = await import(`./cli/${command}.ts`)
+    if (command === 'upgrade') {
+        await cmd(argOptions.v || argOptions.version || 'latest')
+    } else {
+        const appDir = path.resolve(args[0] || '.')
+        if (command !== 'init' && !existsDirSync(appDir)) {
+            log.fatal('No such directory:', appDir)
         }
-    })
+        await cmd(appDir, argOptions)
+    }
 }
 
 if (import.meta.main) {

examples/hello-world/pages/index.tsx

@@ -1,18 +1,21 @@
 import { Import, useDeno } from 'https://deno.land/x/aleph/mod.ts'
 import React, { useState } from 'https://esm.sh/react'
 import Logo from '../components/logo.tsx'
+import { style } from 'https://esm.sh/typestyle'
 
 export default function Home() {
     const [count, setCount] = useState(0)
     const version = useDeno(() => {
         return Deno.version
     })
 
+    const red = style({ backgroundColor: 'red' })
+
     return (
         <div className="page">
             <Import from="../style/index.less" />
             <p className="logo"><Logo /></p>
-            <h1>Welcome to use <strong>Aleph.js</strong>!</h1>
+            <h1 className={red}>Welcome to use <strong>Aleph.js</strong>!</h1>
             <p className="links">
                 <a href="https://alephjs.org" target="_blank">Website</a>
                 <span>&middot;</span>

project.ts

@@ -1,3 +1,4 @@
+import CleanCSS from 'https://esm.sh/[email protected]?no-check'
 import marked from 'https://esm.sh/[email protected]'
 import postcss, { AcceptedPlugin } from 'https://esm.sh/[email protected]'
 import { minify } from 'https://esm.sh/[email protected]'
@@ -12,7 +13,7 @@ import { colors, ensureDir, fromStreamReader, path, ServerRequest, Sha1, walk }
 import { compile } from './tsc/compile.ts'
 import type { AlephEnv, APIHandler, Config, RouterURL } from './types.ts'
 import util, { hashShort, MB, reHashJs, reHttp, reLocaleID, reMDExt, reModuleExt, reStyleModuleExt } from './util.ts'
-import { cleanCSS, less } from './vendor/mod.ts'
+import less from './vendor/less/less.js'
 import { version } from './version.ts'
 
 interface Module {
@@ -71,6 +72,7 @@ export class Project {
     #renderer: { renderPage: CallableFunction } = { renderPage: () => void 0 }
     #rendered: Map<string, Map<string, RenderResult>> = new Map()
     #postcssPlugins: Record<string, AcceptedPlugin> = {}
+    #cleanCSS = new CleanCSS({ compatibility: '*' /* Internet Explorer 10+ */ })
 
     constructor(appDir: string, mode: 'development' | 'production', reload = false) {
         this.appRoot = path.resolve(appDir)
@@ -1018,7 +1020,7 @@ export class Project {
                 if (this.isDev) {
                     css = css.trim()
                 } else {
-                    const output = cleanCSS.minify(css)
+                    const output = this.#cleanCSS.minify(css)
                     css = output.styles
                 }
                 mod.jsContent = [
@@ -1448,30 +1450,6 @@ export class Project {
     }
 }
 
-// add virtual browser global objects
-Object.assign(globalThis, {
-    // document: new Document(),
-    location: {
-        protocol: 'http:',
-        host: 'localhost',
-        hostname: 'localhost',
-        port: '',
-        href: 'https://localhost/',
-        origin: 'https://localhost',
-        pathname: '/',
-        search: '',
-        hash: '',
-        reload() { },
-        replace() { },
-        toString() { return this.href },
-    },
-    innerWidth: 1920,
-    innerHeight: 1080,
-    devicePixelRatio: 1,
-    $RefreshReg$: () => { },
-    $RefreshSig$: () => (type: any) => type,
-})
-
 /** inject HMR and React Fast Referesh helper code  */
 export function injectHmr({ id, sourceFilePath, jsContent }: Module): string {
     let hmrImportPath = getRelativePath(