jamesbirtles / svelte-vscode

Svelte language support for VS Code
https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
MIT License
207 stars 22 forks source link

Typescript suppor on monorepo #75

Closed namesphill closed 4 years ago

namesphill commented 5 years ago

Typescript support doesn't really work when the app directory is not root; maybe the extension doesn't recursively search for the config.js files.

My setup:

root
│
├─ packages
│   ├─ client
│   │   ├─ src
│   │   │   └─ App.svelte
│   │   ├─ Rollup.config.js
│   │   └─ svelte.config.js
│   └─ other-package
└─ lerna.json

Opening VS code on the root of the monorepo doesn't properly load the typescript feature:

image

While doing so in the client directory does:

image

My config files:

// Rollup.config.js
const svelte = require("rollup-plugin-svelte");
const commonjs = require("rollup-plugin-commonjs");
const resolve = require("rollup-plugin-node-resolve");
const serve = require("rollup-plugin-serve");
const html = require("rollup-plugin-bundle-html");
const typescript = require("rollup-plugin-typescript2");
const tscompile = require("typescript");
const { terser } = require("rollup-plugin-terser");
const livereload = require("rollup-plugin-livereload");

const isProd = process.env.NODE_ENV === "production";
const isDev = process.env.NODE_ENV === "development";
const isTest = process.env.NODE_ENV === "test";

const plugins = [
  commonjs({ include: "node_modules/**" }),
  typescript({ typescript: tscompile }),
  svelte({
    dev: isProd ? false : true,
    extensions: [".svelte"],
    preprocess: require("./svelte.config.js").preprocess,
    css: isTest ? false : css => css.write("build/css/style.css")
  }),
  resolve({ browser: true }),
  html({
    template: "src/index.html",
    dest: "build",
    filename: "index.html"
  })
];

if (isDev) {
  plugins.push(
    serve({
      open: false,
      openPage: "/index.html",
      historyApiFallback: "/index.html",
      contentBase: ["./build"]
    }),
    livereload({
      watch: "build"
    })
  );
} else if (isProd) {
  plugins.push(terser({ sourcemap: true }));
}

module.exports = {
  input: "src/index.ts",
  output: {
    sourcemap: true,
    name: "main",
    file: "build/js/main.js",
    format: "iife"
  },
  plugins
};

And

// svelte.config.js
const {
  preprocess,
  createEnv,
  readConfigFile
} = require("svelte-ts-preprocess");

const env = createEnv();

module.exports = {
  preprocess: preprocess({
    env,
    compilerOptions: {
      ...readConfigFile(env),
      allowNonTsExtensions: true
    }
  })
};
Dip686 commented 4 years ago

@namesphill , facing the same problem while writing typescript in svelte files. https://github.com/diptarag/svelte-ts-grid @UnwrittenFun is there any chance that this issue may be resolved soon?