fix($theme-default): support slot and v-pre container (close: #1387) (#1389)

Author: shigma

packages/@vuepress/core/lib/prepare/AppContext.js

@@ -149,6 +149,16 @@ module.exports = class AppContext {
       .use(require('../internal-plugins/transformModule'))
       .use(require('../internal-plugins/dataBlock'))
       .use(require('../internal-plugins/frontmatterBlock'))
+      .use('@vuepress/container', {
+        type: 'slot',
+        before: info => `<template slot="${info}">`,
+        after: '</template>'
+      })
+      .use('@vuepress/container', {
+        type: 'v-pre',
+        before: '<div v-pre>',
+        after: '</div>'
+      })
       .use('@vuepress/last-updated', !!shouldUseLastUpdated)
       .use('@vuepress/register-components', {
         componentsDir: [

packages/@vuepress/core/package.json

@@ -33,6 +33,7 @@
     "@vue/babel-preset-app": "^3.1.1",
     "@vuepress/markdown": "^1.0.0-alpha.41",
     "@vuepress/markdown-loader": "^1.0.0-alpha.41",
+    "@vuepress/plugin-container": "^1.0.0-alpha.41",
     "@vuepress/plugin-last-updated": "^1.0.0-alpha.41",
     "@vuepress/plugin-register-components": "^1.0.0-alpha.41",
     "@vuepress/shared-utils": "^1.0.0-alpha.41",

packages/@vuepress/markdown/index.js

@@ -14,7 +14,6 @@ const lineNumbersPlugin = require('./lib/lineNumbers')
 const componentPlugin = require('./lib/component')
 const hoistScriptStylePlugin = require('./lib/hoist')
 const convertRouterLinkPlugin = require('./lib/link')
-const markdownSlotsContainersPlugin = require('./lib/markdownSlotsContainers')
 const snippetPlugin = require('./lib/snippet')
 const tocPlugin = require('./lib/tableOfContents')
 const emojiPlugin = require('markdown-it-emoji')
@@ -74,10 +73,6 @@ module.exports = (markdown = {}) => {
       .use(hoistScriptStylePlugin)
       .end()
 
-    .plugin(PLUGINS.MARKDOWN_SLOTS_CONTAINERS)
-      .use(markdownSlotsContainersPlugin)
-      .end()
-
     .plugin(PLUGINS.EMOJI)
       .use(emojiPlugin)
       .end()

packages/@vuepress/markdown/lib/constant.js

@@ -5,8 +5,6 @@ exports.PLUGINS = {
   SNIPPET: 'snippet',
   CONVERT_ROUTER_LINK: 'convert-router-link',
   HOIST_SCRIPT_STYLE: 'hoist-script-style',
-  CONTAINERS: 'containers',
-  MARKDOWN_SLOTS_CONTAINERS: 'markdown-slots-containers',
   ANCHOR: 'anchor',
   EMOJI: 'emoji',
   TOC: 'toc',

packages/@vuepress/markdown/lib/markdownSlotsContainers.js

@@ -26,8 +26,8 @@ module.exports = (options, context) => ({
     if (!render) {
       if (before !== undefined && after !== undefined) {
         render = (tokens, index) => {
-          const token = tokens[index]
-          return token.nesting === 1 ? call(before, token) : call(after, token)
+          const info = tokens[index].info.trim().slice(type.length).trim
+          return tokens[index].nesting === 1 ? call(before, info) : call(after, info)
         }
       } else {
         render = (tokens, index) => {

packages/@vuepress/plugin-container/index.js

@@ -23,11 +23,6 @@ module.exports = (options, ctx) => ({
     '@vuepress/plugin-nprogress',
     ['@vuepress/container', { type: 'tip' }],
     ['@vuepress/container', { type: 'warning' }],
-    ['@vuepress/container', { type: 'danger' }],
-    ['@vuepress/container', {
-      type: 'v-pre',
-      before: '<div v-pre>\n',
-      after: '</div>\n'
-    }]
+    ['@vuepress/container', { type: 'danger' }]
   ]
 })

packages/@vuepress/theme-default/index.js

@@ -31,6 +31,7 @@
   "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-default#readme",
   "dependencies": {
     "@vuepress/plugin-active-header-links": "^1.0.0-alpha.41",
+    "@vuepress/plugin-container": "^1.0.0-alpha.41",
     "@vuepress/plugin-nprogress": "^1.0.0-alpha.41",
     "@vuepress/plugin-search": "^1.0.0-alpha.41",
     "docsearch.js": "^2.5.2",

packages/@vuepress/theme-default/package.json

@@ -27,21 +27,4 @@
     a
       color $textColor
 
-pre.vue-container
-  border-left-width: .5rem;
-  border-left-style: solid;
-  border-color: #42b983;
-  border-radius: 0px;
-  & > code
-    font-size: 14px !important;
-    & > p
-      margin: -5px 0 -20px 0;
-    code
-      background-color: #42b983 !important;
-      padding: 3px 5px;
-      border-radius: 3px;
-      color #000
-    em
-      color #808080
-      font-weight light
 

packages/@vuepress/theme-default/styles/custom-blocks.styl

@@ -81,7 +81,7 @@ module.exports = ctx => ({
     }],
     ['@vuepress/container', {
       type: 'upgrade',
-      before: ({ info }) => `<UpgradePath title="${info.trim().slice(7).trim()}">`,
+      before: info => `<UpgradePath title="${info}">`,
       after: '</UpgradePath>',
     }],
   ],

packages/docs/docs/.vuepress/config.js

@@ -4,5 +4,21 @@
 //  font-size 30px;
 //}
 
-
+pre.vue-container
+  border-left-width: .5rem;
+  border-left-style: solid;
+  border-color: #42b983;
+  border-radius: 0px;
+  & > code
+    font-size: 14px !important;
+    & > p
+      margin: -5px 0 -20px 0;
+    code
+      background-color: #42b983 !important;
+      padding: 3px 5px;
+      border-radius: 3px;
+      color #000
+    em
+      color #808080
+      font-weight light
 

packages/docs/docs/.vuepress/styles/index.styl

@@ -49,14 +49,14 @@ The default title for the container. If no title was provided, `defaultTitle` wi
 - Type: `string | Function`
 - Default: `undefined`
 
-String to be placed before the block. If specified as a function, a argument `token` will be passed to it. If specified, it will override `defaultTitle`.
+String to be placed before the block. If specified as a function, a argument `info` will be passed to it. (In the example above, `info` will be `bar`.) If specified, it will override `defaultTitle`.
 
 ### after
 
 - Type: `string | Function`
 - Default: `undefined`
 
-String to be placed after the block. If specified as a function, a argument `token` will be passed to it. If specified, it will override `defaultTitle`.
+String to be placed after the block. If specified as a function, a argument `info` will be passed to it. (In the example above, `info` will be `bar`.) If specified, it will override `defaultTitle`.
 
 ### validate
 

packages/docs/docs/plugin/official/plugin-container.md

@@ -49,14 +49,14 @@ module.exports = {
 - 类型: `string | Function`
 - 默认值: `undefined`
 
-要插入在容器前的 HTML。如果设置为一个函数，将传入当前的 `token` 作为第一个参数。如果设置了这个值，它将覆盖 `defaultTitle` 的效果。
+要插入在容器前的 HTML。如果设置为一个函数，将传入当前的 `info` 作为第一个参数。（在上面的例子中，`info` 的值为 `bar`。）如果设置了这个值，它将覆盖 `defaultTitle` 的效果。
 
 ### after
 
 - 类型: `string | Function`
 - 默认值: `undefined`
 
-要插入在容器后的 HTML。如果设置为一个函数，将传入当前的 `token` 作为第一个参数。如果设置了这个值，它将覆盖 `defaultTitle` 的效果。
+要插入在容器后的 HTML。如果设置为一个函数，将传入当前的 `info` 作为第一个参数。（在上面的例子中，`info` 的值为 `bar`。）如果设置了这个值，它将覆盖 `defaultTitle` 的效果。
 
 ### validate
 

packages/docs/docs/zh/plugin/official/plugin-container.md

@@ -6580,10 +6580,6 @@ markdown-it-emoji@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#9bee0e9a990a963ba96df6980c4fddb05dfb4dcc"
 
-markdown-it-table-of-contents@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.0.tgz#950541bec9a365a75265f5265a09dc0cb5935909"
-
 markdown-it@^8.4.1:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"