Merge pull request #33 from mikeytown19/issue/21

feat: can now pass empty value to snippet

Author: agneym

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