1
+ const { parseComponent } = require ( "vue-template-compiler" ) ;
2
+ const { isCodeVueSfc } = require ( "vue-inbrowser-compiler" ) ;
3
+ const getImports = require ( "./getImports" ) ;
4
+
1
5
const addVueLive = md => {
2
6
const fence = md . renderer . rules . fence ;
3
7
md . renderer . rules . fence = ( ...args ) => {
@@ -10,11 +14,29 @@ const addVueLive = md => {
10
14
return fence ( ...args ) ;
11
15
}
12
16
17
+ const getScript = code => {
18
+ // script is at the beginning of a line after a return
19
+ // In case we are loading a vue component as an example, extract script tag
20
+ if ( isCodeVueSfc ( code ) ) {
21
+ const parts = parseComponent ( code ) ;
22
+ return parts && parts . script ? parts . script . content : "" ;
23
+ }
24
+ //else it could be the weird almost jsx of vue-styleguidist
25
+ return code . split ( / \n [ \t ] * < / ) [ 0 ] ;
26
+ } ;
27
+
13
28
const code = token . content ;
14
- // TODO: analyze code here to find requires
29
+
30
+ // analyze code to find requires
15
31
// put all requires into a "requires" object
16
32
// add this as a prop
17
- return `<vue-live :code="\`${ md . utils . escapeHtml ( code ) } \`" />` ;
33
+ const scr = getScript ( code ) ;
34
+ const requires = getImports ( scr ) . map ( mod => `${ mod } : require('${ mod } ')` ) ;
35
+
36
+ return `<vue-live :code="\`${ md . utils
37
+ . escapeHtml ( code )
38
+ . replace ( / \` / g, "\\`" )
39
+ . replace ( / \$ / g, "\\$" ) } \`" :requires="{${ requires . join ( "," ) } }"/>`;
18
40
} ;
19
41
} ;
20
42
0 commit comments