Webコンポーネントを使用したオープンソースフロントエンドフレームワーク

起源物語
昨年、私はWebコンポーネントに基づいた別のフロントエンドフレームワークの作成に取り組んできました.すべてのオープンソースと歓迎の貢献とプルの要求は、すべての私のライブラリhereを見つける.EzComponentはこの点での私の最新の努力です、そして、私は私がワークフロー、学習曲線と特徴で甘い点を打ったと思います.
https://github.com/AlexMercedCoder/ezcomponent

新規プロジェクトの生成
次のコマンドを実行してスピンにしましょう.

npx create-ezcomponent-app project1

新しいフォルダへの

cdとnpm install

の実行
devサーバを実行する

npm run dev
ファイルレイアウト
src/indexで.これを見つける
インデックス.js

import ezcomponent from "ezcomponent"
import "./components/Header";
import "./components/Main";
import "./components/Footer";

ezcomponent({
  name: "my-app",
  render: (info, props, component) => `
  <my-header></my-header>
  <my-main></my-main>
  <my-footer></my-footer>
  `
})

//Inject into body
const body = document.querySelector("body");
body.innerHTML = `<my-app></my-app>`;

我々は、我々のコンポーネント

を輸入します

我々は、アプリケーションコンポーネント

を定義します

は、コンポーネント

にコンポーネントをレンダリングする
コンポーネントの定義は、EzComponent関数を実行し、コンポーネントのすべての構成を持つオブジェクトを渡すだけです.設定オブジェクトの最小値は以下の通りです.
ケバブケースストリング「ケバブケース」です

は、情報(状態)、小道具、およびコンポーネントのインスタンスを取り、テンプレート文字列(すべての関数は、configオブジェクト内の同じ3つのパラメータを取る)を取得する関数です

スタイリング
渡すことができるもう一つのプロパティは、CSSの文字列を返す関数であり、そのようにアプリケーションコンポーネントを変更する関数です.

ezcomponent({
  name: "my-app",
  styles: (info, props, component) => `
  h1 {
    color: red;
  }
  `,
  render: (info, props, component) => `
  <my-header></my-header>
  <my-main></my-main>
  <my-footer></my-footer>
  `
})

注意、我々は変更を参照してください.これは、すべてのコンポーネントが独自のshadowdomを持っているためです.フードの下では、これはWebコンポーネントAPIの単なる抽象化であり、部品やスロットのような機能が利用できます.WebコンポーネントAPIの上の私の前のポストを探して、基になるWebコンポーネントシステムについてもっと学びましょう.ここでの私の目標は、ビルドの反応性といくつかの余分なレベルのライフサイクルでWebコンポーネントを簡単に動作させることでした.
だから、フッターのコンポーネントに頭をして、スタイリングを試してみましょう.
フッター.js

import ezcomponent from "ezcomponent";

ezcomponent({
  name: "my-footer",
  styles: (info, props, components) => `
  h1 {
    color: red;
  }
  `,
  render: (info, props, component) => `<h1>I am the footer component</h1>`,
});

今フッターコンポーネントのテキストは赤です.コンポーネントをエクスポートする必要はありません.ファイルをインポートするだけで、ファイル内のezComponent関数がブラウザでコンポーネントを登録して呼び出され、アプリケーション全体で使用できるようになります.

ライフサイクル
いくつかの関数があり、すべての情報が渡されます( info , props , component )

イニシャル:最初のコンポーネントが

の前に最初にマウントされたときに実行されます

prerender:すべてのレンダリング

の前に実行されます

Postrender :すべてのレンダリング

の後に実行されます

postイニシャル:最初のレンダリング

の後に実行されます

disconnect :コンポーネントが削除されたときに実行されます.

ヒント:ポストレンダリングは、プレーンなVinillajsを使用してイベントリスナーを追加する理想的な場所です.シャドウルート.queryselector ()

情報
情報はVueの中の反応またはデータの状態に等しいです、それを使用するために、ちょうどあなたが通過したいどんなデータでもオブジェクトであるinfoと呼ばれるConfigオブジェクトにInfoプロパティを加えてください.情報を更新するには、コンポーネントを使用します.関数を更新し、任意の更新または新しいプロパティの情報にオブジェクトを渡します.ので、すべてのプロパティを毎回一覧表示するか、またはスプレッド演算子を使用する必要はありません.更新はprerender、レンダリング、およびpostrenderの別のレンダリングサイクルをトリガします.

メソッドの追加
コンポーネントがすべての機能に渡されるので、configオブジェクト内の異なる関数のコンポーネントに新しいプロパティとメソッドを追加できます.初期の関数ではどのようなメソッドを定義してもよいのです.

結論
それはezcomponentです、私はあなたがそれを与えるか、貢献をして、これまたは私の他の図書館のどれにでも引く要求をすることを考慮することを望みます!