Merge pull request #33 from mikeytown19/issue/21

feat: can now pass empty value to snippet

example/src/index.js

@@ -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';
 

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 {
@@ -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>
  );

playground/src/Result/index.tsx

@@ -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]);
  }
  });
  }
@@ -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>

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: `<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", () => {
@@ -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();
+ });
 });

playground/src/types.ts

@@ -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;
 }