added grunt task for generating live samples JS

Gruntfile.js

@@ -0,0 +1,62 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('../package.json')
+  });
+
+  function writeToLiveSampleJS(matchedJS) {
+    
+    grunt.file.write('js/cookbook/' + componentName + '.js', liveEditJS);
+  }
+
+  function readFromCookbookEntry(abspath, rootdir, subdir, filename) {
+      
+    var markdown = grunt.file.read(abspath),
+
+        // read markdown file for code sample
+        matchedJS = markdown.match(/`{3}[\s\S]*?`{3}/g),
+        trimmedJS,
+        componentName,
+        componentNameCamelCase,
+        componentNameUpperCase,
+        liveEditJS;
+
+        // File has no code sample
+        if (matchedJS === null) {
+          return;
+        };
+
+        matchedJS = matchedJS[0];
+
+        // Remove markdown syntax
+        matchedJS = matchedJS.slice(5, -3);
+
+        // remove file extension
+        componentName = filename.slice(0, -3);
+
+
+        componentNameCamelCase = componentName;
+
+        componentNameUpperCase = componentName.toUpperCase().replace("-","_");
+
+        componentNameCamelCase = componentNameCamelCase.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase() });
+
+        // Add code sample to live edit 
+        liveEditJS = '/**\n * @jsx React.DOM\n */\n\n var ' + componentNameUpperCase + '_COMPONENT = "' + matchedJS + '";\n React.renderComponent(\n ReactPlayground( {codeText:' + componentNameUpperCase + '_COMPONENT} ),\n document.getElementById("' + componentNameCamelCase + 'Example")\n );'
+
+        writeToLiveSampleJS(liveEditJS, componentName);
+  }
+
+  grunt.registerTask('makeLiveSamples', 'Out live edit JS file for code samples in React Cookbook entries', function() {
+      var rootdir = 'cookbook/';
+      
+      // Recurse through cookbook directory
+      grunt.file.recurse(rootdir, readFromCookbookEntry);
+
+  });
+
+  // Default task(s).
+  grunt.registerTask('default', ['makeLiveSamples']);
+
+};

extractCode.js

@@ -16,21 +16,24 @@ function main(dest, filenames) {
     if (!dest) {
 	throw new Error('no dest provided');
     }
+    console.log(filenames);
+    
     filenames.map(function (filename) {
-	var content = fs.readFileSync(filename).toString('utf8');
+		var content = fs.readFileSync(filename).toString('utf8');
-	var codeSamples = content.match(CODE_SAMPLE);
+		var codeSamples = content.match(CODE_SAMPLE);
+
 		
-	codeSamples.map(function (codeSample) {
+		codeSamples.map(function (codeSample) {
-	    // Do a little jank preprocessing
+		    // Do a little jank preprocessing
-	    codeSample = codeSample.replace('<!--', '//').replace(' -->', '');
+		    codeSample = codeSample.replace('<!--', '//').replace(' -->', '');
-	    var extracted = codeSample.match(PARTS);
+		    var extracted = codeSample.match(PARTS);
-	    if (!extracted) {
+		    if (!extracted) {
-		throw new Error('Code sample did not match correct format in ' + filename + ': ' + truncate(codeSample));
+			throw new Error('Code sample did not match correct format in ' + filename + ': ' + truncate(codeSample));
-	    }
+		    }
-	    var filename = extracted[1];
+		    var filename = extracted[1];
-	    var content = extracted[2].replace(/\*\*/g, '');
+		    var content = extracted[2].replace(/\*\*/g, '');
-	    fs.writeFileSync(argv.dest + '/' + filename, content);
+		    fs.writeFileSync(argv.dest + '/' + filename, content);
-	});
+		});
     });
 }
 

js/cookbook/cb-02-inline-styles tip.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_02-INLINE-STYLES TIP_COMPONENT = "
+/** @jsx React.DOM */
+
+var divStyle = {
+  color: 'white',
+  backgroundImage: 'url(' + imgUrl + ')',
+  WebkitTransition: 'all' // note the capital 'W' here
+};
+
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_02-INLINE-STYLES TIP_COMPONENT} ),
+ document.getElementById("cb-02InlineStyles tipExample")
+ );

js/cookbook/cb-02-inline-styles.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_02-INLINE-STYLES_COMPONENT = "
+/** @jsx React.DOM */
+
+var divStyle = {
+  color: 'white',
+  backgroundImage: 'url(' + imgUrl + ')',
+  WebkitTransition: 'all' // note the capital 'W' here
+};
+
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_02-INLINE-STYLES_COMPONENT} ),
+ document.getElementById("cb-02InlineStylesExample")
+ );

js/cookbook/cb-03-if-else-in-JSX tip.js

@@ -0,0 +1,16 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_03-IF-ELSE-IN-JSX TIP_COMPONENT = "
+/** @jsx React.DOM */
+
+// this
+React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
+// is the same as this
+React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_03-IF-ELSE-IN-JSX TIP_COMPONENT} ),
+ document.getElementById("cb-03IfElseIn-JSX tipExample")
+ );

js/cookbook/cb-03-if-else-in-JSX.js

@@ -0,0 +1,16 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_03-IF-ELSE-IN-JSX_COMPONENT = "
+/** @jsx React.DOM */
+
+// this
+React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
+// is the same as this
+React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_03-IF-ELSE-IN-JSX_COMPONENT} ),
+ document.getElementById("cb-03IfElseIn-JSXExample")
+ );

js/cookbook/cb-06-style-prop-value-px tip.js

@@ -0,0 +1,14 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_06-STYLE-PROP-VALUE-PX TIP_COMPONENT = "
+/** @jsx React.DOM */
+
+var divStyle = {height: 10}; // rendered as "height:10px"
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_06-STYLE-PROP-VALUE-PX TIP_COMPONENT} ),
+ document.getElementById("cb-06StylePropValuePx tipExample")
+ );

js/cookbook/cb-06-style-prop-value-px.js

@@ -0,0 +1,14 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_06-STYLE-PROP-VALUE-PX_COMPONENT = "
+/** @jsx React.DOM */
+
+var divStyle = {height: 10}; // rendered as "height:10px"
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_06-STYLE-PROP-VALUE-PX_COMPONENT} ),
+ document.getElementById("cb-06StylePropValuePxExample")
+ );

js/cookbook/cb-08-controlled-input-null-value tip.js

@@ -0,0 +1,17 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_08-CONTROLLED-INPUT-NULL-VALUE TIP_COMPONENT = "
+/** @jsx React.DOM */
+
+React.renderComponent(<input value="hi" />, mountNode);
+
+setTimeout(function() {
+  React.renderComponent(<input value={null} />, mountNode);
+}, 2000);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_08-CONTROLLED-INPUT-NULL-VALUE TIP_COMPONENT} ),
+ document.getElementById("cb-08ControlledInputNullValue tipExample")
+ );

js/cookbook/cb-08-controlled-input-null-value.js

@@ -0,0 +1,17 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var CB_08-CONTROLLED-INPUT-NULL-VALUE_COMPONENT = "
+/** @jsx React.DOM */
+
+React.renderComponent(<input value="hi" />, mountNode);
+
+setTimeout(function() {
+  React.renderComponent(<input value={null} />, mountNode);
+}, 2000);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:CB_08-CONTROLLED-INPUT-NULL-VALUE_COMPONENT} ),
+ document.getElementById("cb-08ControlledInputNullValueExample")
+ );

js/cookbook/inline-styles.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+ var INLINE_STYLES_COMPONENT = "
+/** @jsx React.DOM */
+
+var divStyle = {
+  color: 'white',
+  backgroundImage: 'url(' + imgUrl + ')',
+  WebkitTransition: 'all' // note the capital 'W' here
+};
+
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+";
+ React.renderComponent(
+ ReactPlayground( {codeText:INLINE_STYLES_COMPONENT} ),
+ document.getElementById("inlineStylesExample")
+ );