server-components/src/index.js at 568ee368938a481bbcce351389b3f7e9c3f60163 · pimterry/server-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
"use strict";

var domino = require("domino");

/**
 * The DOM object (components.dom) exposes tradition DOM objects (normally globally available
 * in browsers) such as the CustomEvent and various HTMLElement classes, for your component
 * implementations.
 */
exports.dom = domino.impl;

/**
 * Creates a returns a new custom HTML element prototype, extending the HTMLElement prototype.
 *
 * Note that this does *not* register the element. To do that, call components.registerElement
 * with an element name, and options (typically including the prototype returned here as your
 * 'prototype' value).
 */
var CustomElementRegistry = require('./registry');
exports.customElements = CustomElementRegistry.instance();
exports.HTMLElement = CustomElementRegistry.HTMLElement;

const _upgradedProp = '__$CE_upgraded';


function transformTree(document, visitedNodes, currentNode, callback) {

    var task = visitedNodes.has(currentNode) ? undefined : callback(currentNode);

    visitedNodes.add(currentNode);

    let visitChildren = () => Promise.all(
        map(currentNode.childNodes, (child) => transformTree(document, visitedNodes, child, callback))
    );

    if ( task && task.then ) {
        return task.then(visitChildren);
    }
    else {
        return visitChildren();
    }
}

/**
 * Take a string of HTML input, and render it into a full page, handling any custom elements found
 * within, and returning a promise for the resulting string of HTML.
 */
exports.renderPage = function renderPage(input) {
    let document = domino.createDocument(input);
    return renderNode(document).then((renderedDocument) => renderedDocument.outerHTML);
};

/**
 * Take a string of HTML input, and render as a page fragment, handling any custom elements found
 * within, and returning a promise for the resulting string of HTML. Any full page content (<html>
 * and <body> tags) will be stripped.
 */
exports.renderFragment = function render(input) {
    let document = domino.createDocument();
    var template = document.createElement("template");
    // Id added for clarity, as this template is potentially visible
    // from JS running within, if it attempts to search its parent.
    template.id = "server-components-fragment-wrapper";
    template.innerHTML = input;

    return renderNode(template.content).then((template) => template.innerHTML);
};

/**
 * Takes a full Domino node object. Traverses within it and renders all the custom elements found.
 * Returns a promise for the document object itself, resolved when every custom element has
 * resolved, and rejected if any of them are rejected.
 */
function renderNode(rootNode) {
    let createdPromises = [];

    var document = getDocument(rootNode);
    var visitedNodes = new Set();
    var upgradedNodes = new Set();
    var customElements = exports.customElements;

    return transformTree(document, visitedNodes, rootNode, function render (element) {

        const definition = customElements.getDefinition(element.localName);

        if (definition) {
            if ( upgradedNodes.has(element[_upgradedProp]) ) {
                return;
            }
            upgradeElement(element, definition, true);
            upgradedNodes.add(element);

            if (definition.connectedCallback) {
                return new Promise(function(resolve, reject) {
                    resolve( definition.connectedCallback.call(element, document) );
                });
            }
        }
    })
        .then(() => rootNode);
}

/**
 * If rootNode is not a real document (e.g. while rendering a fragment), then some methods such as
 * createElement are not available. This method ensures you have a document equivalent object: if
 * you call normal document methods on it (createElement, querySelector, etc) you'll get what you
 * expect.
 *
 * That means methods independent of page hierarchy, especially those that are only present on
 * the true document object (createElement), should be called on the real document, and methods that
 * care about document hierarchy (querySelectorAll, getElementById) should be scope to the given node.
 */
function getDocument(rootNode) {
    // Only real documents have a null ownerDocument
    if (rootNode.ownerDocument === null) return rootNode;

    else {
        let document = rootNode.ownerDocument;

        var documentMethods = [
            'compatMode',
            'createTextNode',
            'createComment',
            'createDocumentFragment',
            'createProcessingInstruction',
            'createElement',
            'createElementNS',
            'createEvent',
            'createTreeWalker',
            'createNodeIterator',
            'location',
            'title',
            'onabort',
            'onreadystatechange',
            'onerror',
            'onload',
        ];

        documentMethods.forEach((propertyName) => {
            var property = document[propertyName];
            if (typeof(property) === 'function') property = property.bind(document);
            rootNode[propertyName] = property;
        });

        return rootNode;
    }
}

function upgradeElement (element, definition, callConstructor) {
    const prototype = definition.constructor.prototype;
    Object.setPrototypeOf(element, prototype);
    if (callConstructor) {
        CustomElementRegistry.instance()._setNewInstance(element);
        new (definition.constructor)();
        element[_upgradedProp] = true;
        console.assert(CustomElementRegistry.instance()._newInstance === null);
    }

    const observedAttributes = definition.observedAttributes;
    const attributeChangedCallback = definition.attributeChangedCallback;
    if (attributeChangedCallback && observedAttributes.length > 0) {

        // Trigger attributeChangedCallback for existing attributes.
        // https://html.spec.whatwg.org/multipage/scripting.html#upgrades
        for (let i = 0; i < observedAttributes.length; i++) {
            const name = observedAttributes[i];
            if (element.hasAttribute(name)) {
                const value = element.getAttribute(name);
                attributeChangedCallback.call(element, name, null, value, null);
            }
        }
    }
  }

//
// Helpers
//
function map (arrayLike, fn) {
    var results = [];
    for (var i=0; i < arrayLike.length; i++) {
        results.push( fn(arrayLike[i]) );
    }
    return results;
}