VSCode拡張でJavaScript DOMを使用する

Question

Visual Studioコードで作成しているドキュメント（例：txtファイル、マークダウンファイル、asciidocファイルなど）にYoastSEO解析を適用するVisual Studioコード拡張を作成しようとしています。

私は拡張の基本的なシェルを作成している、と私はYoastSEOを追加するために、NPMを使用していますnpm install https://github.com/Yoast/YoastSEO.js#develop

私はそうのようなYoastProviderクラス作成しました：このクラス内で今

const timerPeriod = 1000; // Time between preview updates 

export default class YoastProvider implements TextDocumentContentProvider { 
    // ... 
} 

を、 previewメソッドを使用して、1）ドキュメントの内容を取得し、2）Yoastで処理し、3）結果をプレビューウィンドウに出力するためのメソッドがあります。

ところで、Yoast APIはDOMと直接連携したいと考えています。 Here's an example from their github：

var snippetPreview = new SnippetPreview({ 
    targetElement: document.getElementById("snippet") 
}); 

var app = new App({ 
    snippetPreview: snippetPreview, 
    targets: { 
     output: "output" 
    }, 
    callbacks: { 
     getData: function() { 
      return { 
       keyword: focusKeywordField.value, 
       text: contentField.value 
      }; 
     } 
    } 
}); 

app.refresh(); 

私はnodom持つ要素うち、「偽」ことができると私は、キーワードとテキストに直接文字列を渡すことができますが、Yoastは、その処理中にDOMを使っているようですので、それは問題ではありません。だから、documentがYoastのapp.jsから未定義であるというエラーが表示されます。

このようにYoastSEOを使用する方法はありますか？私が逃している他のアプローチがありますか？私はそれがあるべきであるよりも困難にするかもしれないように見えます。

Answer 1

jsdomのようなものを含む新しいコンテキストでYoastをラップすることができます。その結果、ロード時にDOMが存在するかのように表示されます。

ノード環境内で角度単位テストを実行するには、jsdomを使って同様の作業をしました。

const yoast = (function(){ 
    global.document = jsdom(); // Use any virtual dom that you want really 
    const yoast = require('yoast'); 
    delete global.document; 
    return yoast; 
})(); 

悲しいことに、悲しいことに、モジュールをインポートするだけでは簡単ではありませんが、処理が完了するはずです。