create-isotope-app 1.0.3 → 1.1.0

package/index.js

@@ -33,6 +33,7 @@ import { readmeMd } from "./src/templates/configs/readme.js";
 import {
   extensionPackageJson,
   extensionGrammarJson,
+  extensionReadmeMd,
 } from "./src/templates/configs/extension.js";
 
 const rl = readline.createInterface({
@@ -47,16 +48,20 @@ async function init() {
   let projectName = process.argv[2];
   let projectIndex = 2;
 
+  // 'create' サブコマンドの処理をより堅牢に
   if (projectName === "create") {
     projectName = process.argv[3];
     projectIndex = 3;
   }
 
-  if (!projectName) {
+  // プロジェクト名が未指定、またはオプションが先に来てしまった場合の対処
+  if (!projectName || projectName.startsWith("-")) {
     projectName = "my-isotope-app";
   }
 
-  const root = path.resolve(projectName);
+  // 絶対パスとして解決
+  const root = path.resolve(process.cwd(), projectName);
+  const displayRoot = path.relative(process.cwd(), root) || ".";
 
   const args = process.argv.slice(projectIndex + 1);
   let styleChoice = args
@@ -65,7 +70,7 @@ async function init() {
 
   console.log(
     chalk.blueBright(
-      `\n⚛️  Isotope: Stabilizing new atomic structure at ${root}...\n`,
+      `\n⚛️  Isotope: Stabilizing new atomic structure at ${chalk.bold(root)}...\n`,
     ),
   );
 
@@ -177,6 +182,10 @@ async function init() {
     ),
     extensionGrammarJson(),
   );
+  fs.writeFileSync(
+    path.join(root, ".vscode/extensions/isotope-support-v0.1/README.md"),
+    extensionReadmeMd(),
+  );
 
   // コンポーネント・ページ
   fs.writeFileSync(path.join(root, "src/components/Link.tsx"), linkTsx());
@@ -225,6 +234,19 @@ async function init() {
   try {
     execSync(`npm install`, { cwd: root, stdio: "inherit" });
     console.log(chalk.green(`\n🚀 Ready! cd ${projectName} && npm run dev`));
+
+    console.log(chalk.cyan(`\n💡 VS Code Integration:`));
+    console.log(
+      chalk.white(
+        `  (JP) シンタックスハイライトを有効にするには、以下のコマンドでフォルダを開いてください:`,
+      ),
+    );
+    console.log(
+      chalk.white(
+        `  (EN) To enable syntax highlighting, please open the folder directly in VS Code:`,
+      ),
+    );
+    console.log(chalk.blueBright(`  > cd ${projectName} && code .\n`));
   } catch (err) {
     console.log(chalk.red(`\n❌ Install failed.`));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-isotope-app",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Atomic-based PHP & React hybrid framework for ATOMS GAMING",
   "main": "index.js",
   "type": "module",

package/src/templates/configs/extension.js

@@ -64,3 +64,34 @@ export const extensionGrammarJson = () => {
     2,
   );
 };
+
+export const extensionReadmeMd = () => {
+  return `# Isotope Support for VS Code
+
+Isotope framework (.isx) において、\`proton\` タグ内の PHP コードのシンタックスハイライトを提供します。
+
+## 特長
+
+- **Proton Highlighting**: \`proton\`\\\`...\`\\\` ブロック内を PHP として認識し、色を付けます。
+- **Non-destructive**: 標準の TypeScript React (TSX) の文法に介入（Injection）するため、React 側のハイライトを壊いません。
+
+## インストール（手動セットアップ）
+
+このディレクトリを VS Code の拡張機能フォルダに配置してください。
+
+\`\`\`bash
+cp -r .vscode/extensions/isotope-support-v0.1 ~/.vscode/extensions/
+\`\`\`
+
+その後、VS Code を再起動（または \`Developer: Reload Window\`）すると有効になります。
+
+## 制限事項
+
+- **シンタックスハイライトのみ**: 現在のバージョンは色の表示のみをサポートしています。
+- **Intellisense (Hover/F12)**: テンプレートリテラル内の PHP に対する「定義へ移動」や「ホバー説明」は、標準的な PHP Language Server の制限により機能しません。将来的なアップデートで仮想ドキュメント方式によるサポートを検討しています。
+
+---
+
+Produced by **ATOMS GAMING**
+`;
+};