TypeScript support for .blits files

packages/create-blits/boilerplate/ts/default/src/App.ts

@@ -1,12 +1,11 @@
 import Blits from '@lightningjs/blits'
 
-import Home from './pages/Home.js'
+import Home from './pages/Home'
 
 export default Blits.Application({
   template: `
     <Element>
       <RouterView />
-    </Element>
-    `,
+    </Element>`,
   routes: [{ path: '/', component: Home }],
 })

packages/create-blits/boilerplate/ts/default/src/index.ts

@@ -1,5 +1,5 @@
 import Blits from '@lightningjs/blits'
-import App from './App.js'
+import App from './App'
 
 Blits.Launch(App, 'app', {
   w: 1920,

packages/create-blits/boilerplate/ts/default/src/pages/Home.ts

@@ -1,6 +1,6 @@
 import Blits from '@lightningjs/blits'
 
-import Loader from '../components/Loader.js'
+import Loader from '../components/Loader'
 
 const colors = ['#f5f3ff', '#ede9fe', '#ddd6fe', '#c4b5fd', '#a78bfa']
 
@@ -38,8 +38,7 @@ export default Blits.Component('Home', {
           />
         </Element>
       </Element>
-    </Element>
-    `,
+    </Element>`,
   state() {
     return {
       /**

vite/blitsFileConverter.js

@@ -16,23 +16,52 @@
  */
 
 import blitsfileconverter from '../src/lib/blitsfileconverter/blitsfileconverter.js'
+import path from 'node:path'
+import fs from 'node:fs'
+import { createRequire } from 'module'
 
 export default function blitsFileType() {
   return {
     name: 'vite-plugin-blits-file-type',
     enforce: 'pre',
-    transform(src, id) {
+
+    resolveId(source, importer) {
+      if (source.endsWith('.blits')) {
+        return importer ? path.resolve(path.dirname(importer), source) : path.resolve(source)
+      }
+      return null
+    },
+
+    load(id) {
       if (id.endsWith('.blits')) {
-        try {
-          const transformedCode = blitsfileconverter(src)
-          return {
-            code: transformedCode,
-            map: null, // no source map
+        const source = fs.readFileSync(id, 'utf-8')
+        let code = blitsfileconverter(source)
+
+        // Check for TypeScript and transpile to JS if needed
+        if (/<script\s+lang=["']ts["']/.test(source)) {
+          // Resolve the local typescript dependency
+          const userRequire = createRequire(process.cwd() + '/')
+          let ts
+          try {
+            ts = userRequire('typescript')
+          } catch (err) {
+            throw new Error(
+              `\n\nThe file "${id}" contains \`lang="ts"\`, indicating it uses TypeScript. \nTo enable TypeScript support, please install the 'typescript' package as a dev dependency by running:\n\n` +
+                '  npm install --save-dev typescript\n\n'
+            )
           }
-        } catch (error) {
-          this.error(error)
+          const transpiled = ts.transpileModule(code, {
+            compilerOptions: { target: ts.ScriptTarget.ESNext, module: ts.ModuleKind.ESNext },
+          })
+          code = transpiled.outputText
+        }
+
+        return {
+          code,
+          map: null,
         }
       }
+      return null
     },
   }
 }

vite/preCompiler.js

@@ -30,12 +30,13 @@ export default function () {
 
       const fileExtension = path.extname(filePath)
 
-      // we should only precompile .js and .ts files
-      if (fileExtension === '.js' || fileExtension === '.ts') {
+      // we should only precompile .blits, .js and .ts files
+      if (fileExtension === '.js' || fileExtension === '.ts' || fileExtension === '.blits') {
         return compiler(source, filePath)
       }
-      const relativePath = path.relative(process.cwd(), filePath)
-      return compiler(source, relativePath)
+
+      // vite expects null if there is no modification
+      return null
     },
   }
 }