@stonecrop/nuxt 0.7.4 → 0.7.5

package/README.md

@@ -28,7 +28,39 @@ Stonecrop is a **schema-driven UI framework** that generates forms, tables, and
 
 ## Quick Setup
 
-Install the module to your Nuxt application:
+### Option 1: Interactive Installer (Recommended)
+
+Use the Stonecrop CLI to interactively install features:
+
+```bash
+npx @stonecrop/nuxt init
+```
+
+This will prompt you to select which features to install:
+- **@stonecrop/nuxt** - Frontend module with schema-driven UI
+- **@stonecrop/graphql-client** - GraphQL client with Stonecrop integration
+- **@stonecrop/nuxt-grafserv** - GraphQL server with Grafserv
+- **@stonecrop/casl-middleware** - CASL authorization
+- **@stonecrop/rockfoil** - PostGraphile middleware for database-driven GraphQL
+- **Sample doctypes** - Example doctype files to get started
+
+You can also use flags for non-interactive installation:
+
+```bash
+# Install everything
+npx @stonecrop/nuxt init --frontend --graphql-client --graphql --casl --rockfoil --doctypes --yes
+
+# Install just the frontend module
+npx @stonecrop/nuxt init --frontend
+
+# Add GraphQL server to existing setup
+npx @stonecrop/nuxt init --graphql
+
+# Add PostGraphile middleware
+npx @stonecrop/nuxt init --rockfoil
+```
+
+### Option 2: Manual Installation
 
 ```bash
 npx nuxi module add @stonecrop/nuxt
@@ -297,6 +329,78 @@ npm run test
 npm run test:watch
 ```
 
+### Testing the CLI Locally
+
+To test the `npx @stonecrop/nuxt init` command from another directory outside this project:
+
+**1. Build the monorepo (from stonecrop root):**
+
+```bash
+cd /path/to/stonecrop
+rush update
+rush build
+```
+
+**2. Create a test Nuxt project (in a separate directory):**
+
+```bash
+cd /tmp  # or any directory outside stonecrop
+npx nuxi init my-test-app
+cd my-test-app
+npm install
+```
+
+**3. Run the CLI using the local package:**
+
+```bash
+# Option A: Run from within the nuxt package directory (simplest)
+# This ensures Node can find the dependencies
+cd /path/to/stonecrop/nuxt
+node bin/init.mjs init --cwd /tmp/my-test-app
+
+# Option B: Use pnpm link (from the test project)
+cd /path/to/stonecrop/nuxt
+pnpm link --global
+cd /tmp/my-test-app
+pnpm link --global @stonecrop/nuxt
+npx stonecrop-nuxt init
+
+# Option C: Use npm pack to create a tarball (simulates real npm install)
+cd /path/to/stonecrop/nuxt
+npm pack
+cd /tmp/my-test-app
+npm install /path/to/stonecrop/nuxt/stonecrop-nuxt-0.6.3.tgz
+npx stonecrop-nuxt init
+```
+
+> **Note:** Option A uses `--cwd` to specify the target directory while running from within
+> the nuxt package where dependencies are available. Options B and C install the package
+> into the test project so dependencies are resolved correctly.
+
+**4. Interactive testing:**
+
+The CLI will detect that you're in a Nuxt project and prompt for features:
+
+```
+🌱 Stonecrop Nuxt Installer
+
+✔ Nuxt project detected
+
+? Select features to install
+  ◉ @stonecrop/nuxt - Frontend module
+  ◯ @stonecrop/nuxt-grafserv - GraphQL server
+  ◯ @stonecrop/casl-middleware - Authorization
+  ◉ Sample doctypes
+```
+
+**5. Verify the installation:**
+
+After running the installer, check:
+- `package.json` has the new dependencies
+- `nuxt.config.ts` has the module configuration
+- `doctypes/` folder contains sample schemas (if selected)
+- `server/` folder contains GraphQL files (if selected)
+
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@stonecrop/nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82
 [npm-version-href]: https://npmjs.com/package/@stonecrop/nuxt

package/bin/init.mjs

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+/**
+ * @stonecrop/nuxt CLI entry point
+ *
+ * Usage:
+ *   npx @stonecrop/nuxt init          # Interactive mode
+ *   npx @stonecrop/nuxt init --help   # Show help
+ */
+
+import { defineCommand, runMain } from 'citty'
+import consola from 'consola'
+import { createJiti } from 'jiti'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// Use jiti to load TypeScript CLI code
+const jiti = createJiti(import.meta.url, {
+	interopDefault: true,
+	esmResolve: true,
+})
+
+const { runInstaller } = await jiti.import(join(__dirname, '..', 'src', 'cli', 'index.ts'))
+
+const main = defineCommand({
+	meta: {
+		name: 'stonecrop-nuxt',
+		version: '0.6.3',
+		description: 'Install Stonecrop modules into your Nuxt project',
+	},
+	subCommands: {
+		init: defineCommand({
+			meta: {
+				name: 'init',
+				description: 'Initialize Stonecrop in your Nuxt project',
+			},
+			args: {
+				frontend: {
+					type: 'boolean',
+					description: 'Install @stonecrop/nuxt frontend module',
+					default: false,
+				},
+				'graphql-client': {
+					type: 'boolean',
+					description: 'Install @stonecrop/graphql-client',
+					default: false,
+				},
+				graphql: {
+					type: 'boolean',
+					description: 'Install @stonecrop/nuxt-grafserv GraphQL server',
+					default: false,
+				},
+				casl: {
+					type: 'boolean',
+					description: 'Install @stonecrop/casl-middleware authorization',
+					default: false,
+				},
+				rockfoil: {
+					type: 'boolean',
+					description: 'Install @stonecrop/rockfoil PostGraphile middleware',
+					default: false,
+				},
+				doctypes: {
+					type: 'boolean',
+					description: 'Scaffold sample doctypes',
+					default: false,
+				},
+				cwd: {
+					type: 'string',
+					description: 'Working directory (defaults to current directory)',
+					default: process.cwd(),
+				},
+				yes: {
+					type: 'boolean',
+					alias: 'y',
+					description: 'Skip confirmation prompts',
+					default: false,
+				},
+			},
+			async run({ args }) {
+				try {
+					await runInstaller({
+						cwd: args.cwd,
+						features: {
+							frontend: args.frontend,
+							graphqlClient: args['graphql-client'],
+							graphql: args.graphql,
+							casl: args.casl,
+							rockfoil: args.rockfoil,
+							doctypes: args.doctypes,
+						},
+						skipConfirm: args.yes,
+					})
+				} catch (error) {
+					consola.error('Installation failed:', error)
+					process.exit(1)
+				}
+			},
+		}),
+	},
+})
+
+runMain(main)

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@stonecrop/nuxt",
   "configKey": "stonecrop",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,9 +1,63 @@
-import { existsSync } from 'node:fs';
+import { existsSync, realpathSync } from 'node:fs';
 import { readdir, readFile } from 'node:fs/promises';
-import { extname } from 'node:path';
-import { createResolver, defineNuxtModule, useLogger, addLayout, extendPages, addServerHandler, addPlugin } from '@nuxt/kit';
+import { dirname, extname } from 'node:path';
+import { createResolver, defineNuxtModule, useLogger, addVitePlugin, addLayout, extendPages, addServerHandler, addPlugin } from '@nuxt/kit';
+
+function createSymlinkedPackagesPlugin(options) {
+  const { rootDir, packages, logger } = options;
+  return {
+    name: "stonecrop-symlinked-packages",
+    config() {
+      const allowPaths = /* @__PURE__ */ new Set();
+      const nuxtModulePath = `${rootDir}/node_modules/@stonecrop/nuxt`;
+      try {
+        if (existsSync(nuxtModulePath)) {
+          const realNuxtModulePath = realpathSync(nuxtModulePath);
+          if (realNuxtModulePath !== nuxtModulePath) {
+            const monorepoRoot = dirname(realNuxtModulePath);
+            allowPaths.add(monorepoRoot);
+            logger?.(`@stonecrop/nuxt is symlinked, adding monorepo root: ${monorepoRoot}`);
+          }
+        }
+      } catch (e) {
+        logger?.(`Error checking @stonecrop/nuxt symlink: ${e instanceof Error ? e.message : String(e)}`);
+      }
+      for (const pkg of packages) {
+        const pkgPath = `${rootDir}/node_modules/${pkg}`;
+        try {
+          if (existsSync(pkgPath)) {
+            const realPath = realpathSync(pkgPath);
+            if (realPath !== pkgPath) {
+              allowPaths.add(realPath);
+              logger?.(`Adding symlinked package to fs.allow: ${realPath}`);
+            }
+          }
+        } catch {
+        }
+      }
+      if (allowPaths.size > 0) {
+        logger?.(`Vite fs.allow updated with ${allowPaths.size} path(s)`);
+        return {
+          server: {
+            fs: {
+              allow: [...allowPaths]
+            }
+          }
+        };
+      }
+    }
+  };
+}
 
 const { resolve } = createResolver(import.meta.url);
+const STONECROP_PACKAGES = [
+  "@stonecrop/aform",
+  "@stonecrop/atable",
+  "@stonecrop/stonecrop",
+  "@stonecrop/node-editor",
+  "@stonecrop/utilities",
+  "@stonecrop/themes"
+];
 const module$1 = defineNuxtModule({
   meta: {
     name: "@stonecrop/nuxt",
@@ -16,8 +70,33 @@ const module$1 = defineNuxtModule({
       doctypesDir: void 0
     };
   },
-  async setup(_options, nuxt) {
+  async setup(options, nuxt) {
     const logger = useLogger("@stonecrop/nuxt", { level: nuxt.options.dev ? 3 : 0 });
+    nuxt.options.build.transpile = nuxt.options.build.transpile || [];
+    for (const pkg of STONECROP_PACKAGES) {
+      if (!nuxt.options.build.transpile.includes(pkg)) {
+        nuxt.options.build.transpile.push(pkg);
+      }
+    }
+    logger.log("Added Stonecrop packages to build.transpile for SSR CSS handling");
+    nuxt.hook("nitro:config", (config) => {
+      config.externals = config.externals || {};
+      config.externals.inline = config.externals.inline || [];
+      for (const pkg of STONECROP_PACKAGES) {
+        if (!config.externals.inline.includes(pkg)) {
+          config.externals.inline.push(pkg);
+        }
+      }
+      logger.log("Added Stonecrop packages to Nitro externals.inline for CSS bundling");
+    });
+    if (nuxt.options.dev) {
+      const symlinkedPackagesPlugin = createSymlinkedPackagesPlugin({
+        rootDir: nuxt.options.rootDir,
+        packages: STONECROP_PACKAGES,
+        logger: (msg) => logger.log(msg)
+      });
+      addVitePlugin(symlinkedPackagesPlugin);
+    }
     const layoutsDir = resolve("runtime/layouts");
     const homepage = resolve(layoutsDir, "StonecropHome.vue");
     addLayout(homepage, "home");
@@ -94,7 +173,7 @@ const module$1 = defineNuxtModule({
         }
       }
     }
-    if (_options.docbuilder) {
+    if (options.docbuilder) {
       logger.log("DocBuilder enabled, adding routes and handlers");
       const pagesDir = resolve("runtime/pages");
       const docBuilderIndex = resolve(pagesDir, "DocBuilderIndex.vue");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/nuxt",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Nuxt module for Stonecrop",
   "license": "MIT",
   "type": "module",
@@ -13,6 +13,9 @@
     "url": "https://github.com/agritheory/stonecrop",
     "directory": "nuxt"
   },
+  "bin": {
+    "stonecrop-nuxt": "./bin/init.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
@@ -28,19 +31,27 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "bin",
+    "templates",
+    "src/cli"
   ],
   "dependencies": {
     "@nuxt/kit": "^4.2.2",
     "pinia": "^3.0.4",
-    "@stonecrop/aform": "0.7.4",
-    "@stonecrop/casl-middleware": "0.7.4",
-    "@stonecrop/atable": "0.7.4",
-    "@stonecrop/graphql-middleware": "0.7.4",
-    "@stonecrop/node-editor": "0.7.4",
-    "@stonecrop/nuxt-grafserv": "0.7.4",
-    "@stonecrop/schema": "0.7.4",
-    "@stonecrop/stonecrop": "0.7.4"
+    "citty": "^0.1.6",
+    "consola": "^3.4.0",
+    "jiti": "^2.4.2",
+    "pathe": "^2.0.3",
+    "prompts": "^2.4.2",
+    "@stonecrop/aform": "0.7.5",
+    "@stonecrop/atable": "0.7.5",
+    "@stonecrop/graphql-middleware": "0.7.5",
+    "@stonecrop/casl-middleware": "0.7.5",
+    "@stonecrop/node-editor": "0.7.5",
+    "@stonecrop/schema": "0.7.5",
+    "@stonecrop/nuxt-grafserv": "0.7.5",
+    "@stonecrop/stonecrop": "0.7.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
@@ -50,6 +61,8 @@
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.2",
     "@nuxt/test-utils": "^3.23.0",
+    "@vitest/coverage-istanbul": "^4.0.17",
+    "@types/prompts": "^2.4.9",
     "browserslist": "latest",
     "baseline-browser-mapping": "latest",
     "eslint": "^9.39.2",
@@ -57,6 +70,7 @@
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^17.0.0",
     "nuxt": "^4.2.2",
+    "postgraphile": "^5.0.0-rc.4",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.0",
     "vue": "^3.5.26",
@@ -82,6 +96,7 @@
     "lint": "eslint .",
     "test": "vitest run",
     "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   }

package/src/cli/detect.ts

@@ -0,0 +1,125 @@
+/**
+ * Detection utilities for existing Stonecrop setup
+ */
+
+import { existsSync } from 'node:fs'
+import { join } from 'pathe'
+import { hasModule, findNuxtConfig } from './utils/config'
+import { hasPackage, readPackageJson } from './utils/package'
+
+export interface DetectedFeatures {
+	/** Is this a valid Nuxt project? */
+	isNuxtProject: boolean
+	/** Is @stonecrop/nuxt installed? */
+	hasFrontend: boolean
+	/** Is @stonecrop/nuxt-grafserv installed? */
+	hasGraphql: boolean
+	/** Is @stonecrop/graphql-client installed? */
+	hasGraphqlClient: boolean
+	/** Is @stonecrop/casl-middleware installed? */
+	hasCasl: boolean
+	/** Is @stonecrop/rockfoil installed? */
+	hasRockfoil: boolean
+	/** Does the doctypes directory exist? */
+	hasDoctypes: boolean
+	/** Does the server directory exist? */
+	hasServerDir: boolean
+	/** Does server/schema.graphql exist? */
+	hasSchema: boolean
+	/** Does server/resolvers.ts exist? */
+	hasResolvers: boolean
+}
+
+/**
+ * Detect what Stonecrop features are already installed in the project
+ */
+export async function detectFeatures(cwd: string): Promise<DetectedFeatures> {
+	const result: DetectedFeatures = {
+		isNuxtProject: false,
+		hasFrontend: false,
+		hasGraphql: false,
+		hasGraphqlClient: false,
+		hasCasl: false,
+		hasRockfoil: false,
+		hasDoctypes: false,
+		hasServerDir: false,
+		hasSchema: false,
+		hasResolvers: false,
+	}
+
+	// Check if this is a Nuxt project
+	const nuxtConfig = findNuxtConfig(cwd)
+	const pkg = await readPackageJson(cwd)
+
+	if (!nuxtConfig || !pkg) {
+		return result
+	}
+
+	// Check for Nuxt in dependencies
+	const hasNuxt = !!(pkg.dependencies?.nuxt || pkg.devDependencies?.nuxt)
+	result.isNuxtProject = hasNuxt
+
+	if (!hasNuxt) {
+		return result
+	}
+
+	// Check for installed packages
+	result.hasFrontend = await hasPackage(cwd, '@stonecrop/nuxt')
+	result.hasGraphql = await hasPackage(cwd, '@stonecrop/nuxt-grafserv')
+	result.hasGraphqlClient = await hasPackage(cwd, '@stonecrop/graphql-client')
+	result.hasCasl = await hasPackage(cwd, '@stonecrop/casl-middleware')
+	result.hasRockfoil = await hasPackage(cwd, '@stonecrop/rockfoil')
+
+	// Also check nuxt.config for module registration
+	if (!result.hasFrontend) {
+		result.hasFrontend = await hasModule(cwd, '@stonecrop/nuxt')
+	}
+	if (!result.hasGraphql) {
+		result.hasGraphql = await hasModule(cwd, '@stonecrop/nuxt-grafserv')
+	}
+
+	// Check for directories and files
+	result.hasDoctypes = existsSync(join(cwd, 'doctypes'))
+	result.hasServerDir = existsSync(join(cwd, 'server'))
+	result.hasSchema = existsSync(join(cwd, 'server', 'schema.graphql'))
+	result.hasResolvers =
+		existsSync(join(cwd, 'server', 'resolvers.ts')) || existsSync(join(cwd, 'server', 'resolvers.js'))
+
+	return result
+}
+
+/**
+ * Check if the current directory is a valid Nuxt project
+ */
+export async function isNuxtProject(cwd: string): Promise<boolean> {
+	const features = await detectFeatures(cwd)
+	return features.isNuxtProject
+}
+
+/**
+ * Get a summary of what's already installed
+ */
+export function getInstalledSummary(features: DetectedFeatures): string[] {
+	const installed: string[] = []
+
+	if (features.hasFrontend) {
+		installed.push('@stonecrop/nuxt (frontend module)')
+	}
+	if (features.hasGraphqlClient) {
+		installed.push('@stonecrop/graphql-client (GraphQL client)')
+	}
+	if (features.hasGraphql) {
+		installed.push('@stonecrop/nuxt-grafserv (GraphQL server)')
+	}
+	if (features.hasCasl) {
+		installed.push('@stonecrop/casl-middleware (authorization)')
+	}
+	if (features.hasRockfoil) {
+		installed.push('@stonecrop/rockfoil (PostGraphile middleware)')
+	}
+	if (features.hasDoctypes) {
+		installed.push('doctypes/ directory')
+	}
+
+	return installed
+}