ステンシルとWebワーカー:おとぎ話

昔々、Webコンポーネントを生成し、ハイパフォーマンスWebアプリケーションをビルドするコンパイラがStencilJSと呼ばれました.これまで作成されたすべてのビルドタイムツールの中で、すべての主要なフレームワークを介して動作する高速、より強力なコンポーネントを構築するために目標を持っていた.
隣のインターネットで、男の子がいた😉). そして、少年は、コンパイラがより多くの、より効果的な、より多くの開発者は、各通過年と友好的な成長を見た.
ある日、彼は彼の最愛のプロジェクトDeckDeckGoで新しい何かを開発していたとして、少年は彼がこれまで試したことがなかったコンパイラの機能を実験するためのアイデアを持っていた、Web Workersの統合.
彼は、結果によって、彼はその魔法の出会いを共有しなければならなかったので流血していた.

第1章：アブラカダブラ

少年はブログ記事を出版するが、どんな未知の秘密呪文も明らかにしません.一方、魔法の言葉なしで良いおとぎ話がないでしょう.
幸いにも、コンパイラは、「documentation」と呼ばれる非常によく文書化されたグリモアで、誰にでもそのsorceryを共有しました.
勇敢な騎士は、そのような実装を技術的に敗北させようとして、私はあなたにこれらの呪文を見てもらうように提案させてください.

第2章イナスキャメロット

アーサー王とラウンドテーブルはキャメロットを持っていました.我々は開発者には、Webコンポーネントと影DOMがあります.それは私たちは新しい魔法のトリックを実験する前に、新しいステンシル遊び場を初期化している理由です.

npm init stencil

加えて、少年が試していた正確な式を複製するために、我々は我々のコンポーネントをHTMLにMarkdownから魔法の文章をレンダリングするために目標を与えるように、Marked.jsの使用で我々の要塞を強化する.

npm i marked @types/marked

いくつかのモルタルを見つけて、我々はLifeCycle componentWillLoadのときにMarkdownをHTMLに変換して、ローカル状態の使用を通してそれを適用することによってレンダリング呪文を再現することを目的とするコンポーネントを作成しています.

import { Component, h, State } from '@stencil/core';

import { parseMarkdown } from './markdow';

@Component({
  tag: 'my-camelot',
  shadow: true,
})
export class MyCamelot {

  @State()
  private markdownHtml: string;

  async componentWillLoad() {
    this.markdownHtml = await parseMarkdown(`# Choose wisely

For while the true Grail will **bring you life**, the false Grail will take it from you.`
    );
  }

  render() {
    return <div innerHTML={this.markdownHtml}></div>;
  }
}

また、我々はmarkdown.tsを呼び出すことができます別のファイルで魔法の機能を外部化します.

import marked from 'marked';

export const parseMarkdown = async (text: string) => {
  const renderer = new marked.Renderer();

  return marked(text, {
    renderer,
    xhtml: true,
  });
};

何も恐れるかもしれない、そして、ローカルコンピュータ(npm run start)の上で上記コードを走らせるかもしれない何人かは、以下の結果を観測するかもしれません.

第3章：呪文呼び出し

少年はすでにウェブ労働者の記事を発表していました、彼らの自国のJavaScript integration in Reactアプリケーションと彼らのintegration with Angularを公開しているもう一つのものについての1.
JavaScriptのバージョンでは、JavaScriptバージョンでは、これらの両方でこれらを読み込むために、リスナーを使用してオブジェクトを作成するためのライブラリを作るの世話をするから、たとえそれがいくつかの作品を必要としたとしても、それはまだ多くの仕事、より多くのコードが必要です.
反対に、少年の不思議に、ステンシルは、これらのすべての手順を単純に魔法を呼び出すだけで魔法を作った
実際には、次のスクリーンショットでは、mv markdown.ts markdown.worker.tsで終わるsrcディレクトリ内の任意のtypescriptファイルは自動的には、ステンシルのコンパイラの製作によって労働者を使用して、限り、少年は知っている、彼はこれまで試した中で最も不思議なWebワーカーのレシピ🔥.

エピローグ

このような統合を単純化したStencil’sコンパイラは、再びすべての可能性を示した.一緒にWebワーカーと、彼らはうまくいけば多くの赤ちゃん、多くの素晴らしいWebコンポーネントとアプリケーションがあります.
無限に、そして、向こうに!
ダビデ
あなたは、私はあなたの次のプレゼンテーションのためのDeckDeckGoにしようとすると、なぜ、私に到達することができます.