+
+ {extensionLibraryVisible && (
+ onOpenConnectionModal(id)}
+ onRequestClose={onRequestCloseExtensionLibrary}
+ />
+ )}
+
+ {this.state.prompt && (
+
+ )}
+
+ );
+ }
+}
+
+MonacoBlocks.propTypes = {
+ code: PropTypes.string,
+ extensionLibraryVisible: PropTypes.bool,
+ isVisible: PropTypes.bool,
+ language: PropTypes.string,
+ onCodeChange: PropTypes.func,
+ onOpenConnectionModal: PropTypes.func,
+ onRequestCloseExtensionLibrary: PropTypes.func
+};
+
+MonacoBlocks.defaultProps = {
+ code: '',
+ language: 'javascript'
+};
+
+const mapStateToProps = state => ({
+ anyModalVisible: Object.keys(state.scratchGui.modals).some(key => state.scratchGui.modals[key]),
+ extensionLibraryVisible: state.scratchGui.modals.extensionLibrary,
+
+ code: state.scratchGui.codeContent || '',
+ language: state.scratchGui.editorLanguage || 'javascript'
+});
+
+const mapDispatchToProps = dispatch => ({
+ onOpenConnectionModal: id => {
+
+ dispatch(openConnectionModal(id));
+ },
+ onRequestCloseExtensionLibrary: () => dispatch(closeExtensionLibrary()),
+
+ onCodeChange: (value) => dispatch({type: 'UPDATE_CODE_CONTENT', content: value})
+});
+
+export default errorBoundaryHOC('GeneralCodeEditor')(
+ connect(
+ mapStateToProps,
+ mapDispatchToProps
+ )(MonacoBlocks)
+);
\ No newline at end of file
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index c30b637d8..a8cdd58ab 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -97,6 +97,7 @@ class GUI extends React.Component {
fetchingProject,
isLoading,
loadingStateVisible,
+ codingStyle = "blocks",
...componentProps
} = this.props;
return (
diff --git a/src/containers/sb3-downloader.jsx b/src/containers/sb3-downloader.jsx
index b84e38519..6c24147e1 100644
--- a/src/containers/sb3-downloader.jsx
+++ b/src/containers/sb3-downloader.jsx
@@ -142,6 +142,18 @@ class SB3Downloader extends React.Component {
await new Promise((resolve, reject) => {
// Projects can be very large, so we'll utilize JSZip's stream API to avoid having the
// entire sb3 in memory at the same time.
+
+ // ^^^ While this code is pretty good, this doesn't entirely prevent the GUI from freezing when a really large sb3 is downloading.
+ // In fact, this is a massive issue with scratch-gui in general, as everything is on the main thread and something as simple as a nifty
+ // scratch-vm trick like that one clone script that creates thousands of clones before a single frame render, consequently crashing the GUI
+ // and even taking up all the RAM if you have the "Infinite Clones" option in TurboWarp/OmniBlocks.
+ // This means it will freeze everything permanently and lose progress.
+ // The solution is quite simple (in theory, easier said than done): Move a bunch of stuff to web workers. Including this script right here, which I will work on eventually.
+ // While I gotta cut the Scratch Team some slack for, y'know, being an underfunded non-profit, and also probably didn't expect people to make projects that were 1GB+ big
+ // (which is quite common now, lol), but web workers were were established by the time Scratch 3 was rushed out back in 2019.
+
+ // Enough ranting, though.
+ // TODO: Move this downloading logic to a web worker.
const jszipStream = this.props.saveProjectSb3Stream();
const abortController = new AbortController();
diff --git a/src/lib/sb-file-uploader-hoc.jsx b/src/lib/sb-file-uploader-hoc.jsx
index 2c54204c7..1d6625b52 100644
--- a/src/lib/sb-file-uploader-hoc.jsx
+++ b/src/lib/sb-file-uploader-hoc.jsx
@@ -86,7 +86,15 @@ const SBFileUploaderHOC = function (WrappedComponent) {
// to disallow picking any items in Chrome 133 on Android.
'application/octet-stream': ['.sb', '.sb2', '.sb3']
}
- }
+ },
+ {
+ description: 'Python',
+ accept: {
+ // Using application/x.scratch.sb3 as done in scratch-vm causes file pickers
+ // to disallow picking any items in Chrome 133 on Android.
+ 'application/octet-stream': ['.py']
+ }
+ },
]
});
const file = await handle.getFile();
diff --git a/src/lib/themes/global-styles.css b/src/lib/themes/global-styles.css
index 491cbaca0..490af3896 100644
--- a/src/lib/themes/global-styles.css
+++ b/src/lib/themes/global-styles.css
@@ -42,3 +42,4 @@ oblivion and back so just disabling all animations if they have that setting on
--editorDarkMode-page: $ui-primary;
--editorDarkMode-highlightText: $looks-secondary;
}
+
diff --git a/src/playground/python.jsx b/src/playground/python.jsx
new file mode 100644
index 000000000..2ecd6eba1
--- /dev/null
+++ b/src/playground/python.jsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useRef, useState } from "react";
+import pyodideURL from "pyodide/pyodide.js?pyodide";
+import render from "./app-target.js";
+import { XTerminal } from "xterminal";
+
+const PythonIDE = () => {
+ const [pyodide, setPyodide] = useState(null);
+ const [code, setCode] = useState('print("Hello World!")');
+ const terminalRef = useRef(null);
+
+ // Load Pyodide
+ useEffect(() => {
+ const script = document.createElement("script");
+ script.src = pyodideURL;
+
+ script.onload = async () => {
+ const py = await loadPyodide({
+ indexURL: pyodideURL.replace(/pyodide\.js$/, "")
+ });
+
+ setPyodide(py);
+
+ await py.runPythonAsync(`
+import sys
+class JsOutput:
+ def write(self, s):
+ if s.strip():
+ js_append_output(s)
+ def flush(self):
+ pass
+
+sys.stdout = JsOutput()
+sys.stderr = JsOutput()
+ `);
+
+ window.js_append_output = (s) => {
+ terminalRef.current?.writeln(s);
+ };
+ };
+
+ document.head.appendChild(script);
+ }, []);
+
+ const runCode = async () => {
+ if (!pyodide || !terminalRef.current) return;
+
+ terminalRef.current.clear();
+
+ try {
+ await pyodide.runPythonAsync(code);
+ } catch (err) {
+ terminalRef.current.writeln(err.toString());
+ }
+ };
+
+ if (!pyodide) {
+ return (
+