-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
63359e6
commit 3c43456
Showing
11 changed files
with
332 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <!DOCTYPE html><html><script src="https://code.getmdl.io/1.3.0/material.min.js" defer></script><link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" href="https://getmdl.io/templates/article/styles.css"><link rel="stylesheet" href="custom-styles.css"><body class="component-lib"><div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer"><div class="mdl-layout__drawer"><form><div class="mdl-textfield mdl-js-textfield search-area"><input class="mdl-textfield__input js-component-search" type="text" placeholder="Search..."></div></form><span class="mdl-layout-title">Collection</span><nav class="mdl-navigation"><a class="mdl-navigation__link" title="LoremIpsum.vue" href="#LoremIpsum">LoremIpsum.vue</a><a class="mdl-navigation__link" title="ScrollProgress.vue" href="#ScrollProgress">ScrollProgress.vue</a><a class="mdl-navigation__link" title="VueSound.vue" href="#VueSound">VueSound.vue</a></nav></div><main class="mdl-layout__content"><div class="page-content"><div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800"><section id="LoremIpsum"><div class="demo-crumbs mdl-color-text--grey-500">src-test/lorem-generator/LoremIpsum.vue</div><h3>lorem</h3><!--Properties--><h4>Properties</h4><ul><li>add</li><li>extraClass</li></ul><!--Methods--><h4>Methods</h4><ul><li>createAndPutLoremText</li><li>selectCorrectRef</li></ul><!--Methods--><h4>Methods</h4><ul><li>createAndPutLoremText</li><li>selectCorrectRef</li></ul><!--Usage--><h4>Usage</h4><code><lorem></lorem></code><!--Rendered--><!--h4 Rendered view--><!--.result-wrapper--><!--!=renderedHtml--></section>,<section id="ScrollProgress"><div class="demo-crumbs mdl-color-text--grey-500">src-test/scroll-progress/ScrollProgress.vue</div><h3>content-scroll-progress</h3><!--Properties--><h4>Properties</h4><ul><li>spy</li><li>color</li><li>extraClass</li></ul><!--Methods--><h4>Methods</h4><ul><li>getChildrenHeight</li><li>iterateChildren</li><li>calculateScrollRatio</li><li>handleScroll</li><li>handleInitialProps</li></ul><!--Methods--><h4>Methods</h4><ul><li>getChildrenHeight</li><li>iterateChildren</li><li>calculateScrollRatio</li><li>handleScroll</li><li>handleInitialProps</li></ul><!--Usage--><h4>Usage</h4><code><content-scroll-progress></content-scroll-progress></code><!--Rendered--><!--h4 Rendered view--><!--.result-wrapper--><!--!=renderedHtml--></section>,<section id="VueSound"><div class="demo-crumbs mdl-color-text--grey-500">src-test/vue-sound/src/VueSound.vue</div><h3>vue-audio</h3><!--Properties--><h4>Properties</h4><ul><li>file</li><li>autoPlay</li></ul><!--Methods--><h4>Methods</h4><ul><li>stop</li><li>play</li><li>pause</li><li>download</li><li>mute</li><li>_handleLoaded</li><li>_handlePlayingUI</li><li>_handlePlayPause</li><li>init</li><li>getAudio</li></ul><!--Methods--><h4>Methods</h4><ul><li>stop</li><li>play</li><li>pause</li><li>download</li><li>mute</li><li>_handleLoaded</li><li>_handlePlayingUI</li><li>_handlePlayPause</li><li>init</li><li>getAudio</li></ul><!--Usage--><h4>Usage</h4><code><vue-audio></vue-audio></code><!--Rendered--><!--h4 Rendered view--><!--.result-wrapper--><!--!=renderedHtml--></section></div></div></main></div><footer class="footer"><p>Vue component library © 2017</p></footer><style type="text/css">.component-lib code{padding:20px;background:#f8f8f8;width:90%;display:block;}.component-lib h3{color:#42b983;}.component-lib .mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover{background:#a8eacc;}.component-lib .search-area input{margin:10px 0px 0px 20px;}.component-lib footer{position:absolute;bottom:0;width:100%;z-index:10000;background:#fff;}.component-lib footer p{padding:10px 0px 10px 20px;margin:0;color:#ccc;}</style></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| var path = require('path') | ||
| var fs = require('fs') | ||
| var markdown = require( "markdown" ).markdown; | ||
| var Q = require('Q'); | ||
| var css = require('css'); | ||
|
|
||
| var fileProcessor = require('./processor'); | ||
| var drawer = require('./drawer'); | ||
| var utils = require('./utils'); | ||
| var walker = require('./walker'); | ||
|
|
||
| const COMPONENTS_FOLDER = 'example-components' | ||
| const OUTPUT_FOLDER = 'collection-preview' | ||
| const OUTPUT_FILENAME = 'index.html' | ||
| const CUSTOM_CSS = 'style/custom-styles.css'; | ||
|
|
||
| let outputPath; | ||
| let runOptions; | ||
|
|
||
| module.exports = { | ||
| iterateComponentsFolder : (folderFromName, folderToName, options) => { | ||
|
|
||
| setVariables(folderFromName, folderToName, options); | ||
|
|
||
| walker.walk(folderFromName, runOptions, function(result){ | ||
| sortOutResultingList(result); | ||
| }) | ||
| } | ||
| } | ||
| const sortOutResultingList = (list) => { | ||
| var nonEmpty = list.filter((x) => x.files.length); | ||
| let flatFileList = []; | ||
|
|
||
| nonEmpty.forEach(function(elem){ | ||
|
|
||
| if(elem.files.length === 1){ | ||
| flatFileList.push({file: elem.files[0]}); | ||
| } else if(elem.files.length === 2){ // && fileNamesAreComplimentary(elem.files) | ||
| flatFileList = flatFileList.concat({ | ||
| file: elem.files[0], | ||
| readme: elem.files[1] | ||
| }); | ||
| } else { | ||
| flatFileList = flatFileList.concat(elem.files.map((f) => { | ||
| return {file: f} | ||
| })); | ||
| } | ||
| }); | ||
| console.log(flatFileList); | ||
| generateFiles(flatFileList); | ||
| } | ||
|
|
||
| const fileNamesAreComplimentary = (filesArray) => { | ||
| const f1 = path.basename(filesArray[0]); | ||
| const f2 = path.basename(filesArray[1]); | ||
| if((f1.split('.')[0] == f2.split('.')[0]) && (f1.split('.')[1] != f2.split('.')[1])) return true; | ||
| return false; | ||
| } | ||
|
|
||
| const setVariables = (folderFromName, folderToName, options) => { | ||
| runOptions = options; | ||
| folderFromName = folderFromName || COMPONENTS_FOLDER; | ||
| outputPath = folderToName || OUTPUT_FOLDER; | ||
| } | ||
|
|
||
| const generateFullPage = (treeArray) => { | ||
|
|
||
| let links = drawer.generateLinkList(treeArray.map((x) => x.link)) | ||
| let comps = treeArray.map((x) => drawer.generateComponentDescription(x.comp)) | ||
|
|
||
| let data = { | ||
| links, | ||
| comps, | ||
| inlineCss : addInlinedCSS(CUSTOM_CSS) | ||
| } | ||
| /* | ||
| * assumption, script path: PROJECT_ROOT/node_modules/vue-styleguide-generator/ | ||
| * assumption, output assumption PROJECT_ROOT/<outputPath> | ||
| */ | ||
| var dirPath = path.resolve(__dirname, '..', '..', '..', outputPath) | ||
| var pagePath = path.resolve(__dirname, '..', OUTPUT_FILENAME)//path.resolve(__dirname, '..', '..', '..', outputPath, OUTPUT_FILENAME) | ||
| if (!fs.existsSync(dirPath)) { | ||
| fs.mkdirSync(dirPath) | ||
| } | ||
| fs.writeFileSync(pagePath, drawer.generatePage(data)) | ||
| } | ||
| const generateFiles = (files) => { | ||
|
|
||
| if(files.length) { | ||
|
|
||
| items = files.map(function(fileItem){ | ||
| return { | ||
| comp: fileItem.readme ? processWithReadmeFiles(fileItem) : processSingleFiles(fileItem), | ||
| link: fileItem.file | ||
| }; | ||
| }); | ||
|
|
||
| generateFullPage(modifyComponentsTree(items)); | ||
|
|
||
| logResult(files.length, runOptions.i18n.console_processed); | ||
| } else { | ||
| logError(runOptions.i18n.console_no_files_found); | ||
| } | ||
| } | ||
| const modifyComponentsTree = (list) => { | ||
| let filtered = list.filter((x) => !x.comp._isWrapper) | ||
| return filtered; | ||
| } | ||
|
|
||
| const getFile = (filename) => { | ||
| return path.resolve(componentsFolder, filename); | ||
| } | ||
|
|
||
| const addInlinedCSS = (cssPath) => { | ||
| const cssfilePath = path.resolve(cssPath); | ||
| const cssFile = fs.readFileSync(cssfilePath, { encoding: "utf8" }); | ||
| const obj = css.parse(cssFile, {}); | ||
|
|
||
| return css.stringify(obj, { | ||
| inputSourcemaps: false, | ||
| compress: true | ||
| }); | ||
| } | ||
|
|
||
| const processSingleFiles = (fileObject) => { | ||
| if(path.basename(fileObject.file).split('.')[1] === 'md') return; //folder with single .md file | ||
| return readComponent(fileObject); | ||
| } | ||
| const processWithReadmeFiles = (fileObject) => { | ||
| console.log('processWithReadmeFiles', fileObject); | ||
| // var ext = file.split('.')[1]; | ||
| // if(ext === 'md'){ | ||
| // return readMDfile(file) | ||
| // } else { | ||
| // | ||
| // } | ||
| } | ||
| const isSimpleWrapperComponent = (obj) => { | ||
| if(!obj.methods.length && !obj.props.length && !obj.computed.length) return true; | ||
| return false; | ||
| } | ||
|
|
||
| const readComponent = (fileObject) => { | ||
| const loadFile = fileObject.file; | ||
| let vueFile = fs.readFileSync(loadFile, {encoding: 'utf-8'}) | ||
| let componentObject = fileProcessor.processComponent(vueFile); | ||
| let componentCode = utils.componentCodeFromName(componentObject); | ||
|
|
||
| let data = { | ||
| _isWrapper: false, | ||
| itemTitle: componentObject.name || path.basename(loadFile).split('.')[0], | ||
| fileName: loadFile, | ||
| compInitialData : (componentObject.data ? componentObject.data() : ''), | ||
| computed: utils.showIfAny(componentObject.computed), | ||
| props: utils.showIfAny(componentObject.props), | ||
| methods: utils.showIfAny(componentObject.methods), | ||
| componentCode, | ||
| htmlBlockId: path.basename(loadFile).split('.')[0] | ||
| }; | ||
|
|
||
| if(isSimpleWrapperComponent(data)){ | ||
| data._isWrapper = true; | ||
| } | ||
|
|
||
| return data; | ||
| } | ||
|
|
||
| const readMDfile = (loadFile) => { | ||
| let mdFile = fs.readFileSync(loadFile, {encoding: 'utf-8'}); | ||
| return markdown.toHTML(mdFile); | ||
| } | ||
|
|
||
| const logResult = (text, suffix) => { | ||
| console.log(text + suffix) | ||
| } | ||
| const logError = (text) => { | ||
| console.log(text) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| var Vue = require('vue') | ||
| var renderer = require('vue-server-renderer').createRenderer() | ||
| var path = require('path'); | ||
| var parse = require('./parser') | ||
| var fs = require('fs') | ||
|
|
||
| var app = new Vue({ | ||
| render: function (h) { | ||
| return h('p', 'hello world') | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| const renderFunction = (component, callback) => { | ||
| let piece; | ||
| var componentPath = path.resolve(__dirname, '..', component.fileName) | ||
| var file = fs.readFileSync(componentPath, {encoding: 'utf-8'}); | ||
| var vueFile = parse(file, 'name', false) | ||
| console.log(vueFile.script); | ||
| // var stream = renderer.renderToString(vueFile, function(html){ | ||
| // console.log(html); | ||
| // }); | ||
| // stream.on('data', function (chunk) { | ||
| // piece += chunk | ||
| // }) | ||
| // stream.on('end', function () { | ||
| // callback(piece) | ||
| // }) | ||
|
|
||
| // renderer.renderToString(app, function (error, html) { | ||
| // if (error) throw error | ||
| // callback(html) | ||
| // }) | ||
| } | ||
|
|
||
| module.exports = { | ||
| render : renderFunction | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| var renderer = require('./renderer'); | ||
|
|
||
| const deferredRenderer = (comp) => { | ||
| var deferred = Q.defer(); | ||
| renderer.render(comp, function(html){ | ||
| deferred.resolve(html); | ||
| }) | ||
| return deferred.promise; | ||
| } | ||
|
|
||
|
|
||
| //let views = treeArray.map((x) => deferredRenderer(x.comp)); | ||
| console.log(views) | ||
| Q.spread(views, function () { | ||
| console.log(agruments) | ||
| }); |
Oops, something went wrong.