search

orukRed / tyranosyntax

vscodeで動くティラノスクリプト言語サポート拡張機能です。
https://orukred.github.io/TyranoScriptSyntax.html
MIT License
13 stars 3 forks source link

その場プレビュー機能の追加 #124

Open orukRed opened 8 months ago

orukRed commented 8 months ago

suiak2とかlight.vnで実装しているようなその場プレビューの実装

適当なコマンドで新規タブ開いて、開いてるksファイルのプレビュー リアルタイム更新 ユーザーのプロジェクトに存在するパーサー使うのが良さそう？ デバッグ機能と並行で実装できそう？

まずはプレビュー開いてindex.html開くとこから

他のファイル参照してのその場プレビューは多分無理なのでそこらへんは似た機能実装してる人のを参考にさせてもらう

orukRed commented 8 months ago

プレビュー開いてるときはリアルタイム更新もさせたい

ついでにデバッグ機能のひな形みたいなのも作りたい。F5で初めから実行するてきなやつ

orukRed commented 8 months ago

https://code.visualstudio.com/api/extension-guides/webview#loading-local-content

orukRed commented 7 months ago

以下、Copilotに聞いたメモ やっぱexpress入れて内部でローカルサーバー立てるしかないのでは？ 多分webPreviewでローカルへのアクセスできるよね？

orukRed: createWebviewPanelでローカルサーバーにアクセスしたいです

GitHub Copilot: createWebviewPanel でローカルサーバーにアクセスするには、以下の手順を実行してください。

  1. createWebviewPanel メソッドを使用して、Webview パネルを作成します。このとき、 WebviewOptions オブジェクトの portMapping プロパティに、Webview 内で使用するポート番号と、ローカルサーバーで使用するポート番号をマッピングする設定を追加します。
const panel = vscode.window.createWebviewPanel(
  'webviewSample',
  'Webview Sample',
  vscode.ViewColumn.One,
  {
    enableScripts: true,
    localResourceRoots: [vscode.Uri.file(context.extensionPath)],
    portMapping: [
      { webviewPort: 8080, extensionHostPort: 3000 },
    ],
  }
);
  1. ローカルサーバーを起動します。例えば、Node.js の http-server パッケージを使用して、ローカルサーバーを起動することができます。
npm install -g http-server
http-server /path/to/your/project -p 3000
  1. Webview 内で、ローカルサーバーにアクセスするための JavaScript コードを記述します。例えば、以下のように fetch メソッドを使用して、ローカルサーバーの /index.html にアクセスすることができます。
const htmlContent = `
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Sample</title>
    </head>
    <body>
      <h1>Hello, World!</h1>
      <script>
        fetch('http://localhost:8080/index.html')
          .then(response => response.text())
          .then(data => console.log(data));
      </script>
    </body>
  </html>
`;

panel.webview.html = htmlContent;

この例では、fetch メソッドを使用して、ローカルサーバーの /index.html にアクセスしています。http://localhost:8080/index.html は、Webview 内で使用されるポート番号 8080 にマッピングされたローカルサーバーのポート番号 3000 にアクセスするための URL です。

以上の手順を実行することで、createWebviewPanel でローカルサーバーにアクセスすることができます。

orukRed: /extApi ローカルホスト上でHTMLファイルをプレビューしたいです。

GitHub Copilot: VS CodeのWebviewを使用してローカルホスト上のHTMLファイルをプレビューするには、以下の手順を実行します。

  1. vscode.window.createWebviewPanelを使用してWebviewパネルを作成します。このとき、WebviewOptionsオブジェクトのlocalResourceRootsプロパティに、HTMLファイルのあるディレクトリへのパスを指定します。

  2. vscode.Uri.fileを使用して、HTMLファイルへのパスを作成します。

  3. Webview.asWebviewUriを使用して、HTMLファイルへのパスをWebview内で使用できるURIに変換します。

  4. WebviewのHTMLコンテンツに、変換したURIを指定します。

以下に、これらの手順を実行するTypeScriptのコードを示します。

import * as vscode from 'vscode';
import * as path from 'path';

function activate(context: vscode.ExtensionContext) {
  const panel = vscode.window.createWebviewPanel(
    'htmlPreview',
    'HTML Preview',
    vscode.ViewColumn.One,
    {
      enableScripts: true,
      localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'path', 'to', 'your', 'html'))]
    }
  );

  const htmlPath = path.join(context.extensionPath, 'path', 'to', 'your', 'html', 'index.html');
  const htmlUri = vscode.Uri.file(htmlPath);
  const webviewUri = panel.webview.asWebviewUri(htmlUri);

  panel.webview.html = `<iframe src="${webviewUri}" frameBorder="0" width="100%" height="100%"></iframe>`;
}

export { activate };

このコードでは、path.join(context.extensionPath, 'path', 'to', 'your', 'html', 'index.html')の部分を、プレビューしたいHTMLファイルへのパスに置き換えてください。

以上の手順を実行することで、VS CodeのWebviewを使用してローカルホスト上のHTMLファイルをプレビューすることができます。

orukRed: /extApi すみません、間違えました。ローカルサーバーを立ててHTMLをプレビューしたいです。

GitHub Copilot: ローカルサーバーを立ててHTMLをプレビューするには、以下の手順を実行します。

  1. Node.jsとnpmをインストールします。これらはローカルサーバーを立てるために必要です。

  2. プロジェクトのディレクトリに移動し、http-serverという名前のNode.jsパッケージをインストールします。これはシンプルなHTTPサーバーを立てるためのパッケージです。

npm install http-server -g
  1. http-serverコマンドを実行して、ローカルサーバーを立てます。デフォルトでは、サーバーはポート8080で起動します。
http-server
  1. ブラウザを開き、http://localhost:8080にアクセスします。これで、ローカルサーバー上のHTMLファイルをプレビューすることができます。

なお、VS Codeには「Live Server」という拡張機能もあります。これを使用すると、ローカルサーバーを立ててHTMLをリアルタイムにプレビューすることができます。必要に応じてご利用ください。

orukRed: /extApi ありがとうございます。それをターミナルではなくコード上で実行することはできますか。

GitHub Copilot: VS Code拡張機能の中でローカルサーバーを立てるには、Node.jsのhttpモジュールやexpressライブラリを使用することができます。以下に、VS Code拡張機能の中でexpressを使用してローカルサーバーを立て、そのサーバーでHTMLファイルをホストする例を示します。

まず、expressをプロジェクトにインストールします。

npm install express

次に、以下のようにexpressを使用してローカルサーバーを立てます。

import * as express from 'express';
import * as vscode from 'vscode';
import * as path from 'path';

function activate(context: vscode.ExtensionContext) {
  const app = express();
  const server = app.listen(3000, () => console.log('Server started on port 3000'));

  app.use(express.static(path.join(context.extensionPath, 'path', 'to', 'your', 'html')));

  context.subscriptions.push({
    dispose: () => server.close()
  });
}

export { activate };

このコードでは、expressを使用してローカルサーバーを立て、そのサーバーでHTMLファイルをホストしています。path.join(context.extensionPath, 'path', 'to', 'your', 'html')の部分を、ホストしたいHTMLファイルへのパスに置き換えてください。

また、サーバーは拡張機能が非アクティブになったときに閉じるようにしています。これは、サーバーが永続的に実行されるのを防ぐためです。

以上の手順を実行することで、VS Code拡張機能の中でローカルサーバーを立て、そのサーバーでHTMLファイルをホストすることができます。

orukRed commented 6 months ago

独自の言語（ティラノスクリプト）のデバッガーを作成するには、以下の手順を実行します。

新しいVS Code拡張機能を作成します。これは、デバッガーのエントリーポイントとなります。

package.jsonファイルに、新しいデバッガーの設定を追加します。以下に、ティラノスクリプトデバッガーの設定の例を示します。

Debug Adapterを作成します。これは、VS Codeとデバッガーの間の通信を担当します。Debug Adapterは、通常は別のプロセスとして実行され、VS Codeとは標準入出力を通じて通信します。Debug Adapterは、Debug Adapter Protocolを使用してVS Codeと通信します。

Debug Adapterの中で、ティラノスクリプトファイルを解析し、デバッグ情報を生成します。これには、ティラノスクリプトパーサーなどのツールを使用します。

Debug AdapterからVS Codeにデバッグ情報を送信します。これには、Debug Adapter ProtocolのsendEventメソッドを使用します。

以上の手順を実行することで、ティラノスクリプトファイルのデバッガーを作成することができます。ただし、ティラノスクリプトパーサーなどのツールは、ティラノスクリプトの仕様に基づいて自分で作成するか、既存のものを探す必要があります。

orukRed commented 6 months ago

独自の言語（ティラノスクリプト）のデバッガーを作成するには、以下の手順を実行します。

  1. 新しいVS Code拡張機能を作成します。これは、デバッガーのエントリーポイントとなります。

  2. package.jsonファイルに、新しいデバッガーの設定を追加します。以下に、ティラノスクリプトデバッガーの設定の例を示します。

"contributes": {
  "debuggers": [
    {
      "type": "tyrano",
      "label": "TyranoScript Debugger",
      "languages": ["tyrano"],
      "program": "./out/debugAdapter.js",
      "configurationAttributes": {
        "launch": {
          "required": ["request"],
          "properties": {
            "request": {
              "type": "string",
              "enum": ["launch"],
              "description": "Request type of 'launch'"
            },
            "program": {
              "type": "string",
              "description": "Path to TyranoScript file",
              "default": "${file}"
            }
          }
        }
      }
    }
  ]
}

  1. Debug Adapterを作成します。これは、VS Codeとデバッガーの間の通信を担当します。Debug Adapterは、通常は別のプロセスとして実行され、VS Codeとは標準入出力を通じて通信します。Debug Adapterは、Debug Adapter Protocolを使用してVS Codeと通信します。

  2. Debug Adapterの中で、ティラノスクリプトファイルを解析し、デバッグ情報を生成します。これには、ティラノスクリプトパーサーなどのツールを使用します。

  3. Debug AdapterからVS Codeにデバッグ情報を送信します。これには、Debug Adapter ProtocolのsendEventメソッドを使用します。

以上の手順を実行することで、ティラノスクリプトファイルのデバッガーを作成することができます。ただし、ティラノスクリプトパーサーなどのツールは、ティラノスクリプトの仕様に基づいて自分で作成するか、既存のものを探す必要があります。