@dosgato/templating 1.0.8 → 1.1.0

package/dist/apitemplate.d.ts

@@ -34,15 +34,27 @@ export interface PageExtras {
     linkId?: string;
     /** The name the page has or will have. NOTE: looking the page up by name will not work during page creation. */
     name: string;
+    /**
+     * The full page data before the validation/migration in case validating depends on the previous
+     * state of the page.
+     *
+     * Will be undefined during page creations, and equal to the data already being passed to a migration.
+     */
+    page?: PageData;
 }
 export interface ComponentExtras extends PageExtras {
+    /** The path within the page data to the component currently being evaluated. */
+    path: string;
     /**
-     * The full page data in case validating or migrating a component depends on state
+     * The full page data before the validation/migration in case validating depends on state
      * elsewhere in the page.
      */
     page: PageData;
-    /** The path within the page data to the component currently being evaluated. */
-    path: string;
+    /**
+     * The component data before validation. Will be present during migration but equal to the
+     * data already being passed to the migration.
+     */
+    currentData: ComponentData;
 }
 export interface DataExtras {
     /** A function for executing a graphql query to acquire more information than is already at hand. */

package/dist/component.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="node" />
-/// <reference types="node" />
 import type { IncomingHttpHeaders } from 'http';
 import type { ParsedUrlQuery } from 'querystring';
 import { ResourceProvider } from './provider.js';
@@ -89,7 +87,7 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      * The extension will NOT include the preceding dot. In the case of an extended extension like
      * '.js.map', you should receive 'js.map'.
      */
-    shouldFetchVariation(extension: string): boolean;
+    shouldFetchVariation(extension: string): extension is "html";
     /**
      * Some components may be inheritable to subpages within the same site. For instance, a site's
      * social media links may appear on every page's footer. To accomplish this in your template,
@@ -280,6 +278,11 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      * Its edit bar will not have a pencil icon.
      */
     noData: boolean;
+    /**
+     * Override with `true` to indicate that this template renders its own edit bar
+     * so that the parent component will avoid rendering it
+     */
+    renderIncludesEditBar: boolean;
     /**
      * Components may override this function to give their new bars a custom
      * label
@@ -325,6 +328,16 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
     reqHeaders: IncomingHttpHeaders;
     reqQuery: ParsedUrlQuery;
     indexInArea: number;
+    /**
+     * the full array of components in the same area as this component, including self
+     *
+     * empty for page component
+     */
+    siblings: Component[];
+    /** the component before this one inside the area, null if this component is first */
+    prevSibling?: Component;
+    /** the component after this one inside the area, null if this component is last */
+    nextSibling?: Component;
     /**
      * For logging errors during rendering without crashing the render. If your fetch, setContext,
      * render, or renderVariation functions throw, the error will be logged but the page render will
@@ -484,6 +497,21 @@ export interface RenderComponentsWrapParams {
      * Will be undefined for the new bar, so check that it is not null.
      */
     component?: Component;
+    /**
+     * Contains all the components in the same area as the component being rendered.
+     *
+     * Use this if you need to wrap multiple components together inside the same
+     * box. For instance, if you have several components of the same type in a row,
+     * perhaps you want them to automatically appear side by side in a flexbox.
+     *
+     * Your wrap function could inspect the components before and after the current
+     * component, based on indexInArea, and decide to open a div when the preceding is
+     * not the right type and the following is, then close the div when the preceding
+     * is the right type and the following is not.
+     *
+     * Will be defined when rendering the new bar.
+     */
+    siblings: Component[];
 }
 export interface RenderComponentsOpts {
     /**

package/dist/component.js

@@ -110,24 +110,27 @@ export class Component extends ResourceProvider {
     renderComponents(components = [], opts) {
         if (!Array.isArray(components))
             components = this.renderedAreas.get(components) ?? [];
+        const siblings = components.map(c => c.component);
         const wrap = opts?.wrap ?? defaultWrap;
         if (opts?.skipContent && !this.editMode)
             return '';
         if (opts?.skipBars || opts?.skipEditBars || !this.editMode)
-            return components.map((c, indexInArea) => wrap({ ...c, content: c.output, bar: '', indexInArea })).join('');
+            return components.map((c, indexInArea) => wrap({ ...c, content: c.output, bar: '', indexInArea, siblings })).join('');
         return components
             .map((c, indexInArea) => {
             if (c.component.inheritedFrom && opts?.hideInheritBars) {
-                return opts.skipContent ? '' : wrap({ ...c, content: c.output, bar: '', indexInArea });
+                return opts.skipContent ? '' : wrap({ ...c, content: c.output, bar: '', indexInArea, siblings });
             }
             else {
-                const bar = c.component.editBar({
-                    ...opts?.editBarOpts,
-                    label: typeof opts?.editBarOpts?.label === 'function' ? opts.editBarOpts.label(c.component) : opts?.editBarOpts?.label,
-                    extraClass: typeof opts?.editBarOpts?.extraClass === 'function' ? opts.editBarOpts.extraClass(c.component) : opts?.editBarOpts?.extraClass
-                });
+                const bar = c.component.renderIncludesEditBar
+                    ? ''
+                    : c.component.editBar({
+                        ...opts?.editBarOpts,
+                        label: typeof opts?.editBarOpts?.label === 'function' ? opts.editBarOpts.label(c.component) : opts?.editBarOpts?.label,
+                        extraClass: typeof opts?.editBarOpts?.extraClass === 'function' ? opts.editBarOpts.extraClass(c.component) : opts?.editBarOpts?.extraClass
+                    });
                 const content = opts?.skipContent ? '' : c.output;
-                return wrap({ output: bar + content, content, bar, component: c.component, indexInArea });
+                return wrap({ output: bar + content, content, bar, component: c.component, indexInArea, siblings });
             }
         }).join('');
     }
@@ -159,7 +162,7 @@ export class Component extends ResourceProvider {
                 bar = this.newBar(areaName, opts?.newBarOpts);
             }
             if (bar != null)
-                output += wrap({ output: bar, content: '', bar, indexInArea: components.length });
+                output += wrap({ output: bar, content: '', bar, indexInArea: components.length, siblings: components.map(c => c.component) });
         }
         return output;
     }
@@ -244,6 +247,11 @@ export class Component extends ResourceProvider {
          * Its edit bar will not have a pencil icon.
          */
         this.noData = false;
+        /**
+         * Override with `true` to indicate that this template renders its own edit bar
+         * so that the parent component will avoid rendering it
+         */
+        this.renderIncludesEditBar = false;
         // Properties provided during the rendering process. You do not have to provide these when
         // building a template, but you can use them in the functions you do provide
         this.areas = new Map(); // a Map of area names and the array of hydrated components in each

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dosgato/templating",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "A library to support building templates for dosgato CMS.",
   "type": "module",
   "exports": {