diff --git a/README.md b/README.md index 8873512..775ae4e 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ https://www.agney.dev/blog/introducing-playground | transformJs | Transform the JavaScript using Babel. This is required if you want bare module imports | false | false | | presets | Array of presets you want Babel to transform. This works only if transformJs is true. Eg. `["react", "es2015"]` | | false | | theme | Pass in the theme variables to customise the appearance | [Our Theme](https://github.com/agneym/playground/blob/master/playground/src/utils/theme.ts) | false | +| showConsole | Controls the visibility of the console tab. Possible values: `true`, `false` | `true` | false | ### Format for initial snippet diff --git a/example/src/index.js b/example/src/index.js index 32b8ea7..18bbd37 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -22,6 +22,7 @@ const app = html\` render(app, document.getElementById('app')); `, }; + return (
); diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx index 501bad0..bb8e840 100644 --- a/playground/src/Playground.tsx +++ b/playground/src/Playground.tsx @@ -31,6 +31,7 @@ interface IProps { id?: string; theme?: DefaultTheme; mode: ColorMode; + showConsole?: boolean; } const Playground: FC = ({ @@ -42,6 +43,7 @@ const Playground: FC = ({ presets = [], theme, mode = "light", + showConsole = true, }) => { const [snippet, setSnippet] = useState(initialSnippet); const id = useId(userId) as string; @@ -73,6 +75,7 @@ const Playground: FC = ({ defaultTab={defaultResultTab} transformJs={transformJs} presets={presets} + showConsole={showConsole} /> )} /> diff --git a/playground/src/Result/index.tsx b/playground/src/Result/index.tsx index be79680..ee52057 100644 --- a/playground/src/Result/index.tsx +++ b/playground/src/Result/index.tsx @@ -18,6 +18,7 @@ interface IProps { transformJs: boolean; presets: string[]; width: number; + showConsole?: boolean; } const Result: FC = ({ @@ -27,14 +28,17 @@ const Result: FC = ({ defaultTab, transformJs, width, + showConsole = true, }) => { const [logs, setLogs] = useState([]); const tabs: Readonly[]> = useMemo( () => [ { name: "Result", value: "result" as IResultTabs }, - { name: "Console", value: "console" as IResultTabs }, + ...(showConsole + ? [{ name: "Console", value: "console" as IResultTabs }] + : []), ], - [] + [showConsole] ); useEffect(() => { function waitForMessage() {