ドレッシング人から始める

Drayman 任意の利用可能なHTML要素、WebコンポーネントまたはカスタムDrayManサードパーティコンポーネントを単一のスクリプトでサーバーサイドコードと一緒に使用できるサーバーサイドコンポーネントフレームワークです.
DrayManを使用すると、ブラウザはユーザーが何を表示するかをレンダリングできます-すべてのロジックと計算は、サーバー側とUIがJSX構文を使用して書き込まれます.
Drayman機能を表示する最良の方法は何かを作成することです.それで始めましょう.

ファイルビューアコンポーネント

ユーザーがファイルシステムからファイルを選択し、コンテンツを表示できるようにするコンポーネントを構築しましょう.
まず、draymanをインストールする必要があります.これらのコマンドを実行して行うことができます.

npx @drayman/framework-init@latest my-app
cd my-app
npm start

ウェブサイトで利用可能になりますhttp://localhost:3033 .
何かをインストールしたくない場合は、常に訪問してCodesandBoxの中でDrayManを試すことができますnew.drayman.io .

初期コンポーネントテンプレート

移動するsrc/components/home.tsx そして、その内容をこのコードで置き換えます:

export const component: DraymanComponent = async () => {
  return async () => {
    return (
      <>
        <p>Select a file to view it directly from file system</p>
        <select></select>
        <br />
        <pre></pre>
      </>
    );
  };
};

コンポーネントの最初のスケルトンが表示されます.更なる<select> は利用可能なファイルと<pre> 選択したファイルの内容を表示します.

オプションの選択

DrayManはコンポーネントサーバー側を実行するので、任意のノードを使用できます.JSライブラリー.我々のケースではfs モジュールです.
プロジェクトのルートディレクトリからファイル名を読みましょう<select> オプション

import { promises as fs } from "fs";

export const component: DraymanComponent = async () => {
  const files = (await fs.readdir("./")).filter((x) => x.includes("."));

  return async () => {
    return (
      <>
        <p>Select a file to view it directly from file system</p>
        <select>
          {files.map((fileName) => (
            <option>{fileName}</option>
          ))}
        </select>
        <br />
        <pre></pre>
      </>
    );
  };
};

たった今、我々の構成要素は、どんな双方向性なしででも若干の要素だけを示しています.次のステップはそれを追加することです.

ユーザーアクションに反応する

ユーザーがコンテンツを表示するファイルを覚えておく必要があります.を使用して行うことができますonchange イベント属性と、その関数を付加するexecuted server-side . また、追加する必要がありますvalue 属性をそれぞれoption それでselect はどのオプションが選択された知っている.
加えましょうfs.readFile 内部関数<pre> DrayManが再レンダリング中にファイルの内容を読み込むようにタグを付けます.我々は、表示されませんpre 実際にファイルが選択されるまで

import { promises as fs } from "fs";

export const component: DraymanComponent = async () => {
  const files = (await fs.readdir("./")).filter((x) => x.includes("."));
  let selectedFile;

  return async () => {
    return (
      <>
        <p>Select a file to view it directly from file system</p>
        <select
          onchange={async ({ value }) => {
            selectedFile = value;
          }}
        >
          {files.map((fileName) => (
            <option value={fileName}>{fileName}</option>
          ))}
        </select>
        <br />
        {selectedFile && <pre>{await fs.readFile(selectedFile, "utf-8")}</pre>}
      </>
    );
  };
};

ドロップダウンから選択を行うと、ページに何も起こらないことがわかります.DrayManでは、コンポーネントを再描画する必要があるときに厳密に指示する必要があります.それは特別な使用することができますhelper function forceUpdate .
インポートして、onchange 選択したファイルが保存された後のイベント

import { promises as fs } from "fs";

export const component: DraymanComponent = async ({ forceUpdate, }) => {
  const files = (await fs.readdir("./")).filter((x) => x.includes("."));
  let selectedFile;

  return async () => {
    return (
      <>
        <p>Select a file to view it directly from file system</p>
        <select
          onchange={async ({ value }) => {
            selectedFile = value;
            await forceUpdate();
          }}
        >
          {files.map((fileName) => (
            <option value={fileName}>{fileName}</option>
          ))}
        </select>
        <br />
        {selectedFile && <pre>{await fs.readFile(selectedFile, "utf-8")}</pre>}
      </>
    );
  };
};

今、私たちのコンポーネントが完了し、ファイルの内容が選択されて表示されます.

結論

サーバー側のロジックとクライアント側のビューを単一のスクリプトで組み合わせるコンポーネントを構築しました.
これがあなたに面白いと感じたならばofficial docs DrayManフレームワークに深く飛び込む!