Typescript support in `.vue` file

[mcdoyaji]

How can I use typescript in docute?

[baramofme]

https://poi.js.org/guide/plugin-typescript.html#babel could be applied?

[baramofme]

Trying to apply poi typescript plugin to docute got failed.

https://poi.js.org/guide/using-plugins.html#naming-convention

Error message tells me options is not defined, but I added options with plugin.

"C:\Program Files\nodejs\node.exe" "C:\Program Files (x86)\Yarn\bin\yarn.js" run website
yarn run v1.15.2
$ poi --serve --config build/poi.website.config.js
ReferenceError: options is not defined
    at Object.<anonymous> (C:\Users\WebstormProjects\SQLBolt-As-LoveField\build\poi.website.config.js:15:20)
    at Module._compile (C:\Users\WebstormProjects\SQLBolt-As-LoveField\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (C:\Users\WebstormProjects\SQLBolt-As-LoveField\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at JoyCon.loadSync (C:\Users\WebstormProjects\SQLBolt-As-LoveField\node_modules\poi\node_modules\joycon\lib\index.js:214:17)
    at Object.load (C:\Users\WebstormProjects\SQLBolt-As-LoveField\node_modules\poi\lib\utils\createConfigLoader.js:23:27)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.

Process finished with exit code 1

Below is my docute's poi.website.config.js file.

build/poi.website.config.js

const path = require('path')
const pkg = require('../package')

module.exports = {
  entry: 'website/index.js',
  output: {
    dir: 'website/dist',
    html: {
      title: 'Docute'
    }
  },
  publicFolder: path.join(__dirname, '../website/docs'),
  plugins:[
    {
      resolve: '@poi/plugin-typescript',
      options: {}
    }
  ],
  chainWebpack(config) {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  },
  constants: {
    __DOCUTE_VERSION__: JSON.stringify(pkg.version),
    __PRISM_VERSION__: JSON.stringify(require('prismjs/package').version),
    __DEPS__: JSON.stringify(Object.keys(pkg.dependencies))
  },
}

So why does poi doesn't know options I provided?

[baramofme]

Here's Success Result

/build/poi.website.config.js

const path = require('path')
const pkg = require('../package')

module.exports = {
  entry: 'website/index.js',
  output: {
    dir: 'website/dist',
    html: {
      title: 'Docute'
    }
  },
  publicFolder: path.join(__dirname, '../website/docs'),
  plugins:[
    {
      resolve: '@poi/plugin-typescript',
      options: {}
    }
  ],
  chainWebpack(config) {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  },
  constants: {
    __DOCUTE_VERSION__: JSON.stringify(pkg.version),
    __PRISM_VERSION__: JSON.stringify(require('prismjs/package').version),
    __DEPS__: JSON.stringify(Object.keys(pkg.dependencies))
  },
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Usage.

<template>
    ......
</tempalte>
<script lang="ts">
  import movies from '../dataset/movies'
  import {Vue, Component} from 'vue-property-decorator'

  @Component({
    name: 'QueryPane'
  })
  export default class QueryPane extends Vue {
    private x: string = '';
    private step: number = 3;
    private headers: any = movies.headers;
    private movies: any = movies.data
  }
</script>

But, Can't use typescript inside mixin.