@pulse-editor/cli 0.1.1-beta.8 → 0.1.2

package/dist/lib/server/express.js

@@ -1,32 +1,32 @@
 /**
  *  This is a local dev server for "npm run dev" and "npm run preview".
  */
-import express from 'express';
-import cors from 'cors';
-import dotenv from 'dotenv';
-import livereload from 'livereload';
-import connectLivereload from 'connect-livereload';
-import { networkInterfaces } from 'os';
-import { pipeline, Readable } from 'stream';
-import { promisify } from 'util';
-import { readConfigFile } from './utils.js';
-import path from 'path';
-import { pathToFileURL } from 'url';
+import connectLivereload from "connect-livereload";
+import cors from "cors";
+import dotenv from "dotenv";
+import express from "express";
+import livereload from "livereload";
+import { networkInterfaces } from "os";
+import path from "path";
+import { pipeline, Readable } from "stream";
+import { pathToFileURL } from "url";
+import { promisify } from "util";
+import { readConfigFile } from "../webpack/configs/utils.js";
 dotenv.config({
     quiet: true,
 });
-const isPreview = process.env?.['PREVIEW'];
-const isDev = process.env?.['NODE_ENV'];
-const workspaceId = process.env?.['WORKSPACE_ID'];
+const isPreview = process.env?.["PREVIEW"];
+const isDev = process.env?.["NODE_ENV"] === "development";
+const workspaceId = process.env?.["WORKSPACE_ID"];
 const pulseConfig = await readConfigFile();
 if (isDev || isPreview) {
     const livereloadServer = livereload.createServer({
         // @ts-expect-error override server options
-        host: '0.0.0.0',
+        host: "0.0.0.0",
     });
-    livereloadServer.watch('dist');
-    livereloadServer.server.once('connection', () => {
-        console.log('✅ LiveReload connected');
+    livereloadServer.watch("dist");
+    livereloadServer.server.once("connection", () => {
+        console.log("✅ LiveReload connected");
     });
 }
 const app = express();
@@ -49,57 +49,97 @@ app.use((req, res, next) => {
     return next();
 });
 // Serve backend
-app.use(`/${pulseConfig.id}/${pulseConfig.version}/server`, express.static('dist/server'));
+app.use(`/${pulseConfig.id}/${pulseConfig.version}/server`, express.static("dist/server"));
 // Catch backend function calls
 app.all(/^\/server-function\/(.*)/, async (req, res) => {
     const func = req.params[0];
-    const url = `${req.protocol}://${req.get('host')}${req.originalUrl}`;
+    const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
     // Convert Express req -> Fetch Request
     const request = new Request(url, {
         method: req.method,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         headers: req.headers,
-        body: ['GET', 'HEAD'].includes(req.method)
+        body: ["GET", "HEAD"].includes(req.method)
             ? null
             : JSON.stringify(req.body),
     });
-    const dir = path.resolve('node_modules/@pulse-editor/cli/dist/lib/server/preview/backend/load-remote.cjs');
+    const dir = path.resolve("node_modules/@pulse-editor/cli/dist/lib/server/preview/backend/load-remote.cjs");
     const fileUrl = pathToFileURL(dir).href;
-    const { loadAndCall } = await import(fileUrl);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const response = await loadAndCall(func, request, pulseConfig.id, 'http://localhost:3030', pulseConfig.version);
-    const streamPipeline = promisify(pipeline);
-    // If loadAndCall returns a Response (Fetch API Response)
-    if (response.body) {
-        // Convert WHATWG stream to Node.js stream
-        const nodeStream = Readable.fromWeb(response.body);
-        // Pipe it directly to Express
-        await streamPipeline(nodeStream, res);
+    const { loadFunc, loadPrice } = await import(fileUrl);
+    const price = await loadPrice(func, pulseConfig.id, "http://localhost:3030", pulseConfig.version);
+    if (price) {
+        // Make func name and price bold in console
+        console.log(`🏃 Running function \x1b[1m${func}\x1b[0m, credits consumed: \x1b[1m${price}\x1b[0m`);
     }
     else {
-        res.end();
+        console.log(`🏃 Running function \x1b[1m${func}\x1b[0m.`);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const loadedFunc = await loadFunc(func, pulseConfig.id, "http://localhost:3030", pulseConfig.version);
+    const response = await loadedFunc(request);
+    const streamPipeline = promisify(pipeline);
+    if (response) {
+        // 1️⃣ Set status code
+        res.status(response.status);
+        // 2️⃣ Copy headers
+        response.headers.forEach((value, key) => {
+            res.setHeader(key, value);
+        });
+        // 3️⃣ Pipe body if present
+        if (response.body) {
+            const nodeStream = Readable.fromWeb(response.body);
+            await streamPipeline(nodeStream, res);
+        }
+        else {
+            res.end();
+        }
     }
 });
 if (isPreview) {
     /* Preview mode */
-    app.use(express.static('dist/client'));
-    app.listen(3030, '0.0.0.0');
+    app.use(express.static("dist/client"));
+    // Expose skill actions as REST API endpoints in dev and preview modes
+    const skillActions = pulseConfig?.actions || [];
+    const skillActionNames = skillActions.map((a) => a.name);
+    app.post("/skill/:actionName", async (req, res) => {
+        const { actionName } = req.params;
+        if (skillActionNames.length > 0 && !skillActionNames.includes(actionName)) {
+            res
+                .status(404)
+                .json({ error: `Skill action "${actionName}" not found.` });
+            return;
+        }
+        const dir = path.resolve("node_modules/@pulse-editor/cli/dist/lib/server/preview/backend/load-remote.cjs");
+        const fileUrl = pathToFileURL(dir).href;
+        const { loadFunc } = await import(fileUrl);
+        try {
+            const action = await loadFunc(`skill/${actionName}`, pulseConfig.id, "http://localhost:3030", pulseConfig.version);
+            const result = await action(req.body);
+            res.json(result);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            console.error(`❌ Error running skill action "${actionName}": ${message}`);
+            res.status(500).json({ error: message });
+        }
+    });
+    app.listen(3030, "0.0.0.0");
 }
 else if (isDev) {
     /* Dev mode  */
-    app.use(`/${pulseConfig.id}/${pulseConfig.version}`, express.static('dist'));
-    app.listen(3030, '0.0.0.0');
+    app.use(`/${pulseConfig.id}/${pulseConfig.version}`, express.static("dist"));
+    app.listen(3030, "0.0.0.0");
 }
 else {
     /* Production mode */
-    app.use(`/${pulseConfig.id}/${pulseConfig.version}`, express.static('dist'));
-    app.listen(3030, '0.0.0.0', () => {
-        console.log(`\
-🎉 Your Pulse extension \x1b[1m${pulseConfig.displayName}\x1b[0m is LIVE! 
-
-⚡️ Local: http://localhost:3030/${pulseConfig.id}/${pulseConfig.version}/
-⚡️ Network: http://${getLocalNetworkIP()}:3030/${pulseConfig.id}/${pulseConfig.version}/
-
+    app.use(`/${pulseConfig.id}/${pulseConfig.version}`, express.static("dist"));
+    app.listen(3030, "0.0.0.0", () => {
+        console.log(`\
+🎉 Your Pulse extension \x1b[1m${pulseConfig.displayName}\x1b[0m is LIVE! 
+
+⚡️ Local: http://localhost:3030/${pulseConfig.id}/${pulseConfig.version}/
+⚡️ Network: http://${getLocalNetworkIP()}:3030/${pulseConfig.id}/${pulseConfig.version}/
+
 ✨ Try it out in the Pulse Editor and let the magic happen! 🚀`);
     });
 }
@@ -109,10 +149,10 @@ function getLocalNetworkIP() {
         if (!iface)
             continue;
         for (const config of iface) {
-            if (config.family === 'IPv4' && !config.internal) {
+            if (config.family === "IPv4" && !config.internal) {
                 return config.address; // Returns the first non-internal IPv4 address
             }
         }
     }
-    return 'localhost'; // Fallback
+    return "localhost"; // Fallback
 }

package/dist/lib/server/preview/backend/load-remote.cjs

@@ -1,23 +1,33 @@
-const { createInstance } = require("@module-federation/runtime");
-
-async function loadAndCall(func, req, appId, origin, version) {
-  // here we assign the return value of the init() function, which can be used to do some more complex
-  // things with the module federation runtime
-  const instance = createInstance({
-    name: "server_function_runner",
-    remotes: [
-      {
-        name: appId + "_server",
-        entry: `${origin}/${appId}/${version}/server/remoteEntry.js`,
-      },
-    ],
-  });
-
-  const loadedFunc = (await instance.loadRemote(`${appId}_server/${func}`))
-    .default;
-
-  const res = await loadedFunc(req);
-  return res;
-}
-
-module.exports = { loadAndCall };
+const {createInstance} = require('@module-federation/runtime');
+
+async function importRemoteModule(func, appId, origin, version) {
+	const instance = createInstance({
+		name: 'server_function_runner',
+		remotes: [
+			{
+				name: appId + '_server',
+				entry: `${origin}/${appId}/${version}/server/remoteEntry.js`,
+			},
+		],
+	});
+
+	const loadedModule = await instance.loadRemote(`${appId}_server/${func}`);
+	return loadedModule;
+}
+
+async function loadFunc(func, appId, origin, version) {
+	// here we assign the return value of the init() function, which can be used to do some more complex
+	// things with the module federation runtime
+	const module = await importRemoteModule(func, appId, origin, version);
+	const loadedFunc = module.default;
+
+	return loadedFunc;
+}
+
+async function loadPrice(func, appId, origin, version) {
+	const module = await importRemoteModule(func, appId, origin, version);
+	const price = module._CREDIT_PER_CALL;
+	return price;
+}
+
+module.exports = {loadFunc, loadPrice};

package/dist/lib/server/preview/frontend/index.html

@@ -1,11 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pulse App</title>
-  </head>
-  <body style="height: 100vh; width: 100vw">
-    <div id="root" style="height: 100%; width: 100%"></div>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pulse App</title>
+  </head>
+  <body style="height: 100vh; width: 100vw">
+    <div id="root" style="height: 100%; width: 100%"></div>
+  </body>
+</html>

package/dist/lib/server/utils.js

@@ -1,10 +1,10 @@
 import fs from 'fs/promises';
 export async function readConfigFile() {
     // Read pulse.config.json from dist/client
-    // Wait until dist/client/pulse.config.json exists
+    // Wait until dist/pulse.config.json exists
     while (true) {
         try {
-            await fs.access('dist/client/pulse.config.json');
+            await fs.access('dist/pulse.config.json');
             break;
         }
         catch (err) {
@@ -12,6 +12,6 @@ export async function readConfigFile() {
             await new Promise(resolve => setTimeout(resolve, 100));
         }
     }
-    const data = await fs.readFile('dist/client/pulse.config.json', 'utf-8');
+    const data = await fs.readFile('dist/pulse.config.json', 'utf-8');
     return JSON.parse(data);
 }

package/dist/lib/token.js

@@ -1,6 +1,7 @@
 import os from 'os';
 import path from 'path';
 import fs from 'fs';
+import { getBackendUrl } from './backend-url.js';
 export function saveToken(token, devMode) {
     // Save the token to .pulse-editor/config.json in user home directory
     const configDir = path.join(os.homedir(), '.pulse-editor');
@@ -62,9 +63,7 @@ export function isTokenInEnv(devMode) {
     return false;
 }
 export async function checkToken(token, devMode) {
-    const res = await fetch(devMode
-        ? 'https://localhost:8080/api/api-keys/check'
-        : 'https://pulse-editor.com/api/api-keys/check', {
+    const res = await fetch(`${getBackendUrl(devMode)}/api/api-keys/check`, {
         body: JSON.stringify({ token }),
         headers: {
             'Content-Type': 'application/json',

package/dist/lib/webpack/compile.d.ts

@@ -0,0 +1,2 @@
+import webpack from "webpack";
+export declare function webpackCompile(mode: "development" | "production" | "preview", buildTarget?: "client" | "server", isWatchMode?: boolean): Promise<void | webpack.MultiCompiler>;

package/dist/lib/webpack/compile.js

@@ -0,0 +1,30 @@
+import webpack from "webpack";
+import { generateTempTsConfig } from "./configs/utils.js";
+import { createWebpackConfig } from "./webpack-config.js";
+export async function webpackCompile(mode, buildTarget, isWatchMode = false) {
+    generateTempTsConfig();
+    const configs = await createWebpackConfig(mode === "preview", buildTarget ?? "both", mode === "development"
+        ? "development"
+        : mode === "preview"
+            ? "development"
+            : "production");
+    const compiler = webpack(configs);
+    if (isWatchMode) {
+        compiler.watch({}, (err, stats) => {
+            if (err) {
+                console.error("❌ Webpack build failed", err);
+                return;
+            }
+        });
+        return compiler;
+    }
+    return new Promise((resolve, reject) => {
+        compiler.run((err) => {
+            if (err) {
+                reject(err);
+                return;
+            }
+            resolve();
+        });
+    });
+}

package/dist/lib/webpack/configs/mf-client.d.ts

@@ -0,0 +1,3 @@
+import { Configuration as WebpackConfig } from "webpack";
+import { Configuration as DevServerConfig } from "webpack-dev-server";
+export declare function makeMFClientConfig(mode: "development" | "production"): Promise<WebpackConfig & DevServerConfig>;

package/dist/lib/webpack/configs/mf-client.js

@@ -0,0 +1,184 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";
+import CopyWebpackPlugin from "copy-webpack-plugin";
+import fs from "fs";
+import { globSync } from "glob";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import path from "path";
+import ts from "typescript";
+import { discoverAppSkillActions, getLocalNetworkIP, loadPulseConfig, } from "./utils.js";
+class MFClientPlugin {
+    projectDirName;
+    pulseConfig;
+    origin;
+    constructor(pulseConfig) {
+        this.projectDirName = process.cwd();
+        this.pulseConfig = pulseConfig;
+        this.origin = getLocalNetworkIP();
+    }
+    apply(compiler) {
+        if (compiler.options.mode === "development") {
+            let isFirstRun = true;
+            // Before build starts
+            // When a file changes and triggers a new compilation
+            compiler.hooks.watchRun.tap("ReloadMessagePlugin", () => {
+                if (!isFirstRun) {
+                    console.log("[client] 🔄 reloading app...");
+                }
+                else {
+                    console.log("[client] 🔄 building app...");
+                }
+            });
+            // Log file updates
+            compiler.hooks.invalid.tap("LogFileUpdates", (file, changeTime) => {
+                console.log(`[watch] change detected in: ${file} at ${new Date(changeTime || Date.now()).toLocaleTimeString()}`);
+            });
+            const devStartupMessage = `
+🎉 Your Pulse extension \x1b[1m${this.pulseConfig.displayName}\x1b[0m is LIVE! 
+
+⚡️ Local: http://localhost:3030/${this.pulseConfig.id}/${this.pulseConfig.version}/
+⚡️ Network: http://${this.origin}:3030/${this.pulseConfig.id}/${this.pulseConfig.version}/
+
+✨ Try it out in the Pulse Editor and let the magic happen! 🚀
+`;
+            // After build finishes
+            compiler.hooks.done.tap("ReloadMessagePlugin", () => {
+                if (isFirstRun) {
+                    console.log("[client] ✅ Successfully built client.");
+                    console.log(devStartupMessage);
+                    isFirstRun = false;
+                }
+                else {
+                    console.log("[client] ✅ Reload finished.");
+                }
+                // Write pulse config to dist
+                fs.writeFileSync(path.resolve(this.projectDirName, "dist/pulse.config.json"), JSON.stringify(this.pulseConfig, null, 2));
+            });
+        }
+        else {
+            // Print build success/failed message
+            compiler.hooks.done.tap("BuildMessagePlugin", (stats) => {
+                if (stats.hasErrors()) {
+                    console.log(`[client] ❌ Failed to build client.`);
+                }
+                else {
+                    console.log(`[client] ✅ Successfully built client.`);
+                    // Write pulse config to dist
+                    fs.writeFileSync(path.resolve(this.projectDirName, "dist/pulse.config.json"), JSON.stringify(this.pulseConfig, null, 2));
+                }
+            });
+        }
+        compiler.hooks.beforeCompile.tap("PulseConfigPlugin", () => {
+            let requireFS = false;
+            function isWorkspaceHook(node) {
+                return (ts.isCallExpression(node) &&
+                    ts.isIdentifier(node.expression) &&
+                    [
+                        "useFileSystem",
+                        "useFile",
+                        "useReceiveFile",
+                        "useTerminal",
+                        "useWorkspaceInfo",
+                    ].includes(node.expression.text));
+            }
+            function scanSource(sourceText) {
+                const sourceFile = ts.createSourceFile("temp.tsx", sourceText, ts.ScriptTarget.Latest, true);
+                const visit = (node) => {
+                    // Detect: useFileSystem(...)
+                    if (isWorkspaceHook(node)) {
+                        requireFS = true;
+                    }
+                    ts.forEachChild(node, visit);
+                };
+                visit(sourceFile);
+            }
+            globSync(["src/**/*.tsx", "src/**/*.ts"]).forEach((file) => {
+                const source = fs.readFileSync(file, "utf8");
+                scanSource(source);
+            });
+            // Persist result
+            this.pulseConfig.requireWorkspace = requireFS;
+        });
+    }
+}
+export async function makeMFClientConfig(mode) {
+    const projectDirName = process.cwd();
+    const pulseConfig = await loadPulseConfig();
+    const mainComponent = "./src/main.tsx";
+    const actions = discoverAppSkillActions();
+    return {
+        mode: mode,
+        name: "client",
+        entry: mainComponent,
+        output: {
+            publicPath: "auto",
+            path: path.resolve(projectDirName, "dist/client"),
+        },
+        resolve: {
+            extensions: [".ts", ".tsx", ".js"],
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: "globals.css",
+            }),
+            // Copy assets to dist
+            new CopyWebpackPlugin({
+                patterns: [{ from: "src/assets", to: "assets" }],
+            }),
+            new ModuleFederationPlugin({
+                // Do not use hyphen character '-' in the name
+                name: pulseConfig.id + "_client",
+                filename: "remoteEntry.js",
+                exposes: {
+                    "./main": mainComponent,
+                    ...actions,
+                },
+                shared: {
+                    react: {
+                        requiredVersion: "19.2.0",
+                        import: "react", // the "react" package will be used a provided and fallback module
+                        shareKey: "react", // under this name the shared module will be placed in the share scope
+                        shareScope: "default", // share scope with this name will be used
+                        singleton: true, // only a single version of the shared module is allowed
+                    },
+                    "react-dom": {
+                        requiredVersion: "19.2.0",
+                        singleton: true, // only a single version of the shared module is allowed
+                    },
+                },
+            }),
+            new MFClientPlugin(pulseConfig),
+        ],
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: "ts-loader",
+                    exclude: [/node_modules/, /dist/],
+                },
+                {
+                    test: /\.css$/i,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        "css-loader",
+                        {
+                            loader: "postcss-loader",
+                        },
+                    ],
+                    exclude: [/dist/],
+                },
+            ],
+        },
+        stats: {
+            all: false,
+            errors: true,
+            warnings: true,
+            logging: "warn",
+            colors: true,
+            assets: false,
+        },
+        infrastructureLogging: {
+            level: "warn",
+        },
+    };
+}

package/dist/lib/webpack/configs/mf-server.d.ts

@@ -0,0 +1,2 @@
+import { Configuration as WebpackConfig } from "webpack";
+export declare function makeMFServerConfig(mode: "development" | "production"): Promise<WebpackConfig>;