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

我已經(jīng)調(diào)整我的網(wǎng)站一段時(shí)間了，這個(gè)想法開(kāi)始了下一次迭代。最終導(dǎo)致了另一個(gè)全面重建，但這個(gè)故事並不是關(guān)於我與完美主義的鬥爭(zhēng)。這是關(guān)於轉(zhuǎn)動(dòng)這個(gè)：

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-->

進(jìn)入此：

設(shè)定

我的網(wǎng)站在 Deno 上運(yùn)行，並從最近開(kāi)始使用 Hono 和 Hono/JSX，但該方法適用於任何基於 JS 的運(yùn)行時(shí)和 JSX。

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

經(jīng)過(guò)一番反覆思考，我決定了這個(gè)工作流程：

• 我用markdown寫(xiě)文章
• 我在與文章相同的資料夾中建立了一個(gè) JSX 元件
• 我使用 HTML 註解在 Markdown 中「導(dǎo)入」元件
• 它的神奇功效

註解需要某種前綴，例如渲染並且基本上只是該元件的路徑：

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

也可以在路徑後添加道具，但對(duì)於我的用例來(lái)說(shuō)，不需要它，所以我跳過(guò)了這一部分。

渲染 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;
  }
}

邏輯非常簡(jiǎn)單：檢查 html 字串是否符合 // 然後渲染 JSX。如果您手邊有組件，那就很容易了。

編譯元件

我的部落格內(nèi)容是靜態(tài)產(chǎn)生的，所以我很自然地採(cǎi)用了相同的方法：

• 掃描內(nèi)容資料夾中的 *.ssi.tsx 元件（因此有字尾）
• 建立一個(gè)檔案來(lái)匯入它們並將其新增到地圖中，以便我可以輕鬆地透過(guò)路徑檢索它們

這是我的建置腳本的樣子：

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 或其他任何東西重寫(xiě)。

神奇之處在於編寫(xiě)類似 JavaScript 程式碼的文字檔。

這個(gè)腳本：

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;

然後可以在渲染器中匯入和使用:)

寫(xiě)程式碼的程式碼！魔法！並且在過(guò)程中沒(méi)有任何人工智慧受到傷害：只是你的老式元程式設(shè)計(jì)。

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

儘管如此，它看起來(lái)是這樣的：

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-->

您可以注意到一個(gè)虛擬入口點(diǎn)，其值為零，但會(huì)強(qiáng)制 esbuild 在自己的資料夾中建立檔案並具有可預(yù)測(cè)的路徑。

且 ssi-tsconfig.json 非常通用：

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

在實(shí)際的前端水合作用中，我選擇了簡(jiǎn)單的方法，並將其添加到我的 .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;
  }
}

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

隨意調(diào)整程式碼（以下是儲(chǔ)存庫(kù)的連結(jié)），添加您自己的風(fēng)格並分享您的想法！

以上是Markdown 中的互動(dòng)元件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！