Skip to content
This repository was archived by the owner on Jan 18, 2022. It is now read-only.

typescript class #153

Closed
xiachaoxulu opened this issue Nov 20, 2017 · 7 comments
Closed

typescript class #153

xiachaoxulu opened this issue Nov 20, 2017 · 7 comments

Comments

@xiachaoxulu
Copy link

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
Copy link
Author

<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
Copy link
Member

znck commented Nov 21, 2017

Please provide repro and explain your issue.

@xiachaoxulu
Copy link
Author

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' +
            ' */'
    }
}

  1. 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
Copy link

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
Copy link
Member

znck commented Jan 13, 2018

@ktsn Can you help here?

@vankooch
Copy link

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
Copy link
Member

znck commented May 2, 2018

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

znck added a commit that referenced this issue May 2, 2018
Use vue({ css: false }) to convert style blocks to import statements and then CSS plugin can handle it.

fixes #183, #153
@znck znck closed this as completed May 2, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants