Connor McSheffrey
11 years ago
11 changed files with 229 additions and 13 deletions
@ -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']); |
|||
|
|||
}; |
@ -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") |
|||
); |
@ -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") |
|||
); |
@ -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") |
|||
); |
@ -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") |
|||
); |
@ -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") |
|||
); |
@ -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") |
|||
); |
@ -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") |
|||
); |
@ -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") |
|||
); |
@ -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") |
|||
); |
Loading…
Reference in new issue