@pulse-editor/cli 0.1.1-beta.33 → 0.1.1-beta.36

package/dist/lib/backend/publish-app.js

@@ -3,7 +3,7 @@ import fs from 'fs';
 export async function publishApp(isStage) {
     // Upload the zip file to the server
     // Read pulse.config.json for visibility
-    const config = JSON.parse(fs.readFileSync('./dist/client/pulse.config.json', 'utf-8'));
+    const config = JSON.parse(fs.readFileSync('./dist/pulse.config.json', 'utf-8'));
     const visibility = config.visibility;
     const formData = new FormData();
     const buffer = fs.readFileSync('./node_modules/@pulse-editor/dist.zip');

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'] === 'development';
-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,24 +49,24 @@ 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 { loadFunc, loadPrice } = await import(fileUrl);
-    const price = await loadPrice(func, pulseConfig.id, 'http://localhost:3030', pulseConfig.version);
+    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`);
@@ -75,7 +75,7 @@ app.all(/^\/server-function\/(.*)/, async (req, res) => {
         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 loadedFunc = await loadFunc(func, pulseConfig.id, "http://localhost:3030", pulseConfig.version);
     const response = await loadedFunc(request);
     const streamPipeline = promisify(pipeline);
     if (response) {
@@ -97,18 +97,18 @@ app.all(/^\/server-function\/(.*)/, async (req, res) => {
 });
 if (isPreview) {
     /* Preview mode */
-    app.use(express.static('dist/client'));
-    app.listen(3030, '0.0.0.0');
+    app.use(express.static("dist/client"));
+    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', () => {
+    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! 
 
@@ -124,10 +124,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/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/webpack/compile.js

@@ -1,5 +1,5 @@
 import webpack from 'webpack';
-import { createWebpackConfig } from '../../lib/webpack/webpack.config.js';
+import { createWebpackConfig } from './webpack-config.js';
 export async function webpackCompile(mode, buildTarget, isWatchMode = false) {
     const configs = await createWebpackConfig(mode === 'preview', buildTarget ?? 'both', mode === 'development'
         ? 'development'

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,183 @@
+/* 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
+            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>;

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

@@ -0,0 +1,391 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import mfNode from "@module-federation/node";
+import fs from "fs";
+import { globSync } from "glob";
+import path from "path";
+import { Node, Project, SyntaxKind } from "ts-morph";
+import wp from "webpack";
+import { discoverAppSkillActions, loadPulseConfig } from "./utils.js";
+const { NodeFederationPlugin } = mfNode;
+const { webpack } = wp;
+class MFServerPlugin {
+    projectDirName;
+    pulseConfig;
+    constructor(pulseConfig) {
+        this.projectDirName = process.cwd();
+        this.pulseConfig = pulseConfig;
+    }
+    apply(compiler) {
+        if (compiler.options.mode === "development") {
+            let isFirstRun = true;
+            // Before build starts
+            compiler.hooks.watchRun.tap("ReloadMessagePlugin", async (compilation) => {
+                this.cleanServerDist();
+                if (!isFirstRun) {
+                    console.log(`[Server] 🔄 Reloading app...`);
+                    const isServerFunctionChange = compilation.modifiedFiles
+                        ? Array.from(compilation.modifiedFiles).some((file) => file.includes("src/server-function"))
+                        : false;
+                    if (isServerFunctionChange) {
+                        await this.compileServerFunctions(compiler);
+                    }
+                    const isActionChange = compilation.modifiedFiles
+                        ? Array.from(compilation.modifiedFiles).some((file) => file.includes("src/action"))
+                        : false;
+                    if (isActionChange) {
+                        console.log(`[Server] Detected changes in actions. Recompiling...`);
+                        this.compileAppActionSkills();
+                    }
+                }
+                else {
+                    console.log(`[Server] 🔄 Building app...`);
+                    await this.compileServerFunctions(compiler);
+                    this.compileAppActionSkills();
+                    console.log(`[Server] ✅ Successfully built server.`);
+                }
+            });
+            // After build finishes
+            compiler.hooks.done.tap("ReloadMessagePlugin", () => {
+                if (isFirstRun) {
+                    isFirstRun = false;
+                }
+                else {
+                    console.log(`[Server] ✅ Reload finished.`);
+                }
+            });
+            // Watch for file changes in the server-function directory to trigger server-function rebuilds
+            compiler.hooks.thisCompilation.tap("WatchServerFunctions", (compilation) => {
+                compilation.contextDependencies.add(path.resolve(this.projectDirName, "src/server-function"));
+            });
+            // Watch for file changes in the action directory to trigger action rebuilds
+            compiler.hooks.thisCompilation.tap("WatchActions", (compilation) => {
+                compilation.contextDependencies.add(path.resolve(this.projectDirName, "src/action"));
+            });
+        }
+        else {
+            // Print build success/failed message
+            compiler.hooks.done.tap("BuildMessagePlugin", async (stats) => {
+                if (stats.hasErrors()) {
+                    console.log(`[Server] ❌ Failed to build server.`);
+                }
+                else {
+                    try {
+                        await this.compileServerFunctions(compiler);
+                        this.compileAppActionSkills();
+                    }
+                    catch (err) {
+                        console.log(`[Server] ❌ Error during compilation:`, err);
+                        return;
+                    }
+                    console.log(`[Server] ✅ Successfully built server.`);
+                }
+            });
+        }
+    }
+    cleanServerDist() {
+        // Remove existing entry points
+        try {
+            fs.rmSync("dist/server", { recursive: true, force: true });
+        }
+        catch (e) {
+            console.error("Error removing dist/server:", e);
+            console.log("Continuing...");
+        }
+    }
+    /**
+     * Programmatically call webpack to compile server functions
+     * whenever there are changes in the src/server-function directory.
+     * This is necessary because Module Federation needs to know about
+     * all the exposed modules at build time, so we have to trigger a
+     * new compilation whenever server functions are added/removed/changed.
+     * @param compiler
+     */
+    async compileServerFunctions(compiler) {
+        // Generate tsconfig for server functions
+        function generateTempTsConfig() {
+            const tempTsConfigPath = path.join(process.cwd(), "node_modules/.pulse/tsconfig.server.json");
+            const tsConfig = {
+                compilerOptions: {
+                    target: "ES2020",
+                    module: "esnext",
+                    moduleResolution: "bundler",
+                    strict: true,
+                    declaration: true,
+                    outDir: path.join(process.cwd(), "dist"),
+                },
+                include: [
+                    path.join(process.cwd(), "src/server-function/**/*"),
+                    path.join(process.cwd(), "pulse.config.ts"),
+                    path.join(process.cwd(), "global.d.ts"),
+                ],
+                exclude: [
+                    path.join(process.cwd(), "node_modules"),
+                    path.join(process.cwd(), "dist"),
+                ],
+            };
+            fs.writeFileSync(tempTsConfigPath, JSON.stringify(tsConfig, null, 2));
+        }
+        generateTempTsConfig();
+        // Run a new webpack compilation to pick up new server functions
+        const options = {
+            ...compiler.options,
+            watch: false,
+            plugins: [
+                // Add a new NodeFederationPlugin with updated entry points
+                this.makeNodeFederationPlugin(),
+            ],
+        };
+        const newCompiler = webpack(options);
+        // Run the new compiler
+        return new Promise((resolve, reject) => {
+            newCompiler?.run((err, stats) => {
+                if (err) {
+                    console.error(`[Server] ❌ Error during recompilation:`, err);
+                    reject(err);
+                }
+                else if (stats?.hasErrors()) {
+                    console.error(`[Server] ❌ Compilation errors:`, stats.toJson().errors);
+                    reject(new Error("Compilation errors"));
+                }
+                else {
+                    console.log(`[Server] ✅ Compiled server functions successfully.`);
+                    resolve();
+                }
+            });
+        });
+    }
+    makeNodeFederationPlugin() {
+        function discoverServerFunctions() {
+            // Get all .ts files under src/server-function and read use default exports as entry points
+            const files = globSync("./src/server-function/**/*.ts");
+            const entryPoints = files
+                .map((file) => file.replaceAll("\\", "/"))
+                .map((file) => {
+                return {
+                    ["./" +
+                        file.replace("src/server-function/", "").replace(/\.ts$/, "")]: "./" + file,
+                };
+            })
+                .reduce((acc, curr) => {
+                return { ...acc, ...curr };
+            }, {});
+            return entryPoints;
+        }
+        const funcs = discoverServerFunctions();
+        const actions = discoverAppSkillActions();
+        console.log(`Discovered server functions:
+${Object.entries(funcs)
+            .map(([name, file]) => {
+            return `  - ${name.slice(2)} (from ${file})`;
+        })
+            .join("\n")}
+`);
+        return new NodeFederationPlugin({
+            name: this.pulseConfig.id + "_server",
+            remoteType: "script",
+            useRuntimePlugin: true,
+            library: { type: "commonjs-module" },
+            filename: "remoteEntry.js",
+            exposes: {
+                ...funcs,
+                ...actions,
+            },
+        }, {});
+    }
+    /**
+     * Register default functions defined in src/action as exposed modules in Module Federation.
+     * This will:
+     * 	1. Search for all .ts files under src/action
+     *  2. Use ts-morph to get the default function information, including function name, parameters, and JSDoc comments
+     *  3. Organize the functions' information into a list of Action
+     * @param compiler
+     */
+    compileAppActionSkills() {
+        // 1. Get all TypeScript files under src/skill
+        const files = globSync("./src/skill/*/action.ts");
+        const project = new Project({
+            tsConfigFilePath: path.join(process.cwd(), "node_modules/.pulse/tsconfig.server.json"),
+        });
+        const actions = [];
+        files.forEach((file) => {
+            const sourceFile = project.addSourceFileAtPath(file);
+            const defaultExportSymbol = sourceFile.getDefaultExportSymbol();
+            if (!defaultExportSymbol)
+                return;
+            const defaultExportDeclarations = defaultExportSymbol.getDeclarations();
+            defaultExportDeclarations.forEach((declaration) => {
+                if (declaration.getKind() !== SyntaxKind.FunctionDeclaration)
+                    return;
+                const funcDecl = declaration.asKindOrThrow(SyntaxKind.FunctionDeclaration);
+                // Extract JSDoc comments
+                const funcName = funcDecl.getName() ?? "default";
+                // Throw an error if the funcName is duplicated with an existing action to prevent accidental overwriting
+                if (actions.some((action) => action.name === funcName)) {
+                    throw new Error(`Duplicate action name "${funcName}" detected in file ${file}. Please ensure all actions have unique names to avoid conflicts.`);
+                }
+                const defaultExportJSDocs = funcDecl.getJsDocs();
+                const description = defaultExportJSDocs
+                    .map((doc) => doc.getFullText())
+                    .join("\n");
+                const allJSDocs = sourceFile.getDescendantsOfKind(SyntaxKind.JSDoc);
+                const typeDefs = this.parseTypeDefs(allJSDocs);
+                /* Extract parameter descriptions from JSDoc */
+                const funcParam = funcDecl.getParameters()[0];
+                const params = {};
+                if (funcParam) {
+                    /**
+                     * Extract default values from the destructured parameter
+                     * (ObjectBindingPattern → BindingElement initializer)
+                     */
+                    const defaults = new Map();
+                    const nameNode = funcParam.getNameNode();
+                    if (Node.isObjectBindingPattern(nameNode)) {
+                        nameNode.getElements().forEach((el) => {
+                            if (!Node.isBindingElement(el))
+                                return;
+                            const name = el.getName();
+                            const initializer = el.getInitializer()?.getText();
+                            if (initializer) {
+                                defaults.set(name, initializer);
+                            }
+                        });
+                    }
+                    funcParam
+                        .getType()
+                        .getProperties()
+                        .forEach((prop) => {
+                        const name = prop.getName();
+                        const inputTypeDef = typeDefs["input"] ?? {};
+                        const variable = {
+                            description: inputTypeDef[name]?.description ?? "",
+                            type: this.getType(inputTypeDef[name]?.type ?? ""),
+                            optional: prop.isOptional() ? true : undefined,
+                            defaultValue: defaults.get(name),
+                        };
+                        params[name] = variable;
+                    });
+                }
+                /* Extract return type from JSDoc */
+                // Check if the return type is an object
+                if (!funcDecl.getReturnType().isObject()) {
+                    console.warn(`[Action Registration] Function ${funcName}'s return type should be an object. Skipping...`);
+                    return;
+                }
+                const returns = {};
+                funcDecl
+                    .getReturnType()
+                    .getProperties()
+                    .forEach((prop) => {
+                    const name = prop.getName();
+                    const outputTypeDef = typeDefs["output"] ?? {};
+                    const variable = {
+                        description: outputTypeDef[name]?.description ?? "",
+                        type: this.getType(outputTypeDef[name]?.type ?? ""),
+                        optional: prop.isOptional() ? true : undefined,
+                        defaultValue: undefined,
+                    };
+                    returns[name] = variable;
+                });
+                actions.push({
+                    name: funcName,
+                    description,
+                    parameters: params,
+                    returns,
+                });
+            });
+        });
+        // You can now register `actions` in Module Federation or expose them as needed
+        console.log("Discovered skill actions:\n", actions.map((a) => "- " + a.name).join("\n"));
+        // Register actions in pulse config for runtime access
+        this.pulseConfig.actions = actions;
+    }
+    parseTypeDefs(jsDocs) {
+        const typeDefs = {};
+        // Match @typedef {Type} Name
+        const typedefRegex = /@typedef\s+{([^}]+)}\s+([^\s-]+)/g;
+        // Match @property {Type} [name] Description text...
+        const propertyRegex = /@property\s+{([^}]+)}\s+(\[?[^\]\s]+\]?)\s*-?\s*(.*)/g;
+        jsDocs.forEach((doc) => {
+            const text = doc.getFullText();
+            let typedefMatches;
+            while ((typedefMatches = typedefRegex.exec(text)) !== null) {
+                const typeName = typedefMatches[2];
+                if (!typeName)
+                    continue;
+                const properties = {};
+                let propertyMatches;
+                while ((propertyMatches = propertyRegex.exec(text)) !== null) {
+                    const propName = propertyMatches[2];
+                    const propType = propertyMatches[1];
+                    const propDescription = propertyMatches[3] || "";
+                    if (propName && propType) {
+                        properties[propName] = {
+                            type: propType,
+                            description: propDescription.trim(),
+                        };
+                    }
+                }
+                typeDefs[typeName.toLowerCase()] = properties;
+            }
+        });
+        return typeDefs;
+    }
+    getType(text) {
+        if (text === "string")
+            return "string";
+        if (text === "number")
+            return "number";
+        if (text === "boolean")
+            return "boolean";
+        if (text === "any")
+            return "object";
+        if (text.endsWith("[]"))
+            return [this.getType(text.slice(0, -2))];
+        if (text.length === 0)
+            return "undefined";
+        console.warn(`[Type Warning] Unrecognized type "${text}". Consider adding explicit types in your action's JSDoc comments for better type safety and documentation.`);
+        return text;
+    }
+}
+export async function makeMFServerConfig(mode) {
+    const projectDirName = process.cwd();
+    const pulseConfig = await loadPulseConfig();
+    return {
+        mode: mode,
+        name: "server",
+        entry: {},
+        target: "async-node",
+        output: {
+            publicPath: "auto",
+            path: path.resolve(projectDirName, "dist/server"),
+        },
+        resolve: {
+            extensions: [".ts", ".js"],
+        },
+        plugins: [new MFServerPlugin(pulseConfig)],
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: {
+                        loader: "ts-loader",
+                        options: {
+                            configFile: "node_modules/.pulse/tsconfig.server.json",
+                        },
+                    },
+                    exclude: [/node_modules/, /dist/],
+                },
+            ],
+        },
+        stats: {
+            all: false,
+            errors: true,
+            warnings: true,
+            logging: "warn",
+            colors: true,
+        },
+        infrastructureLogging: {
+            level: "warn",
+        },
+    };
+}

package/dist/lib/webpack/configs/preview.d.ts

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

package/dist/lib/webpack/configs/preview.js

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import CopyWebpackPlugin from "copy-webpack-plugin";
+import fs from "fs";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import path from "path";
+import { getLocalNetworkIP, loadPulseConfig } from "./utils.js";
+class PreviewClientPlugin {
+    projectDirName;
+    pulseConfig;
+    origin;
+    constructor(pulseConfig) {
+        this.projectDirName = process.cwd();
+        this.pulseConfig = pulseConfig;
+        this.origin = getLocalNetworkIP();
+    }
+    apply(compiler) {
+        let isFirstRun = true;
+        // Before build starts
+        compiler.hooks.watchRun.tap("ReloadMessagePlugin", () => {
+            if (!isFirstRun) {
+                console.log("[client-preview] 🔄 Reloading app...");
+            }
+            else {
+                console.log("[client-preview] 🔄 Building app...");
+            }
+        });
+        // After build finishes
+        compiler.hooks.done.tap("ReloadMessagePlugin", () => {
+            if (isFirstRun) {
+                const previewStartupMessage = `
+🎉 Your Pulse extension preview \x1b[1m${this.pulseConfig.displayName}\x1b[0m is LIVE! 
+
+⚡️ Local: http://localhost:3030
+⚡️ Network: http://${this.origin}:3030
+
+✨ Try it out in your browser and let the magic happen! 🚀
+`;
+                console.log("[client-preview] ✅ Successfully built preview.");
+                console.log(previewStartupMessage);
+                isFirstRun = false;
+            }
+            else {
+                console.log("[client-preview] ✅ Reload finished");
+            }
+            // Write pulse config to dist
+            fs.writeFileSync(path.resolve(this.projectDirName, "dist/pulse.config.json"), JSON.stringify(this.pulseConfig, null, 2));
+        });
+    }
+}
+export async function makePreviewClientConfig(mode) {
+    const projectDirName = process.cwd();
+    const pulseConfig = await loadPulseConfig();
+    return {
+        mode: mode,
+        entry: {
+            main: "./node_modules/.pulse/server/preview/frontend/index.js",
+        },
+        output: {
+            path: path.resolve(projectDirName, "dist/client"),
+        },
+        resolve: {
+            extensions: [".ts", ".tsx", ".js"],
+        },
+        plugins: [
+            new HtmlWebpackPlugin({
+                template: "./node_modules/.pulse/server/preview/frontend/index.html",
+            }),
+            new MiniCssExtractPlugin({
+                filename: "globals.css",
+            }),
+            new CopyWebpackPlugin({
+                patterns: [{ from: "src/assets", to: "assets" }],
+            }),
+            new PreviewClientPlugin(pulseConfig),
+        ],
+        watchOptions: {
+            ignored: /src\/server-function/,
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: "ts-loader",
+                    exclude: [/node_modules/, /dist/],
+                },
+                {
+                    test: /\.css$/i,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        "css-loader",
+                        {
+                            loader: "postcss-loader",
+                        },
+                    ],
+                },
+            ],
+        },
+        stats: {
+            all: false,
+            errors: true,
+            warnings: true,
+            logging: "warn",
+            colors: true,
+        },
+        infrastructureLogging: {
+            level: "warn",
+        },
+    };
+}

package/dist/lib/webpack/configs/utils.d.ts

@@ -0,0 +1,6 @@
+export declare function loadPulseConfig(): Promise<any>;
+export declare function getLocalNetworkIP(): string;
+export declare function readConfigFile(): Promise<any>;
+export declare function discoverAppSkillActions(): {
+    [x: string]: string;
+} | null;

package/dist/lib/webpack/configs/utils.js

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { existsSync } from "fs";
+import fs from "fs/promises";
+import { globSync } from "glob";
+import { networkInterfaces } from "os";
+import path from "path";
+import { Project, SyntaxKind } from "ts-morph";
+import ts from "typescript";
+import { pathToFileURL } from "url";
+export async function loadPulseConfig() {
+    const projectDirName = process.cwd();
+    // compile to js file and import
+    const program = ts.createProgram({
+        rootNames: [path.join(projectDirName, "pulse.config.ts")],
+        options: {
+            module: ts.ModuleKind.ESNext,
+            target: ts.ScriptTarget.ES2020,
+            outDir: path.join(projectDirName, "node_modules/.pulse/config"),
+            esModuleInterop: true,
+            skipLibCheck: true,
+            forceConsistentCasingInFileNames: true,
+        },
+    });
+    program.emit();
+    // Fix imports in the generated js file for all files in node_modules/.pulse/config
+    globSync("node_modules/.pulse/config/**/*.js", {
+        cwd: projectDirName,
+        absolute: true,
+    }).forEach(async (jsFile) => {
+        let content = await fs.readFile(jsFile, "utf-8");
+        content = content.replace(/(from\s+["']\.\/[^\s"']+)(["'])/g, (match, p1, p2) => {
+            // No change if the import already has any extension
+            if (p1.match(/\.(js|cjs|mjs|ts|tsx|json)$/)) {
+                return match; // No change needed
+            }
+            return `${p1}.js${p2}`;
+        });
+        await fs.writeFile(jsFile, content);
+    });
+    // Copy package.json if exists
+    const pkgPath = path.join(projectDirName, "package.json");
+    if (existsSync(pkgPath)) {
+        const destPath = path.join(projectDirName, "node_modules/.pulse/config/package.json");
+        await fs.copyFile(pkgPath, destPath);
+    }
+    const compiledConfig = path.join(projectDirName, "node_modules/.pulse/config/pulse.config.js");
+    const mod = await import(pathToFileURL(compiledConfig).href);
+    // delete the compiled config after importing
+    await fs.rm(path.join(projectDirName, "node_modules/.pulse/config"), {
+        recursive: true,
+        force: true,
+    });
+    return mod.default;
+}
+export function getLocalNetworkIP() {
+    const interfaces = networkInterfaces();
+    for (const iface of Object.values(interfaces)) {
+        if (!iface)
+            continue;
+        for (const config of iface) {
+            if (config.family === "IPv4" && !config.internal) {
+                return config.address; // Returns the first non-internal IPv4 address
+            }
+        }
+    }
+    return "localhost"; // Fallback
+}
+export async function readConfigFile() {
+    // Read pulse.config.json from dist/client
+    // Wait until dist/pulse.config.json exists
+    while (true) {
+        try {
+            await fs.access("dist/pulse.config.json");
+            break;
+        }
+        catch (err) {
+            // Wait for 100ms before trying again
+            await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+    }
+    const data = await fs.readFile("dist/pulse.config.json", "utf-8");
+    return JSON.parse(data);
+}
+export function discoverAppSkillActions() {
+    // Get all .ts files under src/skill and read use default exports as entry points
+    const files = globSync("./src/skill/*/action.ts");
+    const entryPoints = files
+        .map((file) => file.replaceAll("\\", "/"))
+        .map((file) => {
+        // Read default export info in the file using ts-morph to get the function name, and use the function name as the entry point key instead of the file name
+        const project = new Project({
+            tsConfigFilePath: path.join(process.cwd(), "node_modules/.pulse/tsconfig.server.json"),
+        });
+        const sourceFile = project.addSourceFileAtPath(file);
+        const defaultExportSymbol = sourceFile.getDefaultExportSymbol();
+        if (!defaultExportSymbol) {
+            console.warn(`No default export found in action file ${file}. Skipping...`);
+            return null;
+        }
+        const defaultExportDeclarations = defaultExportSymbol.getDeclarations();
+        if (defaultExportDeclarations.length === 0) {
+            console.warn(`No declarations found for default export in action file ${file}. Skipping...`);
+            return null;
+        }
+        const funcDecl = defaultExportDeclarations[0]?.asKind(SyntaxKind.FunctionDeclaration);
+        if (!funcDecl) {
+            console.warn(`Default export in action file ${file} is not a function declaration. Skipping...`);
+            return null;
+        }
+        return {
+            ["./skill/" + funcDecl.getName()]: "./" + file,
+        };
+    })
+        .reduce((acc, curr) => {
+        return { ...acc, ...curr };
+    }, {});
+    return entryPoints;
+}

package/dist/lib/webpack/webpack-config.d.ts

@@ -0,0 +1 @@
+export declare function createWebpackConfig(isPreview: boolean, buildTarget: "client" | "server" | "both", mode: "development" | "production"): Promise<import("webpack").Configuration[]>;

package/dist/lib/webpack/webpack-config.js

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { makeMFClientConfig } from "./configs/mf-client.js";
+import { makeMFServerConfig } from "./configs/mf-server.js";
+import { makePreviewClientConfig } from "./configs/preview.js";
+export async function createWebpackConfig(isPreview, buildTarget, mode) {
+    if (isPreview) {
+        const previewClientConfig = await makePreviewClientConfig("development");
+        const mfServerConfig = await makeMFServerConfig("development");
+        return [previewClientConfig, mfServerConfig];
+    }
+    else if (buildTarget === "server") {
+        const mfServerConfig = await makeMFServerConfig(mode);
+        return [mfServerConfig];
+    }
+    else if (buildTarget === "client") {
+        const mfClientConfig = await makeMFClientConfig(mode);
+        return [mfClientConfig];
+    }
+    else {
+        const mfClientConfig = await makeMFClientConfig(mode);
+        const mfServerConfig = await makeMFServerConfig(mode);
+        return [mfClientConfig, mfServerConfig];
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pulse-editor/cli",
-	"version": "0.1.1-beta.33",
+	"version": "0.1.1-beta.36",
 	"license": "MIT",
 	"bin": {
 		"pulse": "dist/cli.js"
@@ -22,7 +22,7 @@
 		"@module-federation/enhanced": "2.0.1",
 		"@module-federation/node": "2.7.32",
 		"@module-federation/runtime": "2.0.1",
-		"@pulse-editor/shared-utils": "^0.1.1-beta.67",
+		"@pulse-editor/shared-utils": "^0.1.1-beta.76",
 		"concurrently": "^9.2.1",
 		"connect-livereload": "^0.6.1",
 		"copy-webpack-plugin": "^13.0.1",
@@ -42,6 +42,7 @@
 		"mini-css-extract-plugin": "^2.10.0",
 		"openid-client": "^6.8.2",
 		"rimraf": "^6.1.3",
+		"ts-morph": "^27.0.2",
 		"tsx": "^4.21.0",
 		"webpack": "^5.105.2",
 		"webpack-dev-server": "^5.2.3"
@@ -54,14 +55,12 @@
 		"@types/livereload": "^0.9.5",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
-		"@vdemedes/prettier-config": "^2.0.1",
 		"ava": "^6.4.1",
 		"chalk": "^5.6.2",
 		"eslint-config-xo-react": "^0.29.0",
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^7.0.1",
 		"ink-testing-library": "^4.0.0",
-		"prettier": "^3.8.1",
 		"react": "19.2.4",
 		"react-dom": "19.2.4",
 		"ts-node": "^10.9.2",
@@ -87,6 +86,5 @@
 		"rules": {
 			"react/prop-types": "off"
 		}
-	},
-	"prettier": "@vdemedes/prettier-config"
+	}
 }