feat: 🎸 add typescript preprocessor

Author: jamesbirtles

Diff for: README.md

@@ -1,6 +1,6 @@
 # Svelte Preprocess
 
-> A [Svelte](https://svelte.technology) preprocessor wrapper with support for: PostCSS, SCSS, Less, Stylus, Coffeescript and Pug.
+> A [Svelte](https://svelte.technology) preprocessor wrapper with support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript and Pug.
 
 ## Installation
 
@@ -10,6 +10,7 @@ The preprocessor module installation is up to the developer.
 
 - `postcss`: `npm install --save-dev postcss`
 - `coffeescript`: `npm install --save-dev coffeescript`
+- `typescript`: `npm install --save-dev typescript`
 - `less`: `npm install --save-dev less`
 - `sass`: `npm install --save-dev node-sass`
 - `pug`: `npm install --save-dev pug`
@@ -43,7 +44,7 @@ _Note: only for auto preprocessing_
 
 ### Preprocessors support
 
-Current supported out-of-the-box preprocessors are `SCSS`, `Stylus`, `Less`, `Coffeescript`, `Pug` and `PostCSS`.
+Current supported out-of-the-box preprocessors are `SCSS`, `Stylus`, `Less`, `Coffeescript`, `TypeScript`, `Pug` and `PostCSS`.
 
 ```html
 <template lang="pug">
@@ -57,6 +58,10 @@ Current supported out-of-the-box preprocessors are `SCSS`, `Stylus`, `Less`, `Co
         console.log('Hey')
 </script>
 
+<script lang="typescript">
+  export const hello: string = 'world';
+</script>
+
 <style src="./style.scss"></style>
 
 <!-- Or -->
@@ -128,6 +133,26 @@ const options = {
       ]
     },
 
+    typescript: {
+      /**
+       * Optionally specify the directory to load the tsconfig from
+       */
+      tsconfigDirectory: './configs',
+
+      /**
+       * Optionally specify the full path to the tsconfig
+       */
+      tsconfigFile: './tsconfig.app.json',
+
+      /**
+       * Optionally specify compiler options.
+       * These will be merged with options from the tsconfig if found.
+       */
+      compilerOptions: {
+        module: 'es2015'
+      }
+    },
+
     /** Use a custom preprocess method by passing a function. */
     pug({ content, filename }) {
         const code = pug.render(content)

Diff for: package-lock.json

@@ -51,7 +51,8 @@
     "prettier": "^1.16.4",
     "pug": "^2.0.3",
     "stylus": "^0.54.5",
-    "svelte": "^3.0.0-beta.16"
+    "svelte": "^3.0.0-beta.16",
+    "typescript": "^3.4.5"
   },
   "peerDependencies": {
     "svelte": "^1.44.0 || ^2.0.0 || ^3.0.0"

Diff for: package.json

@@ -10,7 +10,7 @@ type PreprocessResult = {
 }
 
 type SveltePreprocessOptions = {
-  onBefore?({ content, filename } = { content: string, filename: string }): string;
+  onBefore?({ content, filename }: { content: string, filename: string }): string;
   transformers?: {
     [languageName: string]: boolean | object | (({ content, filename }: { content: string, filename?: string }) =>
     PreprocessResult | Promise<PreprocessResult>)

Diff for: src/index.d.ts

@@ -11,6 +11,7 @@ module.exports.pug = opts => require(`./processors/pug.js`)(opts)
 module.exports.coffeescript = opts =>
   require(`./processors/coffeescript.js`)(opts)
 module.exports.coffee = opts => require(`./processors/coffeescript.js`)(opts)
+module.exports.typescript = opts => require(`./processors/typescript.js`)(opts)
 
 /** Style */
 module.exports.less = opts => require(`./processors/less.js`)(opts)

Diff for: src/index.js

@@ -0,0 +1,11 @@
+const { getLanguage } = require('../utils.js')
+const transformer = require('../transformers/typescript.js')
+
+module.exports = options => ({
+  script({ content, attributes, filename }) {
+    const { lang } = getLanguage(attributes, 'javascript')
+    if (lang !== 'typescript') return { code: content }
+
+    return transformer({ content, filename, options })
+  },
+})

Diff for: src/processors/typescript.js

@@ -0,0 +1,65 @@
+const ts = require('typescript')
+const path = require('path')
+
+module.exports = ({ content, filename, options }) => {
+  const fileDirectory = options.tsconfigDirectory || path.dirname(filename)
+  const tsconfigPath =
+    options.tsconfigPath || ts.findConfigFile(fileDirectory, ts.sys.fileExists)
+  const basePath = tsconfigPath ? path.dirname(tsconfigPath) : process.cwd()
+
+  let compilerOptionsJSON = options.compilerOptions || {}
+  if (tsconfigPath) {
+    const { error, config } = ts.readConfigFile(tsconfigPath, ts.sys.readFile)
+    if (error) {
+      const err = ts.formatDiagnostic(
+        error,
+        createFormatDiagnosticsHost(basePath),
+      )
+      throw new Error(err)
+    }
+    compilerOptionsJSON = {
+      ...(config.compilerOptions || {}),
+      ...compilerOptionsJSON,
+    }
+  }
+
+  const {
+    errors,
+    options: compilerOptions,
+  } = ts.convertCompilerOptionsFromJson(compilerOptionsJSON, basePath)
+  if (errors.length) {
+    const err = ts.formatDiagnostics(
+      errors,
+      createFormatDiagnosticsHost(basePath),
+    )
+    throw new Error(err)
+  }
+
+  const {
+    outputText: code,
+    sourceMapText: map,
+    diagnostics,
+  } = ts.transpileModule(content, {
+    fileName: filename,
+    compilerOptions: compilerOptions,
+    reportDiagnostics: options.reportDiagnostics !== false,
+  })
+
+  if (diagnostics.length) {
+    const diagnosticMessage = ts.formatDiagnostics(
+      diagnostics,
+      createFormatDiagnosticsHost(basePath),
+    )
+    console.log(diagnosticMessage)
+  }
+
+  return { code, map }
+}
+
+function createFormatDiagnosticsHost(cwd) {
+  return {
+    getCanonicalFileName: fileName => fileName,
+    getCurrentDirectory: () => cwd,
+    getNewLine: () => ts.sys.newLine,
+  }
+}

Diff for: src/transformers/typescript.js

@@ -7,6 +7,7 @@ const LANG_DICT = new Map([
   ['styl', 'stylus'],
   ['js', 'javascript'],
   ['coffee', 'coffeescript'],
+  ['ts', 'typescript'],
 ])
 
 const throwError = msg => {

Diff for: src/utils.js

@@ -5,7 +5,10 @@ const {
   doesCompileThrow,
 } = require('../utils.js')
 
-const SCRIPT_LANGS = [['coffeescript', 'coffee']]
+const SCRIPT_LANGS = [
+  ['coffeescript', 'coffee'],
+  ['typescript', 'ts', { compilerOptions: { module: 'es2015' } }],
+]
 const EXPECTED_SCRIPT = getFixtureContent('script.js')
 
 SCRIPT_LANGS.forEach(([lang, ext, langOptions]) => {
@@ -28,9 +31,71 @@ SCRIPT_LANGS.forEach(([lang, ext, langOptions]) => {
     })
 
     it(`should parse ${lang}`, async () => {
-      const opts = getAutoPreprocess()
+      const opts = getAutoPreprocess({
+        transformers: {
+          [lang]: langOptions,
+        },
+      })
       const preprocessed = await preprocess(template, opts)
       expect(preprocessed.toString()).toContain(EXPECTED_SCRIPT)
     })
   })
 })
+
+describe('script - preprocessor - typescript', () => {
+  const template = `<div></div><script lang="ts">${getFixtureContent(
+    'script.ts',
+  )}</script>`
+
+  it('should work with no compilerOptions', async () => {
+    const opts = getAutoPreprocess()
+    const preprocessed = await preprocess(template, opts)
+    expect(preprocessed.toString()).toContain('exports.hello')
+  })
+
+  it('should work with tsconfigDirectory', async () => {
+    const opts = getAutoPreprocess({
+      transformers: {
+        typescript: {
+          tsconfigDirectory: './test/fixtures',
+        },
+      },
+    })
+    const preprocessed = await preprocess(template, opts)
+    expect(preprocessed.toString()).toContain(EXPECTED_SCRIPT)
+  })
+
+  it('should work with tsconfigPath', async () => {
+    const opts = getAutoPreprocess({
+      transformers: {
+        typescript: {
+          tsconfigPath: './test/fixtures/tsconfig.json',
+        },
+      },
+    })
+    const preprocessed = await preprocess(template, opts)
+    expect(preprocessed.toString()).toContain(EXPECTED_SCRIPT)
+  })
+
+  it('should report syntactic errors in tsconfig file', () => {
+    const opts = getAutoPreprocess({
+      transformers: {
+        typescript: {
+          tsconfigPath: './test/fixtures/tsconfig.syntactic.json',
+        },
+      },
+    })
+    return expect(preprocess(template, opts)).rejects.toThrow('TS1005')
+  })
+
+  it('should report semantic errors in tsconfig file', () => {
+    const opts = getAutoPreprocess({
+      transformers: {
+        typescript: {
+          tsconfigPath: './test/fixtures/tsconfig.semantic.json',
+        },
+      },
+    })
+    return expect(preprocess(template, opts)).rejects.toThrow('TS6046')
+  })
+})

Diff for: test/autoProcess/script.test.js

@@ -1,4 +1 @@
-export default
-  methods:
-    foo: () ->
-      console.log('Hey')
+export hello = 'world';

Diff for: test/fixtures/script.coffee

@@ -1,7 +1 @@
-export default {
-  methods: {
-    foo: function() {
-      return console.log('Hey');
-    }
-  }
-};
+export var hello = 'world';

Diff for: test/fixtures/script.js

@@ -0,0 +1 @@
+export let hello: string = 'world';

Diff for: test/fixtures/script.ts

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "module": "es2015"
+  }
+}

Diff for: test/fixtures/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "module": "es2010"
+  }
+}

Diff for: test/fixtures/tsconfig.semantic.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "module" "es2015"
+  }
+}