Apr 12, 2020 · Apr 12, 2020 · Apr 12, 2020 · Apr 12, 2020
diff --git a/src/actions/utils/loadWatchers.ts b/src/actions/utils/loadWatchers.ts
 import * as chokidar from 'chokidar'
 import * as vscode from 'vscode'
 import { COMMANDS } from '../../editor/commands'
 importenvironment from '../../environment'
 import{ WORKSPACE_ROOT } from '../../environment'

 // NOTE: vscode createFileWatcher doesn't seem to detect changes outside of vscode
 // such as `npm install` of a package. Went with chokidar instead
      // see how glob patterns are used in VSCode (not like a regex)
      // https://code.visualstudio.com/api/references/vscode-api#GlobPattern
      const fsWatcher: chokidar.FSWatcher = chokidar.watch(watcher, {
        cwd:environment.WORKSPACE_ROOT,
        cwd: WORKSPACE_ROOT,
        interval: 1000,
      })

diff --git a/src/actions/utils/openFiles.ts b/src/actions/utils/openFiles.ts
      // ensure the panel is redrawn on the right side first
      vscode.commands.executeCommand(COMMANDS.OPEN_WEBVIEW)
    } catch (error) {
      console.log(`Failed to open file ${filePath}`,error)
      console.log(`Failed to open file ${filePath}: ${error.message}`)
    }
  }
 }
diff --git a/src/actions/utils/runCommands.ts b/src/actions/utils/runCommands.ts
    try {
      result = await exec(command)
    } catch (error) {
      console.log(error)
      console.log(`Test failed: ${error.message}`)
      send({ type: 'COMMAND_FAIL', payload: { process: { ...process, status: 'FAIL' } } })
      return
    }
diff --git a/src/channel/index.ts b/src/channel/index.ts
 import { readFile } from 'fs'
 import { join } from 'path'
 import { promisify } from 'util'
 importenvironment from '../environment'
 import{ WORKSPACE_ROOT } from '../environment'

 const readFileAsync = promisify(readFile)

    const actionType: string = typeof action === 'string' ? action : action.type
    // const onError = (error: T.ErrorMessage) => this.send({ type: 'ERROR', payload: { error } })

 // console.log(`ACTION:${actionType}`)
 logger(`EXT RECEIVED: "${actionType}"`)

    switch (actionType) {
      case 'EDITOR_STARTUP':
        // check if a workspace is open, otherwise nothing works
        const noActiveWorksapce = !environment.WORKSPACE_ROOT.length
        const noActiveWorksapce = !WORKSPACE_ROOT.length
        if (noActiveWorksapce) {
          const error: E.ErrorMessage = {
            type: 'NoWorkspaceFound',
      })

      // log error to console for safe keeping
 console.log(`ERROR:\n ${errorMarkdown}`)
 logger(`ERROR:\n ${errorMarkdown}`)

      if (errorMarkdown) {
        // add a clearer error message for the user

    // action may be an object.type or plain string
    const actionType: string = typeof action === 'string' ? action : action.type

    logger(`EXT TO CLIENT: "${actionType}"`)

    switch (actionType) {
      case 'TEST_PASS':
        const tutorial = this.context.tutorial.get()
diff --git a/src/environment.ts b/src/environment.ts
 path:'./web-app/.env',
 })

 import*asvscodefrom'vscode'
 import{getWorkspaceRoot}from'./services/workspace'

 interfaceEnvironment{
 VERSION:string
 NODE_ENV:string
 LOG:boolean
 API_URL:string
 SENTRY_DSN:string|null
 WORKSPACE_ROOT:string
 }
 // CodeRoad version
 exportconstVERSION:string=process.env.npm_package_version||'unknown'

 constenvironment:Environment={
 VERSION:process.env.VERSION||'unknown',
 NODE_ENV:process.env.NODE_ENV||'production',
 LOG:(process.env.LOG||'').toLowerCase()==='true',
 API_URL:process.env.REACT_APP_GQL_URI||'',
 SENTRY_DSN:process.env.SENTRY_DSN||null,
 WORKSPACE_ROOT:getWorkspaceRoot(),
 }
 // Node env
 exporttypeEnv='test'|'local'|'development'|'production'
 //@ts-ignore
 exportconstNODE_ENV:Env=process.env.NODE_ENV||'production'

 exportdefaultenvironment
 // toggle logging in development
 exportconstLOG:boolean=
 (process.env.REACT_APP_LOG||'').toLowerCase()==='true'&&process.env.NODE_ENV!=='production'

 // error logging tool
 exportconstSENTRY_DSN:string|null=process.env.SENTRY_DSN||null

 // uri path to the users project workspace
 exportconstWORKSPACE_ROOT:string=getWorkspaceRoot()
diff --git a/src/services/logger/index.ts b/src/services/logger/index.ts
 importenviromentfrom'../../environment'
 import{LOG}from'../../environment'

 constlogger=(message:string|string[])=>{
 if(!enviroment.LOG){
 if(!LOG){
 return
 }
 if(Array.isArray(message)){
diff --git a/src/services/node/index.ts b/src/services/node/index.ts
 import * as fs from 'fs'
 import { join } from 'path'
 import { promisify } from 'util'
 importenvironment from '../../environment'
 import{ WORKSPACE_ROOT } from '../../environment'

 const asyncExec = promisify(cpExec)

 export const exec = (cmd: string): Promise<{ stdout: string; stderr: string }> | never => {
  return asyncExec(cmd, {
    cwd:environment.WORKSPACE_ROOT,
    cwd: WORKSPACE_ROOT,
  })
 }

 export const exists = (...paths: string[]): boolean | never => {
  return fs.existsSync(join(environment.WORKSPACE_ROOT, ...paths))
  return fs.existsSync(join(WORKSPACE_ROOT, ...paths))
 }
diff --git a/src/services/sentry/init.ts b/src/services/sentry/init.ts
 import{init}from'@sentry/node'
 importenvironmentfrom'../../environment'
 import{SENTRY_DSN,NODE_ENV}from'../../environment'

 if(environment.SENTRY_DSN){
 if(SENTRY_DSN){
 init({
 dsn:environment.SENTRY_DSN,
 environment:environment.NODE_ENV,
 dsn:SENTRY_DSN,
 environment:NODE_ENV,
 })
 }
diff --git a/src/services/sentry/onError.ts b/src/services/sentry/onError.ts
 import * as sentry from '@sentry/node'
 // import { Scope } from '@sentry/hub'
 importenvironment from '../../environment'
 import{ VERSION } from '../../environment'

 const onError = (error: Error) => {
  // set user scope https://docs.sentry.io/enriching-error-data/scopes/?platform=node
  sentry.withScope((scope: any) => {
    scope.setTag('VERSION',environment.VERSION)
    scope.setTag('VERSION', VERSION)
    // if (user) {
    //   scope.setUser({
    //     id: user.id,
diff --git a/src/services/workspace/index.ts b/src/services/workspace/index.ts
 import * as vscode from 'vscode'
 import * as fs from 'fs'
 import { promisify } from 'util'
 importenvironment from '../../environment'
 import{ WORKSPACE_ROOT } from '../../environment'

 const readDir = promisify(fs.readdir)

 export const checkWorkspaceEmpty = async () => {
  let files
  try {
    files = await readDir(environment.WORKSPACE_ROOT)
    files = await readDir(WORKSPACE_ROOT)
  } catch (error) {
    throw new Error('Failed to check workspace')
  }
diff --git a/src/webview/render.ts b/src/webview/render.ts
 import * as path from 'path'
 import * as vscode from 'vscode'
 import onError from '../services/sentry/onError'
 import environment from '../environment'

 const getNonce = (): string => {
  let text = ''
    cspMeta.content =
      [
        `default-src 'self'`,
        `connect-src https: http: ${environment.API_URL}`,
        `connect-src https: http:`,
        // @ts-ignore
        `font-src ${panel.webview.cspSource} http: https: data:`,
        // @ts-ignore
diff --git a/web-app/.env.example b/web-app/.env.example
 SKIP_PREFLIGHT_CHECK=true
 VERSION=0.1.0
 NODE_ENV=local
 REACT_APP_DEBUG=false
 REACT_APP_LOG=false
 REACT_APP_TUTORIAL_LIST_URL=https://raw.githubusercontent.com/coderoad/tutorials/master/tutorials.json
diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
 //@ts-ignore
 global.acquireVsCodeApi=()=>({
 postMessage(event:string){
 console.log('postMessage',event)
 console.log('ERROR: VSCode did not load properly in CodeRoad extension',event)
 },
 })

diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx
 React.useEffect(()=>{
 if(error){
 // log error
 console.log(error)
 console.log(`ERROR in markdown:${error.message}`)
 }
 },[error])

diff --git a/web-app/src/components/ErrorBoundary/index.tsx b/web-app/src/components/ErrorBoundary/index.tsx
 import*asReactfrom'react'
 importonErrorfrom'../../services/sentry/onError'
 importloggerfrom'../../services/logger'

 classErrorBoundaryextendsReact.Component{
 publicstate={errorMessage:null}
 // Display fallback UI
 this.setState({errorMessage:error.message})
 // You can also log the error to an error reporting service
 console.error(JSON.stringify(error))
 console.log(JSON.stringify(info))
 logger('ERROR in component:',JSON.stringify(error))
 logger('ERROR info:',JSON.stringify(info))
 }

 publicrender(){
diff --git a/web-app/src/components/Markdown/index.tsx b/web-app/src/components/Markdown/index.tsx
  try {
    html = md.render(props.children)
  } catch (error) {
    const message = `failed to parse markdown for ${props.children}`
    const message = `Failed to parse markdown for ${props.children}`
    onError(new Error(message))
    console.log(message)
    html = `<div style='background-color: #FFB81A; padding: 0.5rem;'>
diff --git a/web-app/src/components/Router/index.tsx b/web-app/src/components/Router/index.tsx
 import { useMachine } from '../../services/xstate-react'
 import Route from './Route'
 import onError from '../../services/sentry/onError'
 import{ LOG_STATE }from '../../environment'
 importloggerfrom '../../services/logger'

 interface Output {
  context: T.MachineContext
 declare let acquireVsCodeApi: any

 const editor = acquireVsCodeApi()
 const editorSend = (action: T.Action) => {
  logger(`CLIENT TO EXT: "${action.type}"`)
  return editor.postMessage(action)
 }

 // router finds first state match of <Route path='' />
 const useRouter = (): Output => {
  const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend: editor.postMessage }))
  const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend }))

  if (LOG_STATE) {
    console.log(JSON.stringify(state.value))
  }
  logger(`STATE: ${JSON.stringify(state.value)}`)

  // event bus listener
  React.useEffect(() => {
    const listener = 'message'
    // propograte channel event to state machine
    const handler = (action: any) => {
    const handler = (event: any) => {
      // NOTE: must call event.data, cannot destructure. VSCode acts odd
      constevent =action.data
      constaction =event.data
      // ignore browser events from plugins
      if (event.source) {
      if (action.source) {
        return
      }
      send(event)
      logger(`CLIENT RECEIVED: "${action.type}"`)
      send(action)
    }
    window.addEventListener(listener, handler)
    return () => {
diff --git a/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx b/web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx
 return<Loadingtext="Loading tutorial summary..."/>
 }
 if(error){
 console.log(error)
 console.log(`Failed to load tutorial summary:${error}`)
 return<div>Error loading summary</div>
 }
 if(!data){
diff --git a/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx b/web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx
 import * as React from 'react'
 import { Button, Form, Input } from '@alifd/next'
 import logger from '../../../services/logger'

 const FormItem = Form.Item

  const [url, setUrl] = React.useState(props.defaultUrl)
  const onSubmit = (e: any) => {
    e.preventDefault()
 console.log('tutorial url',url)
 logger(`Tutorial url: ${url}`)
    props.onTutorialLoad(url)
  }

diff --git a/web-app/src/environment.ts b/web-app/src/environment.ts
 export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase() === 'true'
 export const VERSION: string = process.env.VERSION || 'unknown'
 export const NODE_ENV: string = process.env.NODE_ENV || 'development'
 export const LOG_STATE: boolean = (process.env.REACT_APP_LOG_STATE || '').toLowerCase() === 'true'
 export const LOG: boolean =
  (process.env.REACT_APP_LOG || '').toLowerCase() === 'true' && process.env.NODE_ENV !== 'production'
 export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL || ''
 export const SENTRY_DSN: string | null = process.env.REACT_APP_SENTRY_DSN || null
diff --git a/web-app/src/mock/index.ts b/web-app/src/mock/index.ts
  // @ts-ignore
  global.acquireVsCodeApi = () => ({
    postMessage(event: string) {
      console.log('postMessage', event)
      console.log('VSCode did not load properly for CodeRoad extension', event)
    },
  })
 }
diff --git a/web-app/src/services/logger/index.ts b/web-app/src/services/logger/index.ts
 import{LOG}from'../../environment'

 constlogger=(...messages:string[])=>{
 if(!LOG){
 return
 }
 // Inside vscode, you console.log does not allow more than 1 param
 // to get around it, we can log with multiple log statements
 for(constmessageofmessages){
 console.log(message)
 }
 }

 exportdefaultlogger
diff --git a/web-app/src/services/sentry/init.tsx b/web-app/src/services/sentry/init.tsx
 })
 }
 }catch(error){
 console.log('Error in Sentry init')
 console.log(error)
 console.log(`Error in Sentry init:${error.message}`)
 }
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import * as chokidar from 'chokidar'
		import * as vscode from 'vscode'
		import { COMMANDS } from '../../editor/commands'
		importenvironment from '../../environment'
		import{ WORKSPACE_ROOT } from '../../environment'

		// NOTE: vscode createFileWatcher doesn't seem to detect changes outside of vscode
		// such as `npm install` of a package. Went with chokidar instead
Expand All		@@ -26,7 +26,7 @@ const loadWatchers = (watchers: string[]) => {
		// see how glob patterns are used in VSCode (not like a regex)
		// https://code.visualstudio.com/api/references/vscode-api#GlobPattern
		const fsWatcher: chokidar.FSWatcher = chokidar.watch(watcher, {
		cwd:environment.WORKSPACE_ROOT,
		cwd: WORKSPACE_ROOT,
		interval: 1000,
		})

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,7 +20,7 @@ const openFiles = async (files: string[]) => {
		// ensure the panel is redrawn on the right side first
		vscode.commands.executeCommand(COMMANDS.OPEN_WEBVIEW)
		} catch (error) {
		console.log(`Failed to open file ${filePath}`,error)
		console.log(`Failed to open file ${filePath}: ${error.message}`)
		}
		}
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,7 +15,7 @@ const runCommands = async (commands: string[], send: (action: T.Action) => void)
		try {
		result = await exec(command)
		} catch (error) {
		console.log(error)
		console.log(`Test failed: ${error.message}`)
		send({ type: 'COMMAND_FAIL', payload: { process: { ...process, status: 'FAIL' } } })
		return
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,7 +14,7 @@ import { openWorkspace, checkWorkspaceEmpty } from '../services/workspace'
		import { readFile } from 'fs'
		import { join } from 'path'
		import { promisify } from 'util'
		importenvironment from '../environment'
		import{ WORKSPACE_ROOT } from '../environment'

		const readFileAsync = promisify(readFile)

Expand DownExpand Up		@@ -45,12 +45,12 @@ class Channel implements Channel {
		const actionType: string = typeof action === 'string' ? action : action.type
		// const onError = (error: T.ErrorMessage) => this.send({ type: 'ERROR', payload: { error } })

		// console.log(`ACTION:${actionType}`)
		logger(`EXT RECEIVED: "${actionType}"`)

		switch (actionType) {
		case 'EDITOR_STARTUP':
		// check if a workspace is open, otherwise nothing works
		const noActiveWorksapce = !environment.WORKSPACE_ROOT.length
		const noActiveWorksapce = !WORKSPACE_ROOT.length
		if (noActiveWorksapce) {
		const error: E.ErrorMessage = {
		type: 'NoWorkspaceFound',
Expand DownExpand Up		@@ -260,7 +260,7 @@ class Channel implements Channel {
		})

		// log error to console for safe keeping
		console.log(`ERROR:\n ${errorMarkdown}`)
		logger(`ERROR:\n ${errorMarkdown}`)

		if (errorMarkdown) {
		// add a clearer error message for the user
Expand All		@@ -270,6 +270,9 @@ class Channel implements Channel {

		// action may be an object.type or plain string
		const actionType: string = typeof action === 'string' ? action : action.type

		logger(`EXT TO CLIENT: "${actionType}"`)

		switch (actionType) {
		case 'TEST_PASS':
		const tutorial = this.context.tutorial.get()
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,25 +2,22 @@ require('dotenv').config({
		path:'./web-app/.env',
		})

		import*asvscodefrom'vscode'
		import{getWorkspaceRoot}from'./services/workspace'

		interfaceEnvironment{
		VERSION:string
		NODE_ENV:string
		LOG:boolean
		API_URL:string
		SENTRY_DSN:string\|null
		WORKSPACE_ROOT:string
		}
		// CodeRoad version
		exportconstVERSION:string=process.env.npm_package_version\|\|'unknown'

		constenvironment:Environment={
		VERSION:process.env.VERSION\|\|'unknown',
		NODE_ENV:process.env.NODE_ENV\|\|'production',
		LOG:(process.env.LOG\|\|'').toLowerCase()==='true',
		API_URL:process.env.REACT_APP_GQL_URI\|\|'',
		SENTRY_DSN:process.env.SENTRY_DSN\|\|null,
		WORKSPACE_ROOT:getWorkspaceRoot(),
		}
		// Node env
		exporttypeEnv='test'\|'local'\|'development'\|'production'
		//@ts-ignore
		exportconstNODE_ENV:Env=process.env.NODE_ENV\|\|'production'

		exportdefaultenvironment
		// toggle logging in development
		exportconstLOG:boolean=
		(process.env.REACT_APP_LOG\|\|'').toLowerCase()==='true'&&process.env.NODE_ENV!=='production'

		// error logging tool
		exportconstSENTRY_DSN:string\|null=process.env.SENTRY_DSN\|\|null

		// uri path to the users project workspace
		exportconstWORKSPACE_ROOT:string=getWorkspaceRoot()
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		importenviromentfrom'../../environment'
		import{LOG}from'../../environment'

		constlogger=(message:string\|string[])=>{
		if(!enviroment.LOG){
		if(!LOG){
		return
		}
		if(Array.isArray(message)){
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,16 +2,16 @@ import { exec as cpExec } from 'child_process'
		import * as fs from 'fs'
		import { join } from 'path'
		import { promisify } from 'util'
		importenvironment from '../../environment'
		import{ WORKSPACE_ROOT } from '../../environment'

		const asyncExec = promisify(cpExec)

		export const exec = (cmd: string): Promise<{ stdout: string; stderr: string }> \| never => {
		return asyncExec(cmd, {
		cwd:environment.WORKSPACE_ROOT,
		cwd: WORKSPACE_ROOT,
		})
		}

		export const exists = (...paths: string[]): boolean \| never => {
		return fs.existsSync(join(environment.WORKSPACE_ROOT, ...paths))
		return fs.existsSync(join(WORKSPACE_ROOT, ...paths))
		}
Original file line number	Diff line number	Diff line change
		@@ -1,9 +1,9 @@
		import{init}from'@sentry/node'
		importenvironmentfrom'../../environment'
		import{SENTRY_DSN,NODE_ENV}from'../../environment'

		if(environment.SENTRY_DSN){
		if(SENTRY_DSN){
		init({
		dsn:environment.SENTRY_DSN,
		environment:environment.NODE_ENV,
		dsn:SENTRY_DSN,
		environment:NODE_ENV,
		})
		}
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,11 @@
		import * as sentry from '@sentry/node'
		// import { Scope } from '@sentry/hub'
		importenvironment from '../../environment'
		import{ VERSION } from '../../environment'

		const onError = (error: Error) => {
		// set user scope https://docs.sentry.io/enriching-error-data/scopes/?platform=node
		sentry.withScope((scope: any) => {
		scope.setTag('VERSION',environment.VERSION)
		scope.setTag('VERSION', VERSION)
		// if (user) {
		// scope.setUser({
		// id: user.id,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,7 +2,6 @@ import { JSDOM } from 'jsdom'
		import * as path from 'path'
		import * as vscode from 'vscode'
		import onError from '../services/sentry/onError'
		import environment from '../environment'

		const getNonce = (): string => {
		let text = ''
Expand DownExpand Up		@@ -73,7 +72,7 @@ async function render(panel: vscode.WebviewPanel, rootPath: string) {
		cspMeta.content =
		[
		`default-src 'self'`,
		`connect-src https: http: ${environment.API_URL}`,
		`connect-src https: http:`,
		// @ts-ignore
		`font-src ${panel.webview.cspSource} http: https: data:`,
		// @ts-ignore
Expand Down