@stonecrop/nuxt 0.8.11 → 0.8.12

package/README.md

@@ -19,12 +19,11 @@ Stonecrop is a **schema-driven UI framework** that generates forms, tables, and
 
 ## Module Features
 
-- **Automatic Page Generation**: Creates routes from DocType schemas in your `/doctypes` folder
-- **Form & Table Components**: Pre-configured AForm and ATable components with HST integration
+- **Route Generation**: Scans your `/doctypes` folder and registers routes using your own page components
 - **Plugin System**: Auto-registers Stonecrop composables and utilities
 - **Theme Support**: Import and customize Stonecrop themes
 - **TypeScript First**: Full type safety and IntelliSense support
-- **Zero Config**: Works out of the box with sensible defaults
+- **Thin Wrapper**: The module is intentionally opinion-free — page rendering, queries, and navigation stay in your application
 
 ## Quick Setup
 
@@ -99,7 +98,7 @@ Create a JSON schema in `/doctypes/task.json`:
 }
 ```
 
-The module automatically generates routes at `/task` for this DocType.
+The module picks up this file and, if `pageComponent` is configured, registers a route at the doctype's `slug` value (or `task` if no slug is set), passing the parsed schema into `route.meta`.
 
 ### Use the Stonecrop Composable
 
@@ -184,13 +183,14 @@ export default defineNuxtConfig({
   modules: ['@stonecrop/nuxt'],
 
   stonecrop: {
-    // Enable DocBuilder for visual schema editing
-    docbuilder: true,
+    // Point to your own page component for slug-based routing (one route per doctype)
+    pageComponent: 'pages/StonecropPage.vue',
 
-    // Custom router configuration
-    router: {
-      // Router options
-    }
+    // Or supply a custom strategy for full control
+    // routeStrategy: (doctypes) => [...],
+
+    // Enable DocBuilder for visual schema editing
+    docbuilder: false,
   },
 
   // Import Stonecrop theme
@@ -201,24 +201,77 @@ export default defineNuxtConfig({
 })
 ```
 
-## Module Behavior
+### Module Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `pageComponent` | `string` | Path (relative to `srcDir`) to your page component. The module registers one route per doctype at `/<slug>`, passing `schema` and `doctype` in `route.meta`. |
+| `routeStrategy` | `RouteStrategyFn` | Custom function receiving all parsed doctypes; returns a `NuxtPage[]`. Takes priority over `pageComponent`. |
+| `docbuilder` | `boolean` | Enable the DocBuilder feature at `/docbuilder`. Defaults to `false`. |
+| `doctypesDir` | `string` | Override the doctypes directory path. Defaults to `doctypes/` inside `srcDir`. |
+
+If neither `pageComponent` nor `routeStrategy` is configured the module logs a warning and skips doctype route registration.
 
-### Automatic Page Generation
+## Route Generation
 
-The module scans your `/doctypes` folder and creates routes automatically:
+### Default: slug-based routing
+
+The module scans your `doctypes/` folder and registers one route per JSON file:
 
 ```
 doctypes/
-  ├── task.json       → /task
-  ├── user.json       → /user
-  └── project.json    → /project
+  ├── task.json        → /task  (if no slug field)
+  ├── user.json        → /user/:id  (if slug is "user/:id")
+  └── project.json     → /project
+```
+
+Each route's `meta` contains the parsed doctype:
+
+```typescript
+route.meta.schema   // ParsedDoctype['fields']
+route.meta.doctype  // ParsedDoctype['data']
+```
+
+Your page component receives these via `useRoute()`:
+
+```vue
+<script setup lang="ts">
+const route = useRoute()
+const schema = route.meta.schema   // array of field definitions
+const doctype = route.meta.doctype // full doctype JSON object
+</script>
 ```
 
-Each route uses the `StonecropPage.vue` layout that provides:
-- List view with ATable component
-- Detail view with AForm component
-- HST state management
-- Router integration for navigation
+### Custom route strategy
+
+For full control — multiple routes per doctype, conditional skipping, custom meta — provide a `RouteStrategyFn`:
+
+```typescript
+import type { RouteStrategyFn } from '@stonecrop/nuxt'
+import { resolve } from 'path'
+
+const myStrategy: RouteStrategyFn = (doctypes) =>
+  doctypes
+    .filter(({ data }) => !data.parentDoctype) // skip child tables
+    .flatMap(({ fileName, data, fields }) => [
+      {
+        name: `${fileName}-list`,
+        path: `/${data.slug ?? fileName.toLowerCase()}`,
+        file: resolve('./pages/ListPage.vue'),
+        meta: { schema: fields, doctype: data, viewMode: 'list' },
+      },
+      {
+        name: `${fileName}-detail`,
+        path: `/${data.slug ?? fileName.toLowerCase()}/:id`,
+        file: resolve('./pages/DetailPage.vue'),
+        meta: { schema: fields, doctype: data, viewMode: 'detail' },
+      },
+    ])
+
+export default defineNuxtConfig({
+  stonecrop: { routeStrategy: myStrategy },
+})
+```
 
 ### Plugin Registration
 

package/dist/module.d.mts

@@ -1,4 +1,49 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { NuxtPage } from '@nuxt/schema';
+
+/**
+ * Parsed doctype data read from a JSON file in the doctypes directory.
+ * @public
+ */
+interface ParsedDoctype {
+    /** Original filename without extension (e.g., 'user-table', 'User') */
+    fileName: string;
+    /** Parsed JSON content of the doctype file */
+    data: Record<string, unknown>;
+    /** Schema fields array (from `schema` or `fields` property) */
+    fields: Record<string, unknown>[];
+}
+/**
+ * Route strategy function signature.
+ *
+ * Receives all parsed doctypes from the `doctypes/` directory and returns
+ * an array of NuxtPage definitions to register. The user is responsible
+ * for providing the `file` property on each page (pointing to their own
+ * page component).
+ *
+ * @example
+ * ```typescript
+ * const myStrategy: RouteStrategyFn = (doctypes) => {
+ *   return doctypes.flatMap(({ fileName, data, fields }) => [
+ *     {
+ *       name: `${fileName}-list`,
+ *       path: `/${data.slug || fileName.toLowerCase()}`,
+ *       file: resolve('./pages/MyListPage.vue'),
+ *       meta: { schema: fields, doctype: data, viewMode: 'list' },
+ *     },
+ *     {
+ *       name: `${fileName}-detail`,
+ *       path: `/${data.slug || fileName.toLowerCase()}/:id`,
+ *       file: resolve('./pages/MyDetailPage.vue'),
+ *       meta: { schema: fields, doctype: data, viewMode: 'detail' },
+ *     },
+ *   ])
+ * }
+ * ```
+ *
+ * @public
+ */
+type RouteStrategyFn = (doctypes: ParsedDoctype[]) => NuxtPage[];
 
 interface ModuleOptions {
     router?: Record<string, unknown>;
@@ -6,8 +51,34 @@ interface ModuleOptions {
     docbuilder?: boolean;
     /** Path to doctypes folder (defaults to 'doctypes' in srcDir) */
     doctypesDir?: string;
+    /**
+     * Path to the page component used for default slug-based routing.
+     * When `routeStrategy` is not set, one route per doctype is registered
+     * at `/<slug>` (or `/<fileName>` if no slug) using this component.
+     *
+     * The path is resolved relative to the application's `srcDir`.
+     *
+     * @example `'pages/StonecropPage.vue'`
+     */
+    pageComponent?: string;
+    /**
+     * Custom route strategy function for full control over route generation.
+     * When provided, `pageComponent` is ignored and this function is called
+     * with all parsed doctypes to produce the NuxtPage array.
+     *
+     * @example
+     * ```typescript
+     * routeStrategy: (doctypes) => doctypes.map(({ fileName, data, fields }) => ({
+     *   name: `stonecrop-${fileName}`,
+     *   path: `/${data.slug || fileName.toLowerCase()}`,
+     *   file: resolve('./pages/MyPage.vue'),
+     *   meta: { schema: fields, doctype: data },
+     * }))
+     * ```
+     */
+    routeStrategy?: RouteStrategyFn;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { ModuleOptions };
+export type { ModuleOptions, ParsedDoctype, RouteStrategyFn };

package/dist/module.json

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

package/dist/module.mjs

@@ -106,63 +106,71 @@ const module$1 = defineNuxtModule({
       try {
         const dirContents = await readdir(doctypesDir);
         const schemas = dirContents.filter((file) => extname(file) === ".json");
-        const pagesDir = resolve("runtime/pages");
-        const stonecropPage = resolve(pagesDir, "StonecropPage.vue");
-        extendPages(async (pages) => {
+        const doctypes = [];
+        for (const schema of schemas) {
           try {
-            const pagePaths = pages.map((page) => page.path);
-            if (!pagePaths.includes("/")) {
-              pages.unshift({
-                name: "stonecrop-home",
-                path: "/",
-                file: homepage
-              });
-              logger.log("Added Stonecrop home page at /");
-            } else {
-              logger.log("Skipping Stonecrop home page: root page already exists");
+            const schemaPath = resolve(doctypesDir, schema);
+            const fileContents = await readFile(schemaPath, "utf-8");
+            let schemaData;
+            try {
+              schemaData = JSON.parse(fileContents);
+            } catch (parseError) {
+              logger.error(`Failed to parse schema file '${schema}':`, parseError);
+              continue;
             }
-            for (const schema of schemas) {
-              try {
-                const schemaName = schema.replace(".json", "");
-                const schemaPath = resolve(doctypesDir, schema);
-                const fileContents = await readFile(schemaPath, "utf-8");
-                let schemaData;
-                try {
-                  schemaData = JSON.parse(fileContents);
-                } catch (parseError) {
-                  logger.error(`Failed to parse schema file '${schema}':`, parseError);
-                  continue;
-                }
-                const schemaFields = schemaData.schema || schemaData.fields;
-                if (!schemaFields) {
-                  logger.warn(`Schema file '${schema}' missing 'schema' or 'fields' property, skipping`);
-                  continue;
-                }
-                const routePath = schemaData.slug || schemaName.toLowerCase();
-                if (!pagePaths.includes(`/${routePath}`)) {
-                  pages.unshift({
-                    name: `stonecrop-${schemaName}`,
-                    path: `/${routePath}`,
-                    file: stonecropPage,
-                    meta: {
-                      schema: schemaFields,
-                      doctype: schemaData
-                    }
-                  });
-                  logger.log(`Added route: /${routePath} (${schemaName})`);
-                } else {
-                  logger.warn(`Route /${routePath} already exists, skipping ${schemaName}`);
-                }
-              } catch (schemaError) {
-                logger.error(`Error processing schema '${schema}':`, schemaError);
-              }
+            const schemaFields = schemaData.schema || schemaData.fields;
+            if (!schemaFields) {
+              logger.warn(`Schema file '${schema}' missing 'schema' or 'fields' property, skipping`);
+              continue;
             }
-          } catch (pagesError) {
-            logger.error("Failed to setup doctype pages:", pagesError);
-            throw new Error(
-              `[@stonecrop/nuxt] Failed to setup pages: ${pagesError instanceof Error ? pagesError.message : String(pagesError)}`
+            doctypes.push({
+              fileName: schema.replace(".json", ""),
+              data: schemaData,
+              fields: schemaFields
+            });
+          } catch (schemaError) {
+            logger.error(`Error processing schema '${schema}':`, schemaError);
+          }
+        }
+        extendPages((pages) => {
+          const pagePaths = pages.map((page) => page.path);
+          if (!pagePaths.includes("/")) {
+            pages.unshift({
+              name: "stonecrop-home",
+              path: "/",
+              file: homepage
+            });
+            logger.log("Added Stonecrop home page at /");
+          } else {
+            logger.log("Skipping Stonecrop home page: root page already exists");
+          }
+          let generatedPages = [];
+          if (options.routeStrategy) {
+            generatedPages = options.routeStrategy(doctypes);
+          } else if (options.pageComponent) {
+            const componentPath = resolve(appDir, options.pageComponent);
+            generatedPages = doctypes.map(({ fileName, data, fields }) => {
+              const slug = data.slug || fileName.toLowerCase();
+              return {
+                name: `stonecrop-${fileName}`,
+                path: `/${slug}`,
+                file: componentPath,
+                meta: { schema: fields, doctype: data }
+              };
+            });
+          } else {
+            logger.warn(
+              "No routeStrategy or pageComponent configured \u2014 doctype routes will not be registered. Set pageComponent to a page path or provide a routeStrategy function."
             );
           }
+          for (const page of generatedPages) {
+            if (!pagePaths.includes(page.path)) {
+              pages.unshift(page);
+              logger.log(`Added route: ${page.path} (${page.name})`);
+            } else {
+              logger.warn(`Route ${page.path} already exists, skipping ${page.name}`);
+            }
+          }
         });
       } catch (doctypeError) {
         logger.error("Error setting up doctype pages:", doctypeError);

package/dist/types.d.mts

@@ -1,3 +1,3 @@
 export { default } from './module.mjs'
 
-export { type ModuleOptions } from './module.mjs'
+export { type ModuleOptions, type ParsedDoctype, type RouteStrategyFn } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/nuxt",
-  "version": "0.8.11",
+  "version": "0.8.12",
   "description": "Nuxt module for Stonecrop",
   "license": "MIT",
   "type": "module",
@@ -44,14 +44,14 @@
     "jiti": "^2.4.2",
     "pathe": "^2.0.3",
     "prompts": "^2.4.2",
-    "@stonecrop/aform": "0.8.11",
-    "@stonecrop/graphql-middleware": "0.8.11",
-    "@stonecrop/node-editor": "0.8.11",
-    "@stonecrop/atable": "0.8.11",
-    "@stonecrop/nuxt-grafserv": "0.8.11",
-    "@stonecrop/schema": "0.8.11",
-    "@stonecrop/casl-middleware": "0.8.11",
-    "@stonecrop/stonecrop": "0.8.11"
+    "@stonecrop/aform": "0.8.12",
+    "@stonecrop/atable": "0.8.12",
+    "@stonecrop/casl-middleware": "0.8.12",
+    "@stonecrop/node-editor": "0.8.12",
+    "@stonecrop/graphql-middleware": "0.8.12",
+    "@stonecrop/nuxt-grafserv": "0.8.12",
+    "@stonecrop/stonecrop": "0.8.12",
+    "@stonecrop/schema": "0.8.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
@@ -96,7 +96,7 @@
     "lint": "eslint .",
     "test": "vitest run",
     "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "vitest run --coverage.enabled --coverage.provider=istanbul",
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   }

package/dist/runtime/pages/StonecropPage.d.vue.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/pages/StonecropPage.vue

@@ -1,139 +0,0 @@
-<template>
-	<div class="stonecrop-page">
-		<ClientOnly>
-			<component v-if="!loading" :is="rootComponent" v-bind="componentProps" @row-click="handleRowClick" />
-			<div v-else class="loading-state">Loading...</div>
-			<template #fallback>
-				<div class="loading-state">Loading...</div>
-			</template>
-		</ClientOnly>
-	</div>
-</template>
-
-<script setup>
-import { useRoute, useRouter } from "nuxt/app";
-import { onMounted, ref, computed, watch, markRaw } from "vue";
-import { getDefaultComponent } from "@stonecrop/schema";
-const route = useRoute();
-const router = useRouter();
-const loading = ref(true);
-const data = ref(null);
-const doctype = computed(() => route.meta.doctype);
-const schemaFields = computed(() => route.meta.schema);
-const rootComponent = computed(() => {
-  const fields = schemaFields.value || [];
-  const rootField = fields.find((f) => f.fieldtype === "Doctype" && f.component === "ATable");
-  if (rootField?.component) {
-    return rootField.component;
-  }
-  return "AForm";
-});
-const componentProps = computed(() => {
-  const fields = schemaFields.value || [];
-  const rootField = fields.find((f) => f.fieldtype === "Doctype" && f.component === "ATable");
-  if (rootField?.component === "ATable") {
-    return {
-      columns: rootField.columns || buildColumnsFromFields(fields),
-      rows: data.value || [],
-      config: rootField.config || { view: "list" }
-    };
-  }
-  return {
-    modelValue: buildFormSchema(fields),
-    data: data.value || {}
-  };
-});
-function buildColumnsFromFields(fields) {
-  const excludeTypes = ["Text", "Attach", "JSON", "Table", "Doctype", "Link"];
-  return fields.filter((f) => !excludeTypes.includes(f.fieldtype)).slice(0, 8).map((f) => ({
-    name: f.fieldname,
-    label: f.label || f.fieldname,
-    fieldtype: f.fieldtype,
-    width: f.width || "15ch"
-  }));
-}
-function buildFormSchema(fields) {
-  return fields.filter((f) => f.fieldtype !== "Doctype").map((f) => ({
-    fieldname: f.fieldname,
-    label: f.label || f.fieldname,
-    component: f.component || getDefaultComponent(f.fieldtype),
-    fieldtype: f.fieldtype,
-    required: f.required,
-    readOnly: f.readOnly,
-    options: f.options,
-    default: f.default
-  }));
-}
-const isListView = computed(() => {
-  const fields = schemaFields.value || [];
-  const rootField = fields.find((f) => f.fieldtype === "Doctype" && f.component === "ATable");
-  return rootField?.component === "ATable";
-});
-async function fetchData() {
-  loading.value = true;
-  const doctypeName = doctype.value?.name;
-  if (!doctypeName) {
-    loading.value = false;
-    return;
-  }
-  try {
-    if (isListView.value) {
-      const query = `
-				query GetRecords($doctype: String!) {
-					stonecropRecords(doctype: $doctype) {
-						data
-						count
-					}
-				}
-			`;
-      const response = await $fetch("/graphql/", {
-        method: "POST",
-        body: {
-          query,
-          variables: { doctype: doctypeName }
-        }
-      });
-      data.value = response.data?.stonecropRecords?.data || [];
-    } else {
-      const recordId = route.params.id;
-      if (!recordId || recordId === "new") {
-        data.value = {};
-        loading.value = false;
-        return;
-      }
-      const query = `
-				query GetRecord($doctype: String!, $id: String!) {
-					stonecropRecord(doctype: $doctype, id: $id) {
-						data
-					}
-				}
-			`;
-      const response = await $fetch("/graphql/", {
-        method: "POST",
-        body: {
-          query,
-          variables: { doctype: doctypeName, id: recordId }
-        }
-      });
-      data.value = response.data?.stonecropRecord?.data || {};
-    }
-  } catch (e) {
-    console.warn("[@stonecrop/nuxt] Could not fetch data:", e);
-    data.value = isListView.value ? [] : {};
-  }
-  loading.value = false;
-}
-function handleRowClick(row) {
-  const id = row.id || row.name || row.slug;
-  if (id && isListView.value) {
-    const basePath = route.path.replace(/\/$/, "");
-    router.push(`${basePath}/${id}`);
-  }
-}
-onMounted(fetchData);
-watch(() => route.params, fetchData, { deep: true });
-</script>
-
-<style scoped>
-.stonecrop-page{width:100%}.loading-state{color:var(--sc-gray-50);padding:2rem;text-align:center}
-</style>

package/dist/runtime/pages/StonecropPage.vue.d.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;