Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add JS editor to playground #679

Merged
merged 3 commits into from
Aug 21, 2024
Merged

Conversation

wkazmierczak
Copy link
Collaborator

@wkazmierczak wkazmierczak commented Aug 20, 2024

  • Add JS editor to playground
  • Make entered code runnable
    image

@wkazmierczak wkazmierczak linked an issue Aug 20, 2024 that may be closed by this pull request
@wkazmierczak wkazmierczak marked this pull request as ready for review August 21, 2024 12:39
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

monacoEditor

/**
* from https://github.com/facebook/react/blob/d906de7f602df810c38aa622c83023228b047db6/scripts/babel/transform-prevent-infinite-loops.js
*/
// biome-ignore lint/suspicious/noExplicitAny:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// biome-ignore lint/suspicious/noExplicitAny:

};
};

export default async function playgroundReactRunner(code: string) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

name implies that this returns some statetfull runner, but If I understand correctly this is a single run

Suggested change
export default async function playgroundReactRunner(code: string) {
export default async function executeTypescriptCode(code: string) {

import type TemplateGenerator from '@babel/template';
import { tsCompilerOptions } from './monacoEditorConfig';

function tsToJs(code: string): string {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe inline that, not sure if extracting this to function helps here

Comment on lines 75 to 83
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const codeEditorMode = params.get('mode');
if (codeEditorMode === 'react') {
setShowReactEditor(true);
} else {
setShowReactEditor(false);
}
}, []);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const codeEditorMode = params.get('mode');
if (codeEditorMode === 'react') {
setShowReactEditor(true);
} else {
setShowReactEditor(false);
}
}, []);
const showReactEditor = new URLSearchParams(window.location.search).get('mode') === 'react';

wouldn't this work?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

error while building, because of client-side only code, but i have refactor this useEffect to make it simpler

@wkazmierczak wkazmierczak merged commit 02b1aea into playground Aug 21, 2024
2 checks passed
@wkazmierczak wkazmierczak deleted the @wkazmierczak/react-editor branch August 21, 2024 15:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[playground] Add JS editor to the playground
2 participants