create-lumen 2.0.0-alpha.2 → 2.0.0-beta.2

package/templates/conditional/next/server-components/rules/no-server-imports-in-client.js

@@ -0,0 +1,89 @@
+/**
+ * ESLint Rule: rsc/no-server-imports-in-client
+ *
+ * Enforces server/client boundaries in React Server Components (RSC).
+ * When a file is marked with the "use client" directive, it is prohibited
+ * from importing server-only packages (e.g. 'server-only', Node.js builtins,
+ * or modules from server-designated paths).
+ */
+
+export const noServerImportsInClient = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow server-only imports in client components marked with 'use client'",
+      category: "Possible Errors",
+      recommended: true,
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          serverModules: {
+            type: "array",
+            items: { type: "string" },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noServerImport:
+        "Server-only module '{{name}}' cannot be imported into a Client Component ('use client'). Keep server logic on the server side of the RSC boundary.",
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {};
+    const restrictedSet = new Set(
+      options.serverModules || [
+        "server-only",
+        "node:fs",
+        "node:fs/promises",
+        "fs",
+        "fs/promises",
+        "node:child_process",
+        "child_process",
+        "node:net",
+        "net",
+        "node:tls",
+        "tls",
+      ]
+    );
+
+    let isClientComponent = false;
+
+    return {
+      Program(node) {
+        // Inspect top-level statements for "use client" directive
+        for (const stmt of node.body) {
+          if (
+            stmt.type === "ExpressionStatement" &&
+            stmt.expression.type === "Literal" &&
+            stmt.expression.value === "use client"
+          ) {
+            isClientComponent = true;
+            break;
+          }
+        }
+      },
+      ImportDeclaration(node) {
+        if (!isClientComponent) return;
+        const source = node.source.value;
+        if (
+          restrictedSet.has(source) ||
+          source.startsWith("server-only") ||
+          source.includes("/server/") ||
+          source.endsWith("/server")
+        ) {
+          context.report({
+            node,
+            messageId: "noServerImport",
+            data: { name: source },
+          });
+        }
+      },
+    };
+  },
+};
+
+export default noServerImportsInClient;

package/templates/conditional/next/server-components/rules/no-server-imports-in-client.mjs

@@ -0,0 +1,88 @@
+/**
+ * ESLint Rule: rsc/no-server-imports-in-client
+ *
+ * Enforces server/client boundaries in React Server Components (RSC).
+ * When a file is marked with the "use client" directive, it is prohibited
+ * from importing server-only packages (e.g. 'server-only', Node.js builtins,
+ * or modules from server-designated paths).
+ */
+
+export const noServerImportsInClient = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow server-only imports in client components marked with 'use client'",
+      category: "Possible Errors",
+      recommended: true,
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          serverModules: {
+            type: "array",
+            items: { type: "string" },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noServerImport:
+        "Server-only module '{{name}}' cannot be imported into a Client Component ('use client'). Keep server logic on the server side of the RSC boundary.",
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {};
+    const restrictedSet = new Set(
+      options.serverModules || [
+        "server-only",
+        "node:fs",
+        "node:fs/promises",
+        "fs",
+        "fs/promises",
+        "node:child_process",
+        "child_process",
+        "node:net",
+        "net",
+        "node:tls",
+        "tls",
+      ]
+    );
+
+    let isClientComponent = false;
+
+    return {
+      Program(node) {
+        for (const stmt of node.body) {
+          if (
+            stmt.type === "ExpressionStatement" &&
+            stmt.expression.type === "Literal" &&
+            stmt.expression.value === "use client"
+          ) {
+            isClientComponent = true;
+            break;
+          }
+        }
+      },
+      ImportDeclaration(node) {
+        if (!isClientComponent) return;
+        const source = node.source.value;
+        if (
+          restrictedSet.has(source) ||
+          source.startsWith("server-only") ||
+          source.includes("/server/") ||
+          source.endsWith("/server")
+        ) {
+          context.report({
+            node,
+            messageId: "noServerImport",
+            data: { name: source },
+          });
+        }
+      },
+    };
+  },
+};
+
+export default noServerImportsInClient;

package/templates/conditional/next/server-components/src/components/boundaries/ClientCounter.jsx

@@ -0,0 +1,48 @@
+"use client";
+
+import React, { useState } from "react";
+
+/**
+ * Client Component example for RSC boundary.
+ * Marked with "use client" directive — renders on client with full interactivity,
+ * React hooks, and state management.
+ */
+export function ClientCounter({ initialCount = 0, children }) {
+  const [count, setCount] = useState(initialCount);
+
+  return (
+    <div className="client-boundary p-4 rounded-lg border border-blue-500/20 bg-blue-500/5 my-4">
+      <div className="flex items-center gap-2 mb-2">
+        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900/60 dark:text-blue-300">
+          Client Component (&quot;use client&quot;)
+        </span>
+      </div>
+      <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+        Interactive client boundary component. Manages state and handles user interaction.
+      </p>
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={() => setCount((c) => c + 1)}
+          className="px-3 py-1.5 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors cursor-pointer"
+        >
+          Count: {count}
+        </button>
+        <button
+          type="button"
+          onClick={() => setCount(0)}
+          className="px-2 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 cursor-pointer"
+        >
+          Reset
+        </button>
+      </div>
+      {children && (
+        <div className="mt-4 pt-3 border-t border-blue-500/10">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ClientCounter;

package/templates/conditional/next/server-components/src/components/boundaries/ClientCounter.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React, { useState } from "react";
+
+export interface ClientCounterProps {
+  initialCount?: number;
+  children?: React.ReactNode;
+}
+
+/**
+ * Client Component example for RSC boundary.
+ * Marked with "use client" directive — renders on client with full interactivity,
+ * React hooks, and state management.
+ */
+export function ClientCounter({ initialCount = 0, children }: ClientCounterProps) {
+  const [count, setCount] = useState(initialCount);
+
+  return (
+    <div className="client-boundary p-4 rounded-lg border border-blue-500/20 bg-blue-500/5 my-4">
+      <div className="flex items-center gap-2 mb-2">
+        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900/60 dark:text-blue-300">
+          Client Component (&quot;use client&quot;)
+        </span>
+      </div>
+      <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+        Interactive client boundary component. Manages state and handles user interaction.
+      </p>
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={() => setCount((c) => c + 1)}
+          className="px-3 py-1.5 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors cursor-pointer"
+        >
+          Count: {count}
+        </button>
+        <button
+          type="button"
+          onClick={() => setCount(0)}
+          className="px-2 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 cursor-pointer"
+        >
+          Reset
+        </button>
+      </div>
+      {children && (
+        <div className="mt-4 pt-3 border-t border-blue-500/10">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ClientCounter;

package/templates/conditional/next/server-components/src/components/boundaries/ServerCard.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { ClientCounter } from "./ClientCounter";
+
+/**
+ * Server Component example for RSC boundary.
+ * Renders on the server by default (zero client-side bundle impact).
+ * Demonstrates composing a Client Component across the RSC boundary.
+ * Compatible with both Next.js App Router and Pages Router.
+ */
+export function ServerCard({
+  title = "Server Component Shell",
+  serverMessage = "Rendered on the server with zero client bundle overhead for this card frame.",
+}) {
+  return (
+    <div className="server-boundary p-6 rounded-xl border border-emerald-500/20 bg-emerald-500/5 my-4">
+      <div className="flex items-center justify-between mb-3">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/60 dark:text-emerald-300">
+          Server Component (Default RSC)
+        </span>
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+        {title}
+      </h3>
+      <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        {serverMessage}
+      </p>
+      <div className="p-4 rounded-lg border border-dashed border-emerald-500/30 bg-white/40 dark:bg-black/20">
+        <p className="text-xs font-semibold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider mb-2">
+          Server / Client Boundary
+        </p>
+        <ClientCounter initialCount={0}>
+          <p className="text-xs text-gray-500 dark:text-gray-400 italic">
+            Server-rendered child passed through client component boundary.
+          </p>
+        </ClientCounter>
+      </div>
+    </div>
+  );
+}
+
+export default ServerCard;

package/templates/conditional/next/server-components/src/components/boundaries/ServerCard.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ClientCounter } from "./ClientCounter";
+
+export interface ServerCardProps {
+  title?: string;
+  serverMessage?: string;
+}
+
+/**
+ * Server Component example for RSC boundary.
+ * Renders on the server by default (zero client-side bundle impact).
+ * Demonstrates composing a Client Component across the RSC boundary.
+ * Compatible with both Next.js App Router and Pages Router.
+ */
+export function ServerCard({
+  title = "Server Component Shell",
+  serverMessage = "Rendered on the server with zero client bundle overhead for this card frame.",
+}: ServerCardProps) {
+  return (
+    <div className="server-boundary p-6 rounded-xl border border-emerald-500/20 bg-emerald-500/5 my-4">
+      <div className="flex items-center justify-between mb-3">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/60 dark:text-emerald-300">
+          Server Component (Default RSC)
+        </span>
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+        {title}
+      </h3>
+      <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        {serverMessage}
+      </p>
+      <div className="p-4 rounded-lg border border-dashed border-emerald-500/30 bg-white/40 dark:bg-black/20">
+        <p className="text-xs font-semibold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider mb-2">
+          Server / Client Boundary
+        </p>
+        <ClientCounter initialCount={0}>
+          <p className="text-xs text-gray-500 dark:text-gray-400 italic">
+            Server-rendered child passed through client component boundary.
+          </p>
+        </ClientCounter>
+      </div>
+    </div>
+  );
+}
+
+export default ServerCard;

package/templates/conditional/next/server-components/src/components/boundaries/index.js

@@ -0,0 +1,2 @@
+export { ClientCounter } from "./ClientCounter";
+export { ServerCard } from "./ServerCard";

package/templates/conditional/next/server-components/src/components/boundaries/index.ts

@@ -0,0 +1,4 @@
+export { ClientCounter } from "./ClientCounter";
+export type { ClientCounterProps } from "./ClientCounter";
+export { ServerCard } from "./ServerCard";
+export type { ServerCardProps } from "./ServerCard";

package/templates/conditional/testing/jest/next/app-router/src/__tests__/page.test.jsx

@@ -0,0 +1,10 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Home from "@/app/page";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/next/app-router/src/__tests__/page.test.tsx

@@ -0,0 +1,10 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Home from "@/app/page";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/next/jest.config.mjs

@@ -0,0 +1,20 @@
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  coverageProvider: "v8",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

package/templates/conditional/testing/jest/next/jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "jest";
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+  coverageProvider: "v8",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

package/templates/conditional/testing/jest/next/pages-router/src/__tests__/index.test.jsx

@@ -0,0 +1,10 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Home from "@/pages/index";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/jest/next/pages-router/src/__tests__/index.test.tsx

@@ -0,0 +1,10 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Home from "@/pages/index";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/next/app-router/src/__tests__/page.test.jsx

@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom/vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Home from "@/app/page";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/next/app-router/src/__tests__/page.test.tsx

@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom/vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Home from "@/app/page";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/next/pages-router/src/__tests__/index.test.jsx

@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom/vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Home from "@/pages/index";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/next/pages-router/src/__tests__/index.test.tsx

@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom/vitest";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import Home from "@/pages/index";
+
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});

package/templates/conditional/testing/vitest/next/vitest.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+import path from "path";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./src/test/setup.js",
+    css: true,
+  },
+});

package/templates/conditional/testing/vitest/next/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+import path from "path";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./src/test/setup.ts",
+    css: true,
+  },
+});