1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import { Entry } from "./fs.ts";
import type { Data } from "./file.ts";import type Formats from "./formats.ts";
export interface Options {  /** The registered file formats */  formats: Formats;}
/** * Class to load components from the _components folder. */export default class ComponentsLoader {  /** List of loaders and engines used by extensions */  formats: Formats;
  constructor(options: Options) {    this.formats = options.formats;  }
  /** Load a directory of components */  async load(    dirEntry: Entry,    data: Partial<Data>,    components?: Components,  ): Promise<Components> {    if (!components) {      components = new Map();    }
    for await (const entry of dirEntry.children.values()) {      if (entry.name.startsWith(".") || entry.name.startsWith("_")) {        continue;      }
      if (entry.type === "directory") {        const name = entry.name.toLowerCase();        const subComponents = (components.get(name) || new Map()) as Components;        components.set(name, subComponents);
        await this.load(entry, data, subComponents);        continue;      }
      const component = await this.#loadComponent(entry, data);
      if (component) {        components.set(component.name.toLowerCase(), component);      }    }
    return components;  }
  /** Load a component file */  async #loadComponent(    entry: Entry,    inheritData: Partial<Data>,  ): Promise<Component | undefined> {    const format = this.formats.search(entry.name);
    if (!format) {      return;    }
    if (!format.loader || !format.engines?.length) {      return;    }
    const component = await entry.getContent(      format.loader,    ) as ComponentFile;
    function getData(data: Record<string, unknown>) {      if (component.inheritData === false) {        return { ...data };      }
      return { ...inheritData, ...data };    }
    const { content } = component;
    return {      name: component.name ?? entry.name.slice(0, -format.ext.length),      render(data) {        return format.engines!.reduce(          (content, engine) =>            engine.renderComponent(content, getData(data), entry.path),          content,        );      },      css: component.css,      js: component.js,    } as Component;  }}
export type Components = Map<string, Component | Components>;
export interface Component {  /** Name of the component (used to get it from templates) */  name: string;
  /** The function that will be called to render the component */  render: (props: Record<string, unknown>) => string;
  /** Optional CSS code needed to style the component (global, only inserted once) */  css?: string;
  /** Optional JS code needed for the component interactivity (global, only inserted once) */  js?: string;}
export interface ComponentFile {  /** Name of the component (used to get it from templates) */  name?: string;
  /** The content of the component */  content: unknown;
  /** Optional CSS code needed to style the component (global, only inserted once) */  css?: string;
  /** Optional JS code needed for the component interactivity (global, only inserted once) */  js?: string;
  /** If false, the data from the parent directory will not be inherited */  inheritData?: boolean;}