typescript class

[xiachaoxulu]

Expected behavior

correct

Actual behavior

Unexpected token

Steps to reproduce the behavior

{{ msg }}

<script lang='ts'> import Vue from 'vue' import Component from 'vue-class-component' import { Prop, Watch, Provide } from 'vue-property-decorator' @component export default class Button extends Vue { name: string = 'button' @provide() msg: string = 'hello button' mounted() { this.msg = 'i am two button' } } </script>

[xiachaoxulu]

<template>
    <div>
        <p>{{ msg }}</p>
    </div>
</template>
<script lang='ts'>
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop, Watch, Provide } from 'vue-property-decorator'
@Component
export default class Button extends Vue {
    name: string = 'button'
    @Provide() msg: string = 'hello button'
    mounted() {
        this.msg = 'i am two button'
    }
}
</script>

[znck]

Please provide repro and explain your issue.

[xiachaoxulu]

thank for your message

1. this is a .vue file
   2.use typescript and vue-class-component
   3.ts-config.js compilerOptions.module='es2015'
   4.my rollup config.js

const rollupTypescript = require('rollup-plugin-typescript2')
const vue = require('rollup-plugin-vue')
const replace = require('rollup-plugin-replace')
module.exports = {
    input: './src/index.ts',
    plugins: [
        vue(),
        rollupTypescript(),
        replace({
            '/** @class */': '/*@__PURE__*/'
        })
    ],
    output: {
        file: './examples/lib/mtime.es.js',
        format: 'es',
        banner:
            '/*!\n' +
            ' * mtime.ui.js v' +
            require('../package.json').version +
            '\n' +
            ' * (c) 2017-' +
            new Date().getFullYear() +
            ' Mtime Live\n' +
            ' * Released under the MIT License.\n' +
            ' */'
    }
}

5. i start the program, but i get the error Unexpected token

$ rollup --config ./build/rollup.prd.config.js

./src/index.ts → ./examples/lib/xxx.es.js...
[!] Error: Unexpected token
src/button/src/main.vue (36:47)
Error: Unexpected token
    at error (**************/node_modules/rollup/dist/rollup.js:185:14)
    at Module.error (**************/node_modules/rollup/dist/rollup.js:16526:3)
    at tryParse (**************/node_modules/rollup/dist/rollup.js:16220:10)
    at new Module (**************/node_modules/rollup/dist/rollup.js:16264:15)
    at load.catch.then.then.then.source (**************/node_modules/rollup/dist/rollup.js:18189:20)
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

error Command failed with exit code 1.

thank you again

[gustav-vidispine]

Any potential fix on this or any clue about how to go around it?

We're also running in to the same problem when using typescript + vue-property-decorator

[znck]

@ktsn Can you help here?

[vankooch]

Hi
I've the same problem. You can finde a sample setup here:

https://github.com/Silver-Connection/sico-vue-component-template/tree/master

Would be great to have this working.

[znck]

Now, script content is converted to an import statement. Typescript plugin can handle it.

For foo.vue, the import statement would be:

export * from 'foo.vue?{"type":"script"}#.ts'
import d from 'foo.vue?{"type":"script"}#.ts'
export default d