@moises.ai/extension 0.0.20 → 1.0.1

package/dist/index.js

@@ -1,389 +1,72 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as q, useEffect as h } from "react";
-import { Box as p } from "@moises.ai/design-system";
-export * from "@moises.ai/design-system";
-class y {
-  constructor({ target: e }) {
-    this.target = e, this.handlers = /* @__PURE__ */ new Map(), this.pendingRequests = /* @__PURE__ */ new Map(), this.requestId = 0, this.connected = !1, this.boundHandler = this.handleMessage.bind(this), this.connect();
-  }
-  connect() {
-    window.addEventListener("message", this.boundHandler), this.connected = !0;
-  }
-  disconnect() {
-    window.removeEventListener("message", this.boundHandler);
-    for (const [e, { reject: n }] of this.pendingRequests.entries())
-      n(new Error("Connection closed")), this.pendingRequests.delete(e);
-    this.connected = !1;
-  }
-  handleMessage(e) {
-    const { data: n, source: o, origin: i } = e;
-    if (o === this.target) {
-      if (n.type === "response") {
-        const { requestId: r, result: l, error: t } = n, c = this.pendingRequests.get(r);
-        c && (t ? c.reject(new Error(t)) : c.resolve(l), this.pendingRequests.delete(r));
-        return;
-      }
-      if (n.type === "request") {
-        const { method: r, params: l, requestId: t } = n, c = this.handlers.get(r);
-        if (!c) {
-          this.sendResponse(o, t, null, `No handler for method: ${r}`);
-          return;
-        }
-        Promise.resolve().then(() => c(l)).then((a) => this.sendResponse(o, t, a)).catch((a) => this.sendResponse(o, t, null, a.message));
-      }
-    }
-  }
-  sendResponse(e, n, o, i = null) {
-    e.postMessage({
-      type: "response",
-      requestId: n,
-      result: o,
-      error: i
-    }, "*");
-  }
-  on(e, n) {
-    this.handlers.set(e, n);
-  }
-  off(e) {
-    this.handlers.delete(e);
-  }
-  once(e, n) {
-    const o = async (i) => (this.off(e), n(i));
-    this.on(e, o);
-  }
-  async call(e, n) {
-    const o = this.requestId++;
-    return new Promise((i, r) => {
-      this.pendingRequests.set(o, { resolve: i, reject: r }), this.target.postMessage({
-        type: "request",
-        method: e,
-        params: n,
-        requestId: o
-      }, "*");
-    });
-  }
-}
-class P {
-  constructor(e) {
-    this.rpc = new y(e), this.proxy = this.createProxy();
-  }
-  createProxy() {
-    return new Proxy(this.rpc, {
-      get: (e, n) => n in e ? e[n] : new Proxy({}, {
-        get: (o, i) => async (r) => {
-          const l = `${n}.${i}`;
-          return e.call(l, r);
-        }
-      })
-    });
-  }
-  // Proxy the on method to maintain the same interface
-  // on(method, handler) {
-  //   return this.rpc.on(method, handler);
-  // }
-}
-const v = {
-  /**
-   * Exports the audio from the current session
-   * @async
-   * @function export
-   * @memberof session
-   * @returns {Promise<AudioData>} Promise that resolves with the exported audio data
-   * @example const audioData = await session.export()
-   */
-  export: async function() {
-    return console.log("session.export");
-  },
-  /**
-   * Gets the list of tracks from the session
-   * @async
-   * @function tracks
-   * @memberof session
-   * @returns {Promise<Array>} Promise that resolves with an array of tracks
-   * @example
-   * const tracks = await session.tracks()
-   * console.log(tracks.length) // number of tracks
-   */
-  tracks: async function() {
-    return console.log("session.tracks");
-  },
-  /**
-   * Starts session playback
-   * @function play
-   * @memberof session
-   * @returns {void} Does not return a value
-   * @example session.play()
-   */
-  play: function() {
-    return console.log("session.play");
-  },
-  /**
-   * Pauses session playback
-   * @function pause
-   * @memberof session
-   * @returns {void} Does not return a value
-   * @example session.pause()
-   */
-  pause: function() {
-    return console.log("session.pause");
-  },
-  /**
-   * Toggles between play and pause
-   * @function togglePlayback
-   * @memberof session
-   * @returns {void} Does not return a value
-   * @example session.togglePlayback()
-   */
-  togglePlayback: function() {
-    return console.log("session.togglePlayback");
-  },
-  /**
-   * Clears the current selection in the session
-   * @function clearSelection
-   * @memberof session
-   * @returns {void} Does not return a value
-   * @example session.clearSelection()
-   */
-  clearSelection: function() {
-    return console.log("session.clearSelection");
-  },
-  /**
-   * Sets a selection in the session
-   * @function setSelection
-   * @memberof session
-   * @param {Object} params - Selection parameters
-   * @param {string} params.trackId - ID of the track to be selected
-   * @param {number} params.start - Start position of the selection
-   * @param {number} params.end - End position of the selection
-   * @returns {void} Does not return a value
-   * @example
-   * // Selects an interval in a specific track
-   * session.setSelection({ 
-   *   trackId: "track-123", 
-   *   start: 0, 
-   *   end: 30 
-   * })
-   * 
-   * // Selects an interval without specifying a track
-   * session.setSelection({ start: 10, end: 20 })
-   */
-  setSelection: function(s) {
-    return console.log("session.setSelection", s);
-  }
-}, R = {
-  /**
-   * Sets the extension size in the interface
-   * @function setPluginSize
-   * @memberof ui
-   * @param {Object} params - Size parameters
-   * @param {number} params.width - Width in pixels
-   * @param {number} params.height - Height in pixels
-   * @returns {void} Does not return a value
-   * @example ui.setPluginSize({ width: 800, height: 600 })
-   */
-  setPluginSize: function(s) {
-    return console.log("ui.setPluginSize", s);
-  },
-  /**
-   * Displays a progress bar or loading indicator
-   * @async
-   * @function progress
-   * @memberof ui
-   * @param {Object} options - Progress configuration options
-   * @param {string} options.message - Progress message
-   * @param {number} options.value - Progress value (0-100)
-   * @returns {Promise<void>} Promise that resolves when the operation is complete
-   * @example await ui.progress({ message: "Loading...", value: 50 })
-   */
-  progress: async function(s) {
-    return console.log("ui.progress", s);
-  },
-  /**
-   * Displays an alert to the user
-   * @async
-   * @function alert
-   * @memberof ui
-   * @param {Object} options - Alert configuration options
-   * @param {string} options.title - Alert title
-   * @param {string} options.message - Alert message
-   * @returns {Promise<void>} Promise that resolves when the alert is closed
-   * @example await ui.alert({ title: "Notice", message: "Operation completed!" })
-   */
-  alert: async function(s) {
-    return console.log("ui.alert", s);
-  },
-  /**
-   * Displays a confirmation dialog
-   * @async
-   * @function confirm
-   * @memberof ui
-   * @param {Object} options - Confirmation configuration options
-   * @param {string} options.title - Confirmation title
-   * @param {string} options.message - Confirmation message
-   * @returns {Promise<boolean>} Promise that resolves with true if confirmed, false if cancelled
-   * @example
-   * const confirmed = await ui.confirm({ 
-   *   title: "Confirm", 
-   *   message: "Do you want to continue?" 
-   * })
-   */
-  confirm: async function(s) {
-    return console.log("ui.confirm", s);
-  },
-  /**
-   * Displays a text input dialog
-   * @async
-   * @function prompt
-   * @memberof ui
-   * @param {Object} options - Prompt configuration options
-   * @param {string} options.title - Prompt title
-   * @param {string} options.message - Prompt message
-   * @param {string} options.defaultValue - Default input value
-   * @returns {Promise<string>} Promise that resolves with the entered text
-   * @example
-   * const userInput = await ui.prompt({ 
-   *   title: "Name", 
-   *   message: "Enter your name:" 
-   * })
-   */
-  prompt: async function(s) {
-    return console.log("ui.prompt", s);
-  },
-  /**
-   * Creates a panel in the interface
-   * @async
-   * @function panel
-   * @memberof ui
-   * @param {Object} options - Panel configuration options
-   * @param {string} options.title - Panel title
-   * @param {string} options.content - Panel content
-   * @returns {Promise<Object>} Promise that resolves with the created panel object
-   * @returns {string} returns.id - Unique panel ID
-   * @example
-   * const panel = await ui.panel({ title: "My Panel" })
-   * console.log(panel.id) // "panel-1"
-   */
-  panel: async function(s) {
-    return console.log("ui.panel", s);
-  },
-  /**
-   * Closes the extension
-   * @async
-   * @function close
-   * @memberof ui
-   * @returns {Promise<void>} Promise that resolves when the extension is closed
-   * @example await ui.close()
-   */
-  close: async function() {
-    return console.log("ui.close");
-  },
-  /**
-   * Opens the extension
-   * @async
-   * @function open
-   * @memberof ui
-   * @param {Object} [params]={} - Open parameters
-   * @param {string} params.mountPoint="sidePanel" - Location where the extension will be mounted
-   * @returns {Promise<void>} Promise that resolves when the extension is opened
-   * @example
-   * // Opens in side panel (default)
-   * await ui.open()
-   * 
-   * // Opens in a specific location
-   * await ui.open({ mountPoint: "mainPanel" })
-   */
-  open: async function(s = {}) {
-    return console.log("ui.open", s);
-  }
-};
-function b(s) {
-  const e = {
-    id: s.id,
-    name: s.name,
-    description: s.description,
-    icon: s.icon,
-    author: s.author,
-    version: s.version,
-    isLoaded: !1,
-    events: {}
-  }, { proxy: n, rpc: o } = new P({
-    target: window.parent
-  });
-  n.link = async (r, l, t) => {
-    const c = await n.register.link({ category: r, options: l });
-    o.on(`${c.id}`, t);
-  }, n.ui = R, n.session = v;
-  async function i() {
-    const r = n.register.extension(e);
-    return e.isLoaded = !0, r;
-  }
-  return { connect: i, plugin: e, api: n };
-}
-function E(s) {
-  s.id;
-  let e = null, n = !1;
-  function o() {
-    const [i, r] = q({
-      plugin: e,
-      isConnected: n,
-      moises: e == null ? void 0 : e.api
+import { jsx as m } from "react/jsx-runtime";
+import { useState as x, useEffect as g } from "react";
+import { M as y, R as M } from "./client-Bt6Snfq-.js";
+function $(i) {
+  i.id;
+  let t = null, o = !1;
+  function r() {
+    const [c, u] = x({
+      plugin: null,
+      isConnected: o,
+      moises: null
     });
-    h(() => {
-      e || (e = b(s), r((t) => ({
-        ...t,
-        plugin: e,
-        moises: e.api
+    g(() => {
+      t || (t = y(i), u((n) => ({
+        ...n,
+        plugin: t.plugin,
+        moises: t
+        // The entire pluginInstance IS the moises API
       })));
-    }, [s]), h(() => {
-      e && !n && e.connect().then(() => {
-        n = !0, r((t) => ({
-          ...t,
+    }, [i]), g(() => {
+      t && !o && t.connect().then(() => {
+        o = !0, u((n) => ({
+          ...n,
           isConnected: !0
         }));
       });
     }, []);
-    function l({ children: t, width: c, height: a }) {
-      const { moises: u } = i;
-      return h(() => {
-        u && u.ui.setPluginSize({ width: c, height: a });
-      }, [c, a, u]), /* @__PURE__ */ f(p, { height: "100vh", style: { height: "100vh", backgroundColor: "var(--gray-1)" }, children: /* @__PURE__ */ f(p, { p: "4", children: t }) });
+    function d({ children: n, width: l, height: a }) {
+      const { moises: e } = c;
+      return g(() => {
+        e && e.ui.setPluginSize({ width: l, height: a });
+      }, [l, a, e]), /* @__PURE__ */ m("div", { height: "100vh", style: { height: "100vh", backgroundColor: "var(--gray-1)" }, children: /* @__PURE__ */ m("div", { p: "4", children: n }) });
     }
     return {
-      ...i,
-      ModalLayout: l
+      ...c,
+      ModalLayout: d
     };
   }
-  return o;
+  return r;
 }
-function $({ id: s, url: e, exposedAPI: n, iframeRef: o, onRegisterMetadata: i, onRegisterLink: r }) {
-  const l = {
-    id: s,
-    url: e
+function j({ id: i, url: t, exposedAPI: o, iframeRef: r, onRegisterMetadata: c, onRegisterLink: u }) {
+  const d = {
+    id: i,
+    url: t
   };
-  o.current && (o.current.src = e);
-  const t = new y({
-    target: o.current.contentWindow
+  r.current && (r.current.src = t);
+  const n = new M({
+    target: r.current.contentWindow
   });
-  t.on("register.extension", async (u) => {
-    i(u);
-  }), t.on("register.link", async ({ category: u, options: d }) => {
-    const g = `link:${u}:${d.label}`;
-    return r({ id: g, category: u, options: d }), { id: g };
+  n.on("register.extension", async (e) => {
+    c(e);
+  }), n.on("register.link", async ({ category: e, options: s }) => {
+    const f = `link:${e}:${s.label}`;
+    return u({ id: f, category: e, options: s }), { id: f };
   });
-  for (const [u, d] of Object.entries(n))
-    for (const [g, m] of Object.entries(d)) {
-      const w = `${u}.${g}`;
-      t.on(w, async (x) => await m(x));
+  for (const [e, s] of Object.entries(o))
+    for (const [f, p] of Object.entries(s)) {
+      const h = `${e}.${f}`;
+      n.on(h, async (v) => await p(v));
     }
-  function c(u, d) {
-    return t.call(u, d);
+  function l(e, s) {
+    return n.call(e, s);
   }
   function a() {
-    t.disconnect();
+    n.disconnect();
   }
-  return { plugin: l, rpc: t, call: c, disconnect: a };
+  return { plugin: d, rpc: n, call: l, disconnect: a };
 }
 export {
-  $ as MoisesExtensionHost,
-  E as initMoisesExtension
+  j as MoisesExtensionHost,
+  $ as initMoisesExtension
 };

package/package.json

@@ -1,37 +1,39 @@
 {
   "name": "@moises.ai/extension",
-  "version": "0.0.20",
+  "version": "1.0.1",
   "description": "SDK for Moises AI extensions",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "style": "styles.css",
+  "bin": {
+    "moises-extension": "./scripts/init-boilerplate.js"
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    },
-    "./icons": {
-      "import": "./dist/icons.js",
-      "require": "./dist/icons.js"
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
-    "./primitives": {
-      "import": "./dist/primitives.js",
-      "require": "./dist/primitives.js"
+    "./client": {
+      "import": "./dist/client.js",
+      "require": "./dist/client.js",
+      "types": "./src/client.d.ts"
     },
     "./styles.css": "./styles.css"
   },
   "files": [
     "dist",
-    "styles.css"
+    "styles.css",
+    "src/client.d.ts",
+    "src/index.d.ts",
+    "scripts/init-boilerplate.js"
   ],
   "scripts": {
     "build": "vite build",
-    "dev": "vite build --watch"
-  },
-  "dependencies": {
-    "@moises.ai/design-system": "2.0.15"
+    "dev": "vite build --watch",
+    "generate-types": "node scripts/generate-types.js",
+    "generate-typed-client": "node scripts/generate-typed-client.js"
   },
   "peerDependencies": {
     "react": "*",

package/scripts/init-boilerplate.js

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+import { promisify } from "util";
+import cp from "child_process";
+import path from "path";
+import fs from "fs";
+
+// convert libs to promises
+const exec = promisify(cp.exec);
+const rm = promisify(fs.rm);
+
+// Simple custom spinner implementation
+class Spinner {
+  constructor(message) {
+    this.message = message;
+    this.frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    this.currentFrame = 0;
+    this.isSpinning = false;
+    this.interval = null;
+  }
+
+  start() {
+    this.isSpinning = true;
+    process.stdout.write('\x1B[?25l'); // Hide cursor
+    this.interval = setInterval(() => {
+      process.stdout.write('\r' + this.frames[this.currentFrame] + ' ' + this.message);
+      this.currentFrame = (this.currentFrame + 1) % this.frames.length;
+    }, 100);
+    return this;
+  }
+
+  succeed(successMessage) {
+    this.stop();
+    process.stdout.write('\r✅ ' + (successMessage || this.message) + '\n');
+  }
+
+  fail(errorMessage) {
+    this.stop();
+    process.stdout.write('\r❌ ' + (errorMessage || this.message) + '\n');
+  }
+
+  stop() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+    this.isSpinning = false;
+    process.stdout.write('\x1B[?25h'); // Show cursor
+    process.stdout.write('\r' + ' '.repeat(this.message.length + 10) + '\r');
+  }
+}
+
+if (process.argv.length < 3) {
+  console.log("You have to provide a name for your extension project.");
+  console.log("For example:");
+  console.log("    npx @moises.ai/extension my-extension");
+  process.exit(1);
+}
+
+// Display ASCII banner
+console.log(`
+                 _                      _ 
+                (_)                    (_)
+ _ __ ___   ___  _ ___  ___  ___   __ _ _ 
+| '_ \` _ \\ / _ \\| / __|/ _ \\/ __| / _\` | |
+| | | | | | (_) | \\__ \\  __/\\__ \\| (_| | |
+|_| |_| |_|\\___/|_|___/\\___||___(_)__,_|_|
+                                          
+`);
+
+const projectName = process.argv[2];
+const currentPath = process.cwd();
+const projectPath = path.join(currentPath, projectName);
+const git_repo = "https://github.com/moises-ai/extensions-boilerplate.git";
+
+// create project directory
+if (fs.existsSync(projectPath)) {
+  console.log(`The directory ${projectName} already exists in the current directory, please give it another name.`);
+  process.exit(1);
+} else {
+  fs.mkdirSync(projectPath);
+}
+
+try {
+  const gitSpinner = new Spinner("Downloading boilerplate files...").start();
+  // clone the repo into the project folder -> creates the new boilerplate
+  await exec(`git clone --depth 1 ${git_repo} ${projectPath} --quiet`);
+  gitSpinner.succeed();
+
+  const cleanSpinner = new Spinner("Cleaning up template files...").start();
+  // remove git history to start fresh
+  const rmGit = rm(path.join(projectPath, ".git"), { recursive: true, force: true });
+  await rmGit;
+  cleanSpinner.succeed();
+
+  // change to project directory for npm operations
+  process.chdir(projectPath);
+
+  const npmSpinner = new Spinner("Installing dependencies...").start();
+  await exec("npm install");
+  npmSpinner.succeed();
+
+  console.log("\n🎉 Extension project created successfully!");
+  console.log("\nNext steps:");
+  console.log(`    cd ${projectName}`);
+  console.log(`    npm run dev`);
+  console.log("\nHappy coding! 🚀");
+
+} catch (error) {
+  // clean up in case of error, so the user does not have to do it manually
+  fs.rmSync(projectPath, { recursive: true, force: true });
+  console.error("❌ Error creating extension project:");
+  console.error(error.message);
+  process.exit(1);
+}