zenn-embed-elements 0.1.108 → 0.1.109-alpha.2

package/lib/index.js

@@ -1,10 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const gist_1 = require("./classes/gist");
-const tweet_1 = require("./classes/tweet");
 const katex_1 = require("./classes/katex");
-const mermaid_1 = require("./classes/mermaid");
-customElements.define('embed-gist', gist_1.EmbedGist);
-customElements.define('embed-tweet', tweet_1.EmbedTweet);
 customElements.define('embed-katex', katex_1.EmbedKatex);
-customElements.define('embed-mermaid', mermaid_1.EmbedMermaid);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-embed-elements",
-  "version": "0.1.108",
+  "version": "0.1.109-alpha.2",
   "license": "MIT",
   "description": "Web components for embedded contents.",
   "repository": {
@@ -28,7 +28,7 @@
     "rimraf": "^3.0.2",
     "typescript": "^3.9.3"
   },
-  "gitHead": "65bea2106504e978987d16ec2f6d024b13314049",
+  "gitHead": "951af5e0a49c5c8014d8233e74d6f45ec2f21413",
   "publishConfig": {
     "access": "public"
   }

package/lib/classes/gist.d.ts

@@ -1,12 +0,0 @@
-declare type GistApiResponse = {
-    stylesheet: string;
-    div: string;
-};
-export declare class EmbedGist extends HTMLElement {
-    constructor();
-    render(data: GistApiResponse): void;
-    renderError(): void;
-    getCacheKey(): string;
-    connectedCallback(): Promise<void>;
-}
-export {};

package/lib/classes/gist.js

@@ -1,73 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmbedGist = void 0;
-const jsonp_1 = require("../utils/jsonp");
-// ホットリロード等、再レンダリング時のちらつきを防ぐためにhtmlの値をキャッシュする（リロードで消える）
-const resultHtmlStore = {};
-class EmbedGist extends HTMLElement {
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow({ mode: 'open' });
-        const cachedHtml = resultHtmlStore[this.getCacheKey()];
-        if (cachedHtml) {
-            shadowRoot.innerHTML = cachedHtml;
-        }
-    }
-    render(data) {
-        if (!(this.shadowRoot && data.stylesheet && data.div)) {
-            this.renderError();
-            return;
-        }
-        const resultHtml = `<link rel="stylesheet" href="${data.stylesheet}"><div>${data.div}</div>`;
-        // gistのhtmlをキャッシュする
-        resultHtmlStore[this.getCacheKey()] = resultHtml;
-        this.shadowRoot.innerHTML = resultHtml;
-    }
-    renderError() {
-        this.innerHTML = `<div style="text-align: center; margin: 1.5rem 0; color: gray; font-size: 0.9rem;">
-    Gistの読み込みに失敗しました<br>  
-    ${this.getAttribute('page-url')}
-    </div>`;
-    }
-    getCacheKey() {
-        return encodeURIComponent(`${this.getAttribute('page-url')}-${this.getAttribute('encoded-filename')}`);
-    }
-    connectedCallback() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // キャッシュがある場合は再リクエストしない
-            if (resultHtmlStore[this.getCacheKey()])
-                return;
-            const pageUrl = this.getAttribute('page-url');
-            const encodedFileName = this.getAttribute('encoded-filename');
-            if (!pageUrl)
-                return;
-            const requestURL = pageUrlToRequestUrl(pageUrl) +
-                ((encodedFileName === null || encodedFileName === void 0 ? void 0 : encodedFileName.length) ? `?file=${encodedFileName}` : '');
-            try {
-                const data = yield jsonp_1.getByJsonp(requestURL);
-                this.render(data);
-            }
-            catch (e) {
-                console.log(e);
-                this.renderError();
-            }
-        });
-    }
-}
-exports.EmbedGist = EmbedGist;
-function pageUrlToRequestUrl(url) {
-    if (url.endsWith('.json'))
-        return url;
-    if (url.endsWith('.js'))
-        return url.replace('.js', '.json');
-    return `${url}.json`;
-}

package/lib/classes/mermaid.d.ts

@@ -1,10 +0,0 @@
-/**
- * original: https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/behaviors/markdown/render_mermaid.js
- */
-export declare class EmbedMermaid extends HTMLElement {
-    private observer?;
-    private _tmpContainer?;
-    connectedCallback(): Promise<void>;
-    disconnectedCallback(): void;
-    render(): Promise<void>;
-}

package/lib/classes/mermaid.js

@@ -1,174 +0,0 @@
-"use strict";
-/**
- * original: https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/behaviors/markdown/render_mermaid.js
- */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmbedMermaid = void 0;
-const load_script_1 = require("../utils/load-script");
-// mermaid.jsのバージョン
-const MERMAID_VERSION = '8.13';
-// レンダリングする図ごとの最大文字数
-const MAX_CHAR_LIMIT = 2000;
-// https://mermaid-js.github.io/mermaid/#/flowchart?id=chaining-of-links
-// 新しい仕様で
-// graph LR
-//    a --> b & c--> d
-// に対応するが、少ない記述でノード接続が爆発する可能性があるため最大数を制限する
-const MAX_CHAINING_OF_LINKS_LIMIT = 10;
-const containerId = 'mermaid-container';
-function initMermaid() {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (typeof mermaid === 'undefined') {
-            yield load_script_1.loadScript({
-                src: `https://cdn.jsdelivr.net/npm/mermaid@${MERMAID_VERSION}/dist/mermaid.min.js`,
-                id: 'mermaid-js',
-            });
-            const theme = 'default';
-            // mermaid 本体がロード時に走らないように設定
-            // mermaid 本体は使わないのでほかは設定しない
-            // eslint-disable-next-line
-            mermaid.initialize({
-                mermaid: {
-                    startOnLoad: false,
-                },
-            });
-            // mermaidAPI の設定
-            // eslint-disable-next-line
-            mermaid.mermaidAPI.initialize({
-                startOnLoad: false,
-                securityLevel: 'strict',
-                theme,
-                er: {
-                    useMaxWidth: true,
-                },
-                flowchart: {
-                    useMaxWidth: true,
-                    htmlLabels: false,
-                },
-                sequence: {
-                    useMaxWidth: true,
-                },
-                class: {
-                    useMaxWidth: true,
-                },
-                journey: {
-                    useMaxWidth: true,
-                },
-            });
-        }
-    });
-}
-function getPotentialPerformanceRisk(source) {
-    const cool = (() => {
-        try {
-            // eslint-disable-next-line
-            mermaid.mermaidAPI.parse(source);
-            return true;
-        }
-        catch (e) {
-            console.log('mermaid.js のレンダリングでシンタックスエラーが発生しました', e);
-            return false;
-        }
-    })();
-    return {
-        syntaxError: {
-            yes: !cool,
-            message: `<li>シンタックスエラーです</li>`,
-        },
-        charLimitOver: {
-            yes: source.length > MAX_CHAR_LIMIT,
-            message: `<li>ブロックあたりの文字数上限は${MAX_CHAR_LIMIT}です</li>`,
-        },
-        chainingOfLinksOver: {
-            yes: (source.match(/&/g) || []).length > MAX_CHAINING_OF_LINKS_LIMIT,
-            message: `<li>ブロックあたりの<code>&</code>によるチェイン上限は${MAX_CHAINING_OF_LINKS_LIMIT}です</li>`,
-        },
-    };
-}
-class EmbedMermaid extends HTMLElement {
-    connectedCallback() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // 一時コンテナ
-            const tmpContainer = document.createElement('div');
-            this.appendChild(tmpContainer);
-            this._tmpContainer = tmpContainer;
-            // 以下の理由からmermaidのレンダリングを遅延する
-            // - パフォーマンスのため
-            // - Safariでdetailsタグ内のmermaid.jsがうまくレンダリングされないため
-            this.observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => {
-                    var _a;
-                    if (entry.isIntersecting) {
-                        this.render();
-                        if (!this._tmpContainer) {
-                            console.error('Something wrong with _tmpContainer');
-                            return;
-                        }
-                        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.unobserve(this._tmpContainer); // 一度レンダリングされたらobserveを解除する
-                    }
-                });
-            }, { rootMargin: '1000px 0px' } // 手前で発火
-            );
-            this._tmpContainer && this.observer.observe(this._tmpContainer);
-        });
-    }
-    disconnectedCallback() {
-        // observeを解除
-        if (this.observer) {
-            this._tmpContainer && this.observer.unobserve(this._tmpContainer);
-            this.observer.disconnect();
-        }
-    }
-    render() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield initMermaid();
-            const content = this.textContent || this.innerText;
-            // Mermaid モジュールの読み込みに失敗したり、レンダリング対象のコンテンツが空の場合は何もせずに終了
-            if (!content)
-                return;
-            // 図だけを表示するためにコードは非表示に
-            const sourceContainer = this.childNodes[0];
-            sourceContainer.setAttribute('style', 'display:none');
-            // 文法エラーやパフォーマンスリスクが検出された場合、注意書きをレンダリングして終了
-            const risk = getPotentialPerformanceRisk(content);
-            if (Object.values(risk)
-                .map((r) => r.yes)
-                .includes(true)) {
-                this.innerHTML = `
-       <p>
-        <span>mermaidをレンダリングできません。</span>
-        <ul>
-        ${risk.syntaxError.yes ? risk.syntaxError.message : ''}
-        ${risk.charLimitOver.yes ? risk.charLimitOver.message : ''}
-        ${risk.chainingOfLinksOver.yes ? risk.chainingOfLinksOver.message : ''}
-        </ul>
-       </p>
-      `;
-                return;
-            }
-            // すべて通過した場合はレンダリングする
-            // セキュリティリスクを考慮して bindFunctions は実行しない方針にする
-            // 今回は `securityLevel='strict'` にしているのでどのみち実行されない
-            // securityLevel='loose'にし、かつ `Interaction` を有効にする場合は
-            // https://github.com/mermaidjs/mermaid-gitbook/blob/master/content/usage.md#binding-events
-            // ここを参考に追加する
-            const insert = (svgCode) => {
-                // 描画後のSVGを格納する div タグを作成
-                const container = document.createElement('div');
-                this.appendChild(container);
-                container.innerHTML = svgCode;
-            };
-            mermaid === null || mermaid === void 0 ? void 0 : mermaid.mermaidAPI.render(`${containerId}-${Date.now().valueOf()}-render`, content, insert, this._tmpContainer);
-        });
-    }
-}
-exports.EmbedMermaid = EmbedMermaid;

package/lib/classes/tweet.d.ts

@@ -1,8 +0,0 @@
-export declare class EmbedTweet extends HTMLElement {
-    url?: string;
-    tweetId?: string;
-    constructor();
-    connectedCallback(): Promise<void>;
-    render(): void;
-    embedTweet(): Promise<void>;
-}

package/lib/classes/tweet.js

@@ -1,73 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmbedTweet = void 0;
-/**
- * iframeの高さを取ってキャッシュすることで、ホットリロードでのガタツキを防ぐ
- */
-const heightStore = {};
-const containerClassName = 'embed-tweet-container';
-const fallbackLinkClassName = 'embed-tweet-link';
-class EmbedTweet extends HTMLElement {
-    constructor() {
-        super();
-        const url = this.getAttribute('src');
-        if (!url)
-            return;
-        this.url = url;
-        const match = url.match(/https?:\/\/twitter.com\/(.*?)\/status\/(\d+)[/?]?/);
-        if (match && match[2]) {
-            this.tweetId = match[2];
-        }
-    }
-    connectedCallback() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.render();
-            this.embedTweet();
-        });
-    }
-    render() {
-        const attribute = this.tweetId && heightStore[this.tweetId]
-            ? `style="min-height: ${encodeURIComponent(heightStore[this.tweetId])};"`
-            : '';
-        this.innerHTML = `<div class="${containerClassName}" ${attribute}>
-      <a href="${this.url}" class="${fallbackLinkClassName}" rel="nofollow">${this.url}</a>
-    </div>`;
-    }
-    embedTweet() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const tweetId = this.tweetId;
-            if (!(this.url && tweetId)) {
-                console.log(`Invalid tweet URL:${this.url}`);
-                return;
-            }
-            const container = this.querySelector(`.${containerClassName}`);
-            const disableConversation = this.url.includes('?conversation=none');
-            window.twttr.widgets
-                .createTweet(this.tweetId, container, Object.assign({ align: 'center' }, (disableConversation ? { conversation: 'none' } : {})))
-                .then(() => {
-                var _a;
-                /**
-                 * createTweetではJSONPを使っている（？）ためか、catch でエラーハンドリングができない
-                 * => fallback用のリンクをはじめから表示しておき、埋め込みが成功したら削除する
-                 */
-                (_a = this.querySelector(`.${fallbackLinkClassName}`)) === null || _a === void 0 ? void 0 : _a.remove();
-                const iframe = this.querySelector('iframe');
-                if (!iframe)
-                    return;
-                setTimeout(() => {
-                    heightStore[tweetId] = iframe.style.height;
-                }, 1000); // 正確な高さを取るために少し待つ
-            });
-        });
-    }
-}
-exports.EmbedTweet = EmbedTweet;

package/lib/init-twitter-script-inner.d.ts

@@ -1,2 +0,0 @@
-declare const initTwitterScriptInner = "window.twttr=(function(f,b,g){var e,c=f.getElementsByTagName(b)[0],a=window.twttr||{};if(f.getElementById(g)){return a}e=f.createElement(b);e.id=g;e.src=\"https://platform.twitter.com/widgets.js\";c.parentNode.insertBefore(e,c);a._e=[];a.ready=function(d){a._e.push(d)};return a}(document,\"script\",\"twitter-wjs\"));";
-export default initTwitterScriptInner;

package/lib/init-twitter-script-inner.js

@@ -1,8 +0,0 @@
-"use strict";
-// Twitterを初期化するためには widgets.js を読み込む必要があるが、
-// 公式ドキュメントに記載されている下記のscriptをあらかじめheadなどで読み込んでおけば、
-// それ以降ではscriptを改めて読み込まずに window.twtter.createTweet メソッドが使用可能
-// ref: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites
-Object.defineProperty(exports, "__esModule", { value: true });
-const initTwitterScriptInner = `window.twttr=(function(f,b,g){var e,c=f.getElementsByTagName(b)[0],a=window.twttr||{};if(f.getElementById(g)){return a}e=f.createElement(b);e.id=g;e.src="https://platform.twitter.com/widgets.js";c.parentNode.insertBefore(e,c);a._e=[];a.ready=function(d){a._e.push(d)};return a}(document,"script","twitter-wjs"));`;
-exports.default = initTwitterScriptInner;

package/lib/utils/jsonp.d.ts

@@ -1,13 +0,0 @@
-/**
- * 本当はJSONPを使いたくないが、Gistのjsonファイル（https://gist.github.com/foo/bar.json）への
- * リクエストでCORSを回避するにはJSONPしか無さそう
- *
- * 他に検討した方法
- * - Gistのscriptをcomponent内で非同期に読み込むことはセキュリティ的に不可能（document.writeが使われているため）
- * - iframeだと高さの調整が必要になって面倒
- * - Gistが読まれるたびに初期化処理を呼び出すのはアプリ側の処理がややこしい
- * => JSONP!!!
- *
- * ref: https://github.com/moebiusmania/gist-embed
- */
-export declare function getByJsonp<T>(url: string): Promise<T>;

package/lib/utils/jsonp.js

@@ -1,64 +0,0 @@
-"use strict";
-/**
- * 本当はJSONPを使いたくないが、Gistのjsonファイル（https://gist.github.com/foo/bar.json）への
- * リクエストでCORSを回避するにはJSONPしか無さそう
- *
- * 他に検討した方法
- * - Gistのscriptをcomponent内で非同期に読み込むことはセキュリティ的に不可能（document.writeが使われているため）
- * - iframeだと高さの調整が必要になって面倒
- * - Gistが読まれるたびに初期化処理を呼び出すのはアプリ側の処理がややこしい
- * => JSONP!!!
- *
- * ref: https://github.com/moebiusmania/gist-embed
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getByJsonp = void 0;
-const head = document.getElementsByTagName('head')[0];
-const timeout = 6000;
-let timeoutId = null;
-function resetTimeout() {
-    if (timeoutId)
-        clearTimeout(timeoutId);
-}
-const clearFunction = (callbackName, callbackId) => {
-    try {
-        delete window[callbackName];
-    }
-    catch (e) {
-        window[callbackName] = undefined;
-    }
-    const script = document.getElementById(callbackId);
-    if (script) {
-        head.removeChild(script);
-    }
-};
-function getByJsonp(url) {
-    const callbackName = `jsonp_${Date.now()}_${Math.ceil(Math.random() * 10000)}`;
-    const callbackId = `id_${callbackName}`;
-    return new Promise((resolve, reject) => {
-        window[callbackName] = (response) => {
-            resolve(response);
-            resetTimeout();
-            clearFunction(callbackName, callbackId);
-        };
-        // すでにクエリが付与されている場合は "&" で、付与されていない場合は "?" でcallbackを指定する
-        const src = url + (url.includes('?') ? '&' : '?') + `callback=${callbackName}`;
-        const script = document.createElement('script');
-        script.setAttribute('src', src);
-        script.setAttribute('charset', 'UTF-8');
-        script.id = callbackId;
-        head.appendChild(script);
-        timeoutId = setTimeout(() => {
-            reject(new Error(`Request to ${url} timed out.`));
-            clearFunction(callbackName, callbackId);
-            window[callbackName] = () => clearFunction(callbackName, callbackId);
-        }, timeout);
-        // Catch errors
-        script.addEventListener('error', () => {
-            reject(new Error(`JSONP request to ${url} failed`));
-            clearFunction(callbackName, callbackId);
-            resetTimeout();
-        });
-    });
-}
-exports.getByJsonp = getByJsonp;