vue-styleguide-generator
vue-styleguide-generator copied to clipboard
Markdown file makes the generator skip the component with external javascript
The new external javascript feature is working pretty well, but I noticed that when I have a markdown file (with the same name) in the component folder it will skip the component in the generation process. When I delete the markdown file again it will see the component in the generation process.
Thanks for the note @StefanJanssen95 Saw that yesterday, it's related to #6
I only will be able to fix it by end of the week. I'll keep you posted
Finally getting beck to fixing stuff. Sorry for being absent
Hello. Have you solved this problem already? I think that it is a problem of file sorting. Would you mind if I send a pull request ? I am sorry if you solved it.
I am a bit stuck with a more general problem - parsing the files that are in specific component folder. I'll try to explain. We have 2 basic cases:
- Simple case: when you have linear list of .vue files of components in one folder - then you just iterate though them.
- Complicated case: each component has a dedicated folder - then there are various sub-cases possible, depending on the files in that folder, for example:
/my_component/
- index.js //imports .vue file
- my_component_script.vue
- styles.scss
- README.md
or
/my_component/
- myComponent.vue
- myComponent.md //name of component and folder is different however this one should be parsed and added to component description
or even
/my_component/
- index.js
- myComponentSpec.js
- someLocalyUsedService.js
- about.md
- myComponent.vue
- README.md // this one should be parsed
so trying to figure out what file should be considered a right readme file and what file should be a correct component file the solution I was thinking to implement to have 2 folds:
- try to read all
*.md
files in component's folder - add config option to specify what .md/.vue./js files in folder to read say like in a file mask format in some kind of config file:
{
components: 'src/**/*.js'
}
Because adding proper read of .md is no big deal. But solving this problem properly is a obstacle for me. Let me know what you think of this. Also please send a PR, so that we could elaborate on your solution.
Sorry! I misunderstood. I thought it was a problem only in this case.
/my_component/
- myComponent.vue
- myComponent.md //name of component and folder is different however this one should be parsed and added to component description
Then I thought that I could parse by sorting the array of the names of the vue file and the md file in the folder with the extension. Because when reading a file in a folder, the md file comes first and the vue file comes after it.
walker.js
const readFlatFiles = (dirPath) => {
var dfd = Q.defer()
dir.readFiles(dirPath, {
match: RegExVueAndMdFiles,
exclude: (runOptions.exclude || /^\./),
excludeDir: runOptions.excludeDir,
matchDir: runOptions.matchDir,
recursive: false
}, function (err, content, next) {
next()
},
function (err, files) {
var files = sortFiles(files)
if (err) throw err
dfd.resolve({
dirPath, files})
})
return dfd.promise
}
const sortFiles = (list) => {
return list.sort(function(a,b){
const reg = /\.[^\.]+$/;
const aExtension = a.match(reg);
const bExtension = b.match(reg);
if( aExtension > bExtension ) return -1;
if( aExtension < bExtension ) return 1;
return 0;
});
};
I am glad that I understood what you wanted to achieve. I will keep thinking about this problem a bit more.
yes, picking the right .vue or .md file is solved by iterating all the files in the folder in my case. the problem is a bit higher as I've said. thanks for the input anyway @To-maruyama . I will tyro to commit the updated as described by the end of this week.