Feb 2, 2020 · Feb 1, 2020 · Feb 2, 2020 · Feb 2, 2020 · Feb 2, 2020 · Feb 2, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
    "build": "rm -rf build && npm run build:ext && npm run build:web",
    "build:ext": "tsc -p ./",
    "build:web": "cd web-app && npm run build",
    "postbuild:web": "cp -R ./web-app/build/ ./build/",
    "postbuild:web": "cp -R ./web-app/build/ ./build/ && node scripts/fixFontPaths.js",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "lint": "eslint src/**/*ts",
    "machine": "node ./out/state/index.js",
    "@types/assert": "^1.4.5",
    "@types/chokidar": "^2.1.3",
    "@types/dotenv": "^8.2.0",
    "@types/glob": "^7.1.1",
    "@types/jest": "^25.1.1",
    "@types/jsdom": "^12.2.4",
    "@types/node": "^13.5.3",
diff --git a/resources/public/favicon.ico b/resources/public/favicon.ico
diff --git a/resources/public/index.html b/resources/public/index.html
diff --git a/resources/public/manifest.json b/resources/public/manifest.json
diff --git a/scripts/fixFontPaths.js b/scripts/fixFontPaths.js
 /*
 * css url font paths do not match up from the web-app as it is moved inside of build
 * in order to load fonts and icons, these paths must be reconciled.
 */
 constfs=require('fs')// eslint-disable-line

 // find the generated main css file
 constgetMainCSSFile=()=>{
 constregex=/^main.[a-z0-9]+.chunk.css$/
 constmainCss=fs.readdirSync('build/static/css').filter(filename=>filename.match(regex))
 if(!mainCss.length){
 thrownewError('No main.css file found in build/static/css')
 }
 returnmainCss[0]
 }

 // remap the font paths from the borken /fonts/ => ../../fonts/
 constremapFontPaths=()=>{
 constmainCSSFile=getMainCSSFile()
 constfile=fs.readFileSync(`build/static/css/${mainCSSFile}`,'utf8')
 constfontUrlRegex=/url\(\/fonts\//g
 constremappedFile=file.replace(fontUrlRegex,'url(../../fonts/')
 fs.writeFileSync(`build/static/css/${mainCSSFile}`,remappedFile)
 }

 remapFontPaths()
diff --git a/src/editor/commands.ts b/src/editor/commands.ts
 testRunner=createTestRunner(config,{
 onSuccess:(payload:Payload)=>{
 // send test pass message back to client
 notify({message:'PASS'})
 webview.send({type:'TEST_PASS', payload})
 // update local storage
 },
 onFail:(payload:Payload,message:string)=>{
 // send test fail message back to client
 notify({message:`FAIL${message}`})
 webview.send({type:'TEST_FAIL', payload})
 // send test fail message back to client with failure message
 webview.send({type:'TEST_FAIL',payload:{ ...payload, message}})
 },
 onError:(payload:Payload)=>{
 // send test error message back to client
diff --git a/tsconfig.json b/tsconfig.json
 "allowJs":true,
 "removeComments":true
  },
 "exclude": ["node_modules",".vscode-test","build","resources","web-app","*.js","*.test.ts"]
 "exclude": ["node_modules",".vscode-test","build","resources","web-app","*.js","*.test.ts","scripts"]
 }
diff --git a/typings/index.d.ts b/typings/index.d.ts
  description?: string
 }

 export interface TestStatus {
  type: 'success' | 'warning' | 'error' | 'loading'
  title: string
  content?: string
 }

 export interface MachineContext {
  env: Environment
  error: ErrorMessage | null
  tutorial: G.Tutorial | null
  position: Position
  progress: Progress
  processes: ProcessEvent[]
  testStatus: TestStatus | null
 }

 export interface MachineEvent {
            TestRunning: {}
            TestPass: {}
            TestFail: {}
            TestError: {}
            StepNext: {}
            LevelComplete: {}
          }
diff --git a/web-app/config-overrides.js b/web-app/config-overrides.js
 /* eslint-disable @typescript-eslint/no-var-requires */
 constpath=require('path')
 const{ addBabelPreset, addBabelPlugin, addWebpackModuleRule}=require('customize-cra')
 const{ addBabelPreset, addWebpackModuleRule, addBabelPlugin}=require('customize-cra')

 module.exports=functionoverride(config){
 addWebpackModuleRule({
diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
        <Route path={['Start.LoadTutorialSummary', 'Start.LoadTutorialData', 'Start.SetupNewTutorial']}>
          <LoadingPage text="Loading Tutorial..." context={context} />
        </Route>
        <Route path={'Start.Error'}>
        <Route path="Start.Error">
          <LoadingPage text="Error" context={context} />
        </Route>
        <Route path="Start.SelectTutorial">
        <Route path="Start.Summary">
          <OverviewPage send={send} context={context} />
        </Route>
        <Route path="SetupNewTutorial">
        <Route path="Start.SetupNewTutorial">
          <LoadingPage text="Configuring tutorial..." context={context} />
        </Route>
        {/* Tutorial */}
        <Route path="Tutorial.LoadNext">
        <Route path={['Tutorial.LoadNext', 'Tutorial.Level.Load']}>
          <LoadingPage text="Loading Level..." context={context} />
        </Route>
        <Route path="Tutorial.Level">
diff --git a/web-app/src/components/Button/index.tsx b/web-app/src/components/Button/index.tsx
  disabled?: boolean
  type?: 'primary' | 'secondary' | 'normal'
  onClick?: () => void
  size?: 'small' | 'medium' | 'large'
  iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'
 }

 const Button = (props: Props) => (
  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
  <AlifdButton
    onClick={props.onClick}
    type={props.type}
    disabled={props.disabled}
    style={props.style}
    size={props.size}
    iconSize={props.iconSize}
  >
    {props.children}
  </AlifdButton>
 )
diff --git a/web-app/src/components/Checkbox/index.tsx b/web-app/src/components/Checkbox/index.tsx
 import*asReactfrom'react'
 import{css,jsx}from'@emotion/core'

 conststyles={
 box:{
 display:'flex',
 alignItems:'center',
 justifyContent:'center',
 },
 input:{
 border:'1px solid black',
 },
 loading:{
 backgroundColor:'red',
 },
 }
 import{CheckboxasAlifdCheckbox}from'@alifd/next'

 interfaceProps{
 status:'COMPLETE'|'INCOMPLETE'|'ACTIVE'

 constchecked=props.status==='COMPLETE'

 return(
 <divcss={styles.box}>
 <label>
 <inputcss={styles.input}type="checkbox"checked={checked}onChange={onChange}/>
 </label>
 </div>
 )
 return<AlifdCheckboxchecked={checked}onChange={onChange}/>
 }

 exportdefaultCheckbox
diff --git a/web-app/src/components/Message/index.tsx b/web-app/src/components/Message/index.tsx
 import*asReactfrom'react'

 interfaceProps{
 type:'error'
 type?:'success'|'warning'|'error'|'notice'|'help'|'loading'
 shape?:'inline'|'addon'|'toast'
 size?:'medium'|'large'
 title:string
 description?:string
 content?:string
 closed?:boolean
 closeable?:boolean
 onClose?:()=>void
 handleClose?:()=>void
 }

 constMessage=(props:Props)=>{
 const[visible,setVisible]=React.useState(true)
 functiononClose(){
 if(props.onClose){
 props.onClose()
 }
 setVisible(false)
 }
 return(
 <AlifdMessagetype={props.type}title={props.title}>
 {props.description}
 <AlifdMessage
 type={props.type}
 visible={props.closed ?!props.closed :visible}
 title={props.title}
 closeable={props.closeable}
 onClose={onClose}
 shape={props.shape}
 >
 {props.content}
 </AlifdMessage>
 )
 }
diff --git a/web-app/src/components/ProcessMessages/TestMessage.tsx b/web-app/src/components/ProcessMessages/TestMessage.tsx
 importMessagefrom'../Message'
 import*asReactfrom'react'
 import*asTfrom'typings'
 import{css,jsx}from'@emotion/core'

 constdurations={
 success:1000,
 warning:4500,
 error:4500,
 loading:300000,
 }

 constuseTimeout=({ duration, key}:{duration:number;key:string})=>{
 const[timeoutClose,setTimeoutClose]=React.useState(false)
 React.useEffect(()=>{
 setTimeoutClose(false)
 consttimeout=setTimeout(()=>{
 setTimeoutClose(true)
 },duration)
 return()=>{
 clearTimeout(timeout)
 }
 },[key])
 returntimeoutClose
 }

 constTestMessage=(props:T.TestStatus)=>{
 constduration=durations[props.type]
 consttimeoutClose=useTimeout({ duration,key:props.title})
 return(
 <Message
 key={props.title}
 type={props.type}
 title={props.title}
 closed={timeoutClose}
 size="medium"
 closeable={props.type!=='loading'}
 content={props.content}
 />
 )
 }

 exportdefaultTestMessage
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,7 +20,7 @@
		"build": "rm -rf build && npm run build:ext && npm run build:web",
		"build:ext": "tsc -p ./",
		"build:web": "cd web-app && npm run build",
		"postbuild:web": "cp -R ./web-app/build/ ./build/",
		"postbuild:web": "cp -R ./web-app/build/ ./build/ && node scripts/fixFontPaths.js",
		"postinstall": "node ./node_modules/vscode/bin/install",
		"lint": "eslint src/*/ts",
		"machine": "node ./out/state/index.js",
Expand All		@@ -41,7 +41,6 @@
		"@types/assert": "^1.4.5",
		"@types/chokidar": "^2.1.3",
		"@types/dotenv": "^8.2.0",
		"@types/glob": "^7.1.1",
		"@types/jest": "^25.1.1",
		"@types/jsdom": "^12.2.4",
		"@types/node": "^13.5.3",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,26 @@
		/*
		* css url font paths do not match up from the web-app as it is moved inside of build
		* in order to load fonts and icons, these paths must be reconciled.
		*/
		constfs=require('fs')// eslint-disable-line

		// find the generated main css file
		constgetMainCSSFile=()=>{
		constregex=/^main.[a-z0-9]+.chunk.css$/
		constmainCss=fs.readdirSync('build/static/css').filter(filename=>filename.match(regex))
		if(!mainCss.length){
		thrownewError('No main.css file found in build/static/css')
		}
		returnmainCss[0]
		}

		// remap the font paths from the borken /fonts/ => ../../fonts/
		constremapFontPaths=()=>{
		constmainCSSFile=getMainCSSFile()
		constfile=fs.readFileSync(`build/static/css/${mainCSSFile}`,'utf8')
		constfontUrlRegex=/url\(\/fonts\//g
		constremappedFile=file.replace(fontUrlRegex,'url(../../fonts/')
		fs.writeFileSync(`build/static/css/${mainCSSFile}`,remappedFile)
		}

		remapFontPaths()
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,14 +57,11 @@ export const createCommands = ({ extensionPath, workspaceState, workspaceRoot }:
		testRunner=createTestRunner(config,{
		onSuccess:(payload:Payload)=>{
		// send test pass message back to client
		notify({message:'PASS'})
		webview.send({type:'TEST_PASS', payload})
		// update local storage
		},
		onFail:(payload:Payload,message:string)=>{
		// send test fail message back to client
		notify({message:`FAIL${message}`})
		webview.send({type:'TEST_FAIL', payload})
		// send test fail message back to client with failure message
		webview.send({type:'TEST_FAIL',payload:{ ...payload, message}})
		},
		onError:(payload:Payload)=>{
		// send test error message back to client
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,5 +25,5 @@
		"allowJs":true,
		"removeComments":true
		},
		"exclude": ["node_modules",".vscode-test","build","resources","web-app",".js",".test.ts"]
		"exclude": ["node_modules",".vscode-test","build","resources","web-app",".js",".test.ts","scripts"]
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,13 +42,20 @@ export interface ErrorMessage {
		description?: string
		}

		export interface TestStatus {
		type: 'success' \| 'warning' \| 'error' \| 'loading'
		title: string
		content?: string
		}

		export interface MachineContext {
		env: Environment
		error: ErrorMessage \| null
		tutorial: G.Tutorial \| null
		position: Position
		progress: Progress
		processes: ProcessEvent[]
		testStatus: TestStatus \| null
		}

		export interface MachineEvent {
Expand DownExpand Up		@@ -83,7 +90,6 @@ export interface MachineStateSchema {
		TestRunning: {}
		TestPass: {}
		TestFail: {}
		TestError: {}
		StepNext: {}
		LevelComplete: {}
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,5 @@
		/* eslint-disable @typescript-eslint/no-var-requires */
		constpath=require('path')
		const{ addBabelPreset, addBabelPlugin, addWebpackModuleRule}=require('customize-cra')
		const{ addBabelPreset, addWebpackModuleRule, addBabelPlugin}=require('customize-cra')

		module.exports=functionoverride(config){
		addWebpackModuleRule({
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,7 +23,7 @@ const Routes = () => {
		<Route path={['Start.LoadTutorialSummary', 'Start.LoadTutorialData', 'Start.SetupNewTutorial']}>
		<LoadingPage text="Loading Tutorial..." context={context} />
		</Route>
		<Route path={'Start.Error'}>
		<Route path="Start.Error">
		<LoadingPage text="Error" context={context} />
		</Route>
		<Route path="Start.SelectTutorial">
Expand All		@@ -32,11 +32,11 @@ const Routes = () => {
		<Route path="Start.Summary">
		<OverviewPage send={send} context={context} />
		</Route>
		<Route path="SetupNewTutorial">
		<Route path="Start.SetupNewTutorial">
		<LoadingPage text="Configuring tutorial..." context={context} />
		</Route>
		{/* Tutorial */}
		<Route path="Tutorial.LoadNext">
		<Route path={['Tutorial.LoadNext', 'Tutorial.Level.Load']}>
		<LoadingPage text="Loading Level..." context={context} />
		</Route>
		<Route path="Tutorial.Level">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,10 +7,19 @@ interface Props {
		disabled?: boolean
		type?: 'primary' \| 'secondary' \| 'normal'
		onClick?: () => void
		size?: 'small' \| 'medium' \| 'large'
		iconSize?: 'xxs' \| 'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \| 'xxl' \| 'xxxl'
		}

		const Button = (props: Props) => (
		<AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
		<AlifdButton
		onClick={props.onClick}
		type={props.type}
		disabled={props.disabled}
		style={props.style}
		size={props.size}
		iconSize={props.iconSize}
		>
		{props.children}
		</AlifdButton>
		)
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,19 +1,5 @@
		import*asReactfrom'react'
		import{css,jsx}from'@emotion/core'

		conststyles={
		box:{
		display:'flex',
		alignItems:'center',
		justifyContent:'center',
		},
		input:{
		border:'1px solid black',
		},
		loading:{
		backgroundColor:'red',
		},
		}
		import{CheckboxasAlifdCheckbox}from'@alifd/next'

		interfaceProps{
		status:'COMPLETE'\|'INCOMPLETE'\|'ACTIVE'
Expand All		@@ -26,13 +12,7 @@ const Checkbox = (props: Props) => {

		constchecked=props.status==='COMPLETE'

		return(
		<divcss={styles.box}>
		<label>
		<inputcss={styles.input}type="checkbox"checked={checked}onChange={onChange}/>
		</label>
		</div>
		)
		return<AlifdCheckboxchecked={checked}onChange={onChange}/>
		}

		exportdefaultCheckbox
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,15 +2,35 @@ import { Message as AlifdMessage } from '@alifd/next'
		import*asReactfrom'react'

		interfaceProps{
		type:'error'
		type?:'success'\|'warning'\|'error'\|'notice'\|'help'\|'loading'
		shape?:'inline'\|'addon'\|'toast'
		size?:'medium'\|'large'
		title:string
		description?:string
		content?:string
		closed?:boolean
		closeable?:boolean
		onClose?:()=>void
		handleClose?:()=>void
		}

		constMessage=(props:Props)=>{
		const[visible,setVisible]=React.useState(true)
		functiononClose(){
		if(props.onClose){
		props.onClose()
		}
		setVisible(false)
		}
		return(
		<AlifdMessagetype={props.type}title={props.title}>
		{props.description}
		<AlifdMessage
		type={props.type}
		visible={props.closed ?!props.closed :visible}
		title={props.title}
		closeable={props.closeable}
		onClose={onClose}
		shape={props.shape}
		>
		{props.content}
		</AlifdMessage>
		)
		}
Expand Down