@treelocator/init 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Krzysztof Wende
+Copyright (c) 2023 Michael Musil (original LocatorJS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,269 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+import prompts from "prompts";
+import pc from "picocolors";
+function detectPackageManager() {
+  let dir = process.cwd();
+  const root = path.parse(dir).root;
+  while (dir !== root) {
+    if (fs.existsSync(path.join(dir, "bun.lockb"))) return "bun";
+    if (fs.existsSync(path.join(dir, "pnpm-lock.yaml"))) return "pnpm";
+    if (fs.existsSync(path.join(dir, "yarn.lock"))) return "yarn";
+    if (fs.existsSync(path.join(dir, "package-lock.json"))) return "npm";
+    dir = path.dirname(dir);
+  }
+  return "npm";
+}
+function detectProject() {
+  const pkgPath = path.join(process.cwd(), "package.json");
+  if (!fs.existsSync(pkgPath)) {
+    console.error(pc.red("No package.json found. Run this from your project root."));
+    process.exit(1);
+  }
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  const info = {
+    packageManager: detectPackageManager(),
+    buildTool: "unknown",
+    framework: "unknown",
+    hasTypeScript: !!deps.typescript || fs.existsSync("tsconfig.json"),
+    configFile: null,
+    entryFile: null
+  };
+  if (deps.next) {
+    info.buildTool = "next";
+    info.configFile = fs.existsSync("next.config.ts") ? "next.config.ts" : fs.existsSync("next.config.mjs") ? "next.config.mjs" : "next.config.js";
+  } else if (deps.vite) {
+    info.buildTool = "vite";
+    info.configFile = fs.existsSync("vite.config.ts") ? "vite.config.ts" : "vite.config.js";
+  }
+  if (deps.react || deps["react-dom"]) {
+    info.framework = "react";
+  } else if (deps.vue) {
+    info.framework = "vue";
+  } else if (deps.svelte) {
+    info.framework = "svelte";
+  } else if (deps.preact) {
+    info.framework = "preact";
+  } else if (deps["solid-js"]) {
+    info.framework = "solid";
+  }
+  const entryPaths = [
+    "src/main.tsx",
+    "src/main.ts",
+    "src/main.jsx",
+    "src/main.js",
+    "src/index.tsx",
+    "src/index.ts",
+    "src/index.jsx",
+    "src/index.js",
+    "app/layout.tsx",
+    // Next.js app router
+    "app/layout.js",
+    "pages/_app.tsx",
+    // Next.js pages router
+    "pages/_app.js"
+  ];
+  for (const entry of entryPaths) {
+    if (fs.existsSync(entry)) {
+      info.entryFile = entry;
+      break;
+    }
+  }
+  return info;
+}
+function getInstallCommand(pm, packages) {
+  const pkgs = packages.join(" ");
+  switch (pm) {
+    case "bun":
+      return `bun add -D ${pkgs}`;
+    case "pnpm":
+      return `pnpm add -D ${pkgs}`;
+    case "yarn":
+      return `yarn add -D ${pkgs}`;
+    default:
+      return `npm install -D ${pkgs}`;
+  }
+}
+function updateViteConfig(configFile, framework) {
+  let content = fs.readFileSync(configFile, "utf-8");
+  if (content.includes("@locator/babel-jsx")) {
+    console.log(pc.yellow("TreeLocatorJS babel plugin already configured in vite.config"));
+    return;
+  }
+  if (framework === "react") {
+    const reactPluginRegex = /react\(\s*\)/;
+    const reactPluginWithOptionsRegex = /react\(\s*\{/;
+    if (reactPluginRegex.test(content)) {
+      content = content.replace(
+        reactPluginRegex,
+        `react({
+      babel: {
+        plugins: [
+          ["@locator/babel-jsx/dist", { env: "development" }],
+        ],
+      },
+    })`
+      );
+    } else if (reactPluginWithOptionsRegex.test(content)) {
+      content = content.replace(
+        /react\(\s*\{/,
+        `react({
+      babel: {
+        plugins: [
+          ["@locator/babel-jsx/dist", { env: "development" }],
+        ],
+      },`
+      );
+    }
+  }
+  fs.writeFileSync(configFile, content);
+  console.log(pc.green(`Updated ${configFile}`));
+}
+function updateNextConfig(configFile) {
+  let content = fs.readFileSync(configFile, "utf-8");
+  if (content.includes("@locator/webpack-loader")) {
+    console.log(pc.yellow("TreeLocatorJS webpack loader already configured in next.config"));
+    return;
+  }
+  const webpackConfig = `
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\\.tsx?$/,
+      use: [
+        { loader: "@locator/webpack-loader", options: { env: "development" } },
+      ],
+    });
+    return config;
+  },`;
+  if (content.includes("const nextConfig = {")) {
+    content = content.replace(
+      "const nextConfig = {",
+      `const nextConfig = {${webpackConfig}`
+    );
+  } else if (content.includes("module.exports = {")) {
+    content = content.replace(
+      "module.exports = {",
+      `module.exports = {${webpackConfig}`
+    );
+  } else if (content.includes("export default {")) {
+    content = content.replace(
+      "export default {",
+      `export default {${webpackConfig}`
+    );
+  }
+  fs.writeFileSync(configFile, content);
+  console.log(pc.green(`Updated ${configFile}`));
+}
+function addRuntimeImport(entryFile, isNextApp) {
+  let content = fs.readFileSync(entryFile, "utf-8");
+  if (content.includes("@treelocator/runtime")) {
+    console.log(pc.yellow("TreeLocatorJS runtime already imported"));
+    return;
+  }
+  const importLine = `import setupLocatorUI from "@treelocator/runtime";
+`;
+  const setupCall = isNextApp ? "" : `
+if (typeof window !== "undefined") {
+  setupLocatorUI();
+}
+`;
+  if (isNextApp) {
+    console.log(pc.yellow("\nFor Next.js App Router, create a client component:"));
+    console.log(pc.cyan(`
+// app/LocatorProvider.tsx
+"use client";
+import { useEffect } from "react";
+import setupLocatorUI from "@treelocator/runtime";
+
+export function LocatorProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      setupLocatorUI();
+    }
+  }, []);
+  return <>{children}</>;
+}
+
+// Then wrap your app in app/layout.tsx:
+// <LocatorProvider>{children}</LocatorProvider>
+`));
+    return;
+  }
+  content = importLine + content;
+  const lastImportIndex = content.lastIndexOf("import ");
+  if (lastImportIndex !== -1) {
+    const lineEnd = content.indexOf("\n", lastImportIndex);
+    content = content.slice(0, lineEnd + 1) + setupCall + content.slice(lineEnd + 1);
+  } else {
+    content = content + setupCall;
+  }
+  fs.writeFileSync(entryFile, content);
+  console.log(pc.green(`Updated ${entryFile}`));
+}
+async function main() {
+  console.log(pc.bold(pc.cyan("\n  TreeLocatorJS Setup Wizard\n")));
+  const info = detectProject();
+  console.log(pc.dim("Detected:"));
+  console.log(pc.dim(`  Package manager: ${info.packageManager}`));
+  console.log(pc.dim(`  Build tool: ${info.buildTool}`));
+  console.log(pc.dim(`  Framework: ${info.framework}`));
+  console.log(pc.dim(`  TypeScript: ${info.hasTypeScript}`));
+  console.log();
+  if (info.buildTool === "unknown") {
+    console.log(pc.red("Could not detect build tool (Vite or Next.js)."));
+    console.log(pc.dim("TreeLocatorJS currently supports Vite and Next.js projects."));
+    process.exit(1);
+  }
+  if (info.framework === "unknown") {
+    console.log(pc.red("Could not detect framework."));
+    process.exit(1);
+  }
+  const { confirm } = await prompts({
+    type: "confirm",
+    name: "confirm",
+    message: "Install and configure TreeLocatorJS?",
+    initial: true
+  });
+  if (!confirm) {
+    console.log(pc.dim("Cancelled."));
+    process.exit(0);
+  }
+  const packages = ["@treelocator/runtime"];
+  if (info.buildTool === "vite") {
+    packages.push("@locator/babel-jsx");
+  } else if (info.buildTool === "next") {
+    packages.push("@locator/webpack-loader");
+  }
+  console.log(pc.dim(`
+Installing ${packages.join(", ")}...`));
+  const installCmd = getInstallCommand(info.packageManager, packages);
+  try {
+    execSync(installCmd, { stdio: "inherit" });
+  } catch {
+    console.error(pc.red("Failed to install packages."));
+    process.exit(1);
+  }
+  if (info.configFile) {
+    console.log(pc.dim(`
+Updating ${info.configFile}...`));
+    if (info.buildTool === "vite") {
+      updateViteConfig(info.configFile, info.framework);
+    } else if (info.buildTool === "next") {
+      updateNextConfig(info.configFile);
+    }
+  }
+  if (info.entryFile) {
+    console.log(pc.dim(`
+Updating ${info.entryFile}...`));
+    const isNextApp = info.entryFile.startsWith("app/");
+    addRuntimeImport(info.entryFile, isNextApp);
+  }
+  console.log(pc.bold(pc.green("\nTreeLocatorJS installed successfully!")));
+  console.log(pc.dim("\nUsage: Hold Alt and click any component to copy its ancestry.\n"));
+}
+main().catch(console.error);

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@treelocator/init",
+  "version": "0.1.0",
+  "description": "Setup wizard for TreeLocatorJS - auto-configure component ancestry tracking",
+  "bin": {
+    "treelocatorjs": "./dist/index.js",
+    "locatorjs": "./dist/index.js",
+    "@treelocator/init": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --watch"
+  },
+  "dependencies": {
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wende/treelocatorjs.git",
+    "directory": "packages/init"
+  },
+  "keywords": [
+    "treelocatorjs",
+    "locatorjs",
+    "devtools",
+    "react",
+    "vue",
+    "svelte",
+    "cli",
+    "component-ancestry"
+  ],
+  "license": "MIT",
+  "gitHead": "e7aff23b5a8461ba254e2f60e7bdb25081d7be50"
+}