Skip to content

Commit

Permalink
Merge pull request #33 from mikeytown19/issue/21
Browse files Browse the repository at this point in the history
feat: can now pass empty value to snippet
  • Loading branch information
agneym authored Aug 14, 2021
2 parents 432a12f + c113305 commit d71901e
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 34 deletions.
2 changes: 1 addition & 1 deletion example/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Playground from "@agney/playground";
const App = () => {
const snippet = {
markup: `<div id=app />`,
css: ``,
css: `div { color: red }`,
javascript: `import { h, Component, render } from 'preact';
import htm from 'htm';
Expand Down
56 changes: 33 additions & 23 deletions playground/src/Editor/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 {
Expand All @@ -23,34 +23,44 @@ interface IProps {
}

const Editor: FC<IProps> = ({ code, defaultTab, onChange, width }) => {
const tabs: Readonly<ITabConfig<IEditorTabs>[]> = useMemo(
() => [
{ name: "HTML", value: "markup" },
{ name: "CSS", value: "css" },
{ name: "JS", value: "javascript" },
],
[]
);
const tabs: Readonly<ITabConfig<IEditorTabs>[]> = 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 (
<TabContainer
defaultIndex={tabs.findIndex(tab => tab.value === defaultTab)}
defaultIndex={tabs.findIndex(
(tab) => tab.code && tab.value === defaultTab
)}
style={{ width: width }}
>
<StyledTabList>
{tabs.map(tab => (
<StyledTab key={tab.value}>{tab.name}</StyledTab>
))}
{tabs.map(
(tab) => tab.code && <StyledTab key={tab.value}>{tab.name}</StyledTab>
)}
</StyledTabList>
<StyledTabPanels>
{tabs.map(tab => (
<StyledTabPanel key={tab.value}>
<EditorSetup
code={code[tab.value]}
onChange={onChange}
language={tab.value}
/>
</StyledTabPanel>
))}
{tabs.map(
(tab) =>
tab.code && (
<StyledTabPanel key={tab.value}>
<EditorSetup
code={tab.code}
onChange={onChange}
language={tab.value}
/>
</StyledTabPanel>
)
)}
</StyledTabPanels>
</TabContainer>
);
Expand Down
12 changes: 6 additions & 6 deletions playground/src/Result/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,20 @@ const Result: FC<IProps> = ({
const [logs, setLogs] = useState<unknown[]>([]);
const tabs: Readonly<ITabConfig<IResultTabs>[]> = 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]);
}
});
}
Expand All @@ -53,11 +53,11 @@ const Result: FC<IProps> = ({
}, [id]);
return (
<StyledTabs
defaultIndex={tabs.findIndex(tab => tab.value === defaultTab)}
defaultIndex={tabs.findIndex((tab) => tab.value === defaultTab)}
style={{ width: width }}
>
<StyledTabList>
{tabs.map(tab => (
{tabs.map((tab) => (
<StyledTab key={tab.value}>{tab.name}</StyledTab>
))}
</StyledTabList>
Expand Down
43 changes: 39 additions & 4 deletions playground/src/__tests__/Editor.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,24 @@ import { render } from "../../scripts/test-utils";

import Editor from "../Editor";

const initialSnippet = {
markup: ``,
const emptySnippet = {
markup: `<div id=app />`,
css: ``,
javascript: ``,
javascript: `import htm from 'htm'`,
};

const snippet = {
markup: `<div id=app />`,
css: `div {color: red;}`,
javascript: `import { h, Component, render } from 'preact';
import htm from 'htm';
const html = htm.bind(h);
const app = html\`<div>Hello World from Playground!</div>\`
render(app, document.getElementById('app'));
`,
};

describe("Editor", () => {
Expand All @@ -15,12 +29,33 @@ describe("Editor", () => {
const { getByText } = render(
<Editor
width={40}
code={initialSnippet}
code={snippet}
defaultTab={defaultTab}
onChange={() => {}}
/>
);
const button = getByText("CSS");
expect(button.getAttribute("data-selected")).toBe("");
});

it("should render only the tabs that provided code", () => {
const defaultTab = "markup";
const { getByText, queryByText } = render(
<Editor
width={40}
code={emptySnippet}
defaultTab={defaultTab}
onChange={() => {}}
/>
);

const htmlTab = getByText("HTML");
const javascriptTab = getByText("JS");

expect(htmlTab).toBeTruthy();
expect(javascriptTab).toBeTruthy();

const cssTab = queryByText("CSS");
expect(cssTab).toBeFalsy();
});
});
1 change: 1 addition & 0 deletions playground/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export type IEditorTabs = "markup" | "css" | "javascript";
export type IResultTabs = "result" | "console";

export interface ITabConfig<T> {
code?: string;
name: string;
value: T;
}

0 comments on commit d71901e

Please sign in to comment.