Next.jsアプリをノーコードで開発する拡張機能を追加する

[Densyakun]

ディレクトリコンポーネントの概念

• 開発対象のディレクトリの部品（=コンポーネント）
• 拡張機能から追加できる
• ディレクトリとファイルデータを読み込んだときに、コンポーネントの条件を判定する
• ディレクトリとファイルデータをReactコンポーネントと変換（コンパイル）する
• コンポーネントの条件を満たす場合、Reactコンポーネントを画面に表示する
• ファイルデータは必要であれば読み込む
• UIでディレクトリコンポーネントのCRUD操作ができる
• ディレクトリコンポーネント同士は重複する
  • ファイルの読み書き時に、重複するディレクトリコンポーネントをディレクトリとファイルデータに変換した結果が異なる場合、重複排除する必要がある
  • 選択した複数のコンポーネントを積集合にする機能を追加する
• ディレクトリコンポーネントを開発するために、ディレクトリコンポーネントで使われていないファイルデータを表示する

Directory Component Editor

• ディレクトリをコンポーネント指向設計で開発するエディター

Next.js Editor

• Next.jsアプリを開発するためのディレクトリコンポーネントを追加する拡張機能
• Next.js 12に対応（予定）
• 完全に対応せず、Kozmik IDEの開発に必要な部分だけ対応する
• ディレクトリがNext.jsアプリである条件は、npm run devコマンドでNext.jsアプリを起動できる状態か > package.jsonにNext.jsに必要なライブラリがインストールされているか
• typescriptライブラリのCompiler APIを使って、TSX, JSX, TS, JSのコンパイルに対応する

Tasks

• Directory Component Editorを追加する
• ディレクトリがNext.jsアプリであるかどうかを表示する
• ASTやディレクトリ構成を、Reactコンポーネントと変換する
• フォーマットをファイルに合わせるため、空行、ホワイトスペース、コメントなどを残して、従来どおりコーディングしたようなフォーマットでコンパイルする
• ASTを編集するためのエディターを追加する #30 ASTを編集するためのエディターを追加する
• ページとコンポーネントをノーコードで開発するための機能を追加する
• Next.js、React、HTML、CSS、npmパッケージ、Node.js、ブラウザ、Androidのためのディレクトリコンポーネントを追加する

[Densyakun]

AST の Parser を Acorn から Meriyah に変更