feat: add virtual dom for ssr

Author: Je

project.ts

@@ -8,6 +8,7 @@ import { compile } from './tsc/compile.ts'
 import type { APIHandle, Config, Location, RouterURL } from './types.ts'
 import util, { hashShort } from './util.ts'
 import './vendor/clean-css-builds/v4.2.2.js'
+import { Document } from './vendor/deno-dom/document.ts'
 import less from './vendor/less/less.js'
 
 const reHttp = /^https?:\/\//i
@@ -162,8 +163,12 @@ export default class Project {
         if (path) {
             const importPath = '.' + path + '.js'
             if (this.#modules.has(importPath)) {
-                const { default: handle } = await import("file://" + this.#modules.get(importPath)!.jsFile)
-                return handle
+                try {
+                    const { default: handle } = await import("file://" + this.#modules.get(importPath)!.jsFile)
+                    return handle
+                } catch (error) {
+                    log.error(error)
+                }
             }
         }
         return null
@@ -215,15 +220,19 @@ export default class Project {
     async getData() {
         const mod = this.#modules.get('./data.js') || this.#modules.get('./data/index.js')
         if (mod) {
-            const { default: Data } = await import("file://" + mod.jsFile)
-            let data: any = Data
-            if (util.isFunction(Data)) {
-                data = await Data()
-            }
-            if (util.isPlainObject(data)) {
-                return data
-            } else {
-                log.warn(`module '${mod.url}' should return a plain object as default`)
+            try {
+                const { default: Data } = await import("file://" + mod.jsFile)
+                let data: any = Data
+                if (util.isFunction(Data)) {
+                    data = await Data()
+                }
+                if (util.isPlainObject(data)) {
+                    return data
+                } else {
+                    log.warn(`module '${mod.url}' should return a plain object as default`)
+                }
+            } catch (error) {
+                log.error(error)
             }
         }
         return {}
@@ -388,6 +397,9 @@ export default class Project {
             ALEPH_ENV: {
                 appDir: this.rootDir,
             },
+            document: new Document(),
+            innerWidth: 1920,
+            innerHeight: 1080,
             $RefreshReg$: () => { },
             $RefreshSig$: () => (type: any) => type,
         })
@@ -433,7 +445,7 @@ export default class Project {
         }
 
         const preCompileUrls = [
-            'https://deno.land/x/aleph/app.ts',
+            'https://deno.land/x/aleph/bootstrap.ts',
             'https://deno.land/x/aleph/renderer.ts',
             'https://deno.land/x/aleph/vendor/tslib/tslib.js',
         ]
@@ -646,7 +658,7 @@ export default class Project {
         module.jsContent = [
             this.isDev && 'import "./-/deno.land/x/aleph/hmr.js";',
             'import "./-/deno.land/x/aleph/vendor/tslib/tslib.js";',
-            'import { bootstrap } from "./-/deno.land/x/aleph/app.js";',
+            'import bootstrap from "./-/deno.land/x/aleph/bootstrap.js";',
             `bootstrap(${JSON.stringify(config, undefined, this.isDev ? 4 : undefined)});`
         ].filter(Boolean).join(this.isDev ? '\n' : '')
         module.hash = (new Sha1()).update(module.jsContent).hex()
@@ -1036,18 +1048,28 @@ export default class Project {
             const cache = page.rendered.get(url.pathname)!
             return { ...cache }
         }
+        Object.assign(window, {
+            location: {
+                protocol: 'http:',
+                host: 'localhost',
+                hostname: 'localhost',
+                port: '',
+                href: 'http://localhost' + url.pathname,
+                origin: 'http://localhost',
+                pathname: url.pathname,
+                search: '',
+                hash: '',
+                reload() { },
+                replace() { },
+                toString() { return this.href },
+            }
+        })
         try {
             const appModule = this.#modules.get('./app.js')
             const pageModule = this.#modules.get(page.moduleId)!
-            const [
-                { renderPage, renderHead },
-                { default: App },
-                { default: Page }
-            ] = await Promise.all([
-                import("file://" + this.#modules.get('//deno.land/x/aleph/renderer.js')!.jsFile),
-                appModule ? await import("file://" + appModule.jsFile) : Promise.resolve({}),
-                await import("file://" + pageModule.jsFile)
-            ])
+            const { renderPage, renderHead } = await import("file://" + this.#modules.get('//deno.land/x/aleph/renderer.js')!.jsFile)
+            const { default: App } = appModule ? await import("file://" + appModule.jsFile) : {} as any
+            const { default: Page } = await import("file://" + pageModule.jsFile)
             const data = await this.getData()
             const html = renderPage(data, url, appModule ? App : undefined, Page)
             const head = renderHead([

vendor/deno-dom/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 b-fuze
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

vendor/deno-dom/README.md

@@ -0,0 +1,52 @@
+# Deno DOM
+
+An implementation of the browser DOM—primarily for SSR—in Deno. Implemented with
+Rust, WASM, and obviously, Deno/TypeScript.
+
+## Example
+```typescript
+import { DOMParser, Element } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
+
+const doc = new DOMParser().parseFromString(`
+  <h1>Hello World!</h1>
+  <p>Hello from <a href="https://deno.land/">Deno!</a></p>
+`, "text/html")!;
+
+const p = doc.querySelector("p")!;
+
+console.log(p.textContent); // "Hello from Deno!"
+console.log(p.childNodes[1].textContent); // "Deno!"
+
+p.innerHTML = "DOM in <b>Deno</b> is pretty cool";
+console.log(p.children[0].outerHTML); // "<b>Deno</b>"
+```
+
+Deno DOM has **two** backends, WASM and native using Deno native plugins. Both 
+APIs are **identical**, the difference being only in performance. The WASM 
+backend works with all Deno restrictions, but the native backend requires 
+the `--unstable --allow-plugin` flags. You can switch between them by 
+importing either `deno-dom-wasm.ts` or `deno-dom-native.ts`.
+
+Deno DOM is still under development, but is fairly usable for basic HTML
+manipulation needs.
+
+## Goals
+
+ - HTML parser in Deno
+ - Fast
+ - Mirror most\* supported DOM APIs as closely as possible
+ - Provide specific APIs in addition to DOM APIs to make certain operations more efficient, like controlling Shadow DOM (see Open Questions)
+ - Use cutting-edge JS features like private class members, optional chaining, etc
+
+## Non-Goals
+
+ - Headless browser implementation
+ - Ability to run JS embedded in documents (`<script>` tags, `onload`, etc)
+ - Parse CSS or JS (they're just text, but this may be supported in the future for CSSOM)
+ - Support older (or even not so old) JS engines. In other words, there will be no support of transpilation to ES5, no support of polyfills, etc
+ - Support special functionality of obsolete HTML elements (`<marquee>`, etc)
+
+# Credits
+ - html5ever developers for the HTML parser
+ - nwsapi developers for the selector parser
+

vendor/deno-dom/canvas.ts

@@ -0,0 +1,4 @@
+export class CanvasContext2D {
+    fillRect(x: number, y: number, width: number, height: number) {
+    }
+}

vendor/deno-dom/constructor-lock.ts

@@ -0,0 +1,13 @@
+/**
+ * Used to enforce illegal constructors
+ */
+let lock = true;
+
+export function setLock(value: boolean) {
+  lock = value;
+}
+
+export function getLock(): boolean {
+  return lock;
+}
+

vendor/deno-dom/deserialize.ts

@@ -0,0 +1,55 @@
+import { setLock } from "./constructor-lock.ts";
+import { Element } from "./element.ts";
+import { Comment, Node, NodeType, Text } from "./node.ts";
+import { parse, parseFrag } from "./parser.ts";
+
+export function nodesFromString(html: string): Node {
+  setLock(false);
+  const parsed = JSON.parse(parse(html));
+  const node = nodeFromArray(parsed, null);
+  setLock(true);
+
+  return node;
+}
+
+export function fragmentNodesFromString(html: string): Node {
+  setLock(false);
+  const parsed = JSON.parse(parseFrag(html));
+  const node = nodeFromArray(parsed, null);
+  setLock(true);
+
+  return node;
+}
+
+function nodeFromArray(data: any, parentNode: Node | null): Node {
+  // For reference only:
+  // type node = [NodeType, nodeName, attributes, node[]]
+  //             | [NodeType, characterData]
+  const elm = new Element(data[1], parentNode, data[2]);
+  const childNodes = elm._getChildNodesMutator();
+  let childNode: Node;
+
+  for (const child of data.slice(3)) {
+    switch (child[0]) {
+      case NodeType.TEXT_NODE:
+        childNode = new Text(child[1]);
+        childNode.parentNode = childNode.parentElement = <Element>elm;
+        childNodes.push(childNode);
+        break;
+
+      case NodeType.COMMENT_NODE:
+        childNode = new Comment(child[1]);
+        childNode.parentNode = childNode.parentElement = <Element>elm;
+        childNodes.push(childNode);
+        break;
+
+      case NodeType.DOCUMENT_NODE:
+      case NodeType.ELEMENT_NODE:
+        nodeFromArray(child, elm);
+        break;
+    }
+  }
+
+  return elm;
+}
+