revert: Walk back on some less-relevant changes

preactjs · Jun 18, 2024 · f124238 · f124238
1 parent 6b3e5b2
commit f124238
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 35 deletions.
diff --git a/src/components/controllers/repl/index.jsx b/src/components/controllers/repl/index.jsx
@@ -4,9 +4,6 @@ import { debounce } from 'decko';
 import { ErrorOverlay } from './error-overlay';
 import { localStorageGet, localStorageSet } from '../../../lib/localstorage';
 import { parseStackTrace } from './errors';
-import { Splitter } from '../../splitter';
-import CodeEditor from '../../code-editor';
-import Runner from './runner';
 import style from './style.module.css';
 import REPL_CSS from './examples.css?raw';
 
@@ -17,6 +14,7 @@ import todoExampleSignal from './examples/todo-list-signal.txt?url';
 import repoListExample from './examples/github-repo-list.txt?url';
 import contextExample from './examples/context.txt?url';
 import spiralExample from './examples/spiral.txt?url';
+import { Splitter } from '../../splitter';
 
 const EXAMPLES = [
 	{
@@ -113,17 +111,25 @@ export class Repl extends Component {
 	}
 
 	componentDidMount() {
-		// Load transpiler
-		Runner.worker.ping().then(() => {
-			this.setState({ loading: false });
-			let example = this.state.exampleSlug;
-			if (this.props.query.code) {
-				this.receiveCode(this.props.query.code);
-			} else if (example) {
-				this.applyExample(example);
-			} else if (!this.state.code) {
-				this.applyExample(EXAMPLES[0].slug);
-			}
+		Promise.all([
+			import('../../code-editor'),
+			import('./runner')
+		]).then(([CodeEditor, Runner]) => {
+			this.CodeEditor = CodeEditor.default;
+			this.Runner = Runner.default;
+
+			// Load transpiler
+			this.Runner.worker.ping().then(() => {
+				this.setState({ loading: false });
+				let example = this.state.exampleSlug;
+				if (this.props.query.code) {
+					this.receiveCode(this.props.query.code);
+				} else if (example) {
+					this.applyExample(example);
+				} else if (!this.state.code) {
+					this.applyExample(EXAMPLES[0].slug);
+				}
+			});
 		});
 	}
 
@@ -273,7 +279,7 @@ export class Repl extends Component {
 										stack={parseStackTrace(error)}
 									/>
 								)}
-								<Runner
+								<this.Runner
 									onRealm={this.onRealm}
 									onError={linkState(this, 'error', 'error')}
 									onSuccess={this.onSuccess}
@@ -283,7 +289,7 @@ export class Repl extends Component {
 							</div>
 						}
 					>
-						<CodeEditor
+						<this.CodeEditor
 							class={style.code}
 							value={code}
 							baseExampleSlug={exampleSlug}

diff --git a/src/components/controllers/repl/runner.jsx b/src/components/controllers/repl/runner.jsx
@@ -7,13 +7,11 @@ import { patchErrorLocation } from './errors';
 let cachedFetcher = memoize(fetch);
 let cachedFetch = (...args) => cachedFetcher(...args).then(r => r.clone());
 
-const worker = typeof Worker === 'undefined'
-	? undefined
-	: Comlink.wrap(
-		new Worker(new URL('./repl.worker.js', import.meta.url), {
-			type: 'module'
-		})
-	);
+const worker = Comlink.wrap(
+	new Worker(new URL('./repl.worker.js', import.meta.url), {
+		type: 'module'
+	})
+);
 
 function createRoot(doc) {
 	const root = doc.createElement('div');

diff --git a/src/components/controllers/tutorial/index.jsx b/src/components/controllers/tutorial/index.jsx
@@ -21,8 +21,6 @@ import { useLanguage } from '../../../lib/i18n';
 import { Splitter } from '../../splitter';
 import config from '../../../config.json';
 import { MarkdownRegion } from '../markdown-region';
-import CodeEditor from '../../code-editor';
-import Runner from '../repl/runner';
 
 const TUTORIAL_COMPONENTS = {
 	pre: TutorialCodeBlock,
@@ -82,10 +80,18 @@ export class Tutorial extends Component {
 	}
 
 	componentDidMount() {
-		// Load transpiler
-		Runner.worker.ping().then(() => {
-			this.setState({
-				loading: false
+		Promise.all([
+			import('../../code-editor'),
+			import('../repl/runner')
+		]).then(([CodeEditor, Runner]) => {
+			this.CodeEditor = CodeEditor.default;
+			this.Runner = Runner.default;
+
+			// Load transpiler
+			this.Runner.worker.ping().then(() => {
+				this.setState({
+					loading: false
+				});
 			});
 		});
 	}
@@ -135,7 +141,9 @@ export class Tutorial extends Component {
 			routerLoading,
 			tutorialLoading,
 			code,
-			error
+			error,
+			Runner: this.Runner,
+			CodeEditor: this.CodeEditor
 		};
 		return (
 			<TutorialContext.Provider value={this}>
@@ -152,6 +160,8 @@ function TutorialView({
 	tutorialLoading,
 	code,
 	error,
+	Runner,
+	CodeEditor,
 	clearError
 }) {
 	const content = useRef(null);
@@ -167,7 +177,7 @@ function TutorialView({
 	const solvable = meta.solvable === true;
 	const hasCode = meta.code !== false;
 	const showCode = showCodeOverride && hasCode;
-	const initialLoad = !html;
+	const initialLoad = !html || !Runner || !CodeEditor;
 
 	// Scroll to the top after loading
 	useEffect(() => {
@@ -201,7 +211,7 @@ function TutorialView({
 							<>
 								<div class={style.output} key="output">
 									{!initialLoad && (
-										<Runner
+										<this.Runner
 											key={path}
 											ref={tutorial.runner}
 											onSuccess={tutorial.onSuccess}
@@ -243,7 +253,7 @@ function TutorialView({
 					>
 						<div class={style.codeWindow}>
 							{!initialLoad && code && (
-								<CodeEditor
+								<this.CodeEditor
 									key="editor"
 									class={style.code}
 									value={code}
@@ -345,8 +355,6 @@ function ReplWrapper({
 }
 
 /** Handles all code blocks (and <pre>'s) in tutorial markup */
-// TODO: Move this into meta data, parse it out AOT. We don't need
-// to do this on the client.
 function TutorialCodeBlock(props) {
 	const tutorial = useContext(TutorialContext);
 	const child = [].concat(props.children)[0];