chore: update babel and webpack configs to support TypeScript

.babelrc

@@ -1,5 +1,6 @@
 {
     "presets": [
+        ["@babel/preset-typescript"],
         ["@babel/preset-env", {
             "targets": {
                 "browsers": "defaults and supports webgl2"
@@ -8,7 +9,10 @@
         }]
     ],
     "plugins": [
-        ["module-resolver",  { "root": ["./src"] } ],
+        ["module-resolver", {
+            "root": ["./src"],
+            "extensions": [".js", ".ts", ".tsx"]
+        }],
         ["babel-plugin-inline-import", {
             "extensions": [
                 ".json",
@@ -17,7 +21,9 @@
                 ".css"
             ]
         }],
-        ["module-extension-resolver"],
+        ["module-extension-resolver", {
+            "srcExtensions": [".ts", ".js"]
+        }],
         ["@babel/plugin-transform-runtime", {
             "regenerator": false
         }],

config/babel-register/babel-hooks.mjs

@@ -71,7 +71,18 @@ async function transpile(source, context) {
  * the Node.js default resolve hook after the last user-supplied resolve hook
  */
 export async function resolve(specifier, context, nextResolve) {
-    return nextResolve(specifier, context);
+    // Try to resolve the path of an imported module.
+    // If the resolver failed, retry substituting the extension with '.ts'.
+    try {
+        return await nextResolve(specifier, context);
+    } catch (err) {
+        if (err.code === 'ERR_MODULE_NOT_FOUND') {
+            const url = new URL(specifier, context.parentURL);
+            url.pathname = url.pathname.replace(/\.[^/.]+$/, '.ts');
+            return nextResolve(url.href, context);
+        }
+        throw err;
+    }
 }
 
 /**
@@ -87,7 +98,17 @@ export async function resolve(specifier, context, nextResolve) {
  * the last user-supplied load hook
  */
 export async function load(url, context, nextLoad) {
-    const { format, shortCircuit, source } = await nextLoad(url, context);
+    // Try to load the file using the default loader (which supports both
+    // ESM/CJS modules) but does not support '.ts' extensions. Use the ESM
+    // module loader for typescript files.
+    const { format, shortCircuit, source } = await nextLoad(url, context)
+        .catch(async (error) => {
+            if (error.code === 'ERR_UNKNOWN_FILE_EXTENSION') {
+                return nextLoad(url, { ...context, format: 'module' });
+            }
+
+            throw error;
+        });
 
     if (format !== 'module' && format !== 'commonjs') {
         return { format, shortCircuit, source };

package.json

@@ -79,6 +79,7 @@
     "@babel/core": "^7.25.2",
     "@babel/plugin-transform-runtime": "^7.25.4",
     "@babel/preset-env": "^7.25.4",
+    "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
     "@types/three": "^0.168.0",
     "@xmldom/xmldom": "^0.9.2",

webpack.config.cjs

@@ -45,6 +45,12 @@ module.exports = () => {
     return {
         mode,
         context: path.resolve(__dirname),
+        resolve: {
+            extensions: ['.ts', '.js'],
+            extensionAlias: {
+                '.js': ['.ts', '.js'],
+            },
+        },
         entry: {
             itowns: [
                 'core-js',
@@ -76,7 +82,7 @@ module.exports = () => {
         module: {
             rules: [
                 {
-                    test: /\.js$/,
+                    test: /\.(js|ts)$/,
                     exclude,
                     include,
                     use: babelLoaderOptions,