feat: enhancePreviewApp option

[elevatebart]

closes #1381

• Write docs
• Make example

[changeset-bot]

🦋 Changeset detected

Latest commit: a471101

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
vue-styleguidist	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Merging #1382 (a471101) into dev (fcdae9d) will increase coverage by 0.00%.
The diff coverage is 93.75%.

@@           Coverage Diff           @@
##              dev    #1382   +/-   ##
=======================================
  Coverage   88.41%   88.41%           
=======================================
  Files         114      114           
  Lines        8527     8540   +13     
  Branches     1177     1177           
=======================================
+ Hits         7539     7551   +12     
- Misses        954      955    +1     
  Partials       34       34           

Impacted Files	Coverage Δ
.../vue-styleguidist/src/loaders/styleguide-loader.ts	89.30% <93.75%> (+0.26%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[didagu]

will there be any new version for "vue-cli-plugin-styleguidist" ? @elevatebart

[elevatebart]

There should be no need for an explicit new version since etc semantic versioning of the plugin includes the current version of VSG.

run this if you are using npm

npm update --save vue-styleguidist

or this if you use yarn

yarn upgrade vue-styleguidist

or pnpm

pnpm up vue-styleguidist

[didagu]

I think there was a typo in the 'enhancePreviewApp' documentation. It is written export default (app) instead of export default defineEnhanceApp((app) => { ... }) @elevatebart

[didagu]

I tried using the new enhancePreviewApp feature but I get this error @elevatebart

.

This is my styleguide.config.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { defineConfig } = require('vue-styleguidist');

const docSiteUrl = process.env.DEPLOY_PRIME_URL || 'https://vue-styleguidist.github.io';

const path = require('path');

const cliPath = require.resolve('@vue/cli-service');
console.log(path.dirname(cliPath));
const webpackPath = require.resolve('webpack', { paths: [path.dirname(cliPath)] });
process.env.VSG_WEBPACK_PATH = webpackPath;

module.exports = defineConfig({
  // set your styleguidist configuration here
  title: 'Default Style Guide',
  enhancePreviewApp: path.join(__dirname, 'styleguide/global.requires.js'),
  defaultExample: true,
  components: 'src/components/**/[A-Z]*.vue',
  ribbon: {
    text: 'Back to examples',
    url: `${docSiteUrl}/Examples.html`,
  },
  styleguideDir: 'dist',
  webpackConfig: {
    plugins: process.argv.includes('--analyze') ? [new BundleAnalyzerPlugin()] : [],
  },
  codeSplit: true,
  minimize: false,
  skipComponentsWithoutExample: true,
});

and this is my global.requires.js file

import { defineEnhanceApp } from 'vue-styleguidist';
import VueObserveVisibility from 'vue3-observe-visibility';
import { VTooltip } from 'floating-vue';
import loadable from '../src/directives/loadable';
import helpable from '../src/directives/helpable';

export default defineEnhanceApp((app) => {
  app
    .directive('tooltip', VTooltip)
    .directive('observe-visibility', VueObserveVisibility)
    .directive('loadable', loadable)
    .directive('helpable', helpable);
});

[elevatebart]

@didagu I tried using your setup
https://github.com/elevatebart/test-app

Could not find the error except the presence of a function that does not exist yet.