最近我實現(xiàn)了一個日歷，結(jié)果非常好，我想記錄該方法并與更廣泛的受眾分享。我真的很想在文章中得到我的工作的實際可測試結(jié)果。

我已經(jīng)調(diào)整我的網(wǎng)站一段時間了，這個想法開始了下一次迭代。最終導(dǎo)致了又一次全面重建，但這個故事并不是關(guān)于我與完美主義的斗爭。這是關(guān)于轉(zhuǎn)動這個：

HTML comes with a lot of ready to use and flexible elements, but date selector
has a handful of limitations and the need to write your own calendar / date
input emerges sooner rather than later. In this tutorial I'll walk you through
implementing a calendar view and show how you can extend its functionality to fit
your booking widget or dashboard filter.

Here's how the final result might look like:

<!--render:custom-calendar-component/CalendarExample.ssi.tsx-->

進入此：

設(shè)置

我的網(wǎng)站在 Deno 上運行，并從最近開始使用 Hono 和 Hono/JSX，但該方法適用于任何基于 JS 的運行時和 JSX。

正如您已經(jīng)注意到的，博客文章是帶有屬性的 Markdown 文件，這些屬性在構(gòu)建時使用 Marked 和 Front Matter 轉(zhuǎn)換為靜態(tài) HTML。

經(jīng)過一番反復(fù)思考，我決定了這個工作流程：

• 我用markdown寫文章
• 我在與文章相同的文件夾中創(chuàng)建了一個 JSX 組件
• 我使用 HTML 注釋在 Markdown 中“導(dǎo)入”組件
• 它的神奇功效

評論需要某種前綴，例如渲染并且基本上只是該組件的路徑：

<!--render:custom-calendar-component/CalendarExample.ssi.tsx-->

也可以在路徑后添加道具，但對于我的用例來說，不需要它，所以我跳過了這一部分。

渲染 HTML

在瀏覽器上添加任何內(nèi)容之前，我們需要從 JSX 組件渲染 HTML。為此，我們“只”需要使用自定義渲染器覆蓋 HTML 渲染邏輯：

export default class Renderer extends Marked.Renderer {
  constructor(private baseUrl: string, options?: Marked.marked.MarkedOptions) {
    super(options);
  }

  override html(html: string): string {
    const ssiMatch = /<!--render:(.+)-->/.exec(html);
    if (ssiMatch?.length) {
      const filename = ssiMatch[1];
      const ssi = SSIComponents.get(filename);
      if (!ssi) return html;
      const content = render(createElement(ssi.Component, {}));
      return [
        content,
        `<script type="module" src="${ssi.script}"></script>`,
      ].join("");
    }
    return html;
  }
}

邏輯非常簡單：檢查 html 字符串是否匹配 // 然后渲染 JSX。如果您手頭有組件，那就很容易了。

編譯組件

我的博客內(nèi)容是靜態(tài)生成的，所以我很自然地采用了相同的方法：

• 掃描內(nèi)容文件夾中的 *.ssi.tsx 組件（因此有后綴）
• 創(chuàng)建一個文件來導(dǎo)入它們并將其添加到地圖中，以便我可以輕松地通過路徑檢索它們

這是我的構(gòu)建腳本的樣子：

const rawContent = await readDir("./content");
const content: Record<string, Article> = {};
const ssi: Array<string> = [];

for (const pathname in rawContent) {
  if (pathname.endsWith(".ssi.tsx")) {
    ssi.push(pathname);
    continue;
  }
}

const scripts = await compileSSI(ssi.map((name) => `./content/${name}`));

const ssiContents = `
import type { FC } from 'hono/jsx';
const SSIComponents = new Map<string,{ Component: FC, script: string }>();
${
  scripts
    ? ssi
        .map(
          (pathname, i) =>
            `SSIComponents.set("${pathname}", { Component: (await import("./${pathname}")).default, script: "${scripts[i]}" })`
        )
        .join("\n")
    : ""
}
export default SSIComponents;
`;

await Deno.writeFile("./content/ssi.ts", new TextEncoder().encode(ssiContents));

不要太執(zhí)著于 Deno 特定功能，它可以輕松地用 Node 或其他任何東西重寫。

神奇之處在于編寫類似于 JavaScript 代碼的文本文件。

這個腳本：

const ssiContents = `
import type { FC } from 'hono/jsx';
const SSIComponents = new Map<string,{ Component: FC, script: string }>();
${
  scripts
    ? ssi
        .map(
          (pathname, i) =>
            `SSIComponents.set("${pathname}", { Component: (await import("./${pathname}")).default, script: "${scripts[i]}" })`
        )
        .join("\n")
    : ""
}
export default SSIComponents;
`;

返回如下字符串：

import type { FC } from 'hono/jsx';
const SSIComponents = new Map<string,{ Component: FC, script: string }>();
SSIComponents.set("custom-calendar-component/CalendarExample.ssi.tsx", { Component: (await import("./custom-calendar-component/CalendarExample.ssi.tsx")).default, script: "/content/custom-calendar-component/CalendarExample.ssi.js" })
export default SSIComponents;

然后可以在渲染器中導(dǎo)入和使用:)

寫代碼的代碼！魔法！并且在此過程中沒有任何人工智能受到傷害：只是你的老式元編程。

最后，最后一個難題是滋潤前端的組件。我使用 esbuild，但我個人打算將其切換到 Vite 或 HMR 附帶的任何其他工具。

盡管如此，它看起來是這樣的：

HTML comes with a lot of ready to use and flexible elements, but date selector
has a handful of limitations and the need to write your own calendar / date
input emerges sooner rather than later. In this tutorial I'll walk you through
implementing a calendar view and show how you can extend its functionality to fit
your booking widget or dashboard filter.

Here's how the final result might look like:

<!--render:custom-calendar-component/CalendarExample.ssi.tsx-->

您可以注意到一個虛擬入口點，其值為零，但會強制 esbuild 在自己的文件夾中創(chuàng)建文件并具有可預(yù)測的路徑。

并且 ssi-tsconfig.json 非常通用：

<!--render:custom-calendar-component/CalendarExample.ssi.tsx-->

在實際的前端水合作用中，我選擇了簡單的方法，并將其添加到我的 .ssi.tsx 文件的底部：

export default class Renderer extends Marked.Renderer {
  constructor(private baseUrl: string, options?: Marked.marked.MarkedOptions) {
    super(options);
  }

  override html(html: string): string {
    const ssiMatch = /<!--render:(.+)-->/.exec(html);
    if (ssiMatch?.length) {
      const filename = ssiMatch[1];
      const ssi = SSIComponents.get(filename);
      if (!ssi) return html;
      const content = render(createElement(ssi.Component, {}));
      return [
        content,
        `<script type="module" src="${ssi.script}"></script>`,
      ].join("");
    }
    return html;
  }
}

我相信讀者會找到一種更優(yōu)雅的方式來做到這一點，但僅此而已！

隨意調(diào)整代碼（下面是存儲庫的鏈接），添加您自己的風(fēng)格并分享您的想法！

以上是Markdown 中的交互組件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！