Jul 15, 2019 · Jul 15, 2019 · Jul 15, 2019
diff --git a/src/editor/ReactWebView.ts b/src/editor/ReactWebView.ts
 import * as vscode from 'vscode'
 import * as CR from 'typings'
 import * as path from 'path'
 import * as CR from 'typings'
 import * as vscode from 'vscode'

 /**
 * Manages React webview panels
    if (callback) {
      // listen for when webview is loaded
      // unfortunately there is no easy way of doing this
 let webPanelListener = setInterval(() => {
 const webPanelListener = setInterval(() => {
        if (this.loaded) {
          setTimeout(callback)
          clearInterval(webPanelListener)
    }
  }

  public async postMessage(action: CR.Action): Promise<void> {
    // Send a message to the webview webview.
    // You can send any JSON serializable data.
    const success = await this.panel.webview.postMessage(action)
    if (!success) {
      throw new Error(`Message post failure: ${JSON.stringify(action)}`)
    }
  }

  public dispose(): void {
    // Clean up our resources
    this.panel.dispose()

    while (this.disposables.length) {
      const x = this.disposables.pop()
      if (x) {
        x.dispose()
      }
    }
  }

  private createWebviewPanel(column: number): vscode.WebviewPanel {
    const viewType = 'CodeRoad'
    const title = 'CodeRoad'
    return text
  }

  public async postMessage(action: CR.Action): Promise<void> {
    // Send a message to the webview webview.
    // You can send any JSON serializable data.
    const success = await this.panel.webview.postMessage(action)
    if (!success) {
      throw new Error(`Message post failure: ${JSON.stringify(action)}`)
    }
  }

  public dispose(): void {
    // Clean up our resources
    this.panel.dispose()

    while (this.disposables.length) {
      const x = this.disposables.pop()
      if (x) {
        x.dispose()
      }
    }
  }

  private getHtmlForWebview(): string {
    // eslint-disable-next-line
    const manifest = require(path.join(this.extensionPath, 'build', 'asset-manifest.json'))
                    <meta name="theme-color" content="#000000">
                    <title>React App</title>
                    <link rel="manifest" href="./manifest.json" />
                    <!-- TODO: load styles through package -->
                    <link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />
                    <link rel="stylesheet" type="text/css" href="${styleUri}">
                    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
                    <base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({
diff --git a/src/editor/commands/index.ts b/src/editor/commands/index.ts
 import * as vscode from 'vscode'
 import { join } from 'path'
 import { setStorage } from '../storage'
 import * as CR from 'typings'
 import * as vscode from 'vscode'
 import ReactWebView from '../ReactWebView'
 import { setStorage } from '../storage'
 import { isEmptyWorkspace } from '../workspace'
 import * as CR from 'typings'
 import runTest from './runTest'

 const COMMANDS = {

    // activate machine
    webview = new ReactWebView(context.extensionPath)
    console.log('webview', webview.panel.webview.postMessage)
    machine.activate()
  },
  // open React webview
diff --git a/tslint.json b/tslint.json
    "class-name": true,
    "semicolon": [true, "never"],
    "triple-equals": true,
    "interface-name": [true, "never-prefix"]
    "interface-name": [true, "never-prefix"],
    "object-literal-sort-keys": false
  },
  "defaultSeverity": "warning",
  "no-submodule-imports": false
diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
 import '@alifd/next/dist/next.css'
 //import '@alifd/next/dist/next.css'
 import { configure } from '@storybook/react'
 import '../src/styles/index.css'

 // setup acquireVsCodeApi mock
 // @ts-ignore
 global.acquireVsCodeApi = () => ({
  postMessage(event: string) {
    console.log('postMessage', event)
  }
 })


 // automatically import all files ending in *.stories.tsx
 const req = require.context('../stories', true, /\.stories\.tsx$/)

diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
 import * as React from 'react'

 import Loading from './components/Loading'
 import Cond from './components/Cond'
 importNewPage from './containers/New'
 importLoading from './components/Loading'
 import ContinuePage from './containers/Continue'
 import NewPage from './containers/New'
 import TutorialPage from './containers/Tutorial'

 interface Props {
  state: any
 }

 const styles = {
  page: {
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 'white',
  },
 }

 const Routes = ({ state }: Props) => {
  // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
  return (
    <div>
    <div style={styles.page}>
      <Cond state={state} path="SelectTutorial.Startup">
        <Loading />
      </Cond>
diff --git a/web-app/src/index.tsx b/web-app/src/index.tsx
 import ReactDOM from 'react-dom'
 import App from './App'

 // base styles
 import './styles/index.css'

 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)
diff --git a/web-app/src/utils/vscode.ts b/web-app/src/utils/vscode.ts

 declare var acquireVsCodeApi: any

 // @ts-ignore
 const vscode = window.acquireVsCodeApi ? acquireVsCodeApi() : {
  postMessage(event: string) {
    console.log('postMessage', event)
  }
 }
 const vscode = acquireVsCodeApi()

 export function send(event: string | Action) {
  return vscode.postMessage(event)
diff --git a/web-app/stories/Stage.stories.tsx b/web-app/stories/Stage.stories.tsx
            `,
          },
          hints: [],
          status: { active:false, complete:true },
          status: { active:true, complete:false },
        },
        step3Id: {
          content: {
            title: 'Divide',
            text: 'Write a function `divide` that divides',
          },
          hints: [],
          status: { active:true, complete: false },
          status: { active:false, complete: false },
        },
      })}
      stage={object('stage', demo.data.stages.stage1Id)}
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import * as vscode from 'vscode'
		import * as CR from 'typings'
		import * as path from 'path'
		import * as CR from 'typings'
		import * as vscode from 'vscode'

		/**
		* Manages React webview panels
Expand DownExpand Up		@@ -71,7 +71,7 @@ class ReactWebView {
		if (callback) {
		// listen for when webview is loaded
		// unfortunately there is no easy way of doing this
		let webPanelListener = setInterval(() => {
		const webPanelListener = setInterval(() => {
		if (this.loaded) {
		setTimeout(callback)
		clearInterval(webPanelListener)
Expand All		@@ -80,6 +80,27 @@ class ReactWebView {
		}
		}

		public async postMessage(action: CR.Action): Promise<void> {
		// Send a message to the webview webview.
		// You can send any JSON serializable data.
		const success = await this.panel.webview.postMessage(action)
		if (!success) {
		throw new Error(`Message post failure: ${JSON.stringify(action)}`)
		}
		}

		public dispose(): void {
		// Clean up our resources
		this.panel.dispose()

		while (this.disposables.length) {
		const x = this.disposables.pop()
		if (x) {
		x.dispose()
		}
		}
		}

		private createWebviewPanel(column: number): vscode.WebviewPanel {
		const viewType = 'CodeRoad'
		const title = 'CodeRoad'
Expand All		@@ -103,27 +124,6 @@ class ReactWebView {
		return text
		}

		public async postMessage(action: CR.Action): Promise<void> {
		// Send a message to the webview webview.
		// You can send any JSON serializable data.
		const success = await this.panel.webview.postMessage(action)
		if (!success) {
		throw new Error(`Message post failure: ${JSON.stringify(action)}`)
		}
		}

		public dispose(): void {
		// Clean up our resources
		this.panel.dispose()

		while (this.disposables.length) {
		const x = this.disposables.pop()
		if (x) {
		x.dispose()
		}
		}
		}

		private getHtmlForWebview(): string {
		// eslint-disable-next-line
		const manifest = require(path.join(this.extensionPath, 'build', 'asset-manifest.json'))
Expand DownExpand Up		@@ -151,6 +151,8 @@ class ReactWebView {
		<meta name="theme-color" content="#000000">
		<title>React App</title>
		<link rel="manifest" href="./manifest.json" />
		<!-- TODO: load styles through package -->
		<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />
		<link rel="stylesheet" type="text/css" href="${styleUri}">
		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
		<base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,9 +1,9 @@
		import * as vscode from 'vscode'
		import { join } from 'path'
		import { setStorage } from '../storage'
		import * as CR from 'typings'
		import * as vscode from 'vscode'
		import ReactWebView from '../ReactWebView'
		import { setStorage } from '../storage'
		import { isEmptyWorkspace } from '../workspace'
		import * as CR from 'typings'
		import runTest from './runTest'

		const COMMANDS = {
Expand DownExpand Up		@@ -44,7 +44,6 @@ export const createCommands = ({ context, machine, storage, git, position }: Cre

		// activate machine
		webview = new ReactWebView(context.extensionPath)
		console.log('webview', webview.panel.webview.postMessage)
		machine.activate()
		},
		// open React webview
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,7 +8,8 @@
		"class-name": true,
		"semicolon": [true, "never"],
		"triple-equals": true,
		"interface-name": [true, "never-prefix"]
		"interface-name": [true, "never-prefix"],
		"object-literal-sort-keys": false
		},
		"defaultSeverity": "warning",
		"no-submodule-imports": false
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,16 @@
		import '@alifd/next/dist/next.css'
		//import '@alifd/next/dist/next.css'
		import { configure } from '@storybook/react'
		import '../src/styles/index.css'

		// setup acquireVsCodeApi mock
		// @ts-ignore
		global.acquireVsCodeApi = () => ({
		postMessage(event: string) {
		console.log('postMessage', event)
		}
		})


		// automatically import all files ending in *.stories.tsx
		const req = require.context('../stories', true, /\.stories\.tsx$/)

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,19 +1,27 @@
		import * as React from 'react'

		import Loading from './components/Loading'
		import Cond from './components/Cond'
		importNewPage from './containers/New'
		importLoading from './components/Loading'
		import ContinuePage from './containers/Continue'
		import NewPage from './containers/New'
		import TutorialPage from './containers/Tutorial'

		interface Props {
		state: any
		}

		const styles = {
		page: {
		width: window.innerWidth,
		height: window.innerHeight,
		backgroundColor: 'white',
		},
		}

		const Routes = ({ state }: Props) => {
		// TODO: refactor cond to user <Router><Route> and accept first route as if/else if
		return (
		<div>
		<div style={styles.page}>
		<Cond state={state} path="SelectTutorial.Startup">
		<Loading />
		</Cond>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,6 +2,7 @@ import React from 'react'
		import ReactDOM from 'react-dom'
		import App from './App'

		// base styles
		import './styles/index.css'

		ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,12 +2,7 @@ import { Action } from 'typings'

		declare var acquireVsCodeApi: any

		// @ts-ignore
		const vscode = window.acquireVsCodeApi ? acquireVsCodeApi() : {
		postMessage(event: string) {
		console.log('postMessage', event)
		}
		}
		const vscode = acquireVsCodeApi()

		export function send(event: string \| Action) {
		return vscode.postMessage(event)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,15 +38,15 @@ function someExample(a) {
		`,
		},
		hints: [],
		status: { active:false, complete:true },
		status: { active:true, complete:false },
		},
		step3Id: {
		content: {
		title: 'Divide',
		text: 'Write a function `divide` that divides',
		},
		hints: [],
		status: { active:true, complete: false },
		status: { active:false, complete: false },
		},
		})}
		stage={object('stage', demo.data.stages.stage1Id)}
Expand Down