Optimize build

.eslintignore

@@ -0,0 +1,3 @@
+build
+dist
+node_modules

.gitignore

@@ -9,8 +9,8 @@ package-lock.json
 .npmrc
 
 # output directory
-out
 build
+dist
 web-app/build/
 web-app/node_modules
 

.vscode/settings.json

@@ -16,7 +16,10 @@
     "browserslist",
     "codeally",
     "coderoad",
+    "esbuild",
     "flowtype",
+    "fsevents",
+    "outfile",
     "packagejson",
     "prismjs",
     "Traceback",

.vscodeignore

@@ -2,12 +2,14 @@
 .gitignore
 
 ## VSCode
-.vscode/**
-.vscode-test/**
+.vscode
+.vscode-test
 vsc-extension-quickstart.md
 
-## CI/CD
-.circleci
+## Modules
+node_modules/**
+!node_modules/fsevents/**
+!node_modules/jsdom/**
 
 ## TypeScript
 **/tsconfig.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coderoad",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Play interactive coding tutorials in your editor",
   "keywords": [
     "tutorial",
@@ -31,7 +31,10 @@
     "package": "./scripts/package.sh",
     "storybook": "yarn --cwd web-app storybook",
     "test": "jest",
-    "watch": "tsc -watch -p ./"
+    "esbuild-base": "esbuild ./src/extension.ts --bundle --outfile=build/extension.js --external:vscode --external:fsevents --external:jsdom --format=cjs --platform=node",
+    "esbuild": "npm run esbuild-base -- --sourcemap",
+    "esbuild-watch": "npm run esbuild-base -- --sourcemap --watch",
+    "test-compile": "tsc -watch -p ./"
   },
   "dependencies": {
     "chokidar": "3.5.2",
@@ -56,6 +59,7 @@
     "@types/semver": "^7.3.9",
     "@typescript-eslint/eslint-plugin": "5.4.0",
     "@typescript-eslint/parser": "5.4.0",
+    "esbuild": "0.14.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "8.0.3",

scripts/build.sh

@@ -8,20 +8,22 @@ echo "Cleaning up previous build..."
 rm -rf build
 
 # build extension
-echo "Compiling..."
-tsc -p ./
+echo "Bundling src..."
+npm run esbuild
 
 # build web app
+echo "Building webapp..."
 cd web-app
 yarn build
 cd ..
 
 # For Windows build: switch the next 2 lines
+echo "Bundling webapp..."
 if [[ "$OSTYPE" == "msys" ]]; then
-echo "linux subsystem on windows selected"
+    # linux subsystem on windows selected
     cp -R ./web-app/build/ ./
 else
-echo "Unix system selected"
+    # unix
     cp -R ./web-app/build/. ./build/
 fi
 

scripts/package.sh

@@ -12,8 +12,9 @@ OUTPUT_FILE=coderoad-$PACKAGE_VERSION.vsix
 echo "Creating $OUTPUT_FILE..."
 
 echo "Building..."
-GENERATE_SOURCEMAP=false # reduces output size by 5mb+
+export GENERATE_SOURCEMAP=false # reduces output size by 5mb+
 yarn build
+npm run esbuild-base -- --minify
 
 echo "Packaging Extension..."
 mkdir -p ./$RELEASES_FOLDER

src/services/node/index.ts

@@ -6,7 +6,7 @@ import { WORKSPACE_ROOT } from '../../environment'
 
 const asyncExec = promisify(cpExec)
 const asyncRemoveFile = promisify(fs.unlink)
-const asyncReadFile = promisify(fs.readFile)
+export const asyncReadFile = promisify(fs.readFile)
 const asyncWriteFile = promisify(fs.writeFile)
 
 interface ExecParams {

src/services/webview/render.ts

@@ -1,6 +1,7 @@
 import { JSDOM } from 'jsdom'
 import * as path from 'path'
 import * as vscode from 'vscode'
+import { asyncReadFile } from '../node'
 import { onError } from '../telemetry'
 import { CONTENT_SECURITY_POLICY_EXEMPTIONS } from '../../environment'
 
@@ -64,7 +65,18 @@ async function render(panel: vscode.WebviewPanel, rootPath: string): Promise<voi
     const runTimeScript = document.createElement('script')
     runTimeScript.nonce = getNonce()
     nonces.push(runTimeScript.nonce)
-    const manifest = await import(path.join(rootPath, 'asset-manifest.json'))
+
+    // note: file cannot be imported or results in esbuild error. Easier to read it.
+    let manifest
+    try {
+      const manifestPath = path.join(rootPath, 'asset-manifest.json')
+      console.log(manifestPath)
+      const manifestFile = await asyncReadFile(manifestPath, 'utf8')
+      manifest = JSON.parse(manifestFile)
+    } catch (e) {
+      throw new Error('Failed to read manifest file')
+    }
+
     runTimeScript.src = createUri(manifest.files['runtime-main.js'])
     document.body.appendChild(runTimeScript)
 

tsconfig.json

@@ -26,5 +26,15 @@
     "allowJs": true,
     "removeComments": true
   },
-  "exclude": ["docs", "node_modules", ".vscode-test", "build", "resources", "web-app", "*.js", "*.test.ts", "scripts"]
+  "exclude": [
+    "docs",
+    "node_modules",
+    ".vscode-test",
+    "build",
+    "resources",
+    "web-app",
+    "*.js",
+    "*.test.ts",
+    "scripts"
+  ]
 }

web-app/.env.example

@@ -1,5 +1,5 @@
 SKIP_PREFLIGHT_CHECK=true
-VERSION=0.17.0
+VERSION=0.17.1
 NODE_ENV=local
 REACT_APP_DEBUG=false
 REACT_APP_LOG=false

web-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coderoad-app",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "private": true,
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",