Skip to content

Theme index enhancment support #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 23, 2018
Merged

Theme index enhancment support #154

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dc32b8d
feat: Adds support for loading index.js in themes
Apr 19, 2018
5376d46
docs: Documents the theme index.js feature
Apr 19, 2018
2c8ec41
tweak: refactor themeApp and enhanceApp temp files
Apr 19, 2018
63602c5
Update custom-themes.md
yyx990803 Apr 23, 2018
b7094e7
Update app.js
yyx990803 Apr 23, 2018
97e3fa2
Update prepare.js
yyx990803 Apr 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions docs/guide/custom-themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,20 @@ The compiled content of the current `.md` file being rendered will be available
</template>
```

## Theme Level Enhancements

Themes can extend the Vue app that VuePress uses by creating a `index.js` file in the root of the theme. The file should `export default` a hook function which will receive an object containing some app level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks:

``` js
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router // the router instance for the app
}) => {
// ...apply enhancements to the app
}
```

## Using Theme from a Dependency

Themes can be published on npm in raw Vue SFC format as `vuepress-theme-xxx`.
Expand Down
2 changes: 2 additions & 0 deletions lib/app/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import NotFound from '@notFound'
import { routes } from '@temp/routes'
import { siteData } from '@temp/siteData'
import enhanceApp from '@temp/enhanceApp'
import themeApp from '@temp/themeApp'

// suggest dev server restart on base change
if (module.hot) {
Expand Down Expand Up @@ -66,6 +67,7 @@ export function createApp () {
const options = {}

enhanceApp({ Vue, options, router })
themeApp({ Vue, options, router })

const app = new Vue(
Object.assign(options, {
Expand Down
27 changes: 19 additions & 8 deletions lib/prepare.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,21 @@ if (!Object.assign) Object.assign = require('object-assign')`
await writeTemp(`override.styl`, hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)
}

async function writeEnhanceTemp (destName, srcPath, isEnhanceExist) {
await writeTemp(
destName,
isEnhanceExist
? `export { default } from ${JSON.stringify(srcPath)}`
: `export default function () {}`
)
}

// 6. handle enhanceApp.js
const enhancePath = path.resolve(sourceDir, '.vuepress/enhanceApp.js')
const hasEnhancePath = fs.existsSync(enhancePath)
await writeTemp(
'enhanceApp.js',
hasEnhancePath
? `export { default } from ${JSON.stringify(enhancePath)}`
: `export default function () {}`
)
const enhanceAppPath = path.resolve(sourceDir, '.vuepress/enhanceApp.js')
writeEnhanceTemp('enhanceApp.js', enhanceAppPath, fs.existsSync(enhanceAppPath))

// 7. handle the theme index.js
writeEnhanceTemp('themeApp.js', options.themeApp, fs.existsSync(options.themeApp))

return options
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

themeApp and enhanceApp are the same except hasEnhancePath and hasThemeIndexPath, which can be extracted.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not exactly the same, they are two proxy files to two different js files that may or may not exist. They will default to an empty function if they don't exist but are there to load in two different files <theme>/index.js and .vuepress/enchanceApp.js respectively into the main vue app.

Copy link
Member

@ulivz ulivz Apr 19, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm... you misunderstand my comment, I know WHY and HOW you do that...
I just want you to refactor your code like this:

  async function writeEnhanceTemp (destName, srcPath) {
    await writeTemp(
      destName,
      fs.existsSync(srcPath)
        ? `export { default } from ${JSON.stringify(srcPath)}`
        : `export default function () {}`
    )
  }

  // 6. handle enhanceApp.js
  const enhanceAppPath = path.resolve(sourceDir, '.vuepress/enhanceApp.js')
  await writeEnhanceTemp('enhanceApp.js', enhanceAppPath)

  // 7. handle the theme index.js
  await writeEnhanceTemp('themeApp.js', options.themeApp)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, ok, done

}
Expand Down Expand Up @@ -150,6 +156,11 @@ async function resolveOptions (sourceDir) {
} else {
options.notFoundPath = path.resolve(__dirname, 'default-theme/NotFound.vue')
}

const themeApp = path.resolve(themeDir, 'index.js')
if (fs.existsSync(themeApp)) {
options.themeApp = themeApp
}
}

// resolve pages
Expand Down