Initial commit

.gitignore

@@ -15,4 +15,5 @@ showcase/index.html
 icons/index.html
 tutorials/*.html
 index.html
-remote.json
+remote.json
+react_temp/

generate-react-docs.js

@@ -0,0 +1,127 @@
+var fs = require('fs');
+var path = require('path');
+var jsdom = require('jsdom').jsdom;
+var stringify = require('json-fn').stringify;
+
+var VUE_DOCS_PATH = './vue/';
+var REACT_DOCS_OUTPUT_PATH = 'react';
+
+function ensureDirectoryExistence(filePath) {
+    if (!fs.existsSync(filePath)) {
+        fs.mkdirSync(filePath);    
+    }
+}
+
+function getReactToVueComponentMap() {
+    var framework7Vue = fs.readFileSync('./node_modules/framework7-vue/src/framework7-vue.js', 'utf8');
+    var framework7VueString = stringify(framework7Vue);
+    var regex = new RegExp(/["'](f7-[A-Za-z0-9-]+)["']\s*\:\s*([A-Za-z0-9]+),/, 'g');
+    var match;
+    var reactToVueComponentMap = [];    
+
+    while (match = regex.exec(framework7VueString)) {
+        var tagName = match[1];
+        var componentName = match[2];
+
+        reactToVueComponentMap.push({
+            react: componentName,
+            vue: tagName
+        });        
+    }
+
+    return reactToVueComponentMap;
+}
+
+function renameEventHeader(jsdomDoc) {
+    jsdomDoc.documentElement.querySelectorAll('.events-table').forEach(function (element) {
+        console.log(element.parentNode.outerHTML);
+        if (element.previousSibling.tagName.toLowerCase() === 'h2') {
+            let eventHeader = element.previousSibling;
+            eventHeader.innerHTML = eventHeader.innerHTML.replace('Event', 'Event Props');
+        }
+    });
+}
+
+function convertEventsToReactEvents(jsdomDoc) {
+    //renameEventHeader(jsdomDoc);
+    //jsdomDoc.querySelectorAll('.events-table tbody td:')
+}
+
+function replaceEventProps(html) {
+
+}
+
+function replaceDynamicProps(html) {
+    return html.replace(/:([A-Za-z0-9-]+)=(")(.*)(")/g, '$1={$2}');
+}
+
+function replaceVueCommentsWithJsxComments(html) {
+     return html.replace(new RegExp('<!--', 'g'), '{/*')
+        .replace(new RegExp('-->', 'g'), '*/}');
+}
+
+function replaceVueComponentNamesWithReactComponentNames(html) {
+    var reactToVueComponentMap = getReactToVueComponentMap();
+
+    reactToVueComponentMap.sort(function(x, y) {
+        return y.vue.split('-').length - x.vue.split('-').length;
+    });
+
+    for (var i = 0; i < reactToVueComponentMap.length; i++) {
+        var vueComponentName = reactToVueComponentMap[i].vue;
+        var reactComponentName = reactToVueComponentMap[i].react;
+
+        html = html.replace(new RegExp(vueComponentName, 'g'), reactComponentName);
+    }
+
+    return html;
+}
+
+function replaceVueWithReact(html) {
+    return html.replace(/Vue/g, 'React');
+}
+
+function convertVueDocsToReactDocs(htmlFileContents, jsdomDoc) {
+    convertEventsToReactEvents(jsdomDoc);
+
+    var html = jsdomDoc.documentElement.outerHTML;
+    html = replaceVueWithReact(html);
+    html = replaceVueComponentNamesWithReactComponentNames(html);
+    html = replaceVueCommentsWithJsxComments(html);
+    html = replaceDynamicProps(html);
+
+    return html;
+}
+
+function getVueHtmlFiles() {    
+    var files = fs.readdirSync(VUE_DOCS_PATH);
+
+    return files.map(function (fileName) {        
+        var fileContents = fs.readFileSync(VUE_DOCS_PATH + fileName, 'utf8');
+        return { name: fileName, contents: fileContents };
+    });
+}
+
+function getJsDomDocuments(htmlFileNamesAndContents) {
+    return htmlFileNamesAndContents.map(function (htmlFileNamesAndContents) {
+        var document = jsdom(htmlFileNamesAndContents.contents, {
+            features: {
+                FetchExternalResources: false
+            }
+        });
+
+        return { name: htmlFileNamesAndContents.name, document: document };
+    });
+}
+
+module.exports = function () {
+    var htmlFileNamesAndContents = getVueHtmlFiles();
+    var jsdomDocs = getJsDomDocuments(htmlFileNamesAndContents);
+
+    ensureDirectoryExistence(REACT_DOCS_OUTPUT_PATH);
+
+    for (var i = 0; i < htmlFileNamesAndContents.length; i++) {        
+        var convertedContent = convertVueDocsToReactDocs(htmlFileNamesAndContents[i].contents, jsdomDocs[i].document);
+        fs.writeFileSync(REACT_DOCS_OUTPUT_PATH + '/' + htmlFileNamesAndContents[i].name, convertedContent);
+    }
+};

gulpfile.js

@@ -11,9 +11,10 @@
         iconsManifest = require('./manifest-icons.json'),
         useCDN = true,
         cdnPath = '//cdn.framework7.io',
-        remote = require('./remote.json'),
+        //remote = require('./remote.json'),
         sftp = require('gulp-sftp'),
         gutil = require( 'gulp-util' ),
+        generateReactDocs = require('./generate-react-docs'),
         paths = {
             root: './',
             css: './css',
@@ -27,6 +28,7 @@
             examples: './examples',
             apps: './apps',
             vue: './vue',
+            react: './react'
         },
         pages = {
             home: {
@@ -80,6 +82,10 @@
             vue: {
                 src: './src/jade/vue/**/*.jade',
                 dest: './vue/'
+            },
+            react: {
+                src: './src/jade/react/**/*.jade',
+                dest: './react/'
             }
         },
         pageKeys = [],
@@ -90,6 +96,8 @@
             }
         ];
 
+    generateReactDocs();
+
     for (var page in pages) {
         if(pages.hasOwnProperty(page)) pageKeys.push(page);
     }

package.json

@@ -12,13 +12,16 @@
   },
   "devDependencies": {
     "del": "^2.2.2",
+    "framework7-vue": "^0.8.0",
     "gulp": "^3.9.1",
     "gulp-connect": "^2.3.1",
     "gulp-jade": "^1.1.0",
     "gulp-less": "^3.0.5",
     "gulp-open": "^1.0.0",
     "gulp-sftp": "^0.1.5",
     "gulp-util": "^3.0.8",
-    "jade": "^1.11.0"
+    "jade": "^1.11.0",
+    "jsdom": "^9.10.0",
+    "json-fn": "^1.1.1"
   }
 }