v0.3.1

2025-11-01 09:12:30 +00:00 · 2013-05-30 15:02:20 -07:00
parent cff20b7a4c
commit 1d628ef207
16 changed files with 477 additions and 308 deletions
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html" class="active">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -201,7 +202,7 @@ literals with <code>this.refs</code>.</p>
        <a class="docs-prev" href="/react/docs/event-handling.html">&larr; Prev</a>
      
      
-        <a class="docs-next" href="/react/docs/api.html">Next &rarr;</a>
+        <a class="docs-next" href="/react/docs/mixins.html">Next &rarr;</a>
      
    </div>
  </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html" class="active">API</a></li>
    </ul>
  </div>
@@ -186,7 +187,7 @@

    <div class="docs-prevnext">
      
-        <a class="docs-prev" href="/react/docs/advanced-components.html">&larr; Prev</a>
+        <a class="docs-prev" href="/react/docs/mixins.html">&larr; Prev</a>
      
      
    </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html" class="active">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html" class="active">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -81,8 +82,8 @@
    <p>Download the starter kit to get started.</p>

 <div class="buttons-unit downloads">
-  <a href="/react/downloads/react-0.3.0.zip" class="button">
-    Download Starter Kit 0.3.0
+  <a href="/react/downloads/react-0.3.1.zip" class="button">
+    Download Starter Kit 0.3.1
  </a>
 </div>

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>React | Mixins</title>
+  <meta name="viewport" content="width=device-width">
+  <meta property="og:title" content="React | Mixins" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="http://facebook.github.io/react/docs/mixins.html" />
+  <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
+  <meta property="og:description" content="A JavaScript library for building user interfaces" />
+
+  <link rel="shortcut icon" href="/react/favicon.ico">
+
+  <link rel="stylesheet" href="/react/css/react.css">
+  <link rel="stylesheet" href="/react/css/syntax.css">
+  <link rel="stylesheet" href="/react/css/codemirror.css">
+
+  <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
+  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
+  <script type="text/javascript" src="/react/js/codemirror.js"></script>
+  <script type="text/javascript" src="/react/js/javascript.js"></script>
+  <script type="text/javascript" src="/react/js/react.min.js"></script>
+  <script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
+  <script type="text/javascript" src="/react/js/live_editor.js"></script>
+  <script type="text/javascript" src="/react/js/showdown.js"></script>
+</head>
+<body>
+
+  <div class="container">
+
+    <div class="nav-main">
+      <div class="wrap">
+        <a class="nav-home" href="/react/index.html">
+          <img class="nav-logo" alt="" src="/react/img/logo_small.png">
+          React
+        </a>
+        <ul class="nav-site">
+          <li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
+          <li><a href="/react/support.html">support</a></li>
+          <li><a href="/react/downloads.html">download</a></li>
+          <li><a href="http://github.com/facebook/react">github</a>
+        </ul>
+        <!-- <iframe src="http://ghbtns.com/github&#45;btn.html?user=facebook&#38;repo=react.js&#38;type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
+      </div>
+    </div>
+
+    
+
+    <section class="content wrap documentationContent">
+  <div class="nav-docs">
+  <div class="nav-docs-section">
+    <h3>Getting started</h3>
+    <ul>
+      <li><a href="/react/docs/getting-started.html">Getting Started</a></li>
+      <li><a href="/react/docs/tutorial.html">Tutorial</a></li>
+      <li><a href="/react/docs/common-questions.html">Common Questions</a></li>
+    </ul>
+  </div>
+
+  <div class="nav-docs-section">
+    <h3>Reference</h3>
+    <ul>
+      <li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
+      <li><a href="/react/docs/component-basics.html">Component Basics</a></li>
+      <li><a href="/react/docs/component-data.html">Component Data</a></li>
+      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
+      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
+      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html" class="active">Mixins</a></li>
+      <li><a href="/react/docs/api.html">API</a></li>
+    </ul>
+  </div>
+</div>
+
+
+  <div class="inner-content">
+    <h1>Mixins</h1>
+    <div class="subHeader"></div>
+    <p>Mixins allow code to be shared between multiple React components. They are pretty similar to mixins
+in Python or traits in PHP. Let&#39;s look at a simple example:</p>
+<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyMixin</span> <span class="o">=</span> <span class="p">{</span>
+  <span class="nx">getMessage</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="s1">&#39;hello world&#39;</span><span class="p">;</span>
+  <span class="p">}</span>
+<span class="p">};</span>
+
+<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
+  <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MyMixin</span><span class="p">],</span>
+  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">getMessage</span><span class="p">()}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
+  <span class="p">}</span>
+<span class="p">});</span>
+</code></pre></div>
+<p>A class can use multiple mixins, but no two mixins can define the same method. Two mixins can, however,
+implement the same <a href="component-lifecycle.html">lifecycle method</a>. In this case, each implementation will be invoked one after another.</p>
+
+<p>The only exception is the <code>shouldComponentUpdate</code> lifecycle method. This method may only be implemented once
+(either by a mixin or by the component).</p>
+<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Mixin1</span> <span class="o">=</span> <span class="p">{</span>
+  <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Mixin1.componentDidMount()&#39;</span><span class="p">);</span>
+  <span class="p">}</span>
+<span class="p">};</span>
+
+<span class="kd">var</span> <span class="nx">Mixin2</span> <span class="o">=</span> <span class="p">{</span>
+  <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Mixin2.componentDidMount()&#39;</span><span class="p">);</span>
+  <span class="p">}</span>
+<span class="p">};</span>
+
+
+<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
+  <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">Mixin1</span><span class="p">,</span> <span class="nx">Mixin2</span><span class="p">],</span>
+  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">hello</span> <span class="nx">world</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
+  <span class="p">}</span>
+<span class="p">});</span>
+</code></pre></div>
+<p>When <code>MyComponent</code> is mounted into the page, the following text will print to the console:</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">Mixin1.componentDidMount()
+Mixin2.componentDidMount()
+</code></pre></div>
+<h2>When should you use mixins?</h2>
+
+<p>In general, add a mixin whenever you want a component to share some utility methods, public interface,
+or lifecycle behavior. Often it&#39;s appropriate to use them as you would use a superclass in another OOP language.</p>
+
+
+    <div class="docs-prevnext">
+      
+        <a class="docs-prev" href="/react/docs/advanced-components.html">&larr; Prev</a>
+      
+      
+        <a class="docs-next" href="/react/docs/api.html">Next &rarr;</a>
+      
+    </div>
+  </div>
+</section>
+
+
+    <footer class="wrap">
+      <div class="left">A Facebook &amp; Instagram collaboration.</div>
+      <div class="right">&copy; 2013 Facebook Inc.</div>
+    </footer>
+  </div>
+  <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','//www.google-analytics.com/analytics.js','ga');
+    ga('create', 'UA-41298772-1', 'facebook.github.io');
+    ga('send', 'pageview');
+  </script>
+</body>
+</html>
+
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -69,6 +69,7 @@
      <li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
      <li><a href="/react/docs/event-handling.html">Event Handling</a></li>
      <li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html">Mixins</a></li>
      <li><a href="/react/docs/api.html">API</a></li>
    </ul>
  </div>
@@ -107,8 +108,8 @@
 <span class="nt">&lt;html&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Hello React<span class="nt">&lt;/title&gt;</span>
-    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.3.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
-    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.3.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.3.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.3.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
@@ -57,22 +57,22 @@
 <a href="/react/docs/getting-started.html">get started with React</a>.</p>

 <div class="buttons-unit downloads">
-  <a href="/react/downloads/react-0.3.0.zip" class="button">
-    Download Starter Kit 0.3.0
+  <a href="/react/downloads/react-0.3.1.zip" class="button">
+    Download Starter Kit 0.3.1
  </a>
 </div>

 <h2>Individual Downloads</h2>

-<h4><a href="http://fb.me/react-0.3.0.min.js">React Core 0.3.0 (production)</a></h4>
+<h4><a href="http://fb.me/react-0.3.1.min.js">React Core 0.3.1 (production)</a></h4>

 <p>The compressed, production version of React core</p>

-<h4><a href="http://fb.me/react-0.3.0.js">React Core 0.3.0 (development)</a></h4>
+<h4><a href="http://fb.me/react-0.3.1.js">React Core 0.3.1 (development)</a></h4>

 <p>The uncompressed, development version of React core with inline documentation.</p>

-<h4><a href="http://fb.me/JSXTransformer-0.3.0.js">JSX Transform</a></h4>
+<h4><a href="http://fb.me/JSXTransformer-0.3.1.js">JSX Transform</a></h4>

 <p>The JSX transformer used to support <a href="/react/docs/syntax.html">XML syntax</a> in JavaScript.</p>

@@ -57,7 +57,7 @@

        <div class="buttons-unit">
          <a href="/react/docs/getting-started.html" class="button">Get Started</a>
-          <a href="/react/downloads.html" class="button">Download React v0.3.0</a>
+          <a href="/react/downloads.html" class="button">Download React v0.3.1</a>
        </div>
      </div>
    </div>
@@ -142,7 +142,7 @@
 <section class="home-bottom-section">
  <div class="buttons-unit">
    <a href="docs/getting-started.html" class="button">Get Started</a>
-    <a href="downloads.html" class="button">Download React v0.3.0</a>
+    <a href="downloads.html" class="button">Download React v0.3.1</a>
  </div>
 </section></p>

@@ -1,5 +1,5 @@
 /**
- * JSXTransformer v0.3.0
+ * JSXTransformer v0.3.1
 */
 (function(e){if("function"==typeof bootstrap)bootstrap("jsxtransformer",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeJSXTransformer=e}else"undefined"!=typeof window?window.JSXTransformer=e():global.JSXTransformer=e()})(function(){var define,ses,bootstrap,module,exports;
 return (function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({1:[function(require,module,exports){
@@ -729,294 +729,7 @@ function transform(visitors, source, options) {
 exports.transform = transform;

 })()
-},{"./utils":8,"source-map":9,"esprima":10}],11:[function(require,module,exports){
-(function(){/**
- * Copyright 2013 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/*global exports:true*/
-"use strict";
-var catchup = require('../lib/utils').catchup;
-var append = require('../lib/utils').append;
-var move = require('../lib/utils').move;
-
-var knownTags = {
-  a: true,
-  abbr: true,
-  address: true,
-  applet: true,
-  area: true,
-  article: true,
-  aside: true,
-  audio: true,
-  b: true,
-  base: true,
-  bdi: true,
-  bdo: true,
-  blockquote: true,
-  body: true,
-  br: true,
-  button: true,
-  canvas: true,
-  circle: true,
-  ellipse: true,
-  caption: true,
-  cite: true,
-  code: true,
-  col: true,
-  colgroup: true,
-  command: true,
-  data: true,
-  datalist: true,
-  dd: true,
-  del: true,
-  details: true,
-  dfn: true,
-  dialog: true,
-  div: true,
-  dl: true,
-  dt: true,
-  em: true,
-  embed: true,
-  fieldset: true,
-  figcaption: true,
-  figure: true,
-  footer: true,
-  form: true,
-  g: true,
-  h1: true,
-  h2: true,
-  h3: true,
-  h4: true,
-  h5: true,
-  h6: true,
-  head: true,
-  header: true,
-  hgroup: true,
-  hr: true,
-  html: true,
-  i: true,
-  iframe: true,
-  img: true,
-  input: true,
-  ins: true,
-  kbd: true,
-  keygen: true,
-  label: true,
-  legend: true,
-  li: true,
-  line: true,
-  link: true,
-  map: true,
-  mark: true,
-  marquee: true,
-  menu: true,
-  meta: true,
-  meter: true,
-  nav: true,
-  noscript: true,
-  object: true,
-  ol: true,
-  optgroup: true,
-  option: true,
-  output: true,
-  p: true,
-  path: true,
-  param: true,
-  pre: true,
-  progress: true,
-  q: true,
-  rect: true,
-  rp: true,
-  rt: true,
-  ruby: true,
-  s: true,
-  samp: true,
-  script: true,
-  section: true,
-  select: true,
-  small: true,
-  source: true,
-  span: true,
-  strong: true,
-  style: true,
-  sub: true,
-  summary: true,
-  sup: true,
-  svg: true,
-  table: true,
-  tbody: true,
-  td: true,
-  text: true,
-  textarea: true,
-  tfoot: true,
-  th: true,
-  thead: true,
-  time: true,
-  title: true,
-  tr: true,
-  track: true,
-  u: true,
-  ul: true,
-  'var': true,
-  video: true,
-  wbr: true
-};
-
-function safeTrim(string) {
-  return string.replace(/^[ \t]+/, '').replace(/[ \t]+$/, '');
-}
-
-// Replace all trailing whitespace characters with a single space character
-function trimWithSingleSpace(string) {
-  return string.replace(/^[ \t\xA0]{2,}/, ' ').
-    replace(/[ \t\xA0]{2,}$/, ' ').replace(/^\s+$/, '');
-}
-
-/**
- * Special handling for multiline string literals
- * print lines:
- *
- *   line
- *   line
- *
- * as:
- *
- *   "line "+
- *   "line"
- */
-function renderXJSLiteral(object, isLast, state, start, end) {
-  /** Added blank check filtering and triming*/
-  var trimmedChildValue = safeTrim(object.value);
-
-  if (trimmedChildValue) {
-    // head whitespace
-    append(object.value.match(/^[\t ]*/)[0], state);
-    if (start) {
-      append(start, state);
-    }
-
-    var trimmedChildValueWithSpace = trimWithSingleSpace(object.value);
-
-    /**
-     */
-    var initialLines = trimmedChildValue.split(/\r\n|\n|\r/);
-
-    var lines = initialLines.filter(function(line) {
-      return safeTrim(line).length > 0;
-    });
-
-    var hasInitialNewLine = initialLines[0] !== lines[0];
-    var hasFinalNewLine =
-      initialLines[initialLines.length - 1] !== lines[lines.length - 1];
-
-    var numLines = lines.length;
-    lines.forEach(function (line, ii) {
-      var lastLine = ii === numLines - 1;
-      var trimmedLine = safeTrim(line);
-      if (trimmedLine === '' && !lastLine) {
-        append(line, state);
-      } else {
-        var preString = '';
-        var postString = '';
-        var leading = '';
-
-        if (ii === 0) {
-          if (hasInitialNewLine) {
-            preString = ' ';
-            leading = '\n';
-          }
-          if (trimmedChildValueWithSpace.substring(0, 1) === ' ') {
-            // If this is the first line, and the original content starts with
-            // whitespace, place a single space at the beginning.
-            preString = ' ';
-          }
-        } else {
-          leading = line.match(/^[ \t]*/)[0];
-        }
-        if (!lastLine || trimmedChildValueWithSpace.substr(
-             trimmedChildValueWithSpace.length - 1, 1) === ' ' ||
-             hasFinalNewLine
-             ) {
-          // If either not on the last line, or the original content ends with
-          // whitespace, place a single character at the end.
-          postString = ' ';
-        }
-
-        append(
-          leading +
-          JSON.stringify(
-            preString + trimmedLine + postString
-          ) +
-          (lastLine ? '' : '+') +
-          line.match(/[ \t]*$/)[0],
-          state);
-      }
-      if (!lastLine) {
-        append('\n', state);
-      }
-    });
-  } else {
-    if (start) {
-      append(start, state);
-    }
-    append('""', state);
-  }
-  if (end) {
-    append(end, state);
-  }
-
-  // add comma before trailing whitespace
-  if (!isLast) {
-    append(',', state);
-  }
-
-  // tail whitespace
-  append(object.value.match(/[ \t]*$/)[0], state);
-  move(object.range[1], state);
-}
-
-function renderXJSExpression(traverse, object, isLast, path, state) {
-  // Plus 1 to skip `{`.
-  move(object.range[0] + 1, state);
-  traverse(object.value, path, state);
-  if (!isLast) {
-    // If we need to append a comma, make sure to do so after the expression.
-    catchup(object.value.range[1], state);
-    append(',', state);
-  }
-  // Minus 1 to skip `}`.
-  catchup(object.range[1] - 1, state);
-  move(object.range[1], state);
-  return false;
-}
-
-function quoteAttrName(attr) {
-  // Quote invalid JS identifiers.
-  if (!/^[a-z_$][a-z\d_$]*$/i.test(attr)) {
-    return "'" + attr + "'";
-  }
-  return attr;
-}
-
-exports.knownTags = knownTags;
-exports.renderXJSExpression = renderXJSExpression;
-exports.renderXJSLiteral = renderXJSLiteral;
-exports.quoteAttrName = quoteAttrName;
-
-})()
-},{"../lib/utils":8}],10:[function(require,module,exports){
+},{"./utils":8,"esprima":9,"source-map":10}],9:[function(require,module,exports){
 (function(){/*
  Copyright (C) 2013 Thaddee Tyl <thaddee.tyl@gmail.com>
  Copyright (C) 2012 Ariya Hidayat <ariya.hidayat@gmail.com>
@@ -7166,7 +6879,294 @@ parseYieldExpression: true
 /* vim: set sw=4 ts=4 et tw=80 : */

 })()
-},{}],9:[function(require,module,exports){
+},{}],11:[function(require,module,exports){
+(function(){/**
+ * Copyright 2013 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*global exports:true*/
+"use strict";
+var catchup = require('../lib/utils').catchup;
+var append = require('../lib/utils').append;
+var move = require('../lib/utils').move;
+
+var knownTags = {
+  a: true,
+  abbr: true,
+  address: true,
+  applet: true,
+  area: true,
+  article: true,
+  aside: true,
+  audio: true,
+  b: true,
+  base: true,
+  bdi: true,
+  bdo: true,
+  blockquote: true,
+  body: true,
+  br: true,
+  button: true,
+  canvas: true,
+  circle: true,
+  ellipse: true,
+  caption: true,
+  cite: true,
+  code: true,
+  col: true,
+  colgroup: true,
+  command: true,
+  data: true,
+  datalist: true,
+  dd: true,
+  del: true,
+  details: true,
+  dfn: true,
+  dialog: true,
+  div: true,
+  dl: true,
+  dt: true,
+  em: true,
+  embed: true,
+  fieldset: true,
+  figcaption: true,
+  figure: true,
+  footer: true,
+  form: true,
+  g: true,
+  h1: true,
+  h2: true,
+  h3: true,
+  h4: true,
+  h5: true,
+  h6: true,
+  head: true,
+  header: true,
+  hgroup: true,
+  hr: true,
+  html: true,
+  i: true,
+  iframe: true,
+  img: true,
+  input: true,
+  ins: true,
+  kbd: true,
+  keygen: true,
+  label: true,
+  legend: true,
+  li: true,
+  line: true,
+  link: true,
+  map: true,
+  mark: true,
+  marquee: true,
+  menu: true,
+  meta: true,
+  meter: true,
+  nav: true,
+  noscript: true,
+  object: true,
+  ol: true,
+  optgroup: true,
+  option: true,
+  output: true,
+  p: true,
+  path: true,
+  param: true,
+  pre: true,
+  progress: true,
+  q: true,
+  rect: true,
+  rp: true,
+  rt: true,
+  ruby: true,
+  s: true,
+  samp: true,
+  script: true,
+  section: true,
+  select: true,
+  small: true,
+  source: true,
+  span: true,
+  strong: true,
+  style: true,
+  sub: true,
+  summary: true,
+  sup: true,
+  svg: true,
+  table: true,
+  tbody: true,
+  td: true,
+  text: true,
+  textarea: true,
+  tfoot: true,
+  th: true,
+  thead: true,
+  time: true,
+  title: true,
+  tr: true,
+  track: true,
+  u: true,
+  ul: true,
+  'var': true,
+  video: true,
+  wbr: true
+};
+
+function safeTrim(string) {
+  return string.replace(/^[ \t]+/, '').replace(/[ \t]+$/, '');
+}
+
+// Replace all trailing whitespace characters with a single space character
+function trimWithSingleSpace(string) {
+  return string.replace(/^[ \t\xA0]{2,}/, ' ').
+    replace(/[ \t\xA0]{2,}$/, ' ').replace(/^\s+$/, '');
+}
+
+/**
+ * Special handling for multiline string literals
+ * print lines:
+ *
+ *   line
+ *   line
+ *
+ * as:
+ *
+ *   "line "+
+ *   "line"
+ */
+function renderXJSLiteral(object, isLast, state, start, end) {
+  /** Added blank check filtering and triming*/
+  var trimmedChildValue = safeTrim(object.value);
+
+  if (trimmedChildValue) {
+    // head whitespace
+    append(object.value.match(/^[\t ]*/)[0], state);
+    if (start) {
+      append(start, state);
+    }
+
+    var trimmedChildValueWithSpace = trimWithSingleSpace(object.value);
+
+    /**
+     */
+    var initialLines = trimmedChildValue.split(/\r\n|\n|\r/);
+
+    var lines = initialLines.filter(function(line) {
+      return safeTrim(line).length > 0;
+    });
+
+    var hasInitialNewLine = initialLines[0] !== lines[0];
+    var hasFinalNewLine =
+      initialLines[initialLines.length - 1] !== lines[lines.length - 1];
+
+    var numLines = lines.length;
+    lines.forEach(function (line, ii) {
+      var lastLine = ii === numLines - 1;
+      var trimmedLine = safeTrim(line);
+      if (trimmedLine === '' && !lastLine) {
+        append(line, state);
+      } else {
+        var preString = '';
+        var postString = '';
+        var leading = '';
+
+        if (ii === 0) {
+          if (hasInitialNewLine) {
+            preString = ' ';
+            leading = '\n';
+          }
+          if (trimmedChildValueWithSpace.substring(0, 1) === ' ') {
+            // If this is the first line, and the original content starts with
+            // whitespace, place a single space at the beginning.
+            preString = ' ';
+          }
+        } else {
+          leading = line.match(/^[ \t]*/)[0];
+        }
+        if (!lastLine || trimmedChildValueWithSpace.substr(
+             trimmedChildValueWithSpace.length - 1, 1) === ' ' ||
+             hasFinalNewLine
+             ) {
+          // If either not on the last line, or the original content ends with
+          // whitespace, place a single character at the end.
+          postString = ' ';
+        }
+
+        append(
+          leading +
+          JSON.stringify(
+            preString + trimmedLine + postString
+          ) +
+          (lastLine ? '' : '+') +
+          line.match(/[ \t]*$/)[0],
+          state);
+      }
+      if (!lastLine) {
+        append('\n', state);
+      }
+    });
+  } else {
+    if (start) {
+      append(start, state);
+    }
+    append('""', state);
+  }
+  if (end) {
+    append(end, state);
+  }
+
+  // add comma before trailing whitespace
+  if (!isLast) {
+    append(',', state);
+  }
+
+  // tail whitespace
+  append(object.value.match(/[ \t]*$/)[0], state);
+  move(object.range[1], state);
+}
+
+function renderXJSExpression(traverse, object, isLast, path, state) {
+  // Plus 1 to skip `{`.
+  move(object.range[0] + 1, state);
+  traverse(object.value, path, state);
+  if (!isLast) {
+    // If we need to append a comma, make sure to do so after the expression.
+    catchup(object.value.range[1], state);
+    append(',', state);
+  }
+  // Minus 1 to skip `}`.
+  catchup(object.range[1] - 1, state);
+  move(object.range[1], state);
+  return false;
+}
+
+function quoteAttrName(attr) {
+  // Quote invalid JS identifiers.
+  if (!/^[a-z_$][a-z\d_$]*$/i.test(attr)) {
+    return "'" + attr + "'";
+  }
+  return attr;
+}
+
+exports.knownTags = knownTags;
+exports.renderXJSExpression = renderXJSExpression;
+exports.renderXJSLiteral = renderXJSLiteral;
+exports.quoteAttrName = quoteAttrName;
+
+})()
+},{"../lib/utils":8}],10:[function(require,module,exports){
 /*
 * Copyright 2009-2011 Mozilla Foundation and contributors
 * Licensed under the New BSD license. See LICENSE.txt or:
@@ -7671,7 +7671,7 @@ exports.visitSuperCall = visitSuperCall;
 exports.visitPrivateProperty = visitPrivateProperty;

 })()
-},{"../lib/utils":8,"../lib/docblock":4,"esprima":10,"base62":15}],6:[function(require,module,exports){
+},{"../lib/utils":8,"../lib/docblock":4,"esprima":9,"base62":15}],6:[function(require,module,exports){
 (function(){/**
 * Copyright 2013 Facebook, Inc.
 *
@@ -7872,7 +7872,7 @@ visitReactTag.test = function(object, path, state) {
 exports.visitReactTag = visitReactTag;

 })()
-},{"../lib/utils":8,"./xjs":11,"esprima":10}],7:[function(require,module,exports){
+},{"../lib/utils":8,"./xjs":11,"esprima":9}],7:[function(require,module,exports){
 (function(){/**
 * Copyright 2013 Facebook, Inc.
 *
@@ -7942,7 +7942,7 @@ visitReactDisplayName.test = function(object, path, state) {
 exports.visitReactDisplayName = visitReactDisplayName;

 })()
-},{"../lib/utils":8,"esprima":10}],15:[function(require,module,exports){
+},{"../lib/utils":8,"esprima":9}],15:[function(require,module,exports){
 var Base62 = (function (my) {
  my.chars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]