Call wasm-pack route

ui/frontend/BuildMenu.tsx

@@ -26,13 +26,15 @@ const useDispatchAndClose = (action: () => void, close: () => void) => {
 const BuildMenu: React.SFC<BuildMenuProps> = props => {
   const isHirAvailable = useSelector(selectors.isHirAvailable);
   const isWasmAvailable = useSelector(selectors.isWasmAvailable);
+  const isWasmPackAvailable = useSelector(selectors.isWasmPackAvailable);
 
   const compile = useDispatchAndClose(actions.performCompile, props.close);
   const compileToAssembly = useDispatchAndClose(actions.performCompileToAssembly, props.close);
   const compileToLLVM = useDispatchAndClose(actions.performCompileToLLVM, props.close);
   const compileToMir = useDispatchAndClose(actions.performCompileToMir, props.close);
   const compileToHir = useDispatchAndClose(actions.performCompileToNightlyHir, props.close);
   const compileToWasm = useDispatchAndClose(actions.performCompileToNightlyWasm, props.close);
+  const compileToWasmPack = useDispatchAndClose(actions.performCompileToNightlyWasmPack, props.close);
   const execute = useDispatchAndClose(actions.performExecute, props.close);
   const test = useDispatchAndClose(actions.performTest, props.close);
 
@@ -67,6 +69,10 @@ const BuildMenu: React.SFC<BuildMenuProps> = props => {
         Build a WebAssembly module for web browsers, in the .WAT textual representation.
         {!isWasmAvailable && <WasmAside />}
       </ButtonMenuItem>
+      <ButtonMenuItem name="WASM PACK" onClick={compileToWasmPack}>
+        Build a WebAssembly frontend for web browsers. Rendering in Iframe
+        {!isWasmPackAvailable && <WasmPackAside />}
+      </ButtonMenuItem>
     </MenuGroup>
   );
 };
@@ -85,4 +91,10 @@ const WasmAside: React.SFC = () => (
   </p>
 );
 
+const WasmPackAside: React.SFC = () => (
+  <p className="build-menu__aside">
+    Note: WASM PACK currently requires using the Nightly channel, selecting this
+    option will switch to Nightly.
+  </p>
+);
 export default BuildMenu;

ui/frontend/Output.tsx

@@ -46,7 +46,10 @@ interface PaneWithCodeProps extends SimplePaneProps {
 
 const Output: React.SFC = () => {
   const somethingToShow = useSelector(selectors.getSomethingToShow);
-  const { meta: { focus }, execute, format, clippy, miri, macroExpansion, assembly, llvmIr, mir, hir, wasm, gist } =
+  const { meta: { focus },
+    execute, format, clippy, miri,
+    macroExpansion, assembly, llvmIr, mir,
+    hir, wasm, gist, wasmPack } =
     useSelector((state: State) => state.output);
 
   const dispatch = useDispatch();
@@ -62,6 +65,7 @@ const Output: React.SFC = () => {
   const focusHir = useCallback(() => dispatch(actions.changeFocus(Focus.Hir)), [dispatch]);
   const focusWasm = useCallback(() => dispatch(actions.changeFocus(Focus.Wasm)), [dispatch]);
   const focusGist = useCallback(() => dispatch(actions.changeFocus(Focus.Gist)), [dispatch]);
+  const focusWasmPack = useCallback(() => dispatch(actions.changeFocus(Focus.WasmPack)), [dispatch]);
 
   if (!somethingToShow) {
     return null;
@@ -88,6 +92,7 @@ const Output: React.SFC = () => {
         {focus === Focus.Hir && <PaneWithMir {...hir} kind="hir" />}
         {focus === Focus.Wasm && <PaneWithCode {...wasm} kind="wasm" />}
         {focus === Focus.Gist && <Gist />}
+        {focus === Focus.WasmPack && <Execute />}
       </div>
     );
   }
@@ -139,6 +144,10 @@ const Output: React.SFC = () => {
           label="Share"
           onClick={focusGist}
           tabProps={gist} />
+        <Tab kind={Focus.WasmPack} focus={focus}
+          label="WASM PACK"
+          onClick={focusWasmPack}
+          tabProps={wasmPack} />
         {close}
       </div>
       {body}

ui/frontend/actions.ts

@@ -38,6 +38,7 @@ const routes = {
   clippy: { pathname: '/clippy' },
   miri: { pathname: '/miri' },
   macroExpansion: { pathname: '/macro-expansion' },
+  wasmPack: { pathname: '/wasm-pack' },
   meta: {
     crates: { pathname: '/meta/crates' },
     version: {
@@ -92,6 +93,9 @@ export enum ActionType {
   CompileWasmRequest = 'COMPILE_WASM_REQUEST',
   CompileWasmSucceeded = 'COMPILE_WASM_SUCCEEDED',
   CompileWasmFailed = 'COMPILE_WASM_FAILED',
+  CompileWasmPackRequest = 'COMPILE_WASM_PACK_REQUEST',
+  CompileWasmPackSucceeded = 'COMPILE_WASM_PACK_SUCCEEDED',
+  CompileWasmPackFailed = 'COMPILE_WASM_PACK_FAILED',
   EditCode = 'EDIT_CODE',
   AddMainFunction = 'ADD_MAIN_FUNCTION',
   AddImport = 'ADD_IMPORT',
@@ -260,7 +264,7 @@ const performCommonExecute = (crateType, tests): ThunkAction => (dispatch, getSt
 };
 
 function performAutoOnly(): ThunkAction {
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     const state = getState();
     const crateType = getCrateType(state);
     const tests = runAsTest(state);
@@ -282,7 +286,7 @@ interface CompileRequestBody extends ExecuteRequestBody {
 
 function performCompileShow(target, { request, success, failure }): ThunkAction {
   // TODO: Check a cache
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     dispatch(request());
 
     const state = getState();
@@ -406,7 +410,45 @@ const performCompileToNightlyWasmOnly = (): ThunkAction => dispatch => {
   dispatch(changeChannel(Channel.Nightly));
   dispatch(performCompileToWasm());
 };
+interface WasmPackRequestBody {
+  code: string;
+}
+
+function performCompileToWasmPack({ request, success, failure }): ThunkAction {
+  // TODO: Check a cache
+  return function (dispatch, getState) {
+    dispatch(request());
 
+    const state = getState();
+    const { code } = state;
+    const body: WasmPackRequestBody = {
+      code,
+    };
+    return jsonPost(routes.wasmPack, body)
+      .then(json => dispatch(success(json)))
+      .catch(json => dispatch(failure(json)));
+  };
+}
+
+const requestCompileWasmPack = () =>
+  createAction(ActionType.CompileWasmPackRequest);
+
+const receiveCompileWasmPackSuccess = ({ wasm_js, wasm_bg, stdout, stderr }) =>
+  createAction(ActionType.CompileWasmPackSucceeded, { wasm_js, wasm_bg, stdout, stderr });
+
+const receiveCompileWasmPackFailure = ({ error }) =>
+  createAction(ActionType.CompileWasmPackFailed, { error });
+
+const performCompileToNightlyWasmPackOnly = (): ThunkAction => dispatch => {
+  dispatch(changeChannel(Channel.Nightly));
+  dispatch(performCompileToWasmPack(
+    {
+      request: requestCompileWasmPack,
+      success: receiveCompileWasmPackSuccess,
+      failure: receiveCompileWasmPackFailure,
+    }
+  ));
+};
 const PRIMARY_ACTIONS: { [index in PrimaryAction]: () => ThunkAction } = {
   [PrimaryActionCore.Asm]: performCompileToAssemblyOnly,
   [PrimaryActionCore.Compile]: performCompileOnly,
@@ -417,6 +459,7 @@ const PRIMARY_ACTIONS: { [index in PrimaryAction]: () => ThunkAction } = {
   [PrimaryActionCore.Hir]: performCompileToHirOnly,
   [PrimaryActionCore.Mir]: performCompileToMirOnly,
   [PrimaryActionCore.Wasm]: performCompileToNightlyWasmOnly,
+  [PrimaryActionCore.WasmPack]: performCompileToNightlyWasmPackOnly,
 };
 
 export const performPrimaryAction = (): ThunkAction => (dispatch, getState) => {
@@ -446,6 +489,8 @@ export const performCompileToNightlyHir =
   performAndSwitchPrimaryAction(performCompileToNightlyHirOnly, PrimaryActionCore.Hir);
 export const performCompileToNightlyWasm =
   performAndSwitchPrimaryAction(performCompileToNightlyWasmOnly, PrimaryActionCore.Wasm);
+export const performCompileToNightlyWasmPack =
+  performAndSwitchPrimaryAction(performCompileToNightlyWasmPackOnly, PrimaryActionCore.WasmPack);
 
 export const editCode = (code: string) =>
   createAction(ActionType.EditCode, { code });
@@ -488,7 +533,7 @@ const receiveFormatFailure = (body: FormatResponseBody) =>
 
 export function performFormat(): ThunkAction {
   // TODO: Check a cache
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     dispatch(requestFormat());
 
     const body: FormatRequestBody = formatRequestSelector(getState());
@@ -522,7 +567,7 @@ const receiveClippyFailure = ({ error }) =>
 
 export function performClippy(): ThunkAction {
   // TODO: Check a cache
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     dispatch(requestClippy());
 
     const body: ClippyRequestBody = clippyRequestSelector(getState());
@@ -549,7 +594,7 @@ const receiveMiriFailure = ({ error }) =>
 
 export function performMiri(): ThunkAction {
   // TODO: Check a cache
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     dispatch(requestMiri());
 
     const { code, configuration: {
@@ -579,7 +624,7 @@ const receiveMacroExpansionFailure = ({ error }) =>
 
 export function performMacroExpansion(): ThunkAction {
   // TODO: Check a cache
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     dispatch(requestMacroExpansion());
 
     const { code, configuration: {
@@ -617,7 +662,7 @@ type PerformGistLoadProps =
   Pick<GistSuccessProps, Exclude<keyof GistSuccessProps, 'url' | 'code' | 'stdout' | 'stderr'>>;
 
 export function performGistLoad({ id, channel, mode, edition }: PerformGistLoadProps): ThunkAction {
-  return function(dispatch, _getState) {
+  return function (dispatch, _getState) {
     dispatch(requestGistLoad());
     const u = url.resolve(routes.meta.gist.pathname, id);
     jsonGet(u)
@@ -636,7 +681,7 @@ const receiveGistSaveFailure = ({ error }) => // eslint-disable-line no-unused-v
   createAction(ActionType.GistSaveFailed, { error });
 
 export function performGistSave(): ThunkAction {
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     dispatch(requestGistSave());
 
     const { code, configuration: { channel, mode, edition }, output: { execute: { stdout, stderr } } } = getState();
@@ -654,7 +699,7 @@ const receiveCratesLoadSuccess = ({ crates }) =>
   createAction(ActionType.CratesLoadSucceeded, { crates });
 
 export function performCratesLoad(): ThunkAction {
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(requestCratesLoad());
 
     return jsonGet(routes.meta.crates)
@@ -670,7 +715,7 @@ const receiveVersionsLoadSuccess = ({ stable, beta, nightly, rustfmt, clippy, mi
   createAction(ActionType.VersionsLoadSucceeded, { stable, beta, nightly, rustfmt, clippy, miri });
 
 export function performVersionsLoad(): ThunkAction {
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(requestVersionsLoad());
 
     const stable = jsonGet(routes.meta.version.stable);
@@ -742,7 +787,7 @@ export function indexPageLoad({
   mode: modeString = 'debug',
   edition: editionString,
 }): ThunkAction {
-  return function(dispatch) {
+  return function (dispatch) {
     const channel = parseChannel(version);
     const mode = parseMode(modeString);
     let edition = parseEdition(editionString);
@@ -783,7 +828,7 @@ export function helpPageLoad() {
 }
 
 export function showExample(code): ThunkAction {
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(navigateToIndex());
     dispatch(editCode(code));
   };
@@ -823,6 +868,9 @@ export type Action =
   | ReturnType<typeof requestCompileWasm>
   | ReturnType<typeof receiveCompileWasmSuccess>
   | ReturnType<typeof receiveCompileWasmFailure>
+  | ReturnType<typeof requestCompileWasmPack>
+  | ReturnType<typeof receiveCompileWasmPackSuccess>
+  | ReturnType<typeof receiveCompileWasmPackFailure>
   | ReturnType<typeof editCode>
   | ReturnType<typeof addMainFunction>
   | ReturnType<typeof addImport>

ui/frontend/reducers/output/index.ts

@@ -12,6 +12,7 @@ import meta from './meta';
 import mir from './mir';
 import miri from './miri';
 import wasm from './wasm';
+import wasmPack from './wasmPack';
 
 const output = combineReducers({
   meta,
@@ -26,6 +27,7 @@ const output = combineReducers({
   wasm,
   execute,
   gist,
+  wasmPack,
 });
 
 export type State = ReturnType<typeof output>;

ui/frontend/reducers/output/wasmPack.ts

@@ -0,0 +1,35 @@
+import { Action, ActionType } from '../../actions';
+import { finish, start } from './sharedStateManagement';
+
+const DEFAULT: State = {
+  requestsInProgress: 0,
+  stdout: null,
+  stderr: null,
+  error: null,
+  wasm_js: null,
+  wasm_bg: null,
+};
+
+interface State {
+  requestsInProgress: number;
+  stdout?: string;
+  stderr?: string;
+  error?: string;
+  wasm_js?: string;
+  wasm_bg?: string;
+}
+
+export default function wasmPack(state = DEFAULT, action: Action) {
+  switch (action.type) {
+    case ActionType.CompileWasmPackRequest:
+      return start(DEFAULT, state);
+    case ActionType.CompileWasmPackSucceeded: {
+      const { stdout = '', stderr = '', wasm_js = '', wasm_bg = '' } = action;
+      return finish(state, { stdout, stderr, wasm_js, wasm_bg });
+    }
+    case ActionType.CompileWasmPackFailed:
+      return finish(state, { error: action.error });
+    default:
+      return state;
+  }
+}

ui/frontend/selectors/index.ts

@@ -75,6 +75,7 @@ const LABELS: { [index in PrimaryActionCore]: string } = {
   [PrimaryActionCore.Mir]: 'Show MIR',
   [PrimaryActionCore.Test]: 'Test',
   [PrimaryActionCore.Wasm]: 'Show WASM',
+  [PrimaryActionCore.WasmPack]: 'Show WASM PACK',
 };
 
 export const getExecutionLabel = createSelector(primaryActionSelector, primaryAction => LABELS[primaryAction]);
@@ -108,6 +109,7 @@ export const isNightlyChannel = (state: State) => (
 );
 export const isWasmAvailable = isNightlyChannel;
 export const isHirAvailable = isNightlyChannel;
+export const isWasmPackAvailable = isNightlyChannel;
 
 export const getModeLabel = (state: State) => {
   const { configuration: { mode } } = state;

ui/frontend/types.ts

@@ -78,6 +78,7 @@ export enum PrimaryActionCore {
   Mir = 'mir',
   Test = 'test',
   Wasm = 'wasm',
+  WasmPack = 'wasm-pack',
 }
 
 export type PrimaryAction = PrimaryActionCore | PrimaryActionAuto;
@@ -115,6 +116,7 @@ export enum Focus {
   Execute = 'execute',
   Format = 'format',
   Gist = 'gist',
+  WasmPack = 'wasm-pack',
 }
 
 export enum Notification {