From 5453b58f31fc985bb72164835488e8809ec09121 Mon Sep 17 00:00:00 2001
From: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>
Date: Thu, 4 Jan 2018 14:11:37 +0000
Subject: [PATCH] Initial basic component rendering. Does not yet do any tree
 diffing. APIs will change.

---
 .../HostedInAspNet.Client.csproj              |  1 +
 samples/HostedInAspNet.Client/Program.cs      | 28 ++++++-
 .../HostedInAspNet.Client/wwwroot/index.html  |  2 +-
 src/Microsoft.Blazor.Browser.JS/src/Boot.ts   |  1 +
 .../src/Platform/Mono/MonoPlatform.ts         | 26 +++++-
 .../src/Platform/Platform.ts                  |  8 ++
 .../src/Rendering/Renderer.ts                 | 68 +++++++++++++++
 .../src/Rendering/UITreeNode.ts               | 38 +++++++++
 .../Microsoft.Blazor.Browser.csproj           |  4 +
 src/Microsoft.Blazor.Browser/Renderer.cs      | 14 +++-
 src/Microsoft.Blazor/Components/IComponent.cs | 19 +++++
 src/Microsoft.Blazor/UITree/UITreeBuilder.cs  | 84 +++++++++++++++++++
 src/Microsoft.Blazor/UITree/UITreeNode.cs     | 52 ++++++++++++
 src/Microsoft.Blazor/UITree/UITreeNodeType.cs | 21 +++++
 14 files changed, 360 insertions(+), 6 deletions(-)
 create mode 100644 src/Microsoft.Blazor.Browser.JS/src/Rendering/Renderer.ts
 create mode 100644 src/Microsoft.Blazor.Browser.JS/src/Rendering/UITreeNode.ts
 create mode 100644 src/Microsoft.Blazor/Components/IComponent.cs
 create mode 100644 src/Microsoft.Blazor/UITree/UITreeBuilder.cs
 create mode 100644 src/Microsoft.Blazor/UITree/UITreeNode.cs
 create mode 100644 src/Microsoft.Blazor/UITree/UITreeNodeType.cs
diff --git a/samples/HostedInAspNet.Client/HostedInAspNet.Client.csproj b/samples/HostedInAspNet.Client/HostedInAspNet.Client.csproj
index 12774549e6..8436207e11 100644
--- a/samples/HostedInAspNet.Client/HostedInAspNet.Client.csproj
+++ b/samples/HostedInAspNet.Client/HostedInAspNet.Client.csproj
@@ -13,6 +13,7 @@
   <Import Project="..\..\src\Microsoft.Blazor.Build\ReferenceFromSource.props" />
   <ItemGroup>
     <ProjectReference Include="..\..\src\Microsoft.Blazor.Browser\Microsoft.Blazor.Browser.csproj" />
+    <ProjectReference Include="..\..\src\Microsoft.Blazor\Microsoft.Blazor.csproj" />
   </ItemGroup>
 
 </Project>
diff --git a/samples/HostedInAspNet.Client/Program.cs b/samples/HostedInAspNet.Client/Program.cs
index 1e22fe34cf..c972eccd7f 100644
--- a/samples/HostedInAspNet.Client/Program.cs
+++ b/samples/HostedInAspNet.Client/Program.cs
@@ -2,6 +2,8 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
 using Microsoft.Blazor.Browser;
+using Microsoft.Blazor.Components;
+using Microsoft.Blazor.UITree;
 
 namespace HostedInAspNet.Client
 {
@@ -9,7 +11,31 @@ namespace HostedInAspNet.Client
     {
         static void Main(string[] args)
         {
-            new Renderer();
+            // Temporarily render this test component until there's a proper mechanism
+            // for testing this.
+            Renderer.Render(new MyComponent(), "app");
+        }
+    }
+
+    internal class MyComponent : IComponent
+    {
+        public void Render(UITreeBuilder builder)
+        {
+            builder.OpenElement("h1");
+            builder.AddText("Hello from UITree");
+            builder.CloseElement();
+
+            builder.OpenElement("ul");
+
+            builder.OpenElement("li");
+            builder.AddText("First item");
+            builder.CloseElement();
+
+            builder.OpenElement("li");
+            builder.AddText("Second item");
+            builder.CloseElement();
+
+            builder.CloseElement();
         }
     }
 }
diff --git a/samples/HostedInAspNet.Client/wwwroot/index.html b/samples/HostedInAspNet.Client/wwwroot/index.html
index 943ee7c116..6fb354ac44 100644
--- a/samples/HostedInAspNet.Client/wwwroot/index.html
+++ b/samples/HostedInAspNet.Client/wwwroot/index.html
@@ -5,6 +5,6 @@
     <title>Sample Blazor app</title>
 </head>
 <body>
-  <h1>Hello</h1>
+  <app>Loading...</app>
 </body>
 </html>
diff --git a/src/Microsoft.Blazor.Browser.JS/src/Boot.ts b/src/Microsoft.Blazor.Browser.JS/src/Boot.ts
index dc04668436..4b11f6c205 100644
--- a/src/Microsoft.Blazor.Browser.JS/src/Boot.ts
+++ b/src/Microsoft.Blazor.Browser.JS/src/Boot.ts
@@ -1,5 +1,6 @@
 ﻿import { platform } from './Environment';
 import { getAssemblyNameFromUrl } from './Platform/DotNet';
+import './Rendering/Renderer';
 
 async function boot() {
   // Read startup config from the <script> element that's importing this file
diff --git a/src/Microsoft.Blazor.Browser.JS/src/Platform/Mono/MonoPlatform.ts b/src/Microsoft.Blazor.Browser.JS/src/Platform/Mono/MonoPlatform.ts
index 3d6ebdad68..8624ef60ba 100644
--- a/src/Microsoft.Blazor.Browser.JS/src/Platform/Mono/MonoPlatform.ts
+++ b/src/Microsoft.Blazor.Browser.JS/src/Platform/Mono/MonoPlatform.ts
@@ -1,4 +1,4 @@
-﻿import { MethodHandle, System_Object, System_String, Platform } from '../Platform';
+﻿import { MethodHandle, System_Object, System_String, System_Array, Pointer, Platform } from '../Platform';
 import { getAssemblyNameFromUrl } from '../DotNet';
 
 let assembly_load: (assemblyName: string) => number;
@@ -93,7 +93,25 @@ export const monoPlatform: Platform = {
 
   toDotNetString: function toDotNetString(jsString: string): System_String {
     return mono_string(jsString);
-  }
+  },
+
+  getArrayLength: function getArrayLength(array: System_Array): number {
+    return Module.getValue(getArrayDataPointer(array), 'i32');
+  },
+
+  getArrayEntryPtr: function getArrayEntryPtr(array: System_Array, index: number, itemSize: number): Pointer {
+    // First byte is array length, followed by entries
+    const address = getArrayDataPointer(array) + 4 + index * itemSize;
+    return address as any as Pointer;
+  },
+
+  readHeapInt32: function readHeapInt32(address: Pointer, offset?: number): number {
+    return Module.getValue((address as any as number) + (offset || 0), 'i32');
+  },
+
+  readHeapObject: function readHeapObject(address: Pointer, offset?: number): System_Object {
+    return monoPlatform.readHeapInt32(address, offset) as any as System_Object;
+  },
 };
 
 function addScriptTagsToDocument() {
@@ -162,3 +180,7 @@ function asyncLoad(url, onload, onerror) {
   xhr.onerror = onerror;
   xhr.send(null);
 }
+
+function getArrayDataPointer(array: System_Array): number {
+  return <number><any>array + 12; // First byte from here is length, then following bytes are entries
+}
diff --git a/src/Microsoft.Blazor.Browser.JS/src/Platform/Platform.ts b/src/Microsoft.Blazor.Browser.JS/src/Platform/Platform.ts
index 2b01f53d99..6d03f66b28 100644
--- a/src/Microsoft.Blazor.Browser.JS/src/Platform/Platform.ts
+++ b/src/Microsoft.Blazor.Browser.JS/src/Platform/Platform.ts
@@ -7,6 +7,12 @@
 
   toJavaScriptString(dotNetString: System_String): string;
   toDotNetString(javaScriptString: string): System_String;
+
+  getArrayLength(array: System_Array): number;
+  getArrayEntryPtr(array: System_Array, index: number, itemSize: number): Pointer;
+
+  readHeapInt32(address: Pointer, offset?: number): number;
+  readHeapObject(address: Pointer, offset?: number): System_Object;
 }
 
 // We don't actually instantiate any of these at runtime. For perf it's preferable to
@@ -15,3 +21,5 @@
 export interface MethodHandle { MethodHandle__DO_NOT_IMPLEMENT: any };
 export interface System_Object { System_Object__DO_NOT_IMPLEMENT: any };
 export interface System_String extends System_Object { System_String__DO_NOT_IMPLEMENT: any }
+export interface System_Array extends System_Object { System_Array__DO_NOT_IMPLEMENT: any }
+export interface Pointer { Pointer__DO_NOT_IMPLEMENT: any }
diff --git a/src/Microsoft.Blazor.Browser.JS/src/Rendering/Renderer.ts b/src/Microsoft.Blazor.Browser.JS/src/Rendering/Renderer.ts
new file mode 100644
index 0000000000..81d62cde0b
--- /dev/null
+++ b/src/Microsoft.Blazor.Browser.JS/src/Rendering/Renderer.ts
@@ -0,0 +1,68 @@
+﻿import { registerFunction } from '../RegisteredFunction';
+import { System_String, System_Array } from '../Platform/Platform';
+import { platform } from '../Environment';
+import { getTreeNodePtr, uiTreeNode, NodeType, UITreeNodePointer } from './UITreeNode';
+
+registerFunction('_blazorRender', renderUITree);
+
+function renderUITree(elementSelector: System_String, tree: System_Array, treeLength: number) {
+  const elementSelectorJs = platform.toJavaScriptString(elementSelector);
+  const element = document.querySelector(elementSelectorJs);
+  if (!element) {
+    throw new Error(`Could not find any element matching selector '${ elementSelectorJs }'.`);
+  }
+
+  clearElement(element);
+  insertNodeRange(element, tree, 0, treeLength - 1);
+}
+
+function insertNodeRange(intoDomElement: Element, tree: System_Array, startIndex: number, endIndex: number) {
+  for (let index = startIndex; index <= endIndex; index++) {
+    const node = getTreeNodePtr(tree, index);
+    insertNode(intoDomElement, tree, node, index);
+
+    // Skip over any descendants, since they are already dealt with recursively
+    const descendantsEndIndex = uiTreeNode.descendantsEndIndex(node);
+    if (descendantsEndIndex > 0) {
+      index = descendantsEndIndex;
+    }
+  }
+}
+
+function insertNode(intoDomElement: Element, tree: System_Array, node: UITreeNodePointer, nodeIndex: number) {
+  const nodeType = uiTreeNode.nodeType(node);
+  switch (nodeType) {
+    case NodeType.element:
+      insertElement(intoDomElement, tree, node, nodeIndex);
+      break;
+    case NodeType.text:
+      insertText(intoDomElement, node);
+      break;
+    default:
+      const unknownType: never = nodeType; // Compile-time verification that the switch was exhaustive
+      throw new Error(`Unknown node type: ${ unknownType }`);
+  }
+}
+
+function insertElement(intoDomElement: Element, tree: System_Array, elementNode: UITreeNodePointer, elementNodeIndex: number) {
+  const tagName = uiTreeNode.elementName(elementNode);
+  const newDomElement = document.createElement(tagName);
+  intoDomElement.appendChild(newDomElement);
+
+  // Recursively insert children
+  const descendantsEndIndex = uiTreeNode.descendantsEndIndex(elementNode);
+  insertNodeRange(newDomElement, tree, elementNodeIndex + 1, descendantsEndIndex);
+}
+
+function insertText(intoDomElement: Element, textNode: UITreeNodePointer) {
+  const textContent = uiTreeNode.textContent(textNode);
+  const newDomTextNode = document.createTextNode(textContent);
+  intoDomElement.appendChild(newDomTextNode);
+}
+
+function clearElement(element: Element) {
+  let childNode: Node;
+  while (childNode = element.firstChild) {
+    element.removeChild(childNode);
+  }
+}
diff --git a/src/Microsoft.Blazor.Browser.JS/src/Rendering/UITreeNode.ts b/src/Microsoft.Blazor.Browser.JS/src/Rendering/UITreeNode.ts
new file mode 100644
index 0000000000..30ec4503aa
--- /dev/null
+++ b/src/Microsoft.Blazor.Browser.JS/src/Rendering/UITreeNode.ts
@@ -0,0 +1,38 @@
+﻿import { System_String, System_Array, Pointer } from '../Platform/Platform';
+import { platform } from '../Environment';
+const uiTreeNodeStructLength = 16;
+
+// To minimise GC pressure, instead of instantiating a JS object to represent each tree node,
+// we work in terms of pointers to the structs on the .NET heap, and use static functions that
+// know how to read property values from those structs.
+
+export function getTreeNodePtr(uiTreeEntries: System_Array, index: number): UITreeNodePointer {
+  return platform.getArrayEntryPtr(uiTreeEntries, index, uiTreeNodeStructLength) as UITreeNodePointer;
+}
+
+export const uiTreeNode = {
+  // The properties and memory layout must be kept in sync with the .NET equivalent in UITreeNode.cs
+  nodeType: (node: UITreeNodePointer) => _readInt32Property(node, 0) as NodeType,
+  elementName: (node: UITreeNodePointer) => _readStringProperty(node, 4),
+  descendantsEndIndex: (node: UITreeNodePointer) => _readInt32Property(node, 8) as NodeType,
+  textContent: (node: UITreeNodePointer) => _readStringProperty(node, 12),
+};
+
+export enum NodeType {
+  // The values must be kept in sync with the .NET equivalent in UITreeNodeType.cs
+  element = 1,
+  text = 2
+}
+
+function _readInt32Property(baseAddress: Pointer, offsetBytes: number) {
+  return platform.readHeapInt32(baseAddress, offsetBytes);
+}
+
+function _readStringProperty(baseAddress: Pointer, offsetBytes: number) {
+  var managedString = platform.readHeapObject(baseAddress, offsetBytes) as System_String;
+  return platform.toJavaScriptString(managedString);
+}
+
+// Nominal type to ensure only valid pointers are passed to the uiTreeNode functions.
+// At runtime the values are just numbers.
+export interface UITreeNodePointer extends Pointer { UITreeNodePointer__DO_NOT_IMPLEMENT: any }
diff --git a/src/Microsoft.Blazor.Browser/Microsoft.Blazor.Browser.csproj b/src/Microsoft.Blazor.Browser/Microsoft.Blazor.Browser.csproj
index 9f5c4f4abb..adcc673aa8 100644
--- a/src/Microsoft.Blazor.Browser/Microsoft.Blazor.Browser.csproj
+++ b/src/Microsoft.Blazor.Browser/Microsoft.Blazor.Browser.csproj
@@ -4,4 +4,8 @@
     <TargetFramework>netstandard2.0</TargetFramework>
   </PropertyGroup>
 
+  <ItemGroup>
+    <ProjectReference Include="..\Microsoft.Blazor\Microsoft.Blazor.csproj" />
+  </ItemGroup>
+
 </Project>
diff --git a/src/Microsoft.Blazor.Browser/Renderer.cs b/src/Microsoft.Blazor.Browser/Renderer.cs
index c2f6b39e58..b7871525bd 100644
--- a/src/Microsoft.Blazor.Browser/Renderer.cs
+++ b/src/Microsoft.Blazor.Browser/Renderer.cs
@@ -1,12 +1,22 @@
 ﻿// Copyright (c) .NET Foundation. All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
+using Microsoft.Blazor.Browser.Interop;
+using Microsoft.Blazor.Components;
+using Microsoft.Blazor.UITree;
+
 namespace Microsoft.Blazor.Browser
 {
-    public class Renderer
+    public static class Renderer
     {
-        public Renderer()
+        public static void Render(IComponent component, string elementSelector)
         {
+            var builder = new UITreeBuilder();
+            component.Render(builder);
+
+            var tree = builder.GetNodes();
+            RegisteredFunction.InvokeUnmarshalled<string, UITreeNode[], int, object>(
+                "_blazorRender", elementSelector, tree.Array, tree.Count);
         }
     }
 }
diff --git a/src/Microsoft.Blazor/Components/IComponent.cs b/src/Microsoft.Blazor/Components/IComponent.cs
new file mode 100644
index 0000000000..95eef828d6
--- /dev/null
+++ b/src/Microsoft.Blazor/Components/IComponent.cs
@@ -0,0 +1,19 @@
+﻿// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using Microsoft.Blazor.UITree;
+
+namespace Microsoft.Blazor.Components
+{
+    /// <summary>
+    /// Represents a UI component.
+    /// </summary>
+    public interface IComponent
+    {
+        /// <summary>
+        /// Renders the component.
+        /// </summary>
+        /// <param name="builder">A <see cref="UITreeBuilder"/> to which the rendered nodes should be appended.</param>
+        void Render(UITreeBuilder builder);
+    }
+}
diff --git a/src/Microsoft.Blazor/UITree/UITreeBuilder.cs b/src/Microsoft.Blazor/UITree/UITreeBuilder.cs
new file mode 100644
index 0000000000..641243eea7
--- /dev/null
+++ b/src/Microsoft.Blazor/UITree/UITreeBuilder.cs
@@ -0,0 +1,84 @@
+﻿// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using System;
+using System.Collections.Generic;
+
+namespace Microsoft.Blazor.UITree
+{
+    /// <summary>
+    /// Provides methods for building a collection of <see cref="UITreeNode"/> entries.
+    /// </summary>
+    public class UITreeBuilder
+    {
+        private const int MinBufferLength = 10;
+        private UITreeNode[] _entries = new UITreeNode[100];
+        private int _entriesInUse = 0;
+        private Stack<int> _openElementIndices = new Stack<int>();
+
+        /// <summary>
+        /// Appends a node representing an element, i.e., a container for other nodes.
+        /// In order for the <see cref="UITreeBuilder"/> state to be valid, you must
+        /// also call <see cref="CloseElement"/> immediately after appending the
+        /// new element's child nodes.
+        /// </summary>
+        /// <param name="elementName">A value representing the type of the element.</param>
+        public void OpenElement(string elementName)
+        {
+            _openElementIndices.Push(_entriesInUse);
+            Append(UITreeNode.Element(elementName));
+        }
+
+        /// <summary>
+        /// Marks a previously appended element node as closed. Calls to this method
+        /// must be balanced with calls to <see cref="OpenElement(string)"/>.
+        /// </summary>
+        public void CloseElement()
+        {
+            var indexOfEntryBeingClosed = _openElementIndices.Pop();
+            _entries[indexOfEntryBeingClosed].CloseElement(_entriesInUse - 1);
+        }
+
+        /// <summary>
+        /// Appends a node representing text content.
+        /// </summary>
+        /// <param name="textContent">Content for the new text node.</param>
+        public void AddText(string textContent)
+            => Append(UITreeNode.Text(textContent));
+
+        /// <summary>
+        /// Clears the builder.
+        /// </summary>
+        public void Clear()
+        {
+            // If the previous usage of the buffer showed that we have allocated
+            // much more space than needed, free up the excess memory
+            var shrinkToLength = Math.Max(MinBufferLength, _entries.Length / 2);
+            if (_entriesInUse < shrinkToLength)
+            {
+                Array.Resize(ref _entries, shrinkToLength);
+            }
+
+            _entriesInUse = 0;
+            _openElementIndices.Clear();
+        }
+
+        /// <summary>
+        /// Returns the <see cref="UITreeNode"/> values that have been appended.
+        /// The return value's <see cref="ArraySegment{T}.Offset"/> is always zero.
+        /// </summary>
+        /// <returns>An array segment of <see cref="UITreeNode"/> values.</returns>
+        public ArraySegment<UITreeNode> GetNodes() =>
+            new ArraySegment<UITreeNode>(_entries, 0, _entriesInUse);
+
+        private void Append(UITreeNode node)
+        {
+            if (_entriesInUse == _entries.Length)
+            {
+                Array.Resize(ref _entries, _entries.Length * 2);
+            }
+
+            _entries[_entriesInUse++] = node;
+        }
+    }
+}
diff --git a/src/Microsoft.Blazor/UITree/UITreeNode.cs b/src/Microsoft.Blazor/UITree/UITreeNode.cs
new file mode 100644
index 0000000000..a6cc45dfc8
--- /dev/null
+++ b/src/Microsoft.Blazor/UITree/UITreeNode.cs
@@ -0,0 +1,52 @@
+﻿// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+namespace Microsoft.Blazor.UITree
+{
+    /// <summary>
+    /// Represents an entry in a tree of user interface (UI) items.
+    /// </summary>
+    public struct UITreeNode
+    {
+        /// <summary>
+        /// Describes the type of this node.
+        /// </summary>
+        public UITreeNodeType NodeType { get; private set; }
+
+        /// <summary>
+        /// If the <see cref="NodeType"/> property equals <see cref="UITreeNodeType.Element"/>,
+        /// gets a name representing the type of the element. Otherwise, the value is <see langword="null"/>.
+        /// </summary>
+        public string ElementName { get; private set; }
+
+        /// <summary>
+        /// If the <see cref="NodeType"/> property equals <see cref="UITreeNodeType.Element"/>,
+        /// gets the index of the final descendant node in the tree. The value is
+        /// zero if the node is of a different type, or if it has not yet been closed.
+        /// </summary>
+        public int ElementDescendantsEndIndex { get; private set; }
+
+        /// <summary>
+        /// If the <see cref="NodeType"/> property equals <see cref="UITreeNodeType.Text"/>,
+        /// gets the content of the text node. Otherwise, the value is <see langword="null"/>.
+        /// </summary>
+        public string TextContent { get; private set; }
+
+        internal static UITreeNode Element(string elementName) => new UITreeNode
+        {
+            NodeType = UITreeNodeType.Element,
+            ElementName = elementName,
+        };
+
+        internal static UITreeNode Text(string textContent) => new UITreeNode
+        {
+            NodeType = UITreeNodeType.Text,
+            TextContent = textContent,
+        };
+
+        internal void CloseElement(int descendantsEndIndex)
+        {
+            ElementDescendantsEndIndex = descendantsEndIndex;
+        }
+    }
+}
diff --git a/src/Microsoft.Blazor/UITree/UITreeNodeType.cs b/src/Microsoft.Blazor/UITree/UITreeNodeType.cs
new file mode 100644
index 0000000000..ed83886a51
--- /dev/null
+++ b/src/Microsoft.Blazor/UITree/UITreeNodeType.cs
@@ -0,0 +1,21 @@
+﻿// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+namespace Microsoft.Blazor.UITree
+{
+    /// <summary>
+    /// Describes the type of a <see cref="UITreeNode"/>.
+    /// </summary>
+    public enum UITreeNodeType: int
+    {
+        /// <summary>
+        /// Represents a container for other nodes.
+        /// </summary>
+        Element = 1,
+
+        /// <summary>
+        /// Represents text content.
+        /// </summary>
+        Text = 2,
+    }
+}
