vue-styleguide-generator icon indicating copy to clipboard operation
vue-styleguide-generator copied to clipboard

Markdown file makes the generator skip the component with external javascript

Open StefanJanssen95 opened this issue 7 years ago • 7 comments

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.

StefanJanssen95 avatar Mar 31 '17 07:03 StefanJanssen95

Thanks for the note @StefanJanssen95 Saw that yesterday, it's related to #6

shershen08 avatar Mar 31 '17 09:03 shershen08

I only will be able to fix it by end of the week. I'll keep you posted

shershen08 avatar Apr 02 '17 09:04 shershen08

Finally getting beck to fixing stuff. Sorry for being absent

shershen08 avatar May 05 '17 16:05 shershen08

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.

To-maruyama avatar Jun 06 '17 16:06 To-maruyama

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.

shershen08 avatar Jun 06 '17 17:06 shershen08

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.

To-maruyama avatar Jun 07 '17 03:06 To-maruyama

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.

shershen08 avatar Jun 07 '17 07:06 shershen08