fix typescript compilation #40

Author: DonJayamanne

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 2.0.4 (26 Sept 2021)
 * Support for a REPL (Interactive Window) experience (https://github.com/DonJayamanne/typescript-notebook/issues/37)
+* Fix typescript copmilation (https://github.com/DonJayamanne/typescript-notebook/issues/40)
 
 ## 2.0.3 (12 Sept 2021)
 * Support for user input in notebooks using [readline](https://nodejs.org/api/readline.html#readline_readline_createinterface_options)

build/webpack/webpack.client.config.js

@@ -3,6 +3,7 @@ const FixDefaultImportPlugin = require('webpack-fix-default-import-plugin');
 const path = require('path');
 const constants = require('../constants');
 const configFileName = 'tsconfig.client.json';
+const CopyPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 // Any build on the CI is considered production mode.
 const isProdBuild = constants.isCI || process.argv.some((argv) => argv.includes('mode') && argv.includes('production'));
@@ -40,8 +41,14 @@ module.exports = {
             }
 
             // reportFiles: ['src/client/**/*.{ts,tsx}']
-        })
+        }),
         // ...common.getDefaultPlugins('extension')
+        new CopyPlugin({
+            patterns: [
+              { from: path.join(constants.ExtensionRootDir, "node_modules/typescript/lib/typescript.js"), to: path.join(constants.ExtensionRootDir, "resources/scripts/node_modules/typescript/index.js") },
+              { from: path.join(constants.ExtensionRootDir, "node_modules/typescript/LICENSE.txt"), to: path.join(constants.ExtensionRootDir, "resources/scripts/node_modules/typescript/LICENSE.txt") }
+            ],
+          }),
     ],
     stats: {
         performance: false

build/webpack/webpack.config.js

@@ -1,5 +1,4 @@
 module.exports = [
-    require('./webpack.typescript.config'),
     require('./webpack.extension.config'),
     require('./webpack.client.config')
 ];

build/webpack/webpack.typescript.config.js

@@ -4,7 +4,7 @@
     "description": "Iterative & iteractive programming for Node.js in JavaScript/TypeScript (REPL), with great support for Tensorflow.js, debugging, & more..",
     "version": "2.0.4",
     "engines": {
-        "vscode": "^1.60.0"
+        "vscode": "^1.61.0"
     },
     "publisher": "donjayamanne",
     "author": {
@@ -343,13 +343,12 @@
     },
     "scripts": {
         "vscode:prepublish": "npm run build",
-        "dev": "concurrently -r npm:compile:typescript npm:compile:extension:watch npm:compile:client:watch",
+        "dev": "concurrently -r npm:compile:extension:watch npm:compile:client:watch",
         "installtsnode": "cd resources/scripts && npm i -S ts-node",
         "build": "webpack --config=build/webpack/webpack.config.js --mode=production",
         "compile:extension:watch": "tsc --watch -p ./",
         "compile:client:watch": "webpack --config=build/webpack/webpack.client.config.js --watch",
         "compile:extension:webpack": "webpack --config=build/webpack/webpack.extension.config.js",
-        "compile:typescript": "webpack --config=build/webpack/webpack.typescript.config.js",
         "lint": "eslint src/client --ext ts && eslint src/extension --ext ts && eslint build --ext js",
         "lint-format": "npx prettier 'src/**/*.ts*' --check && npx prettier 'build/**/*.js' --check",
         "package": "vsce package --yarn -o node-notebooks.vsix",
@@ -377,7 +376,7 @@
         "shell-quote": "^1.7.2",
         "source-map": "^0.6.1",
         "tmp": "^0.2.1",
-        "typescript": "^4.4.3",
+        "typescript": "^4.4.4",
         "uuid": "^8.3.2",
         "ws": "^7.5.3",
         "xterm": "^4.13.0",
@@ -400,7 +399,7 @@
         "arquero": "^4.8.4",
         "cache-loader": "^4.1.0",
         "concurrently": "^5.2.0",
-        "copy-webpack-plugin": "^9.0.0",
+        "copy-webpack-plugin": "^9.0.1",
         "css-loader": "^3.5.3",
         "danfojs-node": "^0.2.7",
         "eslint": "^7.32.0",

package-lock.json

@@ -11,6 +11,6 @@
   "license": "ISC",
   "dependencies": {
     "profoundjs-node-pty": "^2.0.3",
-    "ts-node": "^10.2.1"
+    "ts-node": "^10.3.0"
   }
 }

package.json

@@ -208,7 +208,7 @@ export namespace Compiler {
             const matchingItem =
                 typeof location.column === 'number'
                     ? // Find the next closes column we have, we if cannot find an exact match.
-                      map.get(location.column) || map.get(location.column - 1) || map.get(location.column + 1)
+                    map.get(location.column) || map.get(location.column - 1) || map.get(location.column + 1)
                     : map.get(0)!;
             if (matchingItem) {
                 mappedLocation.line = matchingItem.generatedLine;
@@ -260,11 +260,12 @@ export namespace Compiler {
                 {
                     sourceMap: true,
                     inlineSourceMap: true,
-                    sourceRoot: path.dirname(details.sourceFilename),
+                    jsx: ts.JsxEmit.None,
+                    sourceRoot: path.dirname(details.sourceTsFilename),
                     noImplicitUseStrict: true,
                     importsNotUsedAsValues: ts.ImportsNotUsedAsValues.Remove,
                     strict: false, // No way.
-                    fileName: details.sourceFilename,
+                    fileName: details.sourceTsFilename,
                     resolveJsonModule: true,
                     removeComments: true,
                     target: ts.ScriptTarget.ESNext, // Minimum Node12 (but let users use what ever they want). Lets look into user defined tsconfig.json.
@@ -282,7 +283,7 @@ export namespace Compiler {
                     allowSyntheticDefaultImports: true,
                     skipLibCheck: true // We expect users to rely on VS Code to let them know if they have issues in their code.
                 },
-                details.sourceFilename
+                details.sourceTsFilename
             );
             // let transpiledCode = result;
             // let transpiledCode = result.replace(
@@ -522,6 +523,7 @@ function createCodeObject(cell: NotebookCell) {
     const codeObject: CodeObject = {
         code: '',
         sourceFilename: '',
+        sourceTsFilename: '',
         sourceMapFilename: '',
         friendlyName: cwd
             ? `${path.relative(cwd, cell.notebook.uri.fsPath)}?cell=${cell.index + 1}`
@@ -535,10 +537,16 @@ function createCodeObject(cell: NotebookCell) {
     // codeObject.sourceFilename = codeObject.sourceFilename || cell.document.uri.toString();
     codeObject.sourceFilename =
         codeObject.sourceFilename || path.join(tmpDirectory, `notebook_cell_${cell.document.uri.fragment}.js`);
+    codeObject.sourceTsFilename =
+        codeObject.sourceTsFilename || path.join(tmpDirectory, `notebook_cell_${cell.document.uri.fragment}.ts`);
     codeObject.sourceMapFilename = codeObject.sourceMapFilename || `${codeObject.sourceFilename}.map`;
     mapOfSourceFilesToNotebookUri.set(codeObject.sourceFilename, cell.document.uri);
     mapOfSourceFilesToNotebookUri.set(cell.document.uri.toString(), cell.document.uri);
     mapFromCellToPath.set(cell, codeObject);
+    // For some reason if the file is empty, then generics don't work
+    // To fix this issue (https://github.com/DonJayamanne/typescript-notebook/issues/40) we must have code in the file.
+    // Even tried locally by manullay importing typescript and using compiler, same problem.
+    fs.writeFileSync(codeObject.sourceTsFilename, cell.document.getText());
     return codeObject;
 }
 function updateCodeObject(codeObject: CodeObject, cell: NotebookCell, sourceCode: string, sourceMapText: string) {
@@ -549,6 +557,7 @@ function updateCodeObject(codeObject: CodeObject, cell: NotebookCell, sourceCode
 
     if (codeObject.textDocumentVersion !== cell.document.version) {
         fs.writeFileSync(codeObject.sourceFilename, sourceCode);
+        fs.writeFileSync(codeObject.sourceTsFilename, sourceCode);
         // if (sourceMapText) {
         //     fs.writeFileSync(codeObject.sourceMapFilename, sourceMapText);
         // }
@@ -655,15 +664,15 @@ export type VariableDeclaration = BaseNode<'VariableDeclaration'> & {
 };
 type VariableDeclarator = BaseNode<'VariableDeclarator'> & {
     id:
-        | (BaseNode<string> & { name: string; loc: BodyLocation; type: 'Identifier' | '<other>' })
-        | (BaseNode<'ObjectPattern'> & {
-              name: string;
-              properties: { type: 'Property'; key: { name: string }; value: { name: string } }[];
-          })
-        | (BaseNode<'ArrayPattern'> & {
-              name: string;
-              elements: { name: string; type: 'Identifier' }[];
-          });
+    | (BaseNode<string> & { name: string; loc: BodyLocation; type: 'Identifier' | '<other>' })
+    | (BaseNode<'ObjectPattern'> & {
+        name: string;
+        properties: { type: 'Property'; key: { name: string }; value: { name: string } }[];
+    })
+    | (BaseNode<'ArrayPattern'> & {
+        name: string;
+        elements: { name: string; type: 'Identifier' }[];
+    });
     init?: { loc: BodyLocation };
     loc: BodyLocation;
 };
@@ -677,14 +686,14 @@ type BlockStatement = {
 };
 type ExpressionStatement = BaseNode<'ExpressionStatement'> & {
     expression:
+    | (BaseNode<'CallExpression'> & {
+        callee:
+        | (BaseNode<'ArrowFunctionExpression'> & { body: BlockStatement })
         | (BaseNode<'CallExpression'> & {
-              callee:
-                  | (BaseNode<'ArrowFunctionExpression'> & { body: BlockStatement })
-                  | (BaseNode<'CallExpression'> & {
-                        body: BlockStatement;
-                        callee: { name: string; loc: BodyLocation };
-                    });
-          })
-        | BaseNode<'other'>;
+            body: BlockStatement;
+            callee: { name: string; loc: BodyLocation };
+        });
+    })
+    | BaseNode<'other'>;
     loc: BodyLocation;
 };

resources/scripts/package-lock.json

@@ -35,6 +35,7 @@ export type CodeObject = {
     code: string;
     textDocumentVersion: number;
     sourceFilename: string;
+    sourceTsFilename: string;
     friendlyName: string;
     sourceMapFilename: string;
 };