Linting/error catching in demos

[TheJaredWilcurt]

Usage would look like this:

1. Create this file: /scripts/documentationLinter.js.

   import { doxenLinter } from 'vue-doxen';
   
   import { demos } from '../src/demos/index.js';
   import { options } from '../src/demos/options.js';
   
   const linterSettings = {
    demos: {
      allPropsMustHave: {
        // key must be on the object (can be set to undefined)
        allowed: false,
        // key must be on the object (can be set to undefined)
        description: true,
        // key must be on the object (can be set to undefined)
        example: false,
        // must have either a required: true or a default key on the object
        requiredOrDefault: true,
        // key must be on the object (can be set to undefined)
        type: true,
        // key must be on the object (can be set to undefined)
        validator: false
      },
      // Requires a name be defined on the component
      componentMustBeNamed: true,
      // Warns when description on a demo page does not end in a period.
      // Ignores custom component descriptions, missing or empty strings
      descriptionMustEndInPeriod: true,
      // Requires a description (string or custom component) on all
      // demos and/or components. (can be set to undefined)
      mustHaveDescription: true,
      // Requires an import statement (string or custom component) on all
      // demos and/or components. (can be set to undefined)
      mustHaveImportStatemnet: false,
      // If using custom components, they must be imported in a demo object,
      // rather than in the component being demo'd to avoid file size bloat. 
      noCustomComponentsInComponent: true,
      // If passing in a demo object, it must include the component to demo
      demosMustHaveComponent: true,
      // For emits: ['str'] in a component,
      // if you make it an object, that is not allowed by Vue's API
      doNotBreakVueApi: true,
      // You can define many settings in both the Demo or in the Component.
      // If enabled, this setting warns you about duplicates.
      noDuplicateSettings: true,
      // Your demos object must not have any top-level components
      onlyAllowDemoObjects: true
    },
    options: {
      // If enabled, requires that all built-in components are replaced with custom ones (not recommended)
      allComponentsMustBeReplaced: false,
      // If enabled, warns about missing required components (strongly recommended)
      noMissingComponents: true
    }
   };
   
   // Throws if linting does not pass
   doxenLinter({ demos, options, linterSettings });

2. In your package.json add to the scripts section:

    "scripts": {
      "lint:docs": "node ./scripts/documentationLinter.js"
    }

3. You could then add npm run lint:demos into your CI tool, or update your main lint script:

    "scripts": {
      "lint": "npm run lint:js && npm run lint:docs"
      "lint:js": "eslint"
      "lint:docs": "node ./scripts/documentationLinter.js"
    }

Not sure what other linting rules would be useful.

[TheJaredWilcurt]

The PR for this issue should:

• Create /lib/linter/index.js file with a doxenLinter function that accepts { demos, options, linterSettings }
• Create a /lib/linter/defaultSettings.js
  • Default all options to false, then loop over the linterSettings to change settings to true if specified.
• Create a file for each rule in the lib/linter folder
• If enabled rules should console.info when they detect issues, giving the rule name and actionable information.
• If all rules pass, return undefined
• After checking all rules, if any failed, throw to force CI's to stop.