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
133
134
import { React, ReactDOMServer, specifier } from "../deps/react.ts";import loader from "../core/loaders/module.ts";import { merge } from "../core/utils/object.ts";
import type Site from "../core/site.ts";import type { Engine, Helper } from "../core/renderer.ts";
export interface Options {  /** The list of extensions this plugin applies to */  extensions?: string[];
  /** Optional sub-extension for page files */  pageSubExtension?: string;
  /**   * Custom includes path   * @default `site.options.includes`   */  includes?: string;}
// Default optionsexport const defaults: Options = {  extensions: [".jsx", ".tsx"],};
/** Template engine to render JSX files */export class JsxEngine implements Engine {  jsxImportSource = specifier;  helpers: Record<string, Helper> = {};  basePath: string;  includes: string;
  constructor(basePath: string, includes: string) {    this.basePath = basePath;    this.includes = includes;  }
  deleteCache() {}
  async render(content: unknown, data: Record<string, unknown> = {}) {    // The content is a string, so we have to convert to a React element    if (typeof content === "string") {      content = React.createElement("div", {        dangerouslySetInnerHTML: { __html: content },      });    }
    // Create the children property    let children = data.content;
    // If the children is a string, convert it to a React element    if (typeof children === "string") {      children = React.createElement("div", {        dangerouslySetInnerHTML: { __html: children },      });    }
    const element = typeof content === "object" && React.isValidElement(content)      ? content      : ((typeof content === "function"        ? await content({ ...data, children }, this.helpers)        : content) as React.ReactElement);
    if (React.isValidElement(element)) {      return {        ...element,        toString: () => ReactDOMServer.renderToStaticMarkup(element),      };    }
    return element;  }
  renderComponent(    content: unknown,    data: Record<string, unknown> = {},  ): { toString(): string } {    const element = typeof content === "function"      ? content(data, this.helpers)      : content;
    if (React.isValidElement(element)) {      return {        ...element,        toString: () => ReactDOMServer.renderToStaticMarkup(element),      };    }
    return element;  }
  addHelper(name: string, fn: Helper) {    this.helpers[name] = fn;  }}
/** Register the plugin to support JSX and TSX files */export default function (userOptions?: Options) {  return (site: Site) => {    const options = merge(      { ...defaults, includes: site.options.includes },      userOptions,    );
    const engine = new JsxEngine(site.src("/"), options.includes);
    // Ignore includes folder    if (options.includes) {      site.ignore(options.includes);    }
    // Load the pages and register the engine    site.loadPages(options.extensions, {      loader,      engine,      pageSubExtension: options.pageSubExtension,    });  };}
/** Extends Data interface */declare global {  namespace Lume {    export interface Data {      /**       * The JSX children elements       * @see https://lume.land/plugins/jsx/       */      children?: React.ReactNode | React.ReactNode[];    }  }}