chore(create-pyth-package): web-apps generator uses app shell now

Author: benduran

packages/create-pyth-package/src/create-pyth-package.ts

@@ -15,6 +15,7 @@ import prompts from "prompts";
 import type { PackageJson } from "type-fest";
 
 import { getAvailableFolders } from "./get-available-folders.js";
+import { getTakenPorts } from "./get-taken-ports.js";
 import { Logger } from "./logger.js";
 import type {
   CreatePythAppResponses,
@@ -70,6 +71,8 @@ function getTemplatesInputFolder(packageType: PackageType) {
 }
 
 async function createPythApp() {
+  const takenServerPorts = getTakenPorts();
+
   const responses = (await prompts([
     {
       choices: Object.values(PackageType).map((val) => ({
@@ -117,6 +120,25 @@ async function createPythApp() {
       type: (_, { packageType }: InProgressCreatePythAppResponses) =>
         packageType === PackageType.WEBAPP ? false : "select",
     },
+    {
+      message:
+        "On which port do you want your web application server to listen?",
+      name: "serverPort",
+      type: (_, { packageType }: InProgressCreatePythAppResponses) =>
+        packageType === PackageType.WEBAPP ? "number" : false,
+      validate: (port: number | string) => {
+        const portStr = String(port);
+        const taken = takenServerPorts.has(Number(port));
+        const portHasFourDigits = portStr.length >= 4;
+        if (taken) {
+          return `${portStr} is already taken by another application. Please choose another port.`;
+        }
+        if (!portHasFourDigits) {
+          return "please specify a port that has at least 4 digits";
+        }
+        return true;
+      },
+    },
     {
       message:
         "Are you intending on publishing this, publicly on NPM, for users outside of our org to use?",
@@ -144,8 +166,15 @@ async function createPythApp() {
     },
   ])) as CreatePythAppResponses;
 
-  const { confirm, description, folder, isPublic, packageName, packageType } =
-    responses;
+  const {
+    confirm,
+    description,
+    folder,
+    isPublic,
+    packageName,
+    packageType,
+    serverPort,
+  } = responses;
 
   if (!confirm) {
     Logger.warn("oops, you did not confirm your choices.");
@@ -188,6 +217,7 @@ async function createPythApp() {
           name: packageNameWithOrg,
           packageNameWithoutOrg,
           relativeFolder: relDest,
+          serverPort,
         });
         await fs.writeFile(fp, updatedContents, "utf8");
 
@@ -216,6 +246,8 @@ async function createPythApp() {
   execSync("pnpm i", { cwd: appRootPath.toString(), stdio: "inherit" });
 
   Logger.info(`Done! ${packageNameWithOrg} is ready for development`);
+  Logger.info("please checkout your package's README for more information:");
+  Logger.info(`  ${path.join(relDest, "README.md")}`);
 }
 
 await createPythApp();

packages/create-pyth-package/src/get-all-monorepo-packages.ts

@@ -0,0 +1,25 @@
+import { execSync } from "node:child_process";
+
+import appRootPath from "app-root-path";
+
+export type PNPMPackageInfo = {
+  name: string;
+  path: string;
+  private: boolean;
+  version: string;
+};
+
+/**
+ * returns basic info about all of the monorepo packages available in
+ * the pyth crosschain repo
+ */
+export function getAllMonorepoPackages(repoRoot = appRootPath.toString()) {
+  const allPackages = JSON.parse(
+    execSync("pnpm list --recursive --depth -1 --json", {
+      cwd: repoRoot,
+      stdio: "pipe",
+    }).toString("utf8"),
+  ) as PNPMPackageInfo[];
+
+  return allPackages;
+}

packages/create-pyth-package/src/get-available-folders.ts

@@ -1,14 +1,8 @@
-import { execSync } from "node:child_process";
 import path from "node:path";
 
 import appRootPath from "app-root-path";
 
-type PNPMPackageInfo = {
-  name: string;
-  path: string;
-  private: boolean;
-  version: string;
-};
+import { getAllMonorepoPackages } from "./get-all-monorepo-packages.js";
 
 const repoRoot = appRootPath.toString();
 
@@ -18,12 +12,7 @@ const repoRoot = appRootPath.toString();
  * directories for those, as a way to present the folder choice to the user.
  */
 export function getAvailableFolders() {
-  const allPackages = JSON.parse(
-    execSync("pnpm list --recursive --depth -1 --json", {
-      cwd: repoRoot,
-      stdio: "pipe",
-    }).toString("utf8"),
-  ) as PNPMPackageInfo[];
+  const allPackages = getAllMonorepoPackages();
 
   return [
     ...new Set(

packages/create-pyth-package/src/get-taken-ports.ts

@@ -0,0 +1,38 @@
+import path from "node:path";
+
+import fs from "fs-extra";
+import type { PackageJson } from "type-fest";
+
+import { getAllMonorepoPackages } from "./get-all-monorepo-packages.js";
+
+/**
+ * scrapes the entire monorepo to see what next.js ports
+ * are already taken and returns a Set() containing these ports
+ * to assist the user in choosing one that doesn't have a collision
+ */
+export function getTakenPorts() {
+  // "start:dev": "next dev --port 3003",
+  //   "start:prod": "next start --port 3003",
+  const allPackages = getAllMonorepoPackages();
+
+  const out = new Set<number>();
+
+  for (const info of allPackages) {
+    const pjsonPath = path.join(info.path, "package.json");
+    const pjson = JSON.parse(fs.readFileSync(pjsonPath, "utf8")) as PackageJson;
+    const scripts = pjson.scripts ?? {};
+
+    for (const scriptVal of Object.values(scripts)) {
+      if (!scriptVal) continue;
+      if (!scriptVal.includes("next ")) continue;
+
+      const [, portViaFlagStr = ""] = /--port\s+(\d+)/.exec(scriptVal) ?? [];
+      const [, portViaEnvStr = ""] = /^PORT=(\d+)/.exec(scriptVal) ?? [];
+      const port = Number(portViaFlagStr || portViaEnvStr);
+
+      if (!Number.isNaN(port)) out.add(port);
+    }
+  }
+
+  return out;
+}

packages/create-pyth-package/src/templates/cli/.prettierignore

@@ -11,3 +11,4 @@ build/
 node_modules/
 package.json
 tsconfig*.json
+turbo.json

packages/create-pyth-package/src/templates/library/.prettierignore

@@ -11,3 +11,4 @@ build/
 node_modules/
 package.json
 tsconfig*.json
+turbo.json

packages/create-pyth-package/src/templates/web-app/.prettierignore

@@ -11,3 +11,4 @@ build/
 node_modules/
 package.json
 tsconfig*.json
+turbo.json

packages/create-pyth-package/src/templates/web-app/package.json

@@ -17,9 +17,10 @@
     "fix:format": "prettier --write .",
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
-    "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=TODO_FILL_ME_IN vercel env pull",
-    "start:dev": "next dev --port 3003",
-    "start:prod": "next start --port 3003",
+    "pull:env": "echo 'once {{name}} has been setup in the Vercel UI, you can replace this script with the contents in the pull:env:placeholder, below, as well as the VERCEL_PROJECT_ID variable value'",
+    "pull:env:placeholder": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=TODO_FILL_ME_IN vercel env pull",
+    "start:dev": "next dev --port {{serverPort}}",
+    "start:prod": "next start --port {{serverPort}}",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",
     "test:lint:stylelint": "stylelint 'src/**/*.scss' --max-warnings 0",
@@ -46,10 +47,12 @@
   "dependencies": {
     "@next/third-parties": "catalog:",
     "@pythnetwork/component-library": "workspace:*",
+    "@pythnetwork/react-hooks": "workspace:*",
     "@react-hookz/web": "catalog:",
     "clsx": "catalog:",
     "framer-motion": "catalog:",
     "next": "catalog:",
+    "nuqs": "catalog:",
     "pino": "catalog:",
     "react": "catalog:",
     "react-aria": "catalog:",

packages/create-pyth-package/src/templates/web-app/src/app/globals.scss

@@ -1,13 +1,9 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-}
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: "Geist Sans", Arial, Helvetica, sans-serif;
+  --font-mono: "Geist Mono", monospace;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -20,5 +16,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans);
 }

packages/create-pyth-package/src/templates/web-app/src/app/layout.tsx

@@ -1,6 +1,9 @@
+import { AppShell } from "@pythnetwork/component-library/AppShell";
+import { NuqsAdapter } from "@pythnetwork/react-hooks/nuqs-adapters-next";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "./globals.scss";
+import type { ReactNode } from "react";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,21 +16,27 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "{{packageNameWithoutOrg}}",
+  description: "{{description}}",
 };
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <html lang="en">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <AppShell
+          appName="{{packageNameWithoutOrg}}"
+          enableAccessibilityReporting
+          providers={[NuqsAdapter]}
+        >
+          {children}
+        </AppShell>
       </body>
     </html>
   );