@dosgato/templating 0.0.39 → 0.0.40

package/dist/component.d.ts

@@ -1,4 +1,3 @@
-import { EditBarOpts } from './editbar.js';
 import { ResourceProvider } from './provider.js';
 import { APIClient } from './render.js';
 /**
@@ -9,8 +8,15 @@ import { APIClient } from './render.js';
  * parent and child components linked.
  */
 export declare abstract class Component<DataType extends ComponentData = any, FetchedType = any, RenderContextType extends ContextBase = any> extends ResourceProvider {
+    /**
+     * Provide this when you create a template to identify what you are defining.
+     */
     static templateKey: string;
-    static templateName: string;
+    /**
+     * These functions will be provided by the rendering server
+     */
+    static editBar: (path: string, opts: EditBarOpts) => string;
+    static newBar: (path: string, opts: EditBarOpts) => string;
     areas: Map<string, Component<any, any, any>[]>;
     data: Omit<DataType, 'areas'>;
     fetched: FetchedType;
@@ -19,6 +25,20 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
     parent?: Component;
     page?: Page;
     hadError: boolean;
+    autoLabel: () => string;
+    autoNewLabel: () => string;
+    /**
+     * When hydrating an inherited component, the renderer will set this to the id of the page it
+     * came from. You may use this information in any of the phases to alter your behavior if needed.
+     *
+     * For instance, you may decide that your fetch function needs some extra information from the
+     * originating page instead of the page you're being inherited into (your `this.page` will
+     * be the page currently being rendered, NOT the page the inheritable component came from).
+     *
+     * This property is also used to alter the edit bar. Inherited components may never be edited
+     * except on their original page, so the edit bar will render with a link to the original page.
+     */
+    inheritedFrom?: string;
     /**
      * This property will be set during page render and you may refer to it at any time to
      * determine whether you are doing your work in edit mode or regular rendering mode.
@@ -55,6 +75,13 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      * other Component instances.
      */
     getAncestorPageData: () => Promise<PageData[]>;
+    /**
+     * 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,
+     * you need to fetch the data in your fetch phase and then call this function within your fetch
+     * to let the renderer know it needs to hydrate them and include them in the render.
+     */
+    registerInherited: (area: string, components: ComponentData[], top?: true) => void;
     /**
      * The first phase of rendering a component is the fetch phase. Each component may
      * provide a fetch method that looks up data it needs from external sources. This step
@@ -92,7 +119,7 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      * render will be passed to parent components so that the HTML can be included during the
      * render of the parent component.
      */
-    abstract render(renderedAreas: Map<string, string[]>): string;
+    abstract render(renderedAreas: Map<string, RenderedComponent[]>): string;
     /**
      * Sometimes pages are requested with an alternate extension like .rss or .ics. In these
      * situations, each component should consider whether it should output anything. For
@@ -114,6 +141,9 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      */
     logError(e: Error): void;
     protected passError(e: Error, path: string): void;
+    renderComponents(components?: RenderedComponent[], opts?: {
+        hideInheritBars?: boolean;
+    }): string;
     /**
      * During rendering, each component should determine the CSS blocks that it needs. This may
      * change depending on the data. For instance, if you need some CSS to style up an image, but
@@ -130,11 +160,11 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
     jsBlocks(): string[];
     /**
      * Components may override this function to give their edit bars a custom
-     * label instead of using the templateName property
+     * label instead of using the template name
      *
      * For instance, you could return this.data.title
      */
-    editLabel(): string;
+    editLabel(): undefined;
     /**
      * Components may override this function to give their edit bars a custom
      * CSS class
@@ -147,7 +177,7 @@ export declare abstract class Component<DataType extends ComponentData = any, Fe
      * For instance, an area that only accepts 'layout' components could
      * return "Add Layout"
      */
-    newLabel(areaName: string): string;
+    newLabel(areaName: string): undefined;
     /**
      * Components may override this function to give their new bars a custom
      * CSS class
@@ -195,6 +225,17 @@ export interface ContextBase {
      */
     headerLevel: number;
 }
+export interface EditBarOpts {
+    extraClass?: string;
+    label?: string;
+    editMode?: boolean;
+    inheritedFrom?: string;
+}
+export interface RenderedComponent {
+    inherited: boolean;
+    html: string;
+    editbar: string;
+}
 export declare abstract class Page<DataType extends PageData = any, FetchedType = any, RenderContextType extends ContextBase = any> extends Component<DataType, FetchedType, RenderContextType> {
     pagePath: string;
     /**

package/dist/component.js

@@ -1,5 +1,4 @@
 import { isNotBlank } from 'txstate-utils';
-import { editBar, newBar } from './editbar.js';
 import { ResourceProvider } from './provider.js';
 /**
  * This is the primary templating class to build your templates. Subclass it and provide
@@ -92,6 +91,11 @@ export class Component extends ResourceProvider {
     passError(e, path) {
         this.parent?.passError(e, path);
     }
+    // helper function to help you print an area, but you can also override this if you
+    // need to do something advanced like wrap each component in a div
+    renderComponents(components = [], opts) {
+        return components.flatMap(c => c.inherited && opts?.hideInheritBars ? [c.html] : [c.editbar, c.html]).join('');
+    }
     /**
      * During rendering, each component should determine the CSS blocks that it needs. This may
      * change depending on the data. For instance, if you need some CSS to style up an image, but
@@ -112,13 +116,12 @@ export class Component extends ResourceProvider {
     }
     /**
      * Components may override this function to give their edit bars a custom
-     * label instead of using the templateName property
+     * label instead of using the template name
      *
      * For instance, you could return this.data.title
      */
     editLabel() {
-        const This = this.constructor;
-        return This.templateName;
+        return undefined;
     }
     /**
      * Components may override this function to give their edit bars a custom
@@ -135,7 +138,7 @@ export class Component extends ResourceProvider {
      * return "Add Layout"
      */
     newLabel(areaName) {
-        return 'Add Content';
+        return undefined;
     }
     /**
      * Components may override this function to give their new bars a custom
@@ -150,10 +153,11 @@ export class Component extends ResourceProvider {
      * Generally should not be overridden - override editLabel and editClass instead
      */
     editBar(opts = {}) {
-        opts.label ?? (opts.label = this.editLabel());
+        opts.label ?? (opts.label = this.editLabel() ?? this.autoLabel());
         opts.extraClass ?? (opts.extraClass = this.editClass());
-        opts.editMode = this.editMode;
-        return editBar(this.path, opts);
+        opts.editMode ?? (opts.editMode = this.editMode);
+        opts.inheritedFrom ?? (opts.inheritedFrom = this.inheritedFrom);
+        return Component.editBar(this.path, opts);
     }
     /**
      * Components may override this function to provide a custom new bar
@@ -161,10 +165,11 @@ export class Component extends ResourceProvider {
      * Generally should not be overridden - override newLabel and newClass instead
      */
     newBar(areaName, opts = {}) {
-        opts.label ?? (opts.label = this.newLabel(areaName));
+        opts.label ?? (opts.label = this.newLabel(areaName) ?? this.autoNewLabel());
         opts.extraClass ?? (opts.extraClass = this.newClass(areaName));
-        opts.editMode = this.editMode;
-        return newBar([this.path, 'areas', areaName].filter(isNotBlank).join('.'), opts);
+        opts.editMode ?? (opts.editMode = this.editMode);
+        opts.inheritedFrom ?? (opts.inheritedFrom = this.inheritedFrom);
+        return Component.newBar([this.path, 'areas', areaName].filter(isNotBlank).join('.'), opts);
     }
 }
 export class Page extends Component {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dosgato/templating",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "A library to support building templates for dosgato CMS.",
   "type": "module",
   "exports": {
@@ -18,7 +18,7 @@
     "txstate-utils": "^1.7.1"
   },
   "devDependencies": {
-    "eslint-config-standard-with-typescript": "^21.0.1",
+    "eslint-config-standard-with-typescript": "^22.0.0",
     "typescript": "^4.4.2"
   },
   "repository": {

package/dist/editbar.d.ts

@@ -1,11 +0,0 @@
-export interface EditBarOpts {
-    extraClass?: string;
-    label?: string;
-    editMode?: boolean;
-}
-export declare function editBar(path: string, opts: EditBarOpts & {
-    label: string;
-}): string;
-export declare function newBar(path: string, opts: EditBarOpts & {
-    label: string;
-}): string;

package/dist/editbar.js

@@ -1,23 +0,0 @@
-import { htmlEncode, randomid } from 'txstate-utils';
-export function editBar(path, opts) {
-    if (!opts.editMode)
-        return '';
-    const id = randomid();
-    return `
-<div class="dg-edit-bar ${opts.extraClass ?? ''}" data-path="${htmlEncode(path)}" draggable="true" ondragstart="window.dgEditing.drag(event)" ondragover="window.dgEditing.over(event)" ondragend="window.dgEditing.drop(event)">
-  <span id="${id}" class="dg-edit-bar-label">${htmlEncode(opts.label)}</span>
-  <button onclick="window.dgEditing.edit(event)" aria-describedby="${id}">Edit</button>
-  <button onclick="window.dgEditing.move(event)" aria-describedby="${id}">Move</button>
-  <button onclick="window.dgEditing.del(event)" aria-describedby="${id}">Trash</button>
-</div>
-  `.trim();
-}
-export function newBar(path, opts) {
-    if (!opts.editMode)
-        return '';
-    return `
-<div role="button" onclick="window.dgEditing.create(event)" class="dg-new-bar ${opts.extraClass ?? ''}" data-path="${htmlEncode(path)}">
-  ${htmlEncode(opts.label)}
-</div>
-  `.trim();
-}