@ahmednawaz/crank 0.2.7 → 0.3.0

package/react.mjs

@@ -1,22 +1,37 @@
 /**
- * Retune-style React entry — browser-only, Vite-bundlable (no Node/fs).
+ * Crank React entry — Retune-style: panel UI is **bundled with the app**, not
+ * fetched from companion :3344 (that broke Replit iframe previews).
  *
- *   // main.tsx
  *   import { Crank } from '@ahmednawaz/crank/react'
- *   // or: import { Crank } from '@ahmednawaz/crank'
- *
  *   <Crank />
  *
- * Mount near your app root. Injects companion `/dev-loader.js` once (same panel as the
- * optional Vite plugin). Requires the companion process: `npx @ahmednawaz/crank start`
- *
  * peerDependency: react >= 17
  */
 
 import { useEffect } from 'react';
+import { bootCrankPanel } from './panel-boot.mjs';
 
 /**
- * @param {{ companionUrl?: string, url?: string, src?: string }} [props]
+ * Replit public companion host from the current preview hostname.
+ * @returns {string | null}
+ */
+export function detectReplitCompanionUrl() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  try {
+    const host = window.location.hostname || '';
+    if (!/\.replit\.dev$|\.repl\.co$|\.replit\.app$/.test(host)) {
+      return null;
+    }
+    return `https://3344-${host.replace(/^\d+-/, '')}`;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * @param {{ companionUrl?: string, url?: string, src?: string, force?: boolean }} [props]
  * @returns {string}
  */
 export function resolveCrankCompanionUrl(props = {}) {
@@ -40,10 +55,15 @@ export function resolveCrankCompanionUrl(props = {}) {
   } catch {
     // ignore
   }
-  return 'http://localhost:3344';
+  const replit = detectReplitCompanionUrl();
+  if (replit) {
+    return replit;
+  }
+  return 'http://127.0.0.1:3344';
 }
 
 /**
+ * @deprecated Panel loads from the package bundle. Prefer omitting src.
  * @param {{ companionUrl?: string, url?: string, src?: string }} [props]
  * @returns {string}
  */
@@ -54,35 +74,70 @@ export function resolveCrankLoaderSrc(props = {}) {
   return `${resolveCrankCompanionUrl(props)}/dev-loader.js`;
 }
 
+function isDevMode(force) {
+  if (force) {
+    return true;
+  }
+  try {
+    if (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.DEV) {
+      return true;
+    }
+  } catch {
+    // ignore
+  }
+  try {
+    if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development') {
+      return true;
+    }
+  } catch {
+    // ignore
+  }
+  // Default on — Crank is a dev tool; force=false only hides when clearly production.
+  try {
+    if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production') {
+      return false;
+    }
+  } catch {
+    // ignore
+  }
+  return true;
+}
+
 /**
- * Retune-style one-liner. Renders null; injects the companion loader script on the client.
+ * Mount near app root (Retune pattern). Boots the bundled panel once.
  *
- * Do not set window.__CRANK_LOADER__ here — `/dev-loader.js` owns that flag and loads the panel.
- *
- * @param {{ companionUrl?: string, url?: string, src?: string }} [props]
+ * @param {{ companionUrl?: string, url?: string, src?: string, force?: boolean }} [props]
  */
 export function Crank(props = {}) {
-  const src = resolveCrankLoaderSrc(props);
-
   useEffect(() => {
     if (typeof document === 'undefined') {
       return undefined;
     }
-    if (document.querySelector('script[data-crank-loader="1"]')) {
+    if (!isDevMode(props.force)) {
+      return undefined;
+    }
+    if (document.getElementById('vp-shell') || document.getElementById('vp-crank-reopen')) {
       return undefined;
     }
-    // Panel already live (bookmarklet / prior mount)
-    if (window.__CRANK_LOADER__ && document.getElementById('vp-shell')) {
+
+    // Legacy: explicit src still supported (companion-hosted loader)
+    if (props.src) {
+      if (document.querySelector('script[data-crank-loader="1"]')) {
+        return undefined;
+      }
+      const script = document.createElement('script');
+      script.src = props.src.includes('?') ? props.src : `${props.src}?t=${Date.now()}`;
+      script.async = true;
+      script.dataset.crankLoader = '1';
+      document.documentElement.appendChild(script);
       return undefined;
     }
 
-    const script = document.createElement('script');
-    script.src = src.includes('?') ? src : `${src}?t=${Date.now()}`;
-    script.async = true;
-    script.dataset.crankLoader = '1';
-    document.documentElement.appendChild(script);
+    bootCrankPanel({
+      companionUrl: resolveCrankCompanionUrl(props)
+    });
     return undefined;
-  }, [src]);
+  }, [props.companionUrl, props.url, props.src, props.force]);
 
   return null;
 }

package/skill/SKILL.md

@@ -30,7 +30,7 @@ When the user asks to start Crank, **run**:
 npx @ahmednawaz/crank@latest
 ```
 
-(one-shot: setup + inject + start). Never put `CRANK_TEAM_TOKEN` in the command. On Replit, Secrets only; do not edit `.replit`.
+(one-shot: setup + inject + start). Then **restart the Vite / dev server** so `<Crank />` mounts the **bundled** panel (same-origin — not a script from :3344). Never put `CRANK_TEAM_TOKEN` in the command. On Replit, Secrets only; do not edit `.replit`.
 
 After companion is up: **`crank_get_environment`**. Apply copy via MCP queue only.
 

package/vite.js

@@ -2,30 +2,55 @@
 
 /**
  * Vite / Rolldown-vite / Vitest-compatible plugin.
- * Injects Crank into the app during `vite` / `npm run dev` — no React component needed.
  *
- *   // vite.config.ts
- *   import { crank } from '@ahmednawaz/crank/vite'
- *   // or: import { crank } from 'crank/vite'
- *   export default { plugins: [crank()] }
+ * - Proxies `/@crank/*` → companion (same-origin; required on Replit iframe previews)
+ * - Optionally injects the loader into index.html (skip when using React `<Crank />`)
  *
- * Prefer this for Vite apps (React, Vue, Svelte, vanilla). The panel is a script overlay,
- * not a component in your React tree.
+ *   import { crank } from '@ahmednawaz/crank/vite'
+ *   export default { plugins: [crank()] }                 // Vite-only apps
+ *   export default { plugins: [crank({ inject: false })] } // React + <Crank />
  */
 
-const { resolveCompanionLoaderUrl } = require('./lib/loader-url');
+const { resolveCompanionLoaderUrl, resolveCompanionProxyTarget } = require('./lib/loader-url');
+
+const PROXY_PREFIX = '/@crank';
 
 function crank(options = {}) {
-  const src = resolveCompanionLoaderUrl(options);
+  const inject = options.inject !== false;
+  const target = resolveCompanionProxyTarget(options);
+  const src =
+    options.src ||
+    `${PROXY_PREFIX}/dev-loader.js`;
 
   return {
     name: 'crank-dev-loader',
     apply: 'serve',
+    config() {
+      return {
+        server: {
+          proxy: {
+            [PROXY_PREFIX]: {
+              target,
+              changeOrigin: true,
+              ws: true,
+              rewrite: (p) => p.replace(new RegExp(`^${PROXY_PREFIX}`), '') || '/'
+            }
+          }
+        }
+      };
+    },
     transformIndexHtml(html) {
-      if (String(html).includes('/dev-loader.js') || String(html).includes('crank/dev-loader')) {
+      if (!inject) {
+        return html;
+      }
+      if (
+        String(html).includes('/dev-loader.js') ||
+        String(html).includes('crank/dev-loader') ||
+        String(html).includes('/@crank/')
+      ) {
         return html;
       }
-      const tag = `<script src="${src}" defer></script>`;
+      const tag = `<script src="${src}?t=${Date.now()}" defer></script>`;
       if (html.includes('</head>')) {
         return html.replace('</head>', `  ${tag}\n</head>`);
       }
@@ -37,5 +62,6 @@ function crank(options = {}) {
 module.exports = {
   crank,
   crankDevLoader: crank,
-  resolveCompanionLoaderUrl
+  resolveCompanionLoaderUrl,
+  PROXY_PREFIX
 };

package/panel/demo.html

@@ -1,62 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Crank panel demo</title>
-  <style>
-    :root {
-      --ink: #1a1a1a;
-      --muted: #555;
-      --accent: #0f766e;
-      --bg: #f4f6f5;
-    }
-    body {
-      margin: 0;
-      font: 16px/1.5 ui-sans-serif, system-ui, sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(circle at 10% 0%, #d9eee9 0%, transparent 45%),
-        radial-gradient(circle at 90% 10%, #e8eef2 0%, transparent 40%),
-        var(--bg);
-      min-height: 100vh;
-    }
-    main {
-      max-width: 42rem;
-      margin: 0 auto;
-      padding: 3rem 1.25rem;
-    }
-    .card {
-      background: #fff;
-      border: 1px solid #d8d8d8;
-      border-radius: 12px;
-      padding: 1.5rem;
-    }
-    h1 { margin: 0 0 0.5rem; font-size: 1.75rem; }
-    p { margin: 0 0 1rem; color: var(--muted); }
-    button {
-      border: 0;
-      background: var(--accent);
-      color: #fff;
-      padding: 0.55rem 0.95rem;
-      border-radius: 8px;
-      font-weight: 600;
-      cursor: pointer;
-    }
-    .hint { font-size: 0.9rem; margin-top: 1.25rem; }
-    code { background: #eee; padding: 0.1em 0.35em; border-radius: 4px; }
-  </style>
-</head>
-<body>
-  <main>
-    <div id="hero" class="card">
-      <h1>Utilize our robust platform today</h1>
-      <p>Seamless fleet insights for every operator.</p>
-      <button type="button">Get started</button>
-    </div>
-    <p class="hint">
-      Start the companion (<code>npm run companion</code>), load the Crank bookmarklet,
-      click <strong>Select</strong>, then click this card’s outer <code>div</code>.
-    </p>
-  </main>
-</body>
-</html>