Merge pull request #560 from namecheap/ilc-typescript-support

Ilc typescript support

.prettierignore

@@ -1,4 +1,5 @@
 # Ignore artifacts:
 ilc/public
+ilc/dist
 .nyc_output
 .karma_output

ilc/.gitignore

@@ -1,3 +1,4 @@
 /public/*
 /.nyc_output
 /.karma_output
+/dist

ilc/.mocharc.json

@@ -3,7 +3,7 @@
         "server/**/*.spec.js",
         "common/**/*.spec.js"
     ],
-    "require": "@babel/register",
+    "require": "ts-node/register",
     "timeout": 5000,
     "exclude": "node_modules/**/*"
 }

ilc/build/webpack.js

@@ -19,6 +19,16 @@ module.exports = {
     mode: 'production',
     module: {
         rules: [
+            {
+                test: /\.(js|ts)$/,
+                use: {
+                    loader: 'ts-loader',
+                    options: {
+                        configFile: 'tsconfig.client.json',
+                    },
+                },
+                exclude: /node_modules/,
+            },
             { parser: { System: false } },
             {
                 test: /\.js?$/,
@@ -32,6 +42,7 @@ module.exports = {
         alias: {
             'single-spa': require.resolve('single-spa/lib/umd/single-spa.min.js'),
         },
+        extensions: ['.js', '.ts'],
         plugins: [new ResolveIlcDefaultPluginsWebpackPlugin(ilcPluginsPath)],
     },
     plugins: [

ilc/client/errors/BaseError.js

@@ -1,4 +1,4 @@
-import * as uuidv4 from 'uuid/v4';
+import uuidv4 from 'uuid/v4';
 
 export class BaseError extends Error {
     data = {};

ilc/client/registry/factory.js

@@ -1,5 +1,5 @@
 import Registry from './Registry';
 import CacheWrapper from '../../common/CacheWrapper';
-import * as localStorage from '../../common/localStorage';
+import localStorage from '../../common/localStorage';
 
 export default new Registry(new CacheWrapper(localStorage, console));

ilc/nyc.config.js

@@ -26,6 +26,7 @@ module.exports = {
         'newrelic.js',
         '.karma_output',
         'client',
+        'dist',
         'public',
         'config',
         'build',

ilc/package.json

@@ -10,9 +10,10 @@
     "test:coverage": "cross-env NODE_ENV=test nyc mocha --exit",
     "test:client": "npm run build:systemjs && cross-env NODE_ENV=test karma start",
     "test:client:watch": "npm run test:client -- --single-run=false --auto-watch=true",
-    "start": "node --max-http-header-size 30000 server/index.js",
-    "dev": "npm run build:polyfills && cross-env NODE_ENV=development nodemon --max-http-header-size 30000 server/index.js",
-    "build": "rimraf public && npm run build:systemjs && npm run build:client && npm run build:polyfills",
+    "start": "node --max-http-header-size 30000 dist/server/index.js",
+    "dev": "npm run build:polyfills && cross-env NODE_ENV=development nodemon --max-http-header-size 30000 dist/server/index.js",
+    "build": "rimraf public && npm run build:server && npm run build:systemjs && npm run build:client && npm run build:polyfills",
+    "build:server": "npx tsc --project ./tsconfig.server.json && npx copyfiles -f ./config/* ./dist/config/",
     "build:client": "webpack --config build/webpack.js --progress",
     "build:systemjs": "node ./systemjs/build.js",
     "build:polyfills": "mkdir public || true && nwget https://polyfill.io/v3/polyfill.min.js?features=URL%2CObject.entries%2CDocumentFragment.prototype.append%2CElement.prototype.append%2CElement.prototype.remove%2CObject.assign%2CElement.prototype.closest%2CCustomEvent%2CObject.values%2CArray.from -O ./public/polyfill.min.js"
@@ -65,6 +66,7 @@
     "babel-plugin-transform-async-to-promises": "^0.8.18",
     "chai": "^4.3.10",
     "chai-as-promised": "^7.1.1",
+    "copyfiles": "^2.4.1",
     "karma": "^6.4.2",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -83,6 +85,9 @@
     "rimraf": "^5.0.5",
     "sinon": "^16.1.0",
     "supertest": "^6.3.3",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-middleware": "^6.1.1",

ilc/server/GuardManager.spec.js

@@ -71,7 +71,7 @@ describe('GuardManager', () => {
             pluginManager.getTransitionHooksPlugin.returns(transitionHooksPlugin);
             transitionHooksPlugin.getTransitionHooks.returns(hooks);
 
-            app = createApp(helpers.getRegistryMock(), pluginManager, context);
+            const app = createApp(helpers.getRegistryMock(), pluginManager, context);
 
             try {
                 res = await app.inject({ method: 'GET', url: '/all' });

ilc/server/plugins/PluginsLoader.js

@@ -13,7 +13,7 @@ class PluginsLoader {
 
         if (environment.isLegacyPluginsDiscoveryEnabled()) {
             const pluginPaths = fg.sync(['ilc-plugin-*/package.json', '@*/ilc-plugin-*/package.json'], {
-                cwd: path.resolve(__dirname, '../node_modules'),
+                cwd: path.resolve(__dirname, '../../node_modules'),
                 absolute: true,
             });
 

ilc/server/serveStatic.js

@@ -7,11 +7,11 @@ module.exports = function (isProduction) {
         return serveStatic('public');
     }
 
-    require('../systemjs/build');
+    require('../../systemjs/build');
 
     const webpackDevMiddleware = require('webpack-dev-middleware');
     const webpack = require('webpack');
-    const webpackConfig = require('../build/webpack.dev');
+    const webpackConfig = require('../../build/webpack.dev');
     const compiler = webpack(webpackConfig);
 
     return [webpackDevMiddleware(compiler), serveStatic('public')];

ilc/tsconfig.client.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./client/**/*.ts",
+    "./client/**/*.js",
+    "./common/**/*.ts",
+    "./common/**/*.js",
+    "./system/**/*.js"
+  ]
+}

ilc/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es6",
+    "allowJs": true,
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.js"]
+}

ilc/tsconfig.server.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./server/**/*.ts",
+    "./server/**/*.js",
+    "./common/**/*.ts",
+    "./common/**/*.js"
+  ]
+}