@ahmednawaz/crank 0.1.7 → 0.1.9

package/next.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/**
+ * Optional Next.js adapter — injects Crank via next/script (App Router or Pages).
+ *
+ * Prefer Vite plugin for Vite apps. Use this for Next.js when there is no vite.config.
+ *
+ *   // app/layout.tsx (or a client layout section)
+ *   import { CrankScript } from '@ahmednawaz/crank/next'
+ *   <CrankScript />
+ *
+ * peerDependencies: react, next
+ */
+
+const { resolveCompanionLoaderUrl } = require('./lib/loader-url');
+const { CrankLoader } = require('./react');
+
+function getReact() {
+  try {
+    return require('react');
+  } catch {
+    throw new Error(
+      '@ahmednawaz/crank/next requires react. Prefer @ahmednawaz/crank/vite for Vite apps.'
+    );
+  }
+}
+
+function getNextScript() {
+  try {
+    return require('next/script');
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * @param {{ src?: string, companionUrl?: string, strategy?: string }} props
+ */
+function CrankScript(props) {
+  const React = getReact();
+  const NextScript = getNextScript();
+  const src = resolveCompanionLoaderUrl(props || {});
+  const strategy = (props && props.strategy) || 'afterInteractive';
+
+  if (NextScript) {
+    const Script = NextScript.default || NextScript;
+    return React.createElement(Script, {
+      src,
+      strategy,
+      'data-crank-loader': '1'
+    });
+  }
+
+  // Fallback when next/script is unavailable (tests / non-Next bundlers).
+  return React.createElement(CrankLoader, props || {});
+}
+
+module.exports = {
+  CrankScript,
+  CrankLoader,
+  Crank: CrankScript,
+  resolveCompanionLoaderUrl
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahmednawaz/crank",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Internal Motive UX copy iteration: select UI text → Glean variants → MCP apply. Cursor, Replit, Claude.",
   "repository": {
     "type": "git",
@@ -14,8 +14,21 @@
   "exports": {
     ".": "./vite.js",
     "./vite": "./vite.js",
+    "./react": "./react.js",
+    "./next": "./next.js",
+    "./webpack": "./webpack.js",
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "html-webpack-plugin": ">=5",
+    "next": ">=13",
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "next": { "optional": true },
+    "html-webpack-plugin": { "optional": true }
+  },
   "workspaces": [
     "companion",
     "mcp-server"
@@ -37,8 +50,11 @@
     "node": ">=18"
   },
   "dependencies": {
+    "@babel/parser": "^7.28.0",
+    "@babel/traverse": "^7.28.0",
     "@cursor/sdk": "^1.0.23",
     "@modelcontextprotocol/sdk": "^1.12.1",
+    "cheerio": "^1.0.0",
     "cors": "^2.8.5",
     "express": "^4.21.2",
     "ws": "^8.18.0",
@@ -54,6 +70,9 @@
     "skill",
     "panel",
     "vite.js",
+    "react.js",
+    "next.js",
+    "webpack.js",
     ".env.example",
     "AGENTS.md",
     "REPLIT.md",

package/react.js

@@ -0,0 +1,69 @@
+'use strict';
+
+/**
+ * Optional React adapter for non-Vite React apps (CRA, custom webpack, etc.).
+ *
+ * This is NOT a Retune-style UI component. It only injects the same /dev-loader.js
+ * script the Vite plugin uses. Prefer `@ahmednawaz/crank/vite` when the app uses Vite.
+ *
+ *   import { CrankLoader } from '@ahmednawaz/crank/react'
+ *   // in App / root layout (client-only):
+ *   <CrankLoader />
+ *
+ * peerDependency: react >= 17
+ */
+
+const { resolveCompanionLoaderUrl } = require('./lib/loader-url');
+
+function getReact() {
+  try {
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    return require('react');
+  } catch {
+    throw new Error(
+      '@ahmednawaz/crank/react requires react as a peer dependency. Prefer the Vite plugin when possible: import { crank } from "@ahmednawaz/crank/vite".'
+    );
+  }
+}
+
+/**
+ * Injects Crank's companion loader once on the client. Renders null.
+ * @param {{ src?: string, companionUrl?: string, port?: string|number, host?: string }} props
+ */
+function CrankLoader(props) {
+  const React = getReact();
+  const src = resolveCompanionLoaderUrl(props || {});
+
+  React.useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+    if (window.__CRANK_LOADER__) {
+      return undefined;
+    }
+    window.__CRANK_LOADER__ = true;
+
+    const existing = document.querySelector('script[data-crank-loader="1"]');
+    if (existing) {
+      return undefined;
+    }
+
+    const script = document.createElement('script');
+    script.src = src;
+    script.defer = true;
+    script.dataset.crankLoader = '1';
+    document.documentElement.appendChild(script);
+    return undefined;
+  }, [src]);
+
+  return null;
+}
+
+/** Alias — still only a script injector, not an in-tree panel UI. */
+const Crank = CrankLoader;
+
+module.exports = {
+  CrankLoader,
+  Crank,
+  resolveCompanionLoaderUrl
+};

package/skill/SKILL.md

@@ -33,6 +33,7 @@ When the user asks to start Crank:
    ```
    `start` skips setup/init — companion on **3344** (+ HTTP MCP on **3345** on Replit). Add `CRANK_TEAM_TOKEN` in Secrets first.
 4. Call **`crank_get_environment`** after the companion is up.
+5. **Panel injection:** Vite apps use the Vite plugin (graceful `.crank/vite-plugin.cjs`) — not a React component. See **AGENTS.md** / `.crank/injection.md`. Keep companion running in a Workflow.
 
 ## When the user says "start Crank" or pastes `npx crank`
 

package/vite.js

@@ -1,53 +1,19 @@
 'use strict';
 
-const fs = require('fs');
-const path = require('path');
-const { env } = require('./lib/env');
-const { readRuntimeManifest } = require('./lib/urls');
-
 /**
  * Vite / Rolldown-vite / Vitest-compatible plugin.
- * Injects Crank into the app during `vite` / `npm run dev` — no bookmarklet needed.
+ * Injects Crank into the app during `vite` / `npm run dev` — no React component needed.
  *
  *   // vite.config.ts
- *   import { crank } from 'crank/vite'
+ *   import { crank } from '@ahmednawaz/crank/vite'
+ *   // or: import { crank } from 'crank/vite'
  *   export default { plugins: [crank()] }
+ *
+ * Prefer this for Vite apps (React, Vue, Svelte, vanilla). The panel is a script overlay,
+ * not a component in your React tree.
  */
 
-function findProjectRoot(startDir) {
-  let dir = path.resolve(startDir || process.cwd());
-  for (let i = 0; i < 8; i++) {
-    if (fs.existsSync(path.join(dir, '.crank', 'runtime.json'))) {
-      return dir;
-    }
-    if (fs.existsSync(path.join(dir, 'package.json'))) {
-      return dir;
-    }
-    const parent = path.dirname(dir);
-    if (parent === dir) break;
-    dir = parent;
-  }
-  return path.resolve(startDir || process.cwd());
-}
-
-function resolveCompanionLoaderUrl(options = {}) {
-  const projectRoot = options.projectRoot || findProjectRoot(process.cwd());
-  const runtime = readRuntimeManifest(projectRoot);
-  if (runtime?.companion?.devLoader) {
-    return runtime.companion.devLoader;
-  }
-
-  const publicUrl = (
-    options.companionUrl ||
-    env('PUBLIC_URL', '') ||
-    ''
-  ).replace(/\/$/, '');
-
-  const port = String(options.port || env('PORT', '3344')).replace(/[^0-9]/g, '') || '3344';
-  const host = options.host || env('HOST', '127.0.0.1');
-  const base = publicUrl || `http://${host === '0.0.0.0' ? '127.0.0.1' : host}:${port}`;
-  return `${base}/dev-loader.js`;
-}
+const { resolveCompanionLoaderUrl } = require('./lib/loader-url');
 
 function crank(options = {}) {
   const src = resolveCompanionLoaderUrl(options);

package/webpack.js

@@ -0,0 +1,58 @@
+'use strict';
+
+/**
+ * Optional webpack adapter — injects /dev-loader.js via html-webpack-plugin.
+ *
+ *   // webpack.config.js
+ *   const { crankWebpackPlugin } = require('@ahmednawaz/crank/webpack')
+ *   plugins: [new HtmlWebpackPlugin(...), crankWebpackPlugin()]
+ *
+ * Prefer @ahmednawaz/crank/vite when the project uses Vite.
+ */
+
+const { resolveCompanionLoaderUrl } = require('./lib/loader-url');
+
+function crankWebpackPlugin(options = {}) {
+  const src = resolveCompanionLoaderUrl(options);
+
+  return {
+    apply(compiler) {
+      compiler.hooks.compilation.tap('CrankWebpackPlugin', (compilation) => {
+        let hooks;
+        try {
+          // eslint-disable-next-line import/no-extraneous-dependencies
+          const HtmlWebpackPlugin = require('html-webpack-plugin');
+          hooks = HtmlWebpackPlugin.getHooks(compilation);
+        } catch {
+          compilation.errors.push(
+            new Error(
+              '@ahmednawaz/crank/webpack requires html-webpack-plugin. Prefer the Vite plugin when possible.'
+            )
+          );
+          return;
+        }
+
+        hooks.alterAssetTagGroups.tap('CrankWebpackPlugin', (data) => {
+          const already = (data.headTags || []).some(
+            (t) =>
+              t.tagName === 'script' &&
+              String(t.attributes?.src || '').includes('dev-loader.js')
+          );
+          if (!already) {
+            data.headTags.push({
+              tagName: 'script',
+              voidTag: false,
+              attributes: { src, defer: true, 'data-crank-loader': '1' }
+            });
+          }
+          return data;
+        });
+      });
+    }
+  };
+}
+
+module.exports = {
+  crankWebpackPlugin,
+  resolveCompanionLoaderUrl
+};

package/companion/vizpatch-bridge.js

@@ -1,49 +0,0 @@
-'use strict';
-
-/**
- * Resolve sibling Vizpatch install so Crank can reuse text-writer, UI CSS, etc.
- */
-const fs = require('fs');
-const path = require('path');
-
-function resolveVizpatchRoot() {
-  if (process.env.VIZPATCH_ROOT) {
-    return path.resolve(process.env.VIZPATCH_ROOT);
-  }
-  const candidates = [
-    path.resolve(__dirname, '..', '..', 'vizpatch'),
-    path.resolve(__dirname, '..', '..', 'Downloads', 'vizpatch'),
-    path.resolve(process.cwd(), '..', 'vizpatch'),
-    '/Users/ahmed.nawaz/Downloads/vizpatch'
-  ];
-  for (const candidate of candidates) {
-    if (fs.existsSync(path.join(candidate, 'companion', 'text-writer.js'))) {
-      return candidate;
-    }
-  }
-  return null;
-}
-
-function requireVizpatch(relPath) {
-  const root = resolveVizpatchRoot();
-  if (!root) {
-    throw new Error(
-      'Vizpatch not found. Set VIZPATCH_ROOT to the vizpatch checkout path.'
-    );
-  }
-  return require(path.join(root, relPath));
-}
-
-function vizpatchAsset(...parts) {
-  const root = resolveVizpatchRoot();
-  if (!root) {
-    return null;
-  }
-  return path.join(root, ...parts);
-}
-
-module.exports = {
-  resolveVizpatchRoot,
-  requireVizpatch,
-  vizpatchAsset
-};