refactor: add components/ in starter project (#353)

This commit adds a `components/` folder to the starter project to
indicate that one can also create components that are not themselves
islands.

Author: asrvd

README.md

@@ -30,7 +30,7 @@ You can scaffold a new project by running the Fresh init script. To scaffold a
 project in the `my-project` folder, run the following:
 
 ```sh
-deno run -A -r https://fresh.deno.dev my-project
+deno run -A -r https://fresh.deno.dev deno-fresh-demo
 ```
 
 Then navigate to the newly created project folder:

init.ts

@@ -86,6 +86,7 @@ const useVSCode = flags.vscode === null
 await Deno.mkdir(join(resolvedDirectory, "routes", "api"), { recursive: true });
 await Deno.mkdir(join(resolvedDirectory, "islands"), { recursive: true });
 await Deno.mkdir(join(resolvedDirectory, "static"), { recursive: true });
+await Deno.mkdir(join(resolvedDirectory, "components"), { recursive: true });
 if (useVSCode) {
   await Deno.mkdir(join(resolvedDirectory, ".vscode"), { recursive: true });
 }
@@ -140,57 +141,52 @@ await Deno.writeTextFile(
   ROUTES_INDEX_TSX,
 );
 
-let ISLANDS_COUNTER_TSX = `/** @jsx h */
+const COMPONENTS_BUTTON_TSX = `/** @jsx h */
 import { h } from "preact";
-import { useState } from "preact/hooks";
 import { IS_BROWSER } from "$fresh/runtime.ts";
 ${useTwind ? 'import { tw } from "@twind";\n' : ""}
+export function Button(props: h.JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      disabled={!IS_BROWSER || props.disabled}
+    ${
+  useTwind
+    ? "  class={tw\`px-2 py-1 border(gray-100 2) hover:bg-gray-200\`}\n    "
+    : ""
+}/>
+  );
+}
+`;
+await Deno.writeTextFile(
+  join(resolvedDirectory, "components", "Button.tsx"),
+  COMPONENTS_BUTTON_TSX,
+);
+
+const ISLANDS_COUNTER_TSX = `/** @jsx h */
+import { h } from "preact";
+import { useState } from "preact/hooks";
+${useTwind ? 'import { tw } from "@twind";\n' : ""}
+import { Button } from "../components/Button.tsx";
+
 interface CounterProps {
   start: number;
 }
 
 export default function Counter(props: CounterProps) {
   const [count, setCount] = useState(props.start);
-`;
-
-if (useTwind) {
-  ISLANDS_COUNTER_TSX +=
-    `  const btn = tw\`px-2 py-1 border(gray-100 1) hover:bg-gray-200\`;\n`;
-  ISLANDS_COUNTER_TSX += `  return (
-    <div class={tw\`flex gap-2 w-full\`}>
-      <p class={tw\`flex-grow-1 font-bold text-xl\`}>{count}</p>
-      <button
-        class={btn}
-        onClick={() => setCount(count - 1)}
-        disabled={!IS_BROWSER}
-      >
-        -1
-      </button>
-      <button
-        class={btn}
-        onClick={() => setCount(count + 1)}
-        disabled={!IS_BROWSER}
-      >
-        +1
-      </button>
-    </div>
-  );
-`;
-} else {
-  ISLANDS_COUNTER_TSX += `  return (
-    <div>
-      <p>{count}</p>
-      <button onClick={() => setCount(count - 1)} disabled={!IS_BROWSER}>
-        -1
-      </button>
-      <button onClick={() => setCount(count + 1)} disabled={!IS_BROWSER}>
-        +1
-      </button>
+  return (
+    <div${useTwind ? " class={tw\`flex gap-2 w-full\`}" : ""}>
+      <p${
+  useTwind ? " class={tw\`flex-grow-1 font-bold text-xl\`}" : ""
+}>{count}</p>
+      <Button onClick={() => setCount(count - 1)}>-1</Button>
+      <Button onClick={() => setCount(count + 1)}>+1</Button>
     </div>
   );
-`;
 }
-ISLANDS_COUNTER_TSX += `}\n`;
+`;
+
 await Deno.writeTextFile(
   join(resolvedDirectory, "islands", "Counter.tsx"),
   ISLANDS_COUNTER_TSX,

tests/cli_test.ts

@@ -66,6 +66,13 @@ Deno.test({
           { "type": "file", "name": "README.md" },
           { "type": "file", "name": "import_map.json" },
           { "type": "file", "name": "fresh.gen.ts" },
+          {
+            "type": "directory",
+            "name": "components",
+            "contents": [
+              { "type": "file", "name": "Button.tsx" },
+            ],
+          },
           {
             "type": "directory",
             "name": "islands",
@@ -152,7 +159,6 @@ Deno.test({
       await delay(100);
 
       counterValue = await counter?.evaluate((el) => el.textContent);
-      console.log(counterValue);
       assert(counterValue === "4");
       await page.close();
       await browser.close();
@@ -200,6 +206,13 @@ Deno.test({
           { "type": "file", "name": "README.md" },
           { "type": "file", "name": "import_map.json" },
           { "type": "file", "name": "fresh.gen.ts" },
+          {
+            "type": "directory",
+            "name": "components",
+            "contents": [
+              { "type": "file", "name": "Button.tsx" },
+            ],
+          },
           {
             "type": "directory",
             "name": "islands",