Rollup + Svelte + typescript : couldn't use rollup-plugin-import-alias

Question

compatbility between some useful rollup plugins (typescript, import-alias, svelte)

please read below installation details setup steps :

• rollup-plugin-import-alias
• rollup-plugin-typescript2
• rollup-plugin-svelte

Hi,

could build properly the rollup bundle... what's wrong in my config ?

I want to use the following plugins :

• rollup-plugin-typescript2 : the benefit this powerful typiong system
• rollup-plugin-import-alias : to avoid import (dot-dot slash dot-dot slash...) hell

But something went wrong...

Either Rollup treats module 'App.svelte' as external dependency, and do not include 'App.svelte' transpilation results inside bundle, those resulting a TypeError : App is not a constructor at runtime,

Or: removing .svelte extension results in a TypeScript rpt2 plugin semantic error : cannot find App !

• How to fix that ?
• Is rollup plugins sorting order important ?
• Are rollup-plugin-import-alias, rollup-plugin-svelte and rollup-plugin-typescript2 compatible together ?

Here's the directory layout :

$ tree -I *node*

├── dist
│   ├── app.js
│   └── dts
│       └── main.d.ts
├── package.json
├── package-lock.json
├── public
│   ├── github-issue-rollup-plugins-import-alias-rpt2.md
│   ├── index.html
│   └── npm-things-to-install.txt
├── rollup.config.js
├── src
│   ├── App.svelte
│   ├── App.svelte.d.ts
│   ├── components
│   ├── main.ts
│   └── typings
│       └── svelte.d.ts
└── tsconfig.json

Here are my tsconfig.json file :

{
  "compilerOptions" : {
    "target": "es5",
    "lib": [ "es2015", "dom" ],
    "noEmit" : true,
    "declaration": true,
    "declarationDir": "dist/dts",
    "baseUrl": ".",
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "#/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
      "node_modules/**"
    ]
  }

Here's rollup.config.js :

import svelte from 'rollup-plugin-svelte'
import typescript from 'rollup-plugin-typescript2'
import tscompile from 'typescript'
import buble from 'rollup-plugin-buble'
import alias from 'rollup-plugin-import-alias'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import serve from 'rollup-plugin-serve'
import path from 'path'

import pkg from './package.json'

const { name, version, description, author, license } = pkg

const banner = `
/*
 *
 * ${name} - version ${version}
 *
 * ${description}
 *
 * by: ${author}
 * license: ${license}
 *
 */
`

const basePlugins = [

  typescript({
    verbosity: 2,
    typescript: tscompile,
    declaration: true,
    declarationDir: 'dist/dts',
    useTsconfigDeclarationDir: true
  }),

  alias({
    Extensions: ['.svelte', '.ts'],
    Paths: {
      '#': path.resolve(__dirname + '/src')
    }
  }),

  svelte({
    extensions: [ '.svelte'],
    include: ['src/**/*.svelte']
  }),

  buble({
    exclude: 'node_modules/**',
    objectAssign: 'Object.assign'
  }),

  commonjs(),

  resolve({
    jsnext: true,
    browser: true,
    main : true,
    preferBuiltins: false
  })
]

const devServerOptions = {
  open: true,
  openPage: '/index.html',
  contentBase: ['dist', 'public'],
  host: 'localhost',
  port: 8080
}

// use the first for watch/serve options
const devPlugins = [...basePlugins, serve(devServerOptions), banner]
// const devPlugins = [...basePlugins,  banner]

export default {
  input: 'src/main.ts',

  output: {
    name: 'orthonet-svelte',
    file: 'dist/app.js',
    format: 'umd',
    banner
  },

  plugins: devPlugins,

  watch:{
    include: ['src/**/*.ts', 'src/**/*.svelte', 'src/**/*.ts'],
    exclude: ['node_modules/**']
  }
}

Here's App.svelte :

<h1> Hello { greeting } ! </h1>
<script>
  export default {}
</script>

Here's index.ts:

//import App from './App.svelte'
import App from '#/App.svelte'

console.log('trying app...')

const app = new App({
  target: document.getElementById('app'),

  data: {
    greeting: 'everybody'
  }
})

app.set({ greeting: 'world' })

Thanks for reading and help !