npm - create-waku - Versions diffs - 0.5.3 → 0.6.0 - Mend

create-waku 0.5.3 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

package/template/11_form/src/components/App.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import { Counter } from "./Counter.js";
+import { Form } from "./Form.js";
+import { getMessage, greet, increment } from "./funcs.js";
+type ServerFunction<T> = T extends (...args: infer A) => infer R
+  ? (...args: A) => Promise<R>
+  : never;
+const App = ({ name }: { name: string }) => {
+  return (
+    <div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
+      <h1>Hello {name}!!</h1>
+      <h3>This is a server component.</h3>
+      <Counter
+        increment={increment as unknown as ServerFunction<typeof increment>}
+      />
+      <Form
+        message={getMessage()}
+        greet={greet as unknown as ServerFunction<typeof greet>}
+      />
+    </div>
+  );
+};
+export default App;

package/template/11_form/src/components/Counter.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+/// <reference types="react/canary" />
+/// <reference types="react-dom/canary" />
+"use client";
+import { useFormState, useFormStatus } from "react-dom";
+const FormStatus = () => {
+  const { pending } = useFormStatus();
+  return pending ? "Pending..." : null;
+};
+export const Counter = ({
+  increment,
+}: {
+  increment: (count: number) => Promise<number>;
+}) => {
+  const [count, dispatch] = useFormState(increment, 0);
+  return (
+    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+      <form>
+        <p>Count: {count}</p>
+        <button formAction={dispatch}>Increment</button>
+        <FormStatus />
+      </form>
+      <h3>This is a client component.</h3>
+    </div>
+  );
+};

package/template/11_form/src/components/Form.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+/// <reference types="react/canary" />
+/// <reference types="react-dom/canary" />
+"use client";
+import { useFormStatus } from "react-dom";
+const SubmitButton = () => {
+  const { pending } = useFormStatus();
+  return (
+    <>
+      <button disabled={pending} type="submit">
+        Submit
+      </button>
+      {pending ? "Pending..." : null}
+    </>
+  );
+};
+export const Form = ({
+  message,
+  greet,
+}: {
+  message: string;
+  greet: (formData: FormData) => Promise<void>;
+}) => (
+  <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
+    <p>{message}</p>
+    <form action={greet}>
+      Name: <input name="name" />
+      <SubmitButton />
+    </form>
+    <h3>This is a client component.</h3>
+  </div>
+);

package/template/11_form/src/components/funcs.ts ADDED Viewed

@@ -0,0 +1,15 @@
+"use server";
+import { rerender } from "waku/server";
+// module state on server
+let message = "";
+export const getMessage = () => message;
+export const greet = (formData: FormData) => {
+  message = `Hello ${formData.get("name") || "Anonymous"} from server!`;
+  rerender("");
+};
+export const increment = (count: number) => count + 1;

package/template/11_form/src/entries.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { lazy } from "react";
+import { defineEntries } from "waku/server";
+const App = lazy(() => import("./components/App.js"));
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: <App name={input || "Waku"} />,
+    };
+  },
+  // getBuildConfig
+  async () => {
+    return {
+      "/": {
+        entries: [[""]],
+      },
+    };
+  },
+  // getSsrConfig
+  () => ({
+    getInput: async (pathStr) => {
+      switch (pathStr) {
+        case "/":
+          return "";
+        default:
+          return null;
+      }
+    },
+    filter: (elements) => elements.App,
+  }),
+);

package/template/11_form/src/index.html ADDED Viewed

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Waku example</title>
+    <style>
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .spinner {
+        width: 36px;
+        height: 36px;
+        margin: auto;
+        border: 2px solid #ddd;
+        border-top-color: #222;
+        border-radius: 50%;
+        animation: spinner 1s linear infinite;
+      }
+      #root > .spinner {
+        margin-top: calc(50% - 18px);
+      }
+    </style>
+  </head>
+  <body>
+    <!--placeholder1-->
+    <div id="root">
+      <div class="spinner"></div>
+    </div>
+    <!--/placeholder1-->
+    <script src="/main.tsx" async type="module"></script>
+    <!--placeholder2-->
+    <!--/placeholder2-->
+  </body>
+</html>

package/template/11_form/src/main.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Root, Slot } from "waku/client";
+const rootElement = (
+  <StrictMode>
+    <Root>
+      <Slot id="App" />
+    </Root>
+  </StrictMode>
+);
+createRoot(document.getElementById("root")!).render(rootElement);

package/template/11_form/tsconfig.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  }
+}