From f49be3e93cd91a61b6f7af94aaf94ad8685f08c6 Mon Sep 17 00:00:00 2001 From: Mike Harvey Date: Fri, 13 Aug 2021 09:34:18 -0600 Subject: [PATCH 1/3] feat: can now pass empty value to snippet --- playground/src/Editor/index.tsx | 45 ++++++++++++++---------- playground/src/__tests__/Editor.test.tsx | 40 ++++++++++++++++++--- playground/src/types.ts | 1 + 3 files changed, 64 insertions(+), 22 deletions(-) diff --git a/playground/src/Editor/index.tsx b/playground/src/Editor/index.tsx index a73a86e..f3fdf15 100644 --- a/playground/src/Editor/index.tsx +++ b/playground/src/Editor/index.tsx @@ -1,5 +1,5 @@ import React, { FC, useMemo } from "react"; -import {styled} from "goober"; +import { styled } from "goober"; import { IEditorTabs, ISnippet } from "../types"; import EditorSetup from "./EditorSetup"; import { ITabConfig } from "../types"; @@ -12,7 +12,7 @@ import { } from "../TabStyles"; const TabContainer = styled(StyledTabs)` - min-width: ${props => props.theme.container.minWidth}; + min-width: ${(props) => props.theme.container.minWidth}; `; interface IProps { @@ -25,32 +25,41 @@ interface IProps { const Editor: FC = ({ code, defaultTab, onChange, width }) => { const tabs: Readonly[]> = useMemo( () => [ - { name: "HTML", value: "markup" }, - { name: "CSS", value: "css" }, - { name: "JS", value: "javascript" }, + ...(code.markup && [ + { name: "HTML", value: "markup", code: code.markup }, + ]), + ...(code.css && [{ name: "CSS", value: "css", code: code.css }]), + ...(code.javascript && [ + { name: "JS", value: "javascript", code: code.javascript }, + ]), ], [] ); return ( tab.value === defaultTab)} + defaultIndex={tabs.findIndex( + (tab) => tab.code && tab.value === defaultTab + )} style={{ width: width }} > - {tabs.map(tab => ( - {tab.name} - ))} + {tabs.map( + (tab) => tab.code && {tab.name} + )} - {tabs.map(tab => ( - - - - ))} + {tabs.map( + (tab) => + tab.code && ( + + + + ) + )} ); diff --git a/playground/src/__tests__/Editor.test.tsx b/playground/src/__tests__/Editor.test.tsx index 6e0a1f5..acb6bab 100644 --- a/playground/src/__tests__/Editor.test.tsx +++ b/playground/src/__tests__/Editor.test.tsx @@ -3,10 +3,24 @@ import { render } from "../../scripts/test-utils"; import Editor from "../Editor"; -const initialSnippet = { - markup: ``, +const emptySnippet = { + markup: `
`, css: ``, - javascript: ``, + javascript: `import htm from 'htm'`, +}; + +const snippet = { + markup: `
`, + css: `div {color: red;}`, + javascript: `import { h, Component, render } from 'preact'; +import htm from 'htm'; + +const html = htm.bind(h); + +const app = html\`
Hello World from Playground!
\` + +render(app, document.getElementById('app')); + `, }; describe("Editor", () => { @@ -15,7 +29,7 @@ describe("Editor", () => { const { getByText } = render( {}} /> @@ -23,4 +37,22 @@ describe("Editor", () => { const button = getByText("CSS"); expect(button.getAttribute("data-selected")).toBe(""); }); + + it("should render only the tabs that provided code", () => { + const defaultTab = "markup"; + const { getByText, container, debug } = render( + {}} + /> + ); + + const html = getByText("HTML"); + const javascript = getByText("JS"); + + expect(html).toBeTruthy(); + expect(javascript).toBeTruthy(); + }); }); diff --git a/playground/src/types.ts b/playground/src/types.ts index 49bb260..5a09ae0 100644 --- a/playground/src/types.ts +++ b/playground/src/types.ts @@ -8,6 +8,7 @@ export type IEditorTabs = "markup" | "css" | "javascript"; export type IResultTabs = "result" | "console"; export interface ITabConfig { + code: string; name: string; value: T; } From 56352c1a918a6b9a69455e6c0a131f22dd89d0f4 Mon Sep 17 00:00:00 2001 From: Agney Date: Sun, 15 Aug 2021 03:16:31 +0530 Subject: [PATCH 2/3] if certain tab is not included, do not add tab to the list --- example/src/index.js | 2 +- playground/src/Editor/index.tsx | 25 +++++++++++++------------ playground/src/Result/index.tsx | 12 ++++++------ playground/src/types.ts | 2 +- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/example/src/index.js b/example/src/index.js index 6fcd4bf..15c4c5e 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -7,7 +7,7 @@ import Playground from "@agney/playground"; const App = () => { const snippet = { markup: `
`, - css: ``, + css: `div { color: red }`, javascript: `import { h, Component, render } from 'preact'; import htm from 'htm'; diff --git a/playground/src/Editor/index.tsx b/playground/src/Editor/index.tsx index f3fdf15..8c0624c 100644 --- a/playground/src/Editor/index.tsx +++ b/playground/src/Editor/index.tsx @@ -23,18 +23,19 @@ interface IProps { } const Editor: FC = ({ code, defaultTab, onChange, width }) => { - const tabs: Readonly[]> = useMemo( - () => [ - ...(code.markup && [ - { name: "HTML", value: "markup", code: code.markup }, - ]), - ...(code.css && [{ name: "CSS", value: "css", code: code.css }]), - ...(code.javascript && [ - { name: "JS", value: "javascript", code: code.javascript }, - ]), - ], - [] - ); + const tabs: Readonly[]> = useMemo(() => { + const tabsArr = []; + if (code.markup) { + tabsArr.push({ name: "HTML", value: "markup", code: code.markup }); + } + if (code.css) { + tabsArr.push({ name: "CSS", value: "css", code: code.css }); + } + if (code.javascript) { + tabsArr.push({ name: "JS", value: "javascript", code: code.javascript }); + } + return tabsArr; + }, []); return ( = ({ const [logs, setLogs] = useState([]); const tabs: Readonly[]> = useMemo( () => [ - { name: "Result", value: "result" }, - { name: "Console", value: "console" }, + { name: "Result", value: "result" as IResultTabs }, + { name: "Console", value: "console" as IResultTabs }, ], [] ); useEffect(() => { function waitForMessage() { if (typeof window !== "undefined") { - window.addEventListener("message", data => { + window.addEventListener("message", (data) => { if ( data.data.source === `frame-${id}` && data.data.message.type === "log" ) { - setLogs(prevLogs => [...prevLogs, ...data.data.message.data]); + setLogs((prevLogs) => [...prevLogs, ...data.data.message.data]); } }); } @@ -53,11 +53,11 @@ const Result: FC = ({ }, [id]); return ( tab.value === defaultTab)} + defaultIndex={tabs.findIndex((tab) => tab.value === defaultTab)} style={{ width: width }} > - {tabs.map(tab => ( + {tabs.map((tab) => ( {tab.name} ))} diff --git a/playground/src/types.ts b/playground/src/types.ts index 5a09ae0..c33a329 100644 --- a/playground/src/types.ts +++ b/playground/src/types.ts @@ -8,7 +8,7 @@ export type IEditorTabs = "markup" | "css" | "javascript"; export type IResultTabs = "result" | "console"; export interface ITabConfig { - code: string; + code?: string; name: string; value: T; } From c1133059dd382839aa4a8ac63903452e49591a0a Mon Sep 17 00:00:00 2001 From: Agney Date: Sun, 15 Aug 2021 03:16:46 +0530 Subject: [PATCH 3/3] make sure the non existing tab is not displayed --- playground/src/__tests__/Editor.test.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/playground/src/__tests__/Editor.test.tsx b/playground/src/__tests__/Editor.test.tsx index acb6bab..98c16ca 100644 --- a/playground/src/__tests__/Editor.test.tsx +++ b/playground/src/__tests__/Editor.test.tsx @@ -40,7 +40,7 @@ describe("Editor", () => { it("should render only the tabs that provided code", () => { const defaultTab = "markup"; - const { getByText, container, debug } = render( + const { getByText, queryByText } = render( { /> ); - const html = getByText("HTML"); - const javascript = getByText("JS"); + const htmlTab = getByText("HTML"); + const javascriptTab = getByText("JS"); - expect(html).toBeTruthy(); - expect(javascript).toBeTruthy(); + expect(htmlTab).toBeTruthy(); + expect(javascriptTab).toBeTruthy(); + + const cssTab = queryByText("CSS"); + expect(cssTab).toBeFalsy(); }); });