Version 3.10.1

Example: YUI, Node.js and DOM

Jump to Table of Contents

YUI does not come with Server Side DOM support out of the box, but you can still use one. This example will show you one way to accomplish this task.

Installing the packages

This example uses the JSDom npm package, but theortically YUI can be used with any valid DOM.

npm install yui jsdom

Setup the DOM

JSDom has many useful features and some that are a little on the edge, luckily it's highly configurable.

Here we will require jsdom, configure it to our liking and then create the window and document references that we will later give to our YUI instance.

#!/usr/bin/env node

    var jsdom = require('jsdom');

    //Turn off all the things we don't want.
    jsdom.defaultDocumentFeatures = {
        //Don't bring in outside resources
        FetchExternalResources   : false,
        //Don't process them
        ProcessExternalResources : false,
        //Don't expose Mutation events (for performance)
        MutationEvents           : false,
        //Do not use their implementation of QSA
        QuerySelector            : false
    };
    
    var dom = jsdom.defaultLevel;
    //Hack in focus and blur methods so they don't fail when a YUI widget calls them
    dom.Element.prototype.blur = function() {};
    dom.Element.prototype.focus = function() {};


    //Create the document and window
    var document = jsdom.jsdom("<html><head><title></title></head><body><h1>Hello YUI!</h1></body></html>"),
    window = document.createWindow();

Applying this DOM to a YUI instance

Using the references to window and document from the above snippet, you just pass them to the YUI constructor as the win and doc properties.

YUI({
    win: window,
    doc: document
}).use('node', function(Y) {
    
    Y.one('title').setHTML('YUI Server Side DOM');
    console.log(Y.one('doc').get('outerHTML'));

});

This will output this:

<html style="">
  <head>
    <title>YUI Server Side DOM</title>
  </head>
  <body>
    <h1>Hello YUI!</h1>
  </body>
</html>

Rendering a widget (Full Source)

In this example, we will render a TabView in Node.js and print the document to the screen:

#!/usr/bin/env node

    var jsdom = require('jsdom');

    //Turn off all the things we don't want.
    jsdom.defaultDocumentFeatures = {
      FetchExternalResources   : false,
      ProcessExternalResources : false,
      MutationEvents           : false,
      QuerySelector            : false
    };
    
    var dom = jsdom.defaultLevel;
    //Hack in focus and blur methods so they don't fail
    dom.Element.prototype.blur = function() {};
    dom.Element.prototype.focus = function() {};


    //Create the document and window
    var document = jsdom.jsdom("<html><head><title></title></head><body><h1>Hello YUI!</h1></body></html>"),
    window = document.createWindow();


var YUI = require('yui').YUI;

YUI({
    win: window,
    doc: document
}).use('tabview', function(Y) {

    Y.one('title').setHTML('YUI Server Side DOM');

    Y.one('body').append('<div id="demo"></div>');
    
    Y.log('Creating the TabView from script..');

    var tabview = new Y.TabView({
        children: [{
            label: 'foo',
            content: '<p>foo content</p>'
        }, {
            label: 'bar',
            content: '<p>bar content</p>'
        }, {
            label: 'baz',
            content: '<p>baz content</p>'
        }]
    });

    Y.log('Rendering..');
    tabview.render('#demo');

    console.log(Y.one('doc').get('outerHTML'));
});

The above script will output this:

<html style="">
  <head>
    <title>YUI Server Side DOM</title>
  </head>
  <body>
    <h1>Hello YUI!</h1>
    <div id="demo">
      <div id="yui_3_3_0_1_1326472765944_13" class="yui3-widget yui3-tabview" style="">
        <div id="yui_3_3_0_1_1326472765944_15" class="yui3-tabview-content">
          <ul class="yui3-tabview-list">
            <li class="yui3-tab yui3-widget yui3-tab-selected" id="yui_3_3_0_1_1326472765944_41" role="presentation" style="">
              <a class="yui3-tab-label yui3-tab-content" id="yui_3_3_0_1_1326472765944_43" role="tab">foo</a>
            </li>
            <li class="yui3-tab yui3-widget" id="yui_3_3_0_1_1326472765944_63" role="presentation" style="">
              <a class="yui3-tab-label yui3-tab-content" id="yui_3_3_0_1_1326472765944_65" role="tab" tabindex="-1">bar</a>
            </li>
            <li class="yui3-tab yui3-widget" id="yui_3_3_0_1_1326472765944_83" role="presentation" style="">
              <a class="yui3-tab-label yui3-tab-content" id="yui_3_3_0_1_1326472765944_85" role="tab" tabindex="-1">baz</a>
            </li>
          </ul>
          <div class="yui3-tabview-panel">
            <div class="yui3-tab-panel yui3-tab-panel-selected" role="tabpanel" aria-labelledby="yui_3_3_0_1_1326472765944_43">
              <p>foo content</p>
            </div>
            <div class="yui3-tab-panel" role="tabpanel" aria-labelledby="yui_3_3_0_1_1326472765944_65">
              <p>bar content</p>
            </div>
            <div class="yui3-tab-panel" role="tabpanel" aria-labelledby="yui_3_3_0_1_1326472765944_85">
              <p>baz content</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>