SPIKE: Use custom events to trigger Scratch behaviour from the outside

.github/workflows/ci-cd.yml

@@ -3,7 +3,7 @@ name: CI/CD
 on:
     pull_request: # Runs whenever a pull request is created or updated (including from another fork)
     push: # Runs whenever a commit is pushed to the repository...
-        branches: [master, develop, alpha, beta, hotfix/*] # ...on any of these branches
+        branches: [experience-cs] # ...on any of these branches
     workflow_dispatch: # Allows you to run this workflow manually from the Actions tab
 concurrency:
     group: "${{ github.workflow }} @ ${{ github.head_ref || github.ref }}"
@@ -14,6 +14,7 @@ permissions:
     pages: write # deploy to GitHub Pages
     issues: write # comment on released issues
     pull-requests: write # comment on released pull requests
+    packages: write # deploy to GitHub Packages
 
 jobs:
     ci-cd:
@@ -28,6 +29,7 @@ jobs:
               with:
                   cache: "npm"
                   node-version-file: ".nvmrc"
+                  registry-url: "https://npm.pkg.github.com"
             - name: Info
               run: |
                   cat <<EOF
@@ -79,11 +81,14 @@ jobs:
                 if [[ ${{contains(github.ref, 'hotfix')}}  ]]; then
                 sed -e "s|hotfix/REPLACE|${{ github.ref_name }}|" --in-place release.config.js
                 fi
-            - name: Semantic Release
+            - name: Publish to GitHub Packages
+              if: github.ref == 'refs/heads/experience-cs'
+              run: |
+                RELEASE_VERSION="0.1.0-experience-cs.$(date +'%Y%m%d%H%M%S')"
+                npm version --no-git-tag-version $RELEASE_VERSION
+                npm publish --access public --tag latest
               env:
-                NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-              run: npx --no -- semantic-release
+                NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
             - name: Deploy playground to GitHub Pages
               uses: peaceiris/actions-gh-pages@373f7f263a76c20808c831209c920827a82a2847 # v3
               if: github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main'

package.json

@@ -1,13 +1,16 @@
 {
-  "name": "scratch-gui",
+  "name": "@RaspberryPiFoundation/scratch-gui",
   "version": "4.1.0-beta.1",
   "description": "Graphical User Interface for creating and running Scratch 3.0 projects",
   "author": "Massachusetts Institute of Technology",
   "license": "BSD-3-Clause",
-  "homepage": "https://github.com/scratchfoundation/scratch-gui#readme",
+  "homepage": "https://github.com/RaspberryPiFoundation/scratch-gui#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/scratchfoundation/scratch-gui.git"
+    "url": "https://github.com/RaspberryPiFoundation/scratch-gui.git"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
   },
   "main": "./dist/scratch-gui.js",
   "scripts": {

src/components/gui/gui.css

@@ -7,8 +7,12 @@
 }
 
 .body-wrapper {
-    height: calc(100% - $menu-bar-height);
     background-color: $ui-primary;
+    height: calc(100% - $menu-bar-height);
+}
+
+.body-wrapper-without-menu-bar {
+    height: 100%;
 }
 
 .body-wrapper * {

src/components/gui/gui.jsx

@@ -93,6 +93,7 @@ const GUIComponent = props => {
         isTotallyNormal,
         loading,
         logo,
+        menuBarHidden,
         renderLogin,
         onClickAbout,
         onClickAccountNav,
@@ -145,6 +146,9 @@ const GUIComponent = props => {
 
     return (<MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
         const stageSize = resolveStageSize(stageSizeMode, isFullSize);
+        const boxStyles = classNames(styles.bodyWrapper, {
+            [styles.bodyWrapperWithoutMenuBar]: menuBarHidden
+        });
 
         return isPlayerOnly ? (
             <StageWrapper
@@ -211,40 +215,42 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
-                <MenuBar
-                    accountNavOpen={accountNavOpen}
-                    authorId={authorId}
-                    authorThumbnailUrl={authorThumbnailUrl}
-                    authorUsername={authorUsername}
-                    canChangeLanguage={canChangeLanguage}
-                    canChangeTheme={canChangeTheme}
-                    canCreateCopy={canCreateCopy}
-                    canCreateNew={canCreateNew}
-                    canEditTitle={canEditTitle}
-                    canManageFiles={canManageFiles}
-                    canRemix={canRemix}
-                    canSave={canSave}
-                    canShare={canShare}
-                    className={styles.menuBarPosition}
-                    enableCommunity={enableCommunity}
-                    isShared={isShared}
-                    isTotallyNormal={isTotallyNormal}
-                    logo={logo}
-                    renderLogin={renderLogin}
-                    showComingSoon={showComingSoon}
-                    onClickAbout={onClickAbout}
-                    onClickAccountNav={onClickAccountNav}
-                    onClickLogo={onClickLogo}
-                    onCloseAccountNav={onCloseAccountNav}
-                    onLogOut={onLogOut}
-                    onOpenRegistration={onOpenRegistration}
-                    onProjectTelemetryEvent={onProjectTelemetryEvent}
-                    onSeeCommunity={onSeeCommunity}
-                    onShare={onShare}
-                    onStartSelectingFileUpload={onStartSelectingFileUpload}
-                    onToggleLoginOpen={onToggleLoginOpen}
-                />
-                <Box className={styles.bodyWrapper}>
+                {!menuBarHidden &&
+                    <MenuBar
+                        accountNavOpen={accountNavOpen}
+                        authorId={authorId}
+                        authorThumbnailUrl={authorThumbnailUrl}
+                        authorUsername={authorUsername}
+                        canChangeLanguage={canChangeLanguage}
+                        canChangeTheme={canChangeTheme}
+                        canCreateCopy={canCreateCopy}
+                        canCreateNew={canCreateNew}
+                        canEditTitle={canEditTitle}
+                        canManageFiles={canManageFiles}
+                        canRemix={canRemix}
+                        canSave={canSave}
+                        canShare={canShare}
+                        className={styles.menuBarPosition}
+                        enableCommunity={enableCommunity}
+                        isShared={isShared}
+                        isTotallyNormal={isTotallyNormal}
+                        logo={logo}
+                        renderLogin={renderLogin}
+                        showComingSoon={showComingSoon}
+                        onClickAbout={onClickAbout}
+                        onClickAccountNav={onClickAccountNav}
+                        onClickLogo={onClickLogo}
+                        onCloseAccountNav={onCloseAccountNav}
+                        onLogOut={onLogOut}
+                        onOpenRegistration={onOpenRegistration}
+                        onProjectTelemetryEvent={onProjectTelemetryEvent}
+                        onSeeCommunity={onSeeCommunity}
+                        onShare={onShare}
+                        onStartSelectingFileUpload={onStartSelectingFileUpload}
+                        onToggleLoginOpen={onToggleLoginOpen}
+                    />
+                }
+                <Box className={boxStyles}>
                     <Box className={styles.flexWrapper}>
                         <Box className={styles.editorWrapper}>
                             <Tabs
@@ -407,6 +413,7 @@ GUIComponent.propTypes = {
     isTotallyNormal: PropTypes.bool,
     loading: PropTypes.bool,
     logo: PropTypes.string,
+    menuBarHidden: PropTypes.bool,
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
@@ -458,6 +465,7 @@ GUIComponent.defaultProps = {
     isShared: false,
     isTotallyNormal: false,
     loading: false,
+    menuBarHidden: false,
     showComingSoon: false,
     stageSizeMode: STAGE_SIZE_MODES.large
 };

src/playground/event-listeners-hoc.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { connect } from "react-redux";
+import bindAll from "lodash.bindall";
+import { manualUpdateProject } from "../reducers/project-state";
+
+const EventListenersHOC = function (WrappedComponent) {
+  class EventListenersComponent extends React.Component {
+    constructor(props) {
+      super(props);
+      bindAll(this, ["handleSave"]);
+    }
+    componentDidMount() {
+      window.addEventListener("scratch-gui-save", this.handleSave);
+    }
+    componentWillUnmount() {
+      window.removeEventListener("scratch-gui-save", this.handleSave);
+    }
+    handleSave() {
+      this.props.dispatch(manualUpdateProject());
+    }
+    render() {
+      const {...componentProps} = this.props;
+      return <WrappedComponent {...componentProps} />;
+    }
+  }
+  return connect()(EventListenersComponent);
+};
+
+export { EventListenersHOC as default };

src/playground/render-gui.jsx

@@ -6,6 +6,7 @@ import AppStateHOC from '../lib/app-state-hoc.jsx';
 import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
 import log from '../lib/log.js';
+import EventListenersHOC from './event-listeners-hoc.jsx';
 
 const onClickLogo = () => {
     window.location = 'https://scratch.mit.edu';
@@ -36,6 +37,7 @@ export default appTarget => {
     // ability to compose reducers.
     const WrappedGui = compose(
         AppStateHOC,
+        EventListenersHOC,
         HashParserHOC
     )(GUI);
 
@@ -73,13 +75,16 @@ export default appTarget => {
                 onTelemetryModalOptIn={handleTelemetryModalOptIn}
                 onTelemetryModalOptOut={handleTelemetryModalOptOut}
             /> :
-            <WrappedGui
-                canEditTitle
-                backpackVisible
-                showComingSoon
-                backpackHost={backpackHost}
-                canSave={false}
-                onClickLogo={onClickLogo}
-            />,
+            <>
+                <button onClick={() => {window.dispatchEvent(new Event('scratch-gui-save'))}}>Trigger save outside of GUI</button>
+                <WrappedGui
+                    projectId={0}
+                    canSave={true}
+                    canCreateNew={true}
+                    canManageFiles={true}
+                    menuBarHidden={false}
+                    projectHost={"http://localhost:3000/api/projects"}
+                />
+            </>,
         appTarget);
 };

src/reducers/project-state.js

@@ -295,6 +295,7 @@ const reducer = function (state, action) {
         }
         return state;
     case START_MANUAL_UPDATING:
+        console.log('START_MANUAL_UPDATING');
         if (state.loadingState === LoadingState.SHOWING_WITH_ID) {
             return Object.assign({}, state, {
                 loadingState: LoadingState.MANUAL_UPDATING