JavaScriptタグ内のコード整形テスト
Liquid の {% javascript %} タグ内に埋め込まれた JavaScript コードを Prettier で整形するテストケース。純粋な JS、Liquid 混在、タブ設定、シングルクォート対応など複数のシナリオをカバーしている。
コード
38 行 / liquidIt should pretty pring pure JS inside a script tag
printWidth: 20
embeddedSingleQuote: false
{% javascript %}
function main() {
console.log(
"hello"
);
}
const x =
100 > 42
? x
: y;
{% endjavascript %}
It should fallback to reindenting when it can't parse the source
(e.g. because of Liquid in JS)
printWidth: 20
{% javascript %}
function main(){console.log({{ drop }});}const x = 100 > 42 ? x : y;
{% endjavascript %}
It should reindent when it can't parse and change spaces to tabs with useTabs
printWidth: 20
useTabs: true
{% javascript %}
function main(){
console.log({{ drop }});
}
const x = 100 > 42 ? x : y;
{% endjavascript %}
It should respect embeddedSingleQuote
embeddedSingleQuote: true
{% javascript %}
console.log('hi');
{% endjavascript %}
出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
定期販売プランのデータ属性生成
商品バリアントと定期販売プランの ID を HTML data 属性として動的に生成するスニペット。ループで複数プランの ID を data-sellingId-1、data-sellingId-2 のように番号付けして出力する。
カスタム要素の親コンポーネント
Web Components の親要素(`<parent-element>`)でラップし、子スニペットを描画するコンポーネント。カスタム要素に依存した構造を実装する際のテンプレート。
javascript タグ内の JS コード整形
Liquid の `{% javascript %}` タグ内に記述した JavaScript コードを Prettier で自動整形する。純粋な JS であれば完全整形、Liquid 変数を含む場合はインデント調整のみで対応する。
クイズ結果用の商品データとフィルタ条件を JSON 出力
選択したコレクションの全商品を JSON 形式で抽出し、クイズの回答ごとに設定されたフィルタ条件(価格・タグ・タイプ・ベンダー・オプション)と紐づけることで、JavaScript 側でリアルタイムに商品をマッチングできるようにする。
Vue コンポーネントのデモ
Vue コンポーネント、スロット、プロップ、Vuex ストア、グローバルミックス、カスタムディレクティブを一堂に展示するセクション。Shopify Theme Lab フレームワークの主要機能をインタラクティブに試せる。
サードパーティ製アプリの遅延読み込み最適化
Shopify に統合されたサードパーティ製アプリスクリプトの読み込み方式を管理画面から制御し、ページ表示速度を改善するセクション。スクロール、ユーザーインタラクション、または即座読み込みのいずれかに切り替えられる。