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.
 */
 const fs = require('fs') // eslint-disable-line

 // find the generated main css file
 const getMainCSSFile = () => {
  const regex = /^main.[a-z0-9]+.chunk.css$/
  const mainCss = fs.readdirSync('build/static/css').filter(filename => filename.match(regex))
  if (!mainCss.length) {
    throw new Error('No main.css file found in build/static/css')
  }
  return mainCss[0]
 }

 // remap the font paths from the borken /fonts/ => ../../fonts/
 const remapFontPaths = () => {
  const mainCSSFile = getMainCSSFile()
  const file = fs.readFileSync(`build/static/css/${mainCSSFile}`, 'utf8')
  const fontUrlRegex = /url\(\/fonts\//g
  const remappedFile = 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 */
 const path = require('path')
 const { addBabelPreset, addBabelPlugin, addWebpackModuleRule } = require('customize-cra')
 const { addBabelPreset, addWebpackModuleRule, addBabelPlugin } = require('customize-cra')

 module.exports = function override(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 * as React from 'react'
 import { css, jsx } from '@emotion/core'

 const styles = {
  box: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    border: '1px solid black',
  },
  loading: {
    backgroundColor: 'red',
  },
 }
 import { Checkbox as AlifdCheckbox } from '@alifd/next'

 interface Props {
  status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE'

  const checked = props.status === 'COMPLETE'

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

 export default Checkbox
diff --git a/web-app/src/components/Message/index.tsx b/web-app/src/components/Message/index.tsx
 import * as React from 'react'

 interface Props {
  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
 }

 const Message = (props: Props) => {
  const [visible, setVisible] = React.useState(true)
  function onClose() {
    if (props.onClose) {
      props.onClose()
    }
    setVisible(false)
  }
  return (
    <AlifdMessage type={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
 import Message from '../Message'
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'

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

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

 const TestMessage = (props: T.TestStatus) => {
  const duration = durations[props.type]
  const timeoutClose = 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}
    />
  )
 }

 export default TestMessage
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.
		*/
		const fs = require('fs') // eslint-disable-line

		// find the generated main css file
		const getMainCSSFile = () => {
		const regex = /^main.[a-z0-9]+.chunk.css$/
		const mainCss = fs.readdirSync('build/static/css').filter(filename => filename.match(regex))
		if (!mainCss.length) {
		throw new Error('No main.css file found in build/static/css')
		}
		return mainCss[0]
		}

		// remap the font paths from the borken /fonts/ => ../../fonts/
		const remapFontPaths = () => {
		const mainCSSFile = getMainCSSFile()
		const file = fs.readFileSync(`build/static/css/${mainCSSFile}`, 'utf8')
		const fontUrlRegex = /url\(\/fonts\//g
		const remappedFile = 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 */
		const path = require('path')
		const { addBabelPreset, addBabelPlugin, addWebpackModuleRule } = require('customize-cra')
		const { addBabelPreset, addWebpackModuleRule, addBabelPlugin } = require('customize-cra')

		module.exports = function override(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 * as React from 'react'
		import { css, jsx } from '@emotion/core'

		const styles = {
		box: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		},
		input: {
		border: '1px solid black',
		},
		loading: {
		backgroundColor: 'red',
		},
		}
		import { Checkbox as AlifdCheckbox } from '@alifd/next'

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

		const checked = props.status === 'COMPLETE'

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

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

		interface Props {
		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
		}

		const Message = (props: Props) => {
		const [visible, setVisible] = React.useState(true)
		function onClose() {
		if (props.onClose) {
		props.onClose()
		}
		setVisible(false)
		}
		return (
		<AlifdMessage type={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