11 tyを使用したWebコンポーネントの使用

このポストは、私の個人的なブログを構築することに関係していたものの1つを記述しますgriffa.dev , もっと詳細とライブデモを読むこと自由に感じるthere .
私はこのブログで基本的に物事を持ち帰りたいと思っています.これに加えて、私は11 tyを使用することによって、私は私の投稿のHTMLを追加するには無料であることを意味、Markdownで著者をすることができます.
しかし、私はHTML/CSSに焦点を当てているwhistは、それがJavaScriptでは、余分な双方向性のために、これはWebコンポーネントが入ってくる場所に散らばる意味がある領域があります.

おい!彼はウェブのコンポーネントを、彼を取得!(チーウィーとボーは本当に友達です).
Googleエンジニアは、私がそうすることができたよりよくそれを言いました:

ジャスティンファゴニ

第11に、そして、ウェブ構成要素は本当に本当に行きます.
午後21時24分
8
57
この記事では、Webコンポーネントの開発環境の設定について説明します.
しかし、最初に、私はこのサイトのWebコンポーネントを消費するために取ったアプローチを議論したい.すべてのコンテンツは利用可能なJavaScript/Webコンポーネントなしで利用できるようにする必要がありますが、利用可能な場所では、コンテンツを徐々に強化する必要があります.

漸進的強化Webコンポーネントユースケース

JavaScriptを使用して、徐々に強化されたコンテンツのために使用したユースケースの2つがあります.

ユーチューブ

進歩的な強化を通してYouTubeビデオを埋め込むために、あなたは最初に内容の最小限のHTMLだけの実現であることを確認する必要があります、これは以下の通りです

クリックすると、ビデオに移動するリンク.

ラップのリンクに使用するイメージのサムネイル.

ビデオのキャプション、アクセシビリティにとって重要です.

この2番目の部分はYouTubeプレーヤーを埋め込むために使用するコンポーネントを識別しています.
ここから完璧なフィット感です.npm install lite-youtube-embed

<lite-youtube class="video" videoid="j8mJrhhdHWc" style="background-image: url('https://i.ytimg.com/vi/j8mJrhhdHWc/hqdefault.jpg');">
      <a onclick="('customElements' in window) && event.preventDefault()" title="Play Video" class="no-js" target="_blank" href="https://youtube.com?w=j8mJrhhdHWc">{% include "img/play.svg" %}</a>
</lite-youtube>

上記の2 , 3の事柄があります.

からの背景画像サーバ.

がある<a> デフォルトで、これは新しいタブでYouTubeビデオを開きます

OnClick新しいタブを開くことを防ぐ.

onclickを説明すること:ここで起こっているwhatsは、そうです.

ウェブコンポーネント/JavaScriptがサイトで利用できないならば、OnClickは無視されます、そして、予想通りのリンクcustomElements はブラウザでサポートされています.

JS/Webコンポーネントが有効になってリンクがクリックされると、タブは開きません.lite-youtube , Youtubeで埋め込む結果.

ライブコードデモ

いくつかの時点で私は私のライブデモを正確にどのように11 tyでMarkdownを使用して作成されたの詳細に入る投稿を行う必要がありますが、最終的には、Webコンポーネントを使用してレンダリングされます.
ここでは、HTMLを受け入れるライブデモWebコンポーネントとCSSのコンテンツとしてCSSです.
アクションヘッドでライブデモhere .

  <live-demo id="my-live-demo">
    <div slot="html">
        &lt;div class=&quot;my-div&quot;&gt;styled by the css&lt;/div&gt;
    </div>
      <div slot="css">
        .my-div {
          color: var(--Primary, blue);
        }
    </div>
</div>

ここで撮ったアプローチは、Webコンポーネントが利用できない場合、コードがレンダリングされ、構文が強調表示されますが、JSが有効になっている場合は、ライブのデモコンポーネントが表示されます.ブラウザでJavaScriptを無効にする場合は、代わりにコードスニペットを見る必要があります.
私はスロットを使いましたjs 一つhtml と1つcss . Webコンポーネントは、テキストコンテンツを受け取り、適切にレンダリングします.
このアプローチはa lot 私は将来的に私のブログのために使用したいと思いますが、どのように私は自分自身を構築することができますを参照してくださいに面白かった.

11 tyおよびWebコンポーネントのためのdev環境の設定

特に、あなたが純粋なJavaScriptを使用しているなら、そして、どんなビルド・プロセスも必要としないでください.私は、ビルドプロセスを持っていないことが新鮮な空気のような息だった、開発ツールはちょうどあなたの方法から取得する必要がありますし、コードを聞かせてください.

If you are just working with vanilla web components and don't want to use any dependencies from NPM, then good news, you don't need to do anything special, just use the default 11ty dev server, and move on to create great content!

あなたがNPMからいくつかのコンポーネントやライブラリを使用する場合はbare imports ブラウザで動作する相対URLに.

import { LitElement } from "lit-element";

次のようになります.

import { LitElement } from "./../node_modules/lit-element/lit-element.js";

これを行うための最良のツールはhttps://www.npmjs.com/package/es-dev-server .

At the time of writing this tool is in the process of getting moved over to @web/dev-server. For this example, i'll use @web/dev-server but es-dev-server would work too.

npm i --save-dev @web/dev-server

最初に、あなたが通常使用する11 tyのウェブサイトを提供するときnpx eleventy --serve , しかし、代わりに我々は使用するつもりですnpx eleventy --watch .
これは私たちにあなたの11 tyサイトのすべてのライブビルを与えるが、サーバーなし.
我々のサーバーのために、ここはどこです@web/dev-server が実行されます.

web-dev-server --node-resolve --open

これらの2つのタスクを結合するためにconcurrently

npm i concurrently --save-dev

そして、それらをNPMスクリプトに組み合わせる:

    "start": "concurrently \"npx eleventy --watch\" \"web-dev-server  --node-resolve\"",

上記の組み合わせはdevサーバを提供しますが、私たちは_site フォルダだけでなく、ノードのモジュールを解決する.
このためには、小さな設定ファイルを導入し、次のように簡単なミドルウェアを実装する必要があります.

リクエストが11 tyの資産であるならば_site 付録で_site URLへ.

リクエストがHTMLページの場合、_site

に移動next() これにより、JSファイルをESMインポートを解決するロジックで処理できるようになります.

ファイル呼び出しを作成するweb-dev-server.config.js

module.exports = {
  port: 8000,
  watch: true,
  rootDir: ".",
  middleware: [
      serve11tyAssets({dist: "_site_"})
    ],
  nodeResolve: true
};

これはすべてうまくいけば理解できるようになるはずです.

port :サーバのローカルポート

ウォッチ:ブラウザを再読み込みするたびに何かを変更する

rootでなければなりません.node_modules そして、11代_site フォルダ.

ミドルウェア:リクエストで実行される関数は、すぐにServe 11 tyAttributesを説明します.

noderesolve :変換するフラグimport foo from 'bar'

serve11tyAssets このように見えるでしょう.

const path = require("path");
const fs = require("fs").promises;
const URL = require("url").URL;
/**
 *
 * Check if asset lives in 11ty _site folder, if not serve from root folder.
 */
const serve11tyAssets = ({dist = "_site"} = {}) => {
    return async (context, next) => {
        // Node URL requires a full url so... whatever.com (url isnot important)
        const pathName = new URL(`https://whatever.com${context.url}`).pathname;
        // is the request for a html file?
        const url = pathName.endsWith("/") ? `${pathName}index.html` : pathName;
        try {
            // check if the file exists, if so, modify the url to come from `_site` folder.
            const stats = await fs.stat(path.join(dist, url));
            if (stats.isFile()) {
                context.url = `/${dist}${pathName}`
            }
            return next();
        } catch  {
            return next();
        }
    }
}

うまくいけば、この例は意味をなします、そして、それがあなたの11 ty開発サーバーにバニラJavaScriptモジュールを加えることがどれくらい単純かを示します.
あなたが簡単に例えばGulp

    "start": "npx gulp && concurrently \"npx gulp watch\" \"npx eleventy --watch\" \"web-dev-server\""

JavaScriptの最適化

11 tyプロジェクト用のJavaScriptを最適化するためのツールの選択に関しては、選択は完全にあなた次第です.私のように、複雑なビルドを設定したくないなら、他の人の偉大な仕事を活用してOpen WC rollup config .
これが私の設定です.

npm i rollup deepmerge rollup-plugin-output-manifest @open-wc/building-rollup -D

import merge from "deepmerge";
import { createBasicConfig } from "@open-wc/building-rollup";
import outputManifest from "rollup-plugin-output-manifest";

const entrypoints = {
  index: "src/assets/index.js"
};

const baseConfig = createBasicConfig({
  outputDir: "dist/assets"
});

export default merge(baseConfig, {
  input: entrypoints,
  plugins: [outputManifest({
      // ../ to go outside of dist and into include
      fileName: '../../src/_includes/manifest.json',
      // assets is my folder of choice for js files
      publicPath: 'assets/'
  })]
});

いくつかのページにいくつかのコンポーネントをロードする場合に便利です.
これをフックするために11ty 使用しているrollup-plugin-output-manifest . この出力はmanifest.json ファイル.
これをAとして出力できますdata file あなたが欲しかったならば、しかし、私は私のスクリプトにもう少し多くの論理を加えたかったのでproduction モードかどうか.
ファイルを作成するsrc/_data/assets.js , として読み込むGlobal Data File .

module.exports = {
    getPath: (assetName) => {
        if (process.env.NODE_ENV === "production") {
            const assets = require("../_includes/manifest.json");
            const modulePath = assets[assetName];
            if(!modulePath) {
              throw new Error(`error with getAsset, ${assetName} does not exist in manifest.json`);
            }
            return `/${modulePath}`;
        } else {
            return `/src/assets/${assetName}`;
        }
    }
}

その後、11 tyテンプレートで

    <script src="{{ assets.getPath("index.js")}}" type="module"></script>

これを行うと、開発時には変更されていないSRCコードにサービスを提供することができましたが、キャッシュ・バスティンの名前でハッシュを持つ生産資産を埋め込んだだけです.
NODERADER ENVフラグを設定する方法を考えているなら、ここに私のビルドスクリプトがあります.

    "build": "rm -rf dist && NODE_ENV=production rollup -c rollup.config.js && NODE_ENV=production npx eleventy"

そして、それは私のセットアップです、私は確かにこれをするより良い方法があると確信しています、しかし、うまくいけば、これは役に立ちました.