can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - can-vdom</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="./static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" "> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> </li> <li class=" parent expanded"> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> <ul> <li class=" "> <a class="module" href="can-construct-super.html" title="can.Construct.super is a plugin that makes it easier to call base functions from inside inheriting functions."> can-construct-super </a> </li> <li class=" "> <a class="module" href="can-define-stream.html" title="Define property values using streams. can-stream is used internally to provide the stream functionality."> can-define-stream </a> </li> <li class=" "> <a class="module" href="can-fixture.html" title="can-fixture intercepts an AJAX request and simulates the response with a file or function."> can-fixture </a> </li> <li class=" "> <a class="module" href="can-fixture-socket.html" title="Simulate socket.io services."> can-fixture-socket </a> </li> <li class=" "> <a class="module" href="can-jquery.html" title="Extensions to the event system so that can events and jQuery events are cross-bound. Importing can-jquery will return the jQuery object and wire up the event system. var $ = require("can-jquery"); var div = $("<div>"); div.on("inserted", function(){ // it inserted! }); $("body").append(div);"> can-jquery </a> </li> <li class=" "> <a class="module" href="can-stache-converters.html" title="Provides a set of converters useful for two-way binding with form elements such as <input> and <select>."> can-stache-converters </a> </li> <li class=" "> <a class="module" href="can-stream.html" title="Convert observable values into streams. Kefir is used internally to provide the stream functionality."> can-stream </a> </li> <li class="current parent expanded"> <a class="module" href="can-vdom.html" title="A browser-lite environment for Node.js or a worker thread."> can-vdom </a> <ul> <li> <span>types</span> <ul> <li class=" "> <a class="typedef" href="can-vdom.types.window.html" title="An object representing a fake window object."> window </a> </li> </ul> </li> <li> <span>modules</span> <ul> <li class=" "> <a class="module" href="can-vdom/make-document/make-document.html" title="Exports a function that when called, returns a dom-light document object."> ./make-document/ </a> </li> <li class=" "> <a class="module" href="can-vdom/make-window/make-window.html" title="Exports a function that window called, returns an object that looks like a window."> ./make-window/ </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="can-view-import.html" title=""> can-view-import </a> </li> <li class=" "> <a class="module" href="can-zone.html" title=""> can-zone </a> </li> <li class=" "> <a class="module" href="steal-stache.html" title="A StealJS extension that allows stache templates as dependencies."> steal-stache </a> </li> </ul> </li> <li class=" "> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </li> <li class=" "> <a class="page" href="can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../index.html">CanJS</a></li> / <li><a href="can-ecosystem.html">Ecosystem</a></li> / <li><a href="can-vdom.html">can-vdom</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>can-vdom</h1> <div>module</div> </div> <section class="description"> <p>A browser-lite environment for Node.js or a worker thread.</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-social"> <li> <a class="npm-button" href="https://www.npmjs.com/package/can-vdom"> <img src="https://img.shields.io/badge/npm%20package-3.0.1-brightgreen.svg" alt="npm package badge" /> </a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/can-vdom" data-count-href="/canjs/can-vdom/stargazers" data-count-api="/repos/canjs/can-vdom#stargazers_count">Star</a> </li> </ul> <ul class="title-links">  <li><a href="//github.com/canjs/can-vdom/tree/v3.0.1/can-vdom.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>undefined</code> </h2> <p>The <code>can-vdom</code> module does not export anything, but it changes the current environment to have the limited subset of browser environment behavior and functionality needed to support CanJS templates and other behavior without a native DOM.</p> <pre><code class="language-js">require("can-vdom"); window === global; // true document.getElementsByTagName("body"); // [HTMLBodyElement] </code></pre> <p><code>can-vdom</code> decorates the environment <code>global</code> to include:</p> <ul> <li>a non-functional <code>navigator</code>, <code>location</code>, and <code>history</code> object.</li> <li>a limitedly functional <code>document</code> with basic <code>Node</code> behavior, event binding and dispatching.</li> </ul> </div> <section class="body"> <h2>Shiming a browser environment</h2> <p>Importing <code>can-vdom</code> will shim a browser-like environment into Node's globals. Use this approach to run code that expects a global <code>window</code> and/or <code>document</code> object.</p> <pre><code class="language-js">require("can-vdom"); typeof window; // "object" typeof window.addEventListener; // "function" document.getElementById("foo"); // undefined </code></pre> <h2>Loading as a module</h2> <p>If you want to prevent setting globals you can load <code>can-vdom/make-window/make-window</code> directly:</p> <pre><code class="language-js">var makeWindow = require("can-vdom/make-window/make-window"); var myWindow = makeWindow(global); </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-vdom/can-vdom.md"},"description":"A browser-lite environment for Node.js or a worker thread. \n","type":"module","title":"","types":[{"type":"undefined","description":"\n\nThe `can-vdom` module does not export anything, but it changes the current\nenvironment to have the limited subset of browser environment behavior and\nfunctionality needed to support CanJS templates and other behavior without\na native DOM.\n\n```js\nrequire(\"can-vdom\");\n\nwindow === global; // true\n\ndocument.getElementsByTagName(\"body\"); // [HTMLBodyElement]\n```\n\n`can-vdom` decorates the environment `global` to include:\n\n - a non-functional `navigator`, `location`, and `history` object.\n - a limitedly functional `document` with basic `Node` behavior, event binding and dispatching.\n\n\n"}],"name":"can-vdom","parent":"can-ecosystem","package":{"_args":[[{"raw":"can-vdom@3.0.1","scope":null,"escapedName":"can-vdom","name":"can-vdom","rawSpec":"3.0.1","spec":"3.0.1","type":"version"},"/Users/kevin/dev/canjs"]],"_from":"can-vdom@3.0.1","_id":"can-vdom@3.0.1","_inCache":true,"_location":"/can-vdom","_nodeVersion":"5.10.1","_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/can-vdom-3.0.1.tgz_1477252322533_0.927970786113292"},"_npmUser":{"name":"justinbmeyer","email":"justin@bitovi.com"},"_npmVersion":"3.8.3","_phantomChildren":{"micro-location":"0.1.5","simple-html-tokenizer":"0.2.5"},"_requested":{"raw":"can-vdom@3.0.1","scope":null,"escapedName":"can-vdom","name":"can-vdom","rawSpec":"3.0.1","spec":"3.0.1","type":"version"},"_requiredBy":["/"],"_resolved":"https://registry.npmjs.org/can-vdom/-/can-vdom-3.0.1.tgz","_shasum":"8b6c3527f05717fd6da9dccc9006a5df88d1d569","_shrinkwrap":null,"_spec":"can-vdom@3.0.1","_where":"/Users/kevin/dev/canjs","author":{"name":"Bitovi","email":"contact@bitovi.com","url":"http://bitovi.com"},"bit-docs":{"dependencies":{"bit-docs-glob-finder":"^0.0.5","bit-docs-dev":"^0.0.3","bit-docs-js":"^0.0.3","bit-docs-generate-readme":"^0.0.8"},"glob":{"pattern":"**/*.{js,md}","ignore":"node_modules/**/*"},"readme":{"apis":"./docs/apis.json"},"parent":"can-vdom"},"bugs":{"url":"https://github.com/canjs/can-vdom/issues"},"dependencies":{"can-simple-dom":"^0.4.0","can-util":"^3.0.0-pre.17","can-view-parser":"^3.0.0-pre.2"},"description":"A browser-lite environment for nodejs","devDependencies":{"bit-docs":"0.0.7","chai":"^3.4.1","done-serve":"^0.2.0","donejs-cli":"^0.9.4","generator-donejs":"^0.9.0","jshint":"^2.9.1","mocha":"^2.3.4","steal":"^0.16.0","steal-mocha":"0.0.3","steal-tools":"^0.16.0","testee":"^0.2.4"},"directories":{},"dist":{"shasum":"8b6c3527f05717fd6da9dccc9006a5df88d1d569","tarball":"https://registry.npmjs.org/can-vdom/-/can-vdom-3.0.1.tgz"},"gitHead":"dc0004ebf83a9ec3a97c607d91005c4c7ee64a30","homepage":"http://canjs.com","keywords":["donejs","canjs"],"main":"can-vdom.js","maintainers":[{"name":"daffl","email":"daff@neyeon.de"},{"name":"justinbmeyer","email":"justin@bitovi.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"},{"name":"phillipskevin","email":"kphillips86@gmail.com"},{"name":"sinjhin","email":"john@ardea.io"}],"name":"can-vdom","optionalDependencies":{},"readme":"ERROR: No README data found!","repository":{"type":"git","url":"git://github.com/canjs/can-vdom.git"},"scripts":{"build":"node build.js","develop":"done-serve --static --develop --port 8080","document":"bit-docs","jshint":"jshint ./*.js --config","postversion":"git push --tags && git checkout master && git branch -D release && git push","preversion":"npm test && npm run build","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","release:pre":"npm version prerelease && npm publish","test":"npm run test:node && npm run test:browser","test:browser":"testee test/test.html --browsers firefox --reporter Spec","test:node":"mocha test/test.js","testee":"testee test/test.html --browsers firefox","version":"git commit -am \"Update dist for release\" && git checkout -b release && git add -f dist/"},"system":{"main":"can-vdom","npmAlgorithm":"flat","map":{"./assert":"chai/chai"},"meta":{"chai/chai":{"format":"global","exports":"chai.assert"}}},"version":"3.0.1"},"comment":" ","pathToRoot":".."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="./static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>