wepost 1.0.0

package/dist/wepost.umd.js

@@ -0,0 +1,299 @@
+(function(r,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(r=typeof globalThis<"u"?globalThis:r||self,d(r.WePost={}))})(this,function(r){"use strict";var S=Object.defineProperty;var T=(r,d,m)=>d in r?S(r,d,{enumerable:!0,configurable:!0,writable:!0,value:m}):r[d]=m;var g=(r,d,m)=>(T(r,typeof d!="symbol"?d+"":d,m),m);async function d(o){let t=o.url,e={...o.headers};o.proxyUrl&&(e["x-wepost-target"]=t,t=o.proxyUrl);const a={method:o.method,headers:e};!["GET","HEAD"].includes(o.method)&&o.body&&(a.body=JSON.stringify(o.body),e["Content-Type"]||(e["Content-Type"]="application/json"));const i=await fetch(t,a),l=await i.text();return{status:i.status,statusText:i.statusText,data:l,headers:Object.fromEntries(i.headers.entries())}}const m="wepost_history";function B(o){const t=E();t.length>0&&t[0].url===o.url&&t[0].method===o.method?t[0]=o:t.unshift(o),t.length>10&&t.pop(),localStorage.setItem(m,JSON.stringify(t))}function E(){try{const o=localStorage.getItem(m);return o?JSON.parse(o):[]}catch{return[]}}function L(){return`
+    :host {
+      /* Default: Dark Theme */
+      --bg: #1e1e1e;
+      --bg-light: #2d2d2d;
+      --border: #3c3c3c;
+      --text: #d4d4d4;
+      --text-muted: #858585;
+      --accent: #007acc;
+      --accent-hover: #005f9e;
+      --success: #89d185;
+      --error: #f48771;
+      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    }
+
+    /* Light Theme Overrides */
+    .light-theme {
+      --bg: #ffffff;
+      --bg-light: #f3f3f3;
+      --border: #e0e0e0;
+      --text: #333333;
+      --text-muted: #666666;
+      --accent: #007acc;
+      --accent-hover: #005f9e;
+      --success: #2ea44f;
+      --error: #cf222e;
+    }
+    
+    * { box-sizing: border-box; }
+    
+    /* Floating Button (FAB) */
+    .wp-fab {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 50px;
+      height: 50px;
+      background: var(--accent);
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--font);
+      font-weight: bold;
+      cursor: move;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      z-index: 999999;
+      user-select: none;
+      touch-action: none;
+    }
+    .wp-fab:hover {
+      background: var(--accent-hover);
+    }
+
+    /* Panel UI */
+    .wp-panel {
+      position: fixed;
+      bottom: 80px;
+      right: 20px;
+      width: 450px;
+      max-width: calc(100vw - 40px);
+      background: var(--bg);
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+      font-family: var(--font);
+      font-size: 13px;
+      z-index: 999998;
+      display: flex;
+      flex-direction: column;
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(10px);
+      transition: opacity 0.2s ease, transform 0.2s ease;
+      max-height: calc(100vh - 100px);
+      touch-action: none;
+    }
+    
+    .wp-panel.open {
+      opacity: 1;
+      pointer-events: all;
+      transform: translateY(0);
+    }
+
+    .wp-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 15px;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-light);
+      border-radius: 8px 8px 0 0;
+      cursor: move;
+      user-select: none;
+    }
+    .wp-header h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      pointer-events: none;
+    }
+    
+    .wp-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    /* Theme Toggle Button */
+    .wp-theme-toggle {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 14px;
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+    .wp-theme-toggle:hover {
+      color: var(--text);
+      background: var(--border);
+    }
+    
+    .wp-header #wp-close {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 20px;
+      cursor: pointer;
+    }
+    .wp-header #wp-close:hover { color: var(--text); }
+
+    /* Layout Request Bar */
+    .wp-row {
+      display: flex;
+      gap: 8px;
+      padding: 15px;
+      border-bottom: 1px solid var(--border);
+    }
+    
+    input, select, textarea {
+      background: var(--bg-light);
+      color: var(--text);
+      border: 1px solid var(--border);
+      padding: 8px;
+      border-radius: 4px;
+      font-family: monospace;
+      outline: none;
+      font-size: 14px;
+    }
+    input:focus, select:focus, textarea:focus {
+      border-color: var(--accent);
+    }
+
+    #wp-method { width: 90px; }
+    #wp-url { flex: 1; min-width: 0; }
+    
+    .btn-primary {
+      background: var(--accent);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 600;
+    }
+    .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
+    .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+
+    .wp-section {
+      padding: 10px 15px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    .wp-section label {
+      font-size: 11px;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      font-weight: bold;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    /* Copy Button Style */
+    .btn-copy {
+      background: none;
+      border: none;
+      color: var(--accent);
+      font-size: 11px;
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 3px;
+      text-transform: none;
+      font-weight: 600;
+    }
+    .btn-copy:hover {
+      background: var(--bg-light);
+      text-decoration: underline;
+    }
+    
+    textarea {
+      height: 65px;
+      resize: vertical;
+      font-size: 12px;
+    }
+
+    .wp-response-section {
+      flex: 1;
+      overflow: hidden;
+      border-bottom: none;
+    }
+    #wp-response {
+      margin: 0;
+      background: var(--bg-light);
+      padding: 10px;
+      border-radius: 4px;
+      overflow-y: auto;
+      max-height: 200px;
+      font-family: monospace;
+      font-size: 12px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    .status-ok { color: var(--success); }
+    .status-err { color: var(--error); }
+
+    /* RESPONSIVE / MOBILE MODE (Screen < 500px) */
+    @media (max-width: 500px) {
+      .wp-panel {
+        width: 100% !important;
+        max-width: 100% !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        top: 0 !important;
+        max-height: 100vh !important;
+        border-radius: 0;
+        transform: translateY(100%);
+      }
+      .wp-panel.open {
+        transform: translateY(0);
+      }
+      .wp-header {
+        border-radius: 0;
+        cursor: default;
+      }
+      .wp-row {
+        flex-direction: column;
+        gap: 10px;
+      }
+      #wp-method { width: 100%; }
+      #wp-url { width: 100%; }
+      .btn-primary { width: 100%; }
+      #wp-response {
+        max-height: calc(100vh - 380px);
+      }
+    }
+  `}class I{constructor(t){g(this,"container");g(this,"shadow");g(this,"config");g(this,"isOpen",!1);g(this,"isLightMode",!1);this.config=t,this.container=document.createElement("div"),this.container.id="wepost-container",this.shadow=this.container.attachShadow({mode:"closed"}),this.isLightMode=localStorage.getItem("wepost_theme")==="light",this.render(),this.applyTheme()}mount(){document.getElementById("wepost-container")||(document.body.appendChild(this.container),this.attachEvents(),this.loadLastRequest())}unmount(){this.container.remove()}render(){this.shadow.innerHTML=`
+      <style>${L()}</style>
+      <div class="wp-fab" id="wp-btn">WP</div>
+      <div class="wp-panel" id="wp-panel">
+        <div class="wp-header" id="wp-header">
+          <h3>WEPOST DevTools</h3>
+          <div class="wp-actions">
+            <button id="wp-theme-btn" class="wp-theme-toggle">☀️ Light</button>
+            <button id="wp-close">&times;</button>
+          </div>
+        </div>
+        <div class="wp-row">
+          <select id="wp-method">
+            <option>GET</option><option>POST</option><option>PUT</option>
+            <option>PATCH</option><option>DELETE</option>
+          </select>
+          <input type="text" id="wp-url" placeholder="https://api.example.com/v1/data" value="${this.config.defaultUrl||""}" />
+          <button id="wp-send" class="btn-primary">Send</button>
+        </div>
+        <div class="wp-section">
+          <label>Headers (JSON)</label>
+          <textarea id="wp-headers" placeholder='{"Authorization": "Bearer token", "Content-Type": "application/json"}'></textarea>
+        </div>
+        <div class="wp-section">
+          <label>Body (JSON)</label>
+          <textarea id="wp-body" placeholder='{"key": "value"}'></textarea>
+        </div>
+        <div class="wp-section wp-response-section">
+          <label>
+            <span>Response <span id="wp-status"></span></span>
+            <button id="wp-copy-btn" class="btn-copy">📋 Copy</button>
+          </label>
+          <pre id="wp-response">Awaiting request...</pre>
+        </div>
+      </div>
+    `}attachEvents(){const t=this.shadow.getElementById("wp-btn"),e=this.shadow.getElementById("wp-close"),a=this.shadow.getElementById("wp-theme-btn"),i=this.shadow.getElementById("wp-copy-btn"),l=this.shadow.getElementById("wp-send"),s=this.shadow.getElementById("wp-panel"),u=this.shadow.getElementById("wp-header");this.makeElementDraggable(t,t,!0),this.makeElementDraggable(s,u,!1),t.addEventListener("click",()=>{if(t.getAttribute("data-dragged")==="true"){t.removeAttribute("data-dragged");return}this.isOpen=!this.isOpen,this.isOpen?(s.classList.add("open"),this.syncPanelPosition()):s.classList.remove("open")}),a.addEventListener("click",c=>{c.stopPropagation(),this.isLightMode=!this.isLightMode,localStorage.setItem("wepost_theme",this.isLightMode?"light":"dark"),this.applyTheme()}),i.addEventListener("click",()=>{const h=this.shadow.getElementById("wp-response").textContent||"";h&&h!=="Awaiting request..."&&h!=="Loading..."&&navigator.clipboard.writeText(h).then(()=>{i.textContent="✅ Copied!",setTimeout(()=>{i.textContent="📋 Copy"},2e3)}).catch(p=>{console.error("Failed to copy text: ",p)})}),e.addEventListener("click",c=>{c.stopPropagation(),this.isOpen=!1,s.classList.remove("open")}),l.addEventListener("click",()=>this.handleRequest())}applyTheme(){const t=this.shadow.getElementById("wp-panel"),e=this.shadow.getElementById("wp-theme-btn");!t||!e||(this.isLightMode?(t.classList.add("light-theme"),e.textContent="🌙 Dark"):(t.classList.remove("light-theme"),e.textContent="☀️ Light"))}syncPanelPosition(){if(window.innerWidth<=500)return;const t=this.shadow.getElementById("wp-btn"),e=this.shadow.getElementById("wp-panel"),a=t.getBoundingClientRect();e.style.top="auto",e.style.left="auto",e.style.right=`${window.innerWidth-a.right}px`,e.style.bottom=`${window.innerHeight-a.top+10}px`}makeElementDraggable(t,e,a){let i=0,l=0,s=!1,u=0,c=0;const h=n=>{if(!a&&window.innerWidth<=500)return;const f=n.target.tagName.toLowerCase();if(n.target.id==="wp-close"||n.target.id==="wp-theme-btn"||n.target.id==="wp-copy-btn"||f==="input"||f==="select"||f==="textarea")return;s=!1;const x="touches"in n?n.touches[0].clientX:n.clientX,b="touches"in n?n.touches[0].clientY:n.clientY;u=x,c=b;const y=t.getBoundingClientRect();i=x-y.left,l=b-y.top,document.addEventListener("mousemove",p,{passive:!1}),document.addEventListener("mouseup",w),document.addEventListener("touchmove",p,{passive:!1}),document.addEventListener("touchend",w)},p=n=>{const f="touches"in n?n.touches[0].clientX:n.clientX,x="touches"in n?n.touches[0].clientY:n.clientY;if(!s&&(Math.abs(f-u)>5||Math.abs(x-c)>5)&&(s=!0,a&&t.setAttribute("data-dragged","true")),s){n.cancelable&&n.preventDefault();let b=f-i,y=x-l;t.style.position="fixed",t.style.left=`${b}px`,t.style.top=`${y}px`,t.style.right="auto",t.style.bottom="auto",a&&this.isOpen&&this.syncPanelPosition()}},w=()=>{document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",w),document.removeEventListener("touchmove",p),document.removeEventListener("touchend",w),s&&setTimeout(()=>{s||t.removeAttribute("data-dragged")},50)};e.addEventListener("mousedown",h),e.addEventListener("touchstart",h,{passive:!0})}async handleRequest(){const t=this.shadow.getElementById("wp-url").value,e=this.shadow.getElementById("wp-method").value,a=this.shadow.getElementById("wp-headers").value,i=this.shadow.getElementById("wp-body").value,l=this.shadow.getElementById("wp-status"),s=this.shadow.getElementById("wp-response"),u=this.shadow.getElementById("wp-send");try{u.disabled=!0,u.textContent="Sending...",s.textContent="Loading...",l.textContent="",l.className="";let c={},h=null;a&&(c=JSON.parse(a)),i&&(h=JSON.parse(i)),B({url:t,method:e,headers:a,body:i});const p=await d({url:t,method:e,headers:c,body:h,proxyUrl:this.config.proxyUrl});l.textContent=`${p.status} ${p.statusText}`,l.className=p.status>=200&&p.status<300?"status-ok":"status-err";try{const w=JSON.parse(p.data);s.textContent=JSON.stringify(w,null,2)}catch{s.textContent=p.data}}catch(c){l.textContent="ERROR",l.className="status-err",s.textContent=c.message}finally{u.disabled=!1,u.textContent="Send"}}loadLastRequest(){const t=E();if(t.length>0){const e=t[0];this.shadow.getElementById("wp-url").value=e.url,this.shadow.getElementById("wp-method").value=e.method,this.shadow.getElementById("wp-headers").value=e.headers||"",this.shadow.getElementById("wp-body").value=e.body||""}}}class v{constructor(t={}){g(this,"ui");this.ui=new I(t)}mount(){this.ui.mount()}unmount(){this.ui.unmount()}}if(typeof window<"u"){const o=document.currentScript||document.querySelector('script[src*="wepost"]');if(o&&o.getAttribute("data-auto-init")==="true"){const t=o.getAttribute("data-proxy")||void 0,e=new v({proxyUrl:t});e.mount(),window.WePostInstance=e}}r.WePost=v,r.default=v,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "wepost",
+  "version": "1.0.0",
+  "description": "Lightweight embedded API DevTools widget",
+  "main": "./dist/wepost.umd.js",
+  "module": "./dist/wepost.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/wepost.es.js",
+      "require": "./dist/wepost.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "proxy",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "proxy": "node proxy/server.js"
+  },
+  "keywords": ["api", "devtools", "postman", "embeddable", "fetch"],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-dts": "^3.6.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.2"
+  }
+}

package/proxy/server.js

@@ -0,0 +1,38 @@
+const express = require('express');
+const cors = require('cors');
+const app = express();
+const PORT = process.env.PORT || 4000;
+
+// Enable CORS for the widget to connect
+app.use(cors());
+app.use(express.json());
+
+app.all('/proxy', async (req, res) => {
+  const targetUrl = req.headers['x-wepost-target'];
+  if (!targetUrl) {
+    return res.status(400).send('Missing x-wepost-target header');
+  }
+
+  // Remove proxy specific headers before forwarding
+  const headers = { ...req.headers };
+  delete headers['x-wepost-target'];
+  delete headers['host'];
+
+  try {
+    const fetch = (await import('node-fetch')).default;
+    const response = await fetch(targetUrl, {
+      method: req.method,
+      headers: headers,
+      body: ['GET', 'HEAD'].includes(req.method) ? undefined : JSON.stringify(req.body)
+    });
+
+    const data = await response.text();
+    res.status(response.status).send(data);
+  } catch (error) {
+    res.status(500).send(error.message);
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`[WEPOST PROXY] Listening on http://localhost:${PORT}/proxy`);
+});