spaghettify
1.0.0
Spaghettify は、あらゆる静的 HTML サイトを、AJAX 駆動のナビゲーションと DOM 要素の保存機能を備えたシングル ページ アプリケーションに変換します。そのために、DOM インターセプターと、リンク クリック イベントをキャプチャし、XHR 経由で要求された各ドキュメントをフェッチし、ブラウザー ドキュメントを更新する前に一連のミドルウェア関数を通じてストリーミングすることで応答をダイジェストするミドルウェア ファネリングプロセッサーを実装します。
これらのミドルウェア関数は、単一責任原則を遵守し、ステップの完全なパイプラインに準拠するプラグ可能な I/O ハンドラーであり、現在のページ DOM を変更しないonBeforeCompleteミドルウェア フックと、変更を適用するonAfterCompleteミドルウェア フックに分類できます。 (したがって、挿入後に現在のページ DOM 上で直接変更されます)。
プロジェクト全体は TypeScript 上に構築されており、MSIE11 などの古いレガシー ブラウザーへのサポートを拡張するために、いくつかのポリフィルとコーディング戦略を実装しています。
このプロジェクトを開発モードまたは運用モードで実行するための最小要件とその開発スクリプトは、 node v12.16.0およびnpm v.6.14.15以降のバージョンです。おそらくこのプロジェクトは古いバージョンのnodeとnpmでスムーズに実行されますが、最新の LTS バージョンを使用することをお勧めします。
このプロジェクトは、開発モードでコードをコンパイルし、ビルドを実行してデモ サイト ファイルを提供し、コードの最適化を処理するために BabelJS と Webpack に依存しています。
BabelJSおよびWebpackとのやり取りはすべて、便宜上カスタム npm スクリプトに抽象化されています。
開発環境または運用ビルドを生成する最初のステップとして、 yarnまたはnpm install実行して、このプロジェクトに必要なすべての依存関係を取得してください。
ターミナルウィンドウからyarn buildまたはnpm run build実行してください。
プロジェクト バンドラーはアプリケーション ツリー全体をナビゲートし、JavaScript アーティファクトを/distフォルダーに構築し、 spaghettify.jsとしてバンドルします。便利なように、他の便利なバンドルもそこに保存されます。
npm レジストリから Spaghettify を取得できますか?この記事の執筆時点では、プロジェクトの優先事項は、テスト カバレッジをさらに拡大し、ユーザーが提供するミドルウェア フックのサポートを拡張して API 機能を拡張することです。当面、Spaghettify はブラウザーの依存関係として使用することを目的としていますが、NPM パッケージとして配布することがロードマップに含まれています。近日中に再度ご確認いただき、最新情報をご確認ください。
グローバル トグル、ルート インターセプター、除外、状態永続属性フラグ、そして最後に重要な読み込み進行状況インジケーターとハンドラーを備えた便利な API を通じて、Spaghettify をインスタンス化し、対話することができます。
Spaghettify を正常にコンパイルしたら、次のようにアプリケーションにインポートしてインスタンス化できます。
< script type =" text/javascript " src =" /dist/spaghettify.js " > </ script >
< script type =" text/javascript " >
new Spaghettify ( {
enabled : true ,
routes : [ '*.html' , 'content/*' ] ,
excludeByAttr : 'no-spa' ,
loadProgress : true ,
persistAttr : 'data-persist' ,
} ) ;
</ script >ご覧のとおり、Spaghettify はインスタンス化時に構成オブジェクトを取得できます。すべてのフィールドはオプションであり、構成オブジェクト全体自体もオプションであることに注意してください。指定しない場合、Spaghettify は、以下の表に示すデフォルトのオプションでインスタンス化されます。
Spaghettiify 構成設定オブジェクトは次のように要約できます。
| 分野 | タイプ | デフォルト | 説明 |
|---|---|---|---|
enabled | Boolean | true | インスタンス化時に Spaghettify を有効または無効にします |
routes | String[] | ['*'] | Spaghettify を通じてインターセプトおよび提供されるルートのパターンを定義します。グロブトークンをサポートします。 |
excludeByAttr | String | undefined | 除外データ属性トークンを定義します ( data-プレフィックスの有無にかかわらず)。この属性で修飾されたリンクは、Spaghettify によってバイパスされます。 |
loadProgress | Boolean Function | false | 組み込みのプログレスバーを有効にするかどうかを指定します。また、ロード時に進捗率の整数を受け取る関数ハンドラーを受け取ることもできます。 |
persistAttr | String | undefined | UI 状態永続フラグ データ属性を定義します ( data-プレフィックスの有無にかかわらず)。この属性で装飾された要素は、ページ ナビゲーション全体でその状態を保持します。 |
すべての構成オプション (およびオプション ペイロード自体) はオプションであり、明示的に宣言されていない場合はデフォルト値が使用されることに注意してください。
Spaghettify は、イベント ハンドラーを対象となるリンクに内部的にバインドすることで、現在のドキュメントと対話します。メモリ リークを防ぐため、または再び復元されるまで Spaghettify を停止したい場合は、次のように破棄します。
< script type =" text/javascript " >
// First, we instantiate Spaghettify
const spa = new Spaghettify ( ) ;
// Then we dispose it after use
spa . destroy ( ) ;
</ script >すべてのリンクは、Spaghettify によって傍受される対象として設定されます。内部イベント マネージャー機構は、リンクの href 値をroutesグロブ トークンに対してテストすることによって、リンクが AJAX リクエストとして処理できるかどうかを評価します。
ただし、 data-プレフィックスを使用するかどうかにかかわらず、属性値を使用してexcludeByAttrオプションを構成することで、この手順を事前にバイパスできます。
それにもかかわらず、セマンティクスのために、Spaghettify は完全な属性で構成されたリンク要素のみを考慮します。
< script type =" text/javascript " >
new Spaghettify ( {
excludeByAttr : 'skip-me' ,
} ) ;
</ script >
<!-- Spaghettify will disregard the following link -->
< a href =" foo.html " data-skip-me > Skip this link </ a >構成された属性には、任意の値を入力することも、まったく値を入力しないこともできます。いずれにせよ、Spaghettiify はその値を無視します。
すでに見たように、 loadProgress構成オプションはBooleanプリミティブ値または関数ハンドラーを取ることができます。
< script type =" text/javascript " >
new Spaghettify ( {
loadProgress : true ,
} ) ;
</ script >明示的に構成されていない場合、またはfalseに設定されている場合、進行状況バーのインジケーターは表示されません。 trueとして指定すると、Spaghettify はビューポートの上部にアニメーション化された赤い進行状況バー インジケーターを表示します。進行状況バーには、実際のダウンロードの進行状況が表示されます。
ただし、消費者は、ダウンロードの進行状況情報をレンダリングするための独自の視覚ソリューションを実装したい場合があります。 Spaghettify は、署名に整数値パラメーターを期待する読み込み進行状況ハンドラーを提供することでこれらをカバーします。このハンドラーは、ページが要求され、HXR 経由でダウンロードされるときに0から100までの値を取ります。
< script type =" text/javascript " >
new Spaghettify ( {
loadProgress : function onLoad ( progress ) {
console . log ( progress ) ; // Will log values from 0 to 100
} ,
} ) ;
</ script >Spaghettify は、ページ ナビゲーション全体にわたって、選択された注釈付き DOM ノードの状態を永続化するための実験的な API を実装しています。これを行うには、 persistAttrオプションで値トークンを構成し、状態を永続化したい DOM 要素に、それぞれ一意の値を持つ同等のdata-属性で注釈を付ける必要があります。
< script type =" text/javascript " >
new Spaghettify ( {
persistAttr : 'persist-id' ,
} ) ;
</ script >
< input type =" text " data-persist-id =" my-input " />明示的に値の前にdata-を付けることも、付けないこともできますが、Spaghettify では、完全なデータ属性構文を使用して永続化する DOM 要素に注釈を付ける必要があります。
注意してください: 属性値は一意である必要があります。異なるタイプの複数の要素が同じ属性値で構成されている場合、Spaghettify は例外をスローします。
永続性は完全な DOM Nodeベースで適用されるため、要素の内部 HTML だけでなく、入力コントロールのネイティブタッチ状態も包含されることを強調する価値があります。そして、これらすべては、外部 HTML の変更とは関係ありません。
コンソールでyarn devまたはnpm run dev実行すると、開発環境を生成できます。
システムはすべてのアーティファクトを生成し、http://localhost:3000 (または--port=PORTパラメータをdevコマンドに追加する場合は選択した他のポート、ここでPORT ) からサンドボックス サイト (詳細は後述) を提供します。は目的のポートです) が監視モードなので、アプリケーションはソース コードの変更時に再コンパイルされます。
サンドボックス サイトは、ライブ環境で Spaghettify をデバッグするためのプレイグラウンドおよびテスト アリーナとして機能する、小さく非常に単純な Web アプリケーションです。これは、次の主要な機能を示すさまざまな階層ページのセットを通じて、非常にシンプルなスタイルを特徴としています。
index.htmlは、デモ目的でインラインのSpaghettifyのインスタンスが含まれています。他のすべてのドキュメントは、インポートされたスクリプトとしてそのようなインスタンスを実装します。各ドキュメントで Spaghettify をインポートする必要はなく、エントリ ドキュメントのみをインポートする必要があります。ただし、これにより、デモ目的でブラウザ ウィンドウをリロードした後、任意のドキュメントから Spaghettify を起動することができます。実際の運用シナリオでは、Spaghettify はエントリの場所に 1 回だけインポートしてインスタンス化できます (そうする必要があります)。/sandboxルート レベルと子の/sandbox/contentサブフォルダーの間に分散されているため、投稿者は必要に応じてサブフォルダーを指すリンク セレクターを試すことができます。/sandbox/content内のページには、必要に応じて Spaghettify がダイジェスト、再挿入、実行するインラインまたはインポートされたカスタム JavaScript が備わっています。ESLint は現在 Spaghettify コードベースで有効になっており、プロジェクトのビルド時に lint 監査がトリガーされます。変更を導入するときに lint 評価を自動的に提供するように IDE を構成できます。さらに、ターミナル コンソールでnpm run lintまたはyarn lint実行することで、いつでもコード lint をトリガーできます。
コードベースにテストを導入したり、ターミナル コンソールでnpm testまたはyarn test実行して既存のテストを実行したりできます。コード カバレッジ データは収集され、 /coverage/lcov-reportにある便利な形式のドキュメントに保存されます。画面上のカバレッジレポートの場合は、 testコマンドに--coverageパラメータを追加してください。
Coveralls では、包括的なテスト カバレッジ レポートをオンラインで確認することもできます。
著作権 2021 パブロ・ディーレマン
本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。
ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。
