Permalink
Browse files

feat: Provide sourcemap for blocks in .vue file (#215)

* feat: Provide sourcemaps for .vue files

* chore: Bump @vue/component-compiler

* test: Add inline source URL for generated bundle

* chore: Code style fix
  • Loading branch information...
znck committed Jun 24, 2018
1 parent 77a3be7 commit a5928ad1d054f9ea01fa6bff5120e86bc9eadd85
Showing with 64 additions and 27 deletions.
  1. +12 −1 cookbook/typescript-simple/src/MyComponent.vue
  2. +4 −2 src/index.ts
  3. +26 −11 test/setup/index.ts
  4. +22 −13 yarn.lock
@@ -6,7 +6,18 @@
// @ts-ignore
import Vue, { VueConstructor } from 'vue'
export default Vue.extend<{ name: string }, {/* methods */}, {/* computed */}, {/* props */}>({
export default Vue.extend<
{ name: string },
{
/* methods */
},
{
/* computed */
},
{
/* props */
}
>({
data() {
return { name: 'Jane Doe' }
}
@@ -175,10 +175,12 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
if (!request) return

const element = resolveVuePart(descriptors, request)

return 'code' in element
const code = 'code' in element
? ((element as any).code as string) // .code is set when extract styles is used. { css: false }
: element.content
const map = element.map as any

return { code, map }
},

async transform(source: string, filename: string) {
@@ -37,26 +37,41 @@ export async function build(filename, css = false): Promise<string> {
external: ['vue']
})

cache[cacheKey] = (await bundle.generate({
const output = await bundle.generate({
format: 'iife',
name: 'App',
sourcemap: true,
globals: {
vue: 'Vue'
}
})).code + (style ? `\n;(function() {
var s = document.createElement('style');
s.type = 'text/css';
document.head.appendChild(s);
s.appendChild(document.createTextNode(${JSON.stringify(style)}))
})()` : '')

return cache[cacheKey]
})

let outputCode = output.code

if (style) {
outputCode += `\n;(function() {
var s = document.createElement('style');
s.type = 'text/css';
document.head.appendChild(s);
s.appendChild(document.createTextNode(${JSON.stringify(style)}))
})()`
}

outputCode += `\n\n//# sourceMappingURL=data:application/json;base64,${new Buffer(JSON.stringify(output.map)).toString('base64')}\n`

cache[cacheKey] = outputCode

return outputCode
}

const VUE_SOURCE = promised(fs).readFile(
path.resolve(__dirname, '../../node_modules/vue/dist/vue.min.js')
)

function encode(any: any) {
return any.toString().replace(/<\//g, '&lt;\/')
}

export async function open(name: string, browser: Browser, code: string, id: string = '#test'): Promise<Page> {
const page = await browser.newPage()

@@ -69,10 +84,10 @@ export async function open(name: string, browser: Browser, code: string, id: str
<body>
<div id="app"></div>
<script>
${await VUE_SOURCE}
${encode(await VUE_SOURCE)}
</script>
<script>
${await code}
${encode(await code)}
</script>
</body>
</html>`

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit a5928ad

Please sign in to comment.