Release v1.13.1

build.mk

@@ -6,23 +6,31 @@ PUBLIC_DIR ?= $(UI)/public
 WEBWORKER_PKG ?= ./cmd/webworker
 INTERPRETER_PKG ?= ./cmd/go-repl
 
+define build_wasm_worker
+	@echo ":: Building WebAssembly worker '$(1)' ..."
+	GOOS=js GOARCH=wasm $(GO) build -ldflags "-s -w" -trimpath \
+		$(3) -o $(PUBLIC_DIR)/$(2) $(1)
+endef
+
+define check_tool
+	@if ! command -v $(1) >/dev/null 2>&1 ; then\
+		echo "ERROR: '$(1)' binary not found. Please ensure that tool is installed or specify binary path with '$(2)' variable." && \
+		exit 1; \
+	fi;
+endef
+
+
 .PHONY: clean
 clean:
 	@echo ":: Cleanup..." && rm -rf $(TARGET) && rm -rf $(UI)/build
 
 .PHONY:check-go
 check-go:
-	@if ! command -v $(GO) >/dev/null 2>&1 ; then\
-		echo "ERROR: '$(GO)' binary not found. Please ensure that Go is installed or specify binary path with 'GO' variable." && \
-		exit 1; \
-	fi;
+	$(call check_tool,$(GO),'GO')
 
 .PHONY:check-yarn
 check-yarn:
-	@if ! command -v $(YARN) >/dev/null 2>&1 ; then\
-		echo "ERROR: '$(YARN)' binary not found. Please ensure that Node.js and Yarn are installed or specify binary path with 'YARN' variable." && \
-		exit 1; \
-	fi;
+	$(call check_tool,$(YARN),'YARN')
 
 # Build targets
 .PHONY: collect-meta
@@ -51,13 +59,11 @@ copy-wasm-exec:
 
 .PHONY:build-webworker
 build-webworker:
-	@echo ":: Building Go Webworker module..." && \
-	GOOS=js GOARCH=wasm $(GO) build -o $(PUBLIC_DIR)/worker.wasm $(WEBWORKER_PKG)
+	$(call build_wasm_worker,$(WEBWORKER_PKG),'worker.wasm')
 
 .PHONY:go-repl
 go-repl:
-	@echo ":: Building Go interpreter module..." && \
-	GOOS=js GOARCH=wasm $(GO) build -o $(PUBLIC_DIR)/go-repl.wasm $(INTERPRETER_PKG)
+	$(call build_wasm_worker,$(INTERPRETER_PKG),'go-repl.wasm')
 
 .PHONY:build-wasm
 build-wasm: copy-wasm-exec build-webworker go-repl

build/Dockerfile

@@ -21,8 +21,8 @@ COPY go.sum .
 ARG APP_VERSION=1.0.0
 RUN echo "Building server with version $APP_VERSION" && \
     go build -o server -ldflags="-X 'main.Version=$APP_VERSION'" ./cmd/playground && \
-    GOOS=js GOARCH=wasm go build -o ./go-repl.wasm ./cmd/go-repl && \
-    GOOS=js GOARCH=wasm go build -o ./worker.wasm ./cmd/webworker && \
+    GOOS=js GOARCH=wasm go build -ldflags "-s -w" -trimpath -o ./go-repl.wasm ./cmd/go-repl && \
+    GOOS=js GOARCH=wasm go build -ldflags "-s -w" -trimpath -o ./worker.wasm ./cmd/webworker && \
     cp $(go env GOROOT)/misc/wasm/wasm_exec.js .
 
 FROM golang:1.19-alpine as production

build/release.dockerfile

@@ -17,8 +17,8 @@ COPY go.sum .
 ARG APP_VERSION=1.0.0
 RUN echo "Building server with version $APP_VERSION" && \
     go build -o server -ldflags="-X 'main.Version=$APP_VERSION'" ./cmd/playground && \
-    GOOS=js GOARCH=wasm go build -o ./worker.wasm ./cmd/webworker && \
-    GOOS=js GOARCH=wasm go build -o ./go-repl.wasm ./cmd/go-repl && \
+    GOOS=js GOARCH=wasm go build -ldflags "-s -w" -trimpath -o ./worker.wasm ./cmd/webworker && \
+    GOOS=js GOARCH=wasm go build -ldflags "-s -w" -trimpath -o ./go-repl.wasm ./cmd/go-repl && \
     cp $(go env GOROOT)/misc/wasm/wasm_exec.js .
 
 FROM golang:1.19-alpine as production

web/src/components/modals/Notification/Notification.css

@@ -32,3 +32,6 @@
   margin-bottom: .4rem;
 }
 
+.Notification__Actions {
+  margin-top: 1rem;
+}

web/src/components/modals/Notification/Notification.tsx

@@ -1,5 +1,13 @@
 import React from "react";
-import {IconButton, ISemanticColors, ProgressIndicator, useTheme} from "@fluentui/react";
+import {
+  Stack,
+  IconButton,
+  ISemanticColors,
+  ProgressIndicator,
+  DefaultButton,
+  PrimaryButton,
+  useTheme,
+} from "@fluentui/react";
 import { FontIcon } from "@fluentui/react/lib/Icon";
 
 import "./Notification.css"
@@ -17,6 +25,13 @@ interface ProgressState {
   current?: number
 }
 
+interface NotificationAction {
+  label: string
+  key: string
+  primary?: boolean
+  onClick?: () => void
+}
+
 export interface NotificationProps {
   id: number|string
   type?: NotificationType
@@ -25,6 +40,7 @@ export interface NotificationProps {
   canDismiss?: boolean
   progress?: ProgressState
   onClose?: () => void
+  actions?: NotificationAction[]
 }
 
 const iconColorPaletteMap: {[k in NotificationType]: keyof ISemanticColors} = {
@@ -51,6 +67,19 @@ const getPercentComplete = (progress: NotificationProps['progress']): (number|un
   return percentage / 100;
 }
 
+const NotificationActionButton: React.FC<Omit<NotificationAction, 'key'>> = (
+  {label, primary, onClick}
+) => {
+  const ButtonComponent = primary ? PrimaryButton : DefaultButton;
+  return (
+    <ButtonComponent
+      primary={primary}
+      onClick={onClick}
+      text={label}
+    />
+  );
+}
+
 const Notification: React.FunctionComponent<NotificationProps> = ({
   id,
   title,
@@ -59,6 +88,7 @@ const Notification: React.FunctionComponent<NotificationProps> = ({
   canDismiss = true,
   type = NotificationType.Info,
   onClose,
+  actions
 }) => {
   const {semanticColors, fonts, ...theme} = useTheme();
   return (
@@ -121,6 +151,22 @@ const Notification: React.FunctionComponent<NotificationProps> = ({
           )}
         </div>
       )}
+      { actions?.length && (
+        <Stack
+          horizontal
+          className="Notification__Actions"
+          horizontalAlign="end"
+          tokens={
+            { childrenGap: 10 }
+          }
+        >
+          {
+            actions.map(({key, ...props}, i) => (
+              <NotificationActionButton key={key} {...props} />
+            ))
+          }
+        </Stack>
+      )}
 
     </div>
   );

web/src/components/pages/Playground.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import { dispatchPanelLayoutChange, newSnippetLoadDispatcher} from '~/store';
+import {
+  dispatchPanelLayoutChange,
+  dispatchUpdateCheck,
+  newSnippetLoadDispatcher,
+} from '~/store';
 import { Header } from '~/components/core/Header';
 import CodeEditor from '~/components/editor/CodeEditor';
 import FlexContainer from '~/components/editor/FlexContainer';
@@ -15,7 +19,13 @@ import './Playground.css';
 
 const CodeContainer = connect()(({dispatch}: any) => {
   const { snippetID } = useParams();
-  dispatch(newSnippetLoadDispatcher(snippetID));
+  useEffect(() => {
+    dispatch(newSnippetLoadDispatcher(snippetID));
+  }, [snippetID, dispatch]);
+
+  useEffect(() => {
+    dispatch(dispatchUpdateCheck)
+  }, [dispatch]);
   return (
     <CodeEditor />
   );
@@ -31,7 +41,9 @@ const Playground = connect(({panel}: any) => ({panelProps: panel}))(({panelProps
         </FlexContainer>
         <ResizablePreview
           {...panelProps}
-          onViewChange={changes => dispatch(dispatchPanelLayoutChange(changes))}
+          onViewChange={changes => {
+            dispatch(dispatchPanelLayoutChange(changes))
+          }}
         />
         <NotificationHost />
       </Layout>

web/src/serviceWorkerRegistration.ts

@@ -61,6 +61,33 @@ export function register(config?: Config) {
   }
 }
 
+/**
+ * Manually registers service worker
+ *
+ * @param config
+ */
+export function manualRegister(config?: Config) {
+  if (process.env.NODE_ENV !== 'production') {
+    return;
+  }
+  if (!('serviceWorker' in navigator)) {
+    return;
+  }
+
+  const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+  if (publicUrl.origin !== window.location.origin) {
+    return;
+  }
+
+  const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+  if (isLocalhost) {
+    checkValidServiceWorker(swUrl, config);
+    return;
+  }
+
+  registerValidSW(swUrl, config);
+}
+
 function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)

web/src/services/updates.ts

@@ -0,0 +1,59 @@
+import client from '~/services/api';
+import environment from "~/environment";
+
+export interface UpdateInfo {
+  newVersion: string
+}
+
+/**
+ * Checks for application updates and returns new available version.
+ *
+ * Returns null if no updates available.
+ */
+export const checkUpdates = async (): Promise<UpdateInfo|null> => {
+  if (!window.navigator.onLine) {
+    console.log('updater: application is offline, skip.');
+    return null;
+  }
+
+  const { version: newVersion } = await client.getVersion();
+  const { appVersion } = environment;
+  if (newVersion === appVersion) {
+    console.log('updater: app is up to date:', newVersion);
+    return null;
+  }
+
+  console.log(`updater: new update is available - ${newVersion}`);
+  return {
+    newVersion: newVersion
+  }
+
+  // if (!('serviceWorker' in navigator)) {
+  //   console.warn('updater: no SW registrations found, skip');
+  //   return;
+  // }
+  //
+  // const registrations = await navigator.serviceWorker.getRegistrations();
+  // if (!registrations?.length) {
+  //   console.warn('updater: no SW registrations found, skip');
+  //   return;
+  // }
+
+
+  // await truncateCachesAndRegister(registrations);
+}
+
+// const truncateCachesAndRegister = async (registrations: readonly ServiceWorkerRegistration[]) => {
+//   console.log(`updater: unregistering ${registrations.length} service workers...`);
+//   await Promise.all(registrations.map(r => r.unregister()));
+//
+//   console.log('updater: truncating caches', caches.keys());
+//
+//   for (const sw of registrations) {
+//     const ok = await sw.unregister();
+//     if (!ok) {
+//       console.
+//     }
+//   }
+//   console.log('updater: truncating all caches');
+// }

web/src/store/actions/actions.ts

@@ -1,16 +1,16 @@
 export enum ActionType {
-  IMPORT_FILE = 'IMPORT_FILE',
-  FILE_CHANGE = 'FILE_CHANGE',
-  LOADING = 'LOADING',
-  ERROR = 'ERROR',
-  FORMAT_CODE = 'FORMAT_CODE',
-  TOGGLE_THEME = 'TOGGLE_THEME',
-  RUN_TARGET_CHANGE = 'RUN_TARGET_CHANGE',
-  MONACO_SETTINGS_CHANGE = 'MONACO_SETTINGS_CHANGE',
-  UI_STATE_CHANGE = 'UI_STATE_CHANGE',
-  MARKER_CHANGE = 'MARKER_CHANGE',
-  PANEL_STATE_CHANGE = 'PANEL_STATE_CHANGE',
-  SETTINGS_CHANGE = 'SETTINGS_CHANGE',
+  IMPORT_FILE             = 'IMPORT_FILE',
+  FILE_CHANGE             = 'FILE_CHANGE',
+  LOADING_STATE_CHANGE    = 'LOADING_STATE_CHANGE',
+  ERROR                   = 'ERROR',
+  FORMAT_CODE             = 'FORMAT_CODE',
+  TOGGLE_THEME            = 'TOGGLE_THEME',
+  RUN_TARGET_CHANGE       = 'RUN_TARGET_CHANGE',
+  MONACO_SETTINGS_CHANGE  = 'MONACO_SETTINGS_CHANGE',
+  UI_STATE_CHANGE         = 'UI_STATE_CHANGE',
+  MARKER_CHANGE           = 'MARKER_CHANGE',
+  PANEL_STATE_CHANGE      = 'PANEL_STATE_CHANGE',
+  SETTINGS_CHANGE         = 'SETTINGS_CHANGE',
 
   // Special actions used by Go WASM bridge
   EVAL_START = 'EVAL_START',

web/src/store/actions/ui.ts

@@ -1,7 +1,10 @@
 import { ActionType} from "./actions";
-
 import { UIState } from "../state";
 
+export interface LoadingStateChanges {
+  loading: boolean
+}
+
 export const newUIStateChangeAction = (changes: Partial<UIState>) => (
   {
     type: ActionType.UI_STATE_CHANGE,
@@ -16,9 +19,9 @@ export const newErrorAction = (err: string) => (
   }
 );
 
-export const newLoadingAction = () => (
+export const newLoadingAction = (loading = true) => (
   {
-    type: ActionType.LOADING,
-    payload: null,
+    type: ActionType.LOADING_STATE_CHANGE,
+    payload: { loading },
   }
 );

web/src/store/dispatchers/index.ts

@@ -1,4 +1,5 @@
 export * from './snippets';
 export * from './settings';
+export * from './updates';
 export * from './build';
 export * from './utils';

web/src/store/dispatchers/snippets.ts

@@ -1,5 +1,5 @@
 import {saveAs} from 'file-saver';
-import {push} from "connected-react-router";
+import {replace} from "connected-react-router";
 
 import client from "~/services/api";
 import {DEMO_CODE} from '~/components/editor/props';
@@ -64,8 +64,12 @@ export const shareSnippetDispatcher: Dispatcher =
     try {
       const { code } = getState().editor;
       const { snippetID } = await client.shareSnippet(code);
-      dispatch(push(`/snippet/${snippetID}`));
-      dispatch(newUIStateChangeAction({ shareCreated: true, snippetId: snippetID }));
+      dispatch(newLoadingAction(false));
+      dispatch(replace(`/snippet/${snippetID}`));
+      dispatch(newUIStateChangeAction({
+        shareCreated: true,
+        snippetId: snippetID
+      }));
     } catch (err: any) {
       dispatch(newErrorAction(err.message));
     }
@@ -99,6 +103,7 @@ export const formatFileDispatcher: Dispatcher =
       const { editor: {code}, runTarget: { backend } } = getState();
       const res = await client.formatCode(code, backend);
 
+      dispatch(newLoadingAction(false));
       if (res.formatted?.length) {
         dispatch(newFormatCodeAction(res.formatted));
       }