@stonecrop/stonecrop 0.10.16 → 0.11.0

package/README.md

@@ -1,13 +1,14 @@
 # Stonecrop
+
 _This package is under active development / design._
 
 ## Features
 
+- **Schema-Driven Relationships**: `links` on doctype schemas declare relationships with cardinality and direction
 - **Hierarchical State Tree (HST)**: Advanced state management with tree navigation
 - **Operation Log**: Global undo/redo with time-travel debugging, automatic FSM transition tracking, and action execution tracking
 - **Action Tracking**: Audit trail for stateless action executions (print, email, archive, etc.)
 - **Field Triggers**: Event-driven field actions integrated with XState
-- **VueUse Integration**: Leverages battle-tested VueUse composables for keyboard shortcuts and persistence
 
 ## Installation & Usage
 
@@ -15,7 +16,8 @@ _This package is under active development / design._
 
 ```typescript
 import { createApp } from 'vue'
-import Stonecrop from '@stonecrop/stonecrop'
+import Stonecrop, { Stonecrop as StonecropClass } from '@stonecrop/stonecrop'
+import { StonecropClient } from '@stonecrop/graphql-client'
 import router from './router'
 
 const app = createApp(App)
@@ -30,32 +32,66 @@ app.use(Stonecrop, {
     return await fetchDoctypeMeta(segments[0])
   },
 
-  // Optional: replace the default REST fetch() stub with your own transport.
-  // When provided, Stonecrop.getRecord() calls this instead of fetch(`/${slug}/${id}`).
-  fetchRecord: async (doctype, id) => {
-    return await myApiClient.getRecord(doctype, id)
-  },
-
-  // Optional: replace the default REST fetch() stub for lists.
-  fetchRecords: async (doctype) => {
-    return await myApiClient.getRecords(doctype)
+  // Wire up the client after plugin initialization.
+  // The callback receives registry and stonecrop instances directly.
+  onRouterInitialized: (registry, stonecrop) => {
+    const client = new StonecropClient({
+      endpoint: 'http://localhost:4000/graphql',
+      headers: { Authorization: `Bearer ${token}` },
+      registry: buildMetaMap(registry),
+    })
+    stonecrop.setClient(client)
   },
 })
+```
+
+### Accessing Stonecrop Outside Vue Components
 
-app.mount('#app')
+Inside a component, use `useStonecrop()`. Outside a component (e.g., workflow action handlers, utilities), use `getStonecrop()`:
+
+```typescript
+import { getStonecrop } from '@stonecrop/stonecrop'
+
+// In a workflow action handler or non-component utility:
+const stonecrop = getStonecrop()
+if (stonecrop) {
+  const payload = stonecrop.collectRecordPayload(doctype, recordId)
+  // ...
+}
+```
+
+### Building the DoctypeMeta Map
+
+`StonecropClient` expects a `Map<string, DoctypeMeta>`, but the Registry stores `Doctype` instances. Convert between them:
+
+```typescript
+import type { DoctypeMeta } from '@stonecrop/schema'
+import type { Registry, Doctype } from '@stonecrop/stonecrop'
+
+function buildMetaMap(registry: Registry): Map<string, DoctypeMeta> {
+  const metaMap = new Map<string, DoctypeMeta>()
+  for (const [slug, doctype] of Object.entries(registry.registry)) {
+    metaMap.set(slug, {
+      name: doctype.doctype,
+      slug,
+      tableName: slug.replace(/-/g, '_'),
+      fields: doctype.getSchemaArray(),
+      links: doctype.links || {},
+    })
+  }
+  return metaMap
+}
 ```
 
 ### Plugin Options
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `router` | `Router` | Vue Router instance. Required for route-based doctype resolution. |
-| `getMeta` | `(ctx: RouteContext) => Doctype \| Promise<Doctype>` | Lazy-loads doctype metadata for the current route. `ctx` has `path` and `segments`. |
-| `fetchRecord` | `(doctype, id) => Promise<Record \| null>` | Injectable replacement for `Stonecrop.getRecord()`'s default REST fetch. Use this to plug in GraphQL or any other transport. |
-| `fetchRecords` | `(doctype) => Promise<Record[]>` | Injectable replacement for `Stonecrop.getRecords()`'s default REST fetch. |
-| `components` | `Record<string, Component>` | Additional Vue components to register globally. |
-| `autoInitializeRouter` | `boolean` | Call `onRouterInitialized` automatically after mount. Default: `false`. |
-| `onRouterInitialized` | `(registry, stonecrop) => void` | Callback invoked after plugin install + mount. Receives the Registry and Stonecrop instances. |
+| Option                 | Type                                                 | Description                                                                                   |
+| ---------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `router`               | `Router`                                             | Vue Router instance. Required for route-based doctype resolution.                             |
+| `getMeta`              | `(ctx: RouteContext) => Doctype \| Promise<Doctype>` | Lazy-loads doctype metadata for the current route. `ctx` has `path` and `segments`.           |
+| `components`           | `Record<string, Component>`                          | Additional Vue components to register globally.                                               |
+| `autoInitializeRouter` | `boolean`                                            | Call `onRouterInitialized` automatically after mount. Default: `false`.                       |
+| `onRouterInitialized`  | `(registry, stonecrop) => void`                      | Callback invoked after plugin install + mount. Receives the Registry and Stonecrop instances. |
 
 ### Available Imports
 
@@ -69,6 +105,7 @@ import {
   Registry,        // Doctype registry (singleton)
   Doctype,         // Doctype definition class
   useStonecrop,    // Vue composable — primary integration point
+  getStonecrop,    // Access singleton outside Vue components
   HST,             // HST store class
   createHST,       // HST factory function
 } from '@stonecrop/stonecrop'
@@ -118,7 +155,7 @@ When you pass a string doctype slug instead of a `Doctype` instance, `useStonecr
 
 ```typescript
 const { isLoading, error, resolvedDoctype, formData } = useStonecrop({
-  doctype: 'plan',  // string slug - triggers lazy-loading
+  doctype: 'plan', // string slug - triggers lazy-loading
   recordId: '123',
 })
 
@@ -131,12 +168,15 @@ const { isLoading, error, resolvedDoctype, formData } = useStonecrop({
 This pattern eliminates the timing mismatch when loading doctypes asynchronously in Nuxt plugins.
 
 ## Design
-A Doctype defines schema, workflow, and actions.
-  - **Schema** describes the data model and field layout — used by AForm for rendering.
-  - **Workflow** is an XState machine config expressing the states and transitions a record can go through.
-  - **Actions** are an ordered map of named functions, triggered by field changes (lowercase keys) or FSM transitions (UPPERCASE keys).
-  - **Registry** is the singleton catalog — all doctypes live here. Optional Vue Router integration allows automatic route creation per doctype.
-  - **Stem/`useStonecrop()`** is the Vue composable that wires components to HST and provides `formData`, `provideHSTPath`, `handleHSTChange`, and the operation log API.
+
+A Doctype defines schema, links, workflow, and actions.
+
+- **Schema** describes the data model and field layout — used by AForm for rendering.
+- **Links** declare relationships to other doctypes with cardinality and direction (`noneOrMany`, `atMostOne`, etc.).
+- **Workflow** is an XState machine config expressing the states and transitions a record can go through.
+- **Actions** are an ordered map of named functions, triggered by field changes (lowercase keys) or FSM transitions (UPPERCASE keys).
+- **Registry** is the singleton catalog — all doctypes live here. Optional Vue Router integration allows automatic route creation per doctype.
+- **`useStonecrop()`** is the Vue composable that wires components to HST and provides `formData`, `provideHSTPath`, `handleHSTChange`, and the operation log API.
 
 The data model is **two operations**: get data and run actions. There is no CRUD. Records change state through FSM transitions; those transitions have side effects (persistence, notifications, etc.) defined in action handlers registered by the application. The framework provides the pipeline; applications define what actions exist and what they do.
 
@@ -152,16 +192,19 @@ doctype.recordId.nested.field     // deep nesting supported
 ## Core Requirements
 
 ### 1. Data Structure Compatibility
+
 - **Vue Reactive Objects**: Must work seamlessly with `reactive()`, `ref()`, and `computed()` primitives
 - **Pinia Store Integration**: Compatible with both Options API and Composition API Pinia stores
 - **Immutable Objects**: Support for frozen/immutable configuration objects without breaking reactivity
 
 ### 2. Path-Based Addressing System
+
 - **Dot Notation**: Full support for dot-notation paths (e.g., `"users.123.profile.settings"`)
 - **Dynamic Paths**: Support for programmatically generated path strings (particularly component to HST)
 
 ### 3. Hierarchical Navigation
-- **Parent/Child Relationships**: Maintain bidirectional parent-child references
+
+- **Ancestor/Descendant Relationships**: Maintain bidirectional ancestor-descendant references
 - **Sibling Access**: Efficient navigation between sibling nodes
 - **Root Access**: Always accessible reference to tree root from any node
 - **Depth Tracking**: Know the depth level of any node in the hierarchy

package/dist/composable.js

@@ -0,0 +1 @@
+export { useStonecrop } from './composables/stonecrop';

package/dist/composables/lazy-link.js

@@ -0,0 +1,125 @@
+import { computed, inject, ref } from 'vue';
+import { Stonecrop } from '../stonecrop';
+/**
+ * Get the lazy link state for a specific link field on a doctype record.
+ *
+ * This composable provides reactive state for lazy-loaded links:
+ * - `loading`: true while fetching
+ * - `loaded`: true after successful fetch (permanent until reload)
+ * - `error`: error state if any
+ * - `reload()`: explicitly trigger a fetch
+ * - `data`: computed from HST, or undefined if not loaded
+ *
+ * The reload() function respects the link's fetch strategy:
+ * - `sync`: fetches via GraphQL query through fetchNestedData
+ * - `lazy`: fetches via GraphQL query through fetchNestedData
+ * - `custom`: invokes the serialized handler function directly
+ *
+ * @param doctype - The doctype instance
+ * @param recordId - The record ID
+ * @param linkFieldname - The link fieldname to load
+ * @returns LazyLink with loading, loaded, error, reload, and data
+ * @public
+ */
+export function useLazyLink(doctype, recordId, linkFieldname) {
+    const stonecropInstance = inject('$stonecrop') || Stonecrop._root;
+    if (!stonecropInstance) {
+        throw new Error('Stonecrop instance not available. Ensure useStonecrop() has been called first.');
+    }
+    const loading = ref(false);
+    const loaded = ref(false);
+    const error = ref(null);
+    const hstStore = stonecropInstance.getStore();
+    /**
+     * Build the HST path for a lazy link field
+     */
+    const getLinkPath = () => {
+        const slug = doctype.slug || doctype.doctype;
+        return `${slug}.${recordId}.${linkFieldname}`;
+    };
+    /**
+     * Get the link declaration from the doctype schema
+     */
+    const getLinkDeclaration = () => {
+        return doctype.links?.[linkFieldname]?.fetch;
+    };
+    /**
+     * Invoke a custom fetch handler
+     * The handler is a serialized function string that we execute via new Function()
+     */
+    const invokeCustomHandler = async (handler) => {
+        try {
+            // Create function from serialized string and invoke it
+            // The function receives the stonecrop instance and path as parameters
+            // eslint-disable-next-line @typescript-eslint/no-implied-eval
+            const fn = new Function('stonecrop', 'path', 'hst', `
+				return (${handler})(stonecrop, path, hst)
+			`);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            return await fn(stonecropInstance, getLinkPath(), hstStore);
+        }
+        catch (err) {
+            throw new Error(`Custom handler failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    };
+    /**
+     * Fetch the link data using the appropriate strategy
+     */
+    const fetchLinkData = async () => {
+        const linkFetch = getLinkDeclaration();
+        const ancestorPath = `${doctype.slug || doctype.doctype}.${recordId}`;
+        if (linkFetch?.method === 'custom') {
+            // Ensure ancestor path exists before invoking custom handler
+            if (!hstStore.has(ancestorPath)) {
+                hstStore.set(ancestorPath, {}, 'system');
+            }
+            // Custom handler - invoke directly
+            const result = await invokeCustomHandler(linkFetch.handler);
+            // Store result in HST at the link path
+            hstStore.set(getLinkPath(), result, 'system');
+        }
+        else {
+            // sync or lazy (both use fetchNestedData but with different includeNested)
+            // For lazy links, we still use fetchNestedData but only for this specific link
+            await stonecropInstance.fetchNestedData(ancestorPath, doctype, recordId, { includeNested: [linkFieldname] });
+        }
+    };
+    /**
+     * Explicitly reload the lazy link data
+     */
+    const reload = async () => {
+        if (loading.value)
+            return;
+        loading.value = true;
+        error.value = null;
+        try {
+            await fetchLinkData();
+            loaded.value = true;
+        }
+        catch (err) {
+            error.value = err instanceof Error ? err : new Error(String(err));
+            throw err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    /**
+     * Computed property that returns the loaded data from HST
+     */
+    const data = computed(() => {
+        if (!loaded.value)
+            return undefined;
+        return hstStore.get(getLinkPath());
+    });
+    return {
+        // State
+        loading,
+        loaded,
+        error,
+        // Computed
+        data,
+        // Actions
+        reload,
+    };
+}

package/dist/composables/stonecrop.js

@@ -21,6 +21,21 @@ export function useStonecrop(options) {
     const isLoading = ref(false);
     const error = ref(null);
     const resolvedDoctype = ref();
+    // Workflow readiness computed properties
+    const isWorkflowReady = computed(() => {
+        if (!stonecrop.value || !resolvedDoctype.value || !options.recordId || options.recordId === 'new') {
+            return true;
+        }
+        const status = stonecrop.value.isWorkflowReady(resolvedDoctype.value, options.recordId);
+        return status.ready;
+    });
+    const blockedLinks = computed(() => {
+        if (!stonecrop.value || !resolvedDoctype.value || !options.recordId || options.recordId === 'new') {
+            return [];
+        }
+        const status = stonecrop.value.isWorkflowReady(resolvedDoctype.value, options.recordId);
+        return status.blockedLinks ?? [];
+    });
     // Initialize stonecrop instance synchronously using singleton pattern
     // Use injected instance if available, otherwise fall back to the singleton root
     const stonecropInstance = providedStonecrop || Stonecrop._root;
@@ -31,7 +46,7 @@ export function useStonecrop(options) {
     if (options?.doctype && typeof options.doctype !== 'string') {
         resolvedDoctype.value = options.doctype;
     }
-    // Operation log state and methods - will be populated after stonecrop instance is created
+    // Operation log state and methods
     const operations = ref([]);
     const currentIndex = ref(-1);
     const canUndo = computed(() => stonecrop.value?.getOperationLogStore().canUndo ?? false);
@@ -85,12 +100,9 @@ export function useStonecrop(options) {
     const configure = (config) => {
         stonecrop.value?.getOperationLogStore().configure(config);
     };
-    // Initialize Stonecrop instance
-    onMounted(async () => {
-        if (!registry || !stonecrop.value) {
-            return;
-        }
-        // Set up reactive refs from operation log store - only if Pinia is available
+    // Wire operation log reactive state synchronously — no lifecycle hook needed.
+    // storeToRefs and watch are both safe to call in setup() body.
+    if (registry && stonecrop.value) {
         try {
             const opLogStore = stonecrop.value.getOperationLogStore();
             const opLogRefs = storeToRefs(opLogStore);
@@ -105,8 +117,29 @@ export function useStonecrop(options) {
             });
         }
         catch {
-            // Pinia not available (e.g., in tests) - operation log features will not be available
-            // Silently fail - operation log is optional
+            // Pinia not available — operation log is optional, silently skip
+        }
+    }
+    // Synchronous HST initialisation for an explicit Doctype instance.
+    // When the caller passes a Doctype object (not a slug string), every piece of
+    // setup that doesn't require network I/O runs here during setup() so that
+    // hstStore, resolvedSchema, and formData are populated before the first render
+    // and are immediately available to callers without any await.
+    if (options.doctype && typeof options.doctype !== 'string' && registry && stonecrop.value) {
+        hstStore.value = stonecrop.value.getStore();
+        resolvedSchema.value = registry.resolveSchema(options.doctype);
+        if (!options.recordId || options.recordId === 'new') {
+            formData.value = registry.initializeRecord(resolvedSchema.value);
+        }
+        if (hstStore.value) {
+            setupDeepReactivity(options.doctype, options.recordId || 'new', formData, hstStore.value);
+        }
+    }
+    // onMounted handles only work that is genuinely async: lazy-loading a doctype
+    // by slug, fetching an existing record from the server, and router-based setup.
+    onMounted(async () => {
+        if (!registry || !stonecrop.value) {
+            return;
         }
         // Handle router-based setup if no specific doctype provided
         if (!options.doctype && registry.router) {
@@ -132,12 +165,7 @@ export function useStonecrop(options) {
                     hstStore.value = stonecrop.value.getStore();
                     // Resolve schema for router-loaded doctype
                     if (registry) {
-                        const schemaArray = doctype.schema
-                            ? Array.isArray(doctype.schema)
-                                ? doctype.schema
-                                : Array.from(doctype.schema)
-                            : [];
-                        resolvedSchema.value = registry.resolveSchema(schemaArray);
+                        resolvedSchema.value = registry.resolveSchema(doctype);
                     }
                     if (recordId && recordId !== 'new') {
                         const existingRecord = stonecrop.value.getRecordById(doctype, recordId);
@@ -169,15 +197,14 @@ export function useStonecrop(options) {
         }
         // Handle HST integration if doctype is provided explicitly
         if (options.doctype) {
-            hstStore.value = stonecrop.value.getStore();
             const recordId = options.recordId;
-            // Resolve doctype - handle string (lazy-load) or Doctype instance
-            let doctype;
             if (typeof options.doctype === 'string') {
-                // String doctype - check registry first, then lazy-load
+                // String doctype — resolve lazily, then do full sync-equivalent setup here.
                 const doctypeSlug = options.doctype;
+                hstStore.value = stonecrop.value.getStore();
                 isLoading.value = true;
                 error.value = null;
+                let doctype;
                 try {
                     // Check if already in registry
                     doctype = registry.getDoctype(doctypeSlug);
@@ -202,47 +229,57 @@ export function useStonecrop(options) {
                 finally {
                     isLoading.value = false;
                 }
-            }
-            else {
-                // Doctype instance provided directly
-                doctype = options.doctype;
-            }
-            // Set resolved doctype for consumers
-            resolvedDoctype.value = doctype;
-            if (!doctype) {
-                // Error already set above, just return
-                return;
-            }
-            // Resolve schema for the doctype
-            const schemaArray = doctype.schema
-                ? Array.isArray(doctype.schema)
-                    ? doctype.schema
-                    : Array.from(doctype.schema)
-                : [];
-            resolvedSchema.value = registry.resolveSchema(schemaArray);
-            if (recordId && recordId !== 'new') {
-                const existingRecord = stonecrop.value.getRecordById(doctype, recordId);
-                if (existingRecord) {
-                    formData.value = existingRecord.get('') || {};
-                }
-                else {
-                    try {
-                        await stonecrop.value.getRecord(doctype, recordId);
-                        const loadedRecord = stonecrop.value.getRecordById(doctype, recordId);
-                        if (loadedRecord) {
-                            formData.value = loadedRecord.get('') || {};
-                        }
+                resolvedDoctype.value = doctype;
+                if (!doctype)
+                    return;
+                resolvedSchema.value = registry.resolveSchema(doctype);
+                if (recordId && recordId !== 'new') {
+                    const existingRecord = stonecrop.value.getRecordById(doctype, recordId);
+                    if (existingRecord) {
+                        formData.value = existingRecord.get('') || {};
                     }
-                    catch {
-                        formData.value = registry.initializeRecord(resolvedSchema.value);
+                    else {
+                        try {
+                            await stonecrop.value.getRecord(doctype, recordId);
+                            const loadedRecord = stonecrop.value.getRecordById(doctype, recordId);
+                            if (loadedRecord) {
+                                formData.value = loadedRecord.get('') || {};
+                            }
+                        }
+                        catch {
+                            formData.value = registry.initializeRecord(resolvedSchema.value);
+                        }
                     }
                 }
+                else {
+                    formData.value = registry.initializeRecord(resolvedSchema.value);
+                }
+                if (hstStore.value) {
+                    setupDeepReactivity(doctype, recordId || 'new', formData, hstStore.value);
+                }
             }
             else {
-                formData.value = registry.initializeRecord(resolvedSchema.value);
-            }
-            if (hstStore.value) {
-                setupDeepReactivity(doctype, recordId || 'new', formData, hstStore.value);
+                // Doctype instance — sync init was done during setup().
+                // Only handle the async path: fetching an existing record from the server.
+                if (recordId && recordId !== 'new') {
+                    const doctype = options.doctype;
+                    const existingRecord = stonecrop.value.getRecordById(doctype, recordId);
+                    if (existingRecord) {
+                        formData.value = existingRecord.get('') || {};
+                    }
+                    else {
+                        try {
+                            await stonecrop.value.getRecord(doctype, recordId);
+                            const loadedRecord = stonecrop.value.getRecordById(doctype, recordId);
+                            if (loadedRecord) {
+                                formData.value = loadedRecord.get('') || {};
+                            }
+                        }
+                        catch {
+                            formData.value = registry.initializeRecord(resolvedSchema.value);
+                        }
+                    }
+                }
             }
         }
     });
@@ -302,18 +339,30 @@ export function useStonecrop(options) {
         provide('hstChangeHandler', handleHSTChange);
     }
     /**
-     * Load nested doctype data from API or initialize empty structure
-     * Delegates to Stonecrop.loadNestedData method
-     * @param parentPath - The parent path (e.g., "customer.123.address")
-     * @param childDoctype - The child doctype metadata
-     * @param recordId - Optional record ID to load
-     * @returns The loaded or initialized data
+     * Scaffold empty descendant records from defaults for all descendant links.
+     * Delegates to Stonecrop.initializeNestedData method.
+     * @param path - The HST path where initialized data should be stored
+     * @param doctype - The doctype to initialize
+     */
+    const initializeNestedData = (path, doctype) => {
+        if (!stonecrop.value) {
+            throw new Error('Stonecrop instance not available');
+        }
+        return stonecrop.value.initializeNestedData(path, doctype);
+    };
+    /**
+     * Fetch a record and its nested data from the server.
+     * Delegates to Stonecrop.fetchNestedData method.
+     * @param path - The HST path (e.g., "recipe.r1")
+     * @param doctype - The doctype to fetch
+     * @param recordId - Record ID to fetch
+     * @param options - Query options (includeNested to control which links are fetched)
      */
-    const loadNestedData = (parentPath, childDoctype, recordId) => {
+    const fetchNestedData = async (path, doctype, recordId, options) => {
         if (!stonecrop.value) {
             throw new Error('Stonecrop instance not available');
         }
-        return stonecrop.value.loadNestedData(parentPath, childDoctype, recordId);
+        return stonecrop.value.fetchNestedData(path, doctype, recordId, options);
     };
     /**
      * Collect a record payload with all nested doctype fields from HST
@@ -329,12 +378,12 @@ export function useStonecrop(options) {
         return stonecrop.value.collectRecordPayload(doctype, recordId);
     };
     /**
-     * Create a nested context for child forms
+     * Create a nested context for descendant forms
      * @param basePath - The base path for the nested context (e.g., "customer.123.address")
-     * @param _childDoctype - The child doctype metadata (unused but kept for API consistency)
+     * @param _descendantDoctype - The descendant doctype metadata (unused but kept for API consistency)
      * @returns Object with scoped provideHSTPath and handleHSTChange
      */
-    const createNestedContext = (basePath, _childDoctype) => {
+    const createNestedContext = (basePath, _descendantDoctype) => {
         const nestedProvideHSTPath = (fieldname) => {
             return `${basePath}.${fieldname}`;
         };
@@ -383,12 +432,15 @@ export function useStonecrop(options) {
             hstStore,
             formData,
             resolvedSchema,
-            loadNestedData,
+            initializeNestedData,
+            fetchNestedData,
             collectRecordPayload,
             createNestedContext,
             isLoading,
             error,
             resolvedDoctype,
+            isWorkflowReady,
+            blockedLinks,
         };
     }
     else if (!options.doctype && registry?.router) {
@@ -401,12 +453,15 @@ export function useStonecrop(options) {
             hstStore,
             formData,
             resolvedSchema,
-            loadNestedData,
+            initializeNestedData,
+            fetchNestedData,
             collectRecordPayload,
             createNestedContext,
             isLoading,
             error,
             resolvedDoctype,
+            isWorkflowReady,
+            blockedLinks,
         };
     }
     // No doctype and no router - basic mode