added grunt task for generating live samples JS
Connor McSheffrey committed
Oct 3, 2013 at 23:45 UTC
86355eb1ba0b3a8be25a7ba0f7288a4f21667ed5
11 files changed
+229
-13
docs/Gruntfile.js
new
+62
@@ -0,0 +1,62 @@
1
+module.exports = function(grunt) {
2
+
3
+ // Project configuration.
4
+ grunt.initConfig({
5
+ pkg: grunt.file.readJSON('../package.json')
6
+ });
7
+
8
+ function writeToLiveSampleJS(matchedJS) {
9
+
10
+ grunt.file.write('js/cookbook/' + componentName + '.js', liveEditJS);
11
+ }
12
+
13
+ function readFromCookbookEntry(abspath, rootdir, subdir, filename) {
14
+
15
+ var markdown = grunt.file.read(abspath),
16
+
17
+ // read markdown file for code sample
18
+ matchedJS = markdown.match(/`{3}[\s\S]*?`{3}/g),
19
+ trimmedJS,
20
+ componentName,
21
+ componentNameCamelCase,
22
+ componentNameUpperCase,
23
+ liveEditJS;
24
+
25
+ // File has no code sample
26
+ if (matchedJS === null) {
27
+ return;
28
+ };
29
+
30
+ matchedJS = matchedJS[0];
31
+
32
+ // Remove markdown syntax
33
+ matchedJS = matchedJS.slice(5, -3);
34
+
35
+ // remove file extension
36
+ componentName = filename.slice(0, -3);
37
+
38
+
39
+ componentNameCamelCase = componentName;
40
+
41
+ componentNameUpperCase = componentName.toUpperCase().replace("-","_");
42
+
43
+ componentNameCamelCase = componentNameCamelCase.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase() });
44
+
45
+ // Add code sample to live edit
46
+ 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 );'
47
+
48
+ writeToLiveSampleJS(liveEditJS, componentName);
49
+ }
50
+
51
+ grunt.registerTask('makeLiveSamples', 'Out live edit JS file for code samples in React Cookbook entries', function() {
52
+ var rootdir = 'cookbook/';
53
+
54
+ // Recurse through cookbook directory
55
+ grunt.file.recurse(rootdir, readFromCookbookEntry);
56
+
57
+ });
58
+
59
+ // Default task(s).
60
+ grunt.registerTask('default', ['makeLiveSamples']);
61
+
62
+};
\ No newline at end of file
docs/extractCode.js
+16
-13
@@ -16,21 +16,24 @@ function main(dest, filenames) {
16
if (!dest) {
17
throw new Error('no dest provided');
18
}
19
+ console.log(filenames);
20
+
21
filenames.map(function (filename) {
20
- var content = fs.readFileSync(filename).toString('utf8');
21
- var codeSamples = content.match(CODE_SAMPLE);
22
+ var content = fs.readFileSync(filename).toString('utf8');
23
+ var codeSamples = content.match(CODE_SAMPLE);
24
23
- codeSamples.map(function (codeSample) {
24
- // Do a little jank preprocessing
25
- codeSample = codeSample.replace('<!--', '//').replace(' -->', '');
26
- var extracted = codeSample.match(PARTS);
27
- if (!extracted) {
28
- throw new Error('Code sample did not match correct format in ' + filename + ': ' + truncate(codeSample));
29
- }
30
- var filename = extracted[1];
31
- var content = extracted[2].replace(/\*\*/g, '');
32
- fs.writeFileSync(argv.dest + '/' + filename, content);
33
- });
25
+
26
+ codeSamples.map(function (codeSample) {
27
+ // Do a little jank preprocessing
28
+ codeSample = codeSample.replace('<!--', '//').replace(' -->', '');
29
+ var extracted = codeSample.match(PARTS);
30
+ if (!extracted) {
31
+ throw new Error('Code sample did not match correct format in ' + filename + ': ' + truncate(codeSample));
32
+ }
33
+ var filename = extracted[1];
34
+ var content = extracted[2].replace(/\*\*/g, '');
35
+ fs.writeFileSync(argv.dest + '/' + filename, content);
36
+ });
37
});
38
}
39
docs/js/cookbook/cb-02-inline-styles tip.js
new
+19
@@ -0,0 +1,19 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_02-INLINE-STYLES TIP_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+var divStyle = {
9
+ color: 'white',
10
+ backgroundImage: 'url(' + imgUrl + ')',
11
+ WebkitTransition: 'all' // note the capital 'W' here
12
+};
13
+
14
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
15
+";
16
+ React.renderComponent(
17
+ ReactPlayground( {codeText:CB_02-INLINE-STYLES TIP_COMPONENT} ),
18
+ document.getElementById("cb-02InlineStyles tipExample")
19
+ );
\ No newline at end of file
docs/js/cookbook/cb-02-inline-styles.js
new
+19
@@ -0,0 +1,19 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_02-INLINE-STYLES_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+var divStyle = {
9
+ color: 'white',
10
+ backgroundImage: 'url(' + imgUrl + ')',
11
+ WebkitTransition: 'all' // note the capital 'W' here
12
+};
13
+
14
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
15
+";
16
+ React.renderComponent(
17
+ ReactPlayground( {codeText:CB_02-INLINE-STYLES_COMPONENT} ),
18
+ document.getElementById("cb-02InlineStylesExample")
19
+ );
\ No newline at end of file
docs/js/cookbook/cb-03-if-else-in-JSX tip.js
new
+16
@@ -0,0 +1,16 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_03-IF-ELSE-IN-JSX TIP_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+// this
9
+React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
10
+// is the same as this
11
+React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
12
+";
13
+ React.renderComponent(
14
+ ReactPlayground( {codeText:CB_03-IF-ELSE-IN-JSX TIP_COMPONENT} ),
15
+ document.getElementById("cb-03IfElseIn-JSX tipExample")
16
+ );
\ No newline at end of file
docs/js/cookbook/cb-03-if-else-in-JSX.js
new
+16
@@ -0,0 +1,16 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_03-IF-ELSE-IN-JSX_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+// this
9
+React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
10
+// is the same as this
11
+React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
12
+";
13
+ React.renderComponent(
14
+ ReactPlayground( {codeText:CB_03-IF-ELSE-IN-JSX_COMPONENT} ),
15
+ document.getElementById("cb-03IfElseIn-JSXExample")
16
+ );
\ No newline at end of file
docs/js/cookbook/cb-06-style-prop-value-px tip.js
new
+14
@@ -0,0 +1,14 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_06-STYLE-PROP-VALUE-PX TIP_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+var divStyle = {height: 10}; // rendered as "height:10px"
9
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
10
+";
11
+ React.renderComponent(
12
+ ReactPlayground( {codeText:CB_06-STYLE-PROP-VALUE-PX TIP_COMPONENT} ),
13
+ document.getElementById("cb-06StylePropValuePx tipExample")
14
+ );
\ No newline at end of file
docs/js/cookbook/cb-06-style-prop-value-px.js
new
+14
@@ -0,0 +1,14 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_06-STYLE-PROP-VALUE-PX_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+var divStyle = {height: 10}; // rendered as "height:10px"
9
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
10
+";
11
+ React.renderComponent(
12
+ ReactPlayground( {codeText:CB_06-STYLE-PROP-VALUE-PX_COMPONENT} ),
13
+ document.getElementById("cb-06StylePropValuePxExample")
14
+ );
\ No newline at end of file
docs/js/cookbook/cb-08-controlled-input-null-value tip.js
new
+17
@@ -0,0 +1,17 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_08-CONTROLLED-INPUT-NULL-VALUE TIP_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+React.renderComponent(<input value="hi" />, mountNode);
9
+
10
+setTimeout(function() {
11
+ React.renderComponent(<input value={null} />, mountNode);
12
+}, 2000);
13
+";
14
+ React.renderComponent(
15
+ ReactPlayground( {codeText:CB_08-CONTROLLED-INPUT-NULL-VALUE TIP_COMPONENT} ),
16
+ document.getElementById("cb-08ControlledInputNullValue tipExample")
17
+ );
\ No newline at end of file
docs/js/cookbook/cb-08-controlled-input-null-value.js
new
+17
@@ -0,0 +1,17 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var CB_08-CONTROLLED-INPUT-NULL-VALUE_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+React.renderComponent(<input value="hi" />, mountNode);
9
+
10
+setTimeout(function() {
11
+ React.renderComponent(<input value={null} />, mountNode);
12
+}, 2000);
13
+";
14
+ React.renderComponent(
15
+ ReactPlayground( {codeText:CB_08-CONTROLLED-INPUT-NULL-VALUE_COMPONENT} ),
16
+ document.getElementById("cb-08ControlledInputNullValueExample")
17
+ );
\ No newline at end of file
docs/js/cookbook/inline-styles.js
new
+19
@@ -0,0 +1,19 @@
1
+/**
2
+ * @jsx React.DOM
3
+ */
4
+
5
+ var INLINE_STYLES_COMPONENT = "
6
+/** @jsx React.DOM */
7
+
8
+var divStyle = {
9
+ color: 'white',
10
+ backgroundImage: 'url(' + imgUrl + ')',
11
+ WebkitTransition: 'all' // note the capital 'W' here
12
+};
13
+
14
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
15
+";
16
+ React.renderComponent(
17
+ ReactPlayground( {codeText:INLINE_STYLES_COMPONENT} ),
18
+ document.getElementById("inlineStylesExample")
19
+ );
\ No newline at end of file