Optimize build

package.json

@@ -39,7 +39,7 @@
     "eslint": "7.32.0",
     "git-url-parse": "11.6.0",
     "jest": "27.3.1",
-    "jsdom": "18.1.0",
+    "jsdom": "18.1.1",
     "node-fetch": "2.6.6",
     "semver": "7.3.5",
     "ts-jest": "27.0.7",
@@ -64,7 +64,7 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.4.1",
+    "prettier": "2.5.0",
     "vscode": "^1.1.37",
     "vscode-test": "^1.6.1"
   },

scripts/package.sh

@@ -12,6 +12,7 @@ OUTPUT_FILE=coderoad-$PACKAGE_VERSION.vsix
 echo "Creating $OUTPUT_FILE..."
 
 echo "Building..."
+GENERATE_SOURCEMAP=false # reduces output size by 5mb+
 yarn build
 
 echo "Packaging Extension..."

src/services/hooks/webhooks.ts

@@ -11,7 +11,7 @@ const WEBHOOK_EVENTS = {
   tutorial_complete: false,
 }
 
-// varaibles set on init
+// variables set on init
 let WEBHOOK_URI: string | undefined
 
 export const setupWebhook = (webhookConfig: TT.WebhookConfig) => {

web-app/.storybook/webpack.config.js

@@ -14,6 +14,7 @@ module.exports = ({ config }) => {
     loader: require.resolve('babel-loader'),
     options: {
       plugins: [
+        new MiniCssExtractPlugin(),
         [
           'babel-plugin-import',
           {

web-app/config-overrides.js

@@ -17,7 +17,7 @@ module.exports = function override(config) {
 
   // load @alifd/next component css
   addBabelPlugin([
-    'babel-plugin-import',
+    'import',
     {
       libraryName: '@alifd/next',
       style: true,

web-app/package.json

@@ -3,6 +3,7 @@
   "version": "0.17.0",
   "private": true,
   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "build": "react-app-rewired build",
     "build-storybook": "build-storybook",
     "start": "react-app-rewired start",
@@ -28,35 +29,35 @@
     "@alifd/next": "1.22.25",
     "@emotion/babel-preset-css-prop": "10.0.27",
     "@emotion/core": "10.0.35",
-    "@xstate/react": "^1.6.2",
+    "@xstate/react": "^1.6.3",
     "babel-jest": "26.6.3",
     "emotion-theming": "10.0.27",
     "js-yaml": "4.1.0",
     "markdown-it": "12.2.0",
     "markdown-it-emoji": "2.0.0",
-    "moment": "2.29.1",
     "prismjs": "1.25.0",
     "react": "16.13.1",
     "react-addons-css-transition-group": "15.6.2",
     "react-dom": "16.13.1",
-    "reselect": "^4.1.4",
+    "reselect": "^4.1.5",
     "use-media": "1.4.0",
-    "xstate": "^4.26.0"
+    "xstate": "^4.26.1"
   },
   "devDependencies": {
     "@babel/core": "7.14.0",
-    "@storybook/addon-actions": "6.3.12",
-    "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.3.12",
-    "@storybook/addons": "6.3.12",
-    "@storybook/preset-create-react-app": "3.1.7",
-    "@storybook/react": "6.3.12",
+    "@storybook/addon-actions": "6.4.0",
+    "@storybook/addon-knobs": "6.4.0",
+    "@storybook/addon-links": "6.4.0",
+    "@storybook/addons": "6.4.0",
+    "@storybook/preset-create-react-app": "3.2.0",
+    "@storybook/react": "6.4.0",
+    "@types/git-url-parse": "9.0.1",
     "@types/graphql": "14.5.0",
-    "@types/highlight.js": "9.12.4",
+    "@types/highlight.js": "10.1.0",
     "@types/jest": "26.0.23",
-    "@types/js-yaml": "3.12.5",
+    "@types/js-yaml": "4.0.5",
     "@types/markdown-it": "12.2.3",
-    "@types/node": "14.14.19",
+    "@types/node": "16.11.10",
     "@types/prismjs": "1.16.5",
     "@types/react": "16.9.49",
     "@types/react-addons-css-transition-group": "15.0.5",
@@ -66,10 +67,11 @@
     "customize-cra": "1.0.0",
     "mini-css-extract-plugin": "0.11.2",
     "node-sass": "6.0.1",
-    "prettier": "2.4.1",
+    "prettier": "2.5.0",
     "react-app-rewired": "2.1.8",
     "react-scripts": "4.0.3",
     "sass-loader": "12.3.0",
+    "source-map-explorer": "2.5.2",
     "typescript": "4.4.4"
   }
 }

web-app/public/index.html

@@ -9,7 +9,6 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="manifest.json" />
-    <link rel="shortcut icon" href="favicon.ico" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx

@@ -85,10 +85,6 @@ const Summary = (props: Props) => (
         </div>
         <Markdown>{`# ${props.tutorial.summary.title}`}</Markdown>
         <Markdown>{`### ${props.tutorial.summary.description}`}</Markdown>
-        {/* <h5 css={styles.meta}>
-          <div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
-          <div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
-        </h5> */}
       </div>
       <div>
         <div css={styles.levelList}>

web-app/src/services/tutorial/index.ts

@@ -1,5 +1,4 @@
 import * as TT from 'typings/tutorial'
-// @ts-ignore
 import gitUrlParser from 'git-url-parse'
 
 const processTutorial = (tutorial: TT.Tutorial): TT.Tutorial => {