@pulse-editor/cli 0.1.5 → 0.1.7

package/dist/lib/server/express.js

@@ -29,6 +29,8 @@ if (isDev || isPreview) {
         console.log("✅ LiveReload connected");
     });
 }
+const skillActions = pulseConfig?.actions || [];
+const skillActionNames = skillActions.map((a) => a.name);
 const app = express();
 app.use(cors());
 // Inject the client-side livereload script into HTML responses
@@ -108,8 +110,6 @@ if (isPreview) {
     });
     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)) {
@@ -137,6 +137,29 @@ if (isPreview) {
 else if (isDev) {
     /* Dev mode  */
     app.use(`/${pulseConfig.id}/${pulseConfig.version}`, express.static("dist"));
+    // Expose skill actions as REST API endpoints in dev and preview modes
+    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 {

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

@@ -1,6 +1,47 @@
 const {createInstance} = require('@module-federation/runtime');
 
+const FETCH_PATCH_STATE_KEY = '__pulseFetchPatchState__';
+
+function isAbsoluteUrl(url) {
+	return /^[a-zA-Z][a-zA-Z\d+.-]*:/.test(url);
+}
+
+function ensureFetchPatched(origin) {
+	if (typeof globalThis.fetch !== 'function') {
+		return;
+	}
+
+	if (!globalThis[FETCH_PATCH_STATE_KEY]) {
+		const originalFetch = globalThis.fetch.bind(globalThis);
+		const state = {
+			baseOrigin: origin,
+			originalFetch,
+		};
+
+		globalThis.fetch = (input, init) => {
+			const currentBaseOrigin = state.baseOrigin;
+
+			if (
+				typeof input === 'string' &&
+				currentBaseOrigin &&
+				!isAbsoluteUrl(input)
+			) {
+				return state.originalFetch(new URL(input, currentBaseOrigin).toString(), init);
+			}
+
+			return state.originalFetch(input, init);
+		};
+
+		globalThis[FETCH_PATCH_STATE_KEY] = state;
+		return;
+	}
+
+	globalThis[FETCH_PATCH_STATE_KEY].baseOrigin = origin;
+}
+
 async function importRemoteModule(func, appId, origin, version) {
+	ensureFetchPatched(origin);
+
 	const instance = createInstance({
 		name: 'server_function_runner',
 		remotes: [

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

@@ -46,7 +46,42 @@ class ErrorBoundary extends React.Component {
     }
 }
 const root = ReactDOM.createRoot(document.getElementById('root'));
+const PREVIEW_MODE_ERRORS = [
+    "Current window's ID is not defined.",
+];
+function isPreviewModeError(error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return PREVIEW_MODE_ERRORS.some((msg) => message.includes(msg));
+}
+function showPreviewModeWarning() {
+    const existing = document.getElementById('__pulse_preview_warning__');
+    if (existing)
+        return;
+    const banner = document.createElement('div');
+    banner.id = '__pulse_preview_warning__';
+    Object.assign(banner.style, {
+        position: 'fixed',
+        bottom: '1rem',
+        right: '1rem',
+        background: '#2a2000',
+        border: '1px solid #665500',
+        borderRadius: '8px',
+        padding: '0.75rem 1rem',
+        fontFamily: 'monospace',
+        fontSize: '0.8rem',
+        color: '#ffcc00',
+        maxWidth: '320px',
+        zIndex: '9999',
+        lineHeight: '1.4',
+    });
+    banner.textContent = '⚠ Preview mode: some Pulse Editor platform APIs are not available and will not work.';
+    document.body.appendChild(banner);
+}
 function showError(error) {
+    if (isPreviewModeError(error)) {
+        showPreviewModeWarning();
+        return;
+    }
     root.render(_jsx(ErrorPage, { error: error }));
 }
 // Fallback: catch errors that slip past the React error boundary

package/dist/lib/server/utils.d.ts

@@ -0,0 +1 @@
+export declare function readConfigFile(): Promise<any>;

package/dist/lib/server/utils.js

@@ -0,0 +1,17 @@
+import fs from 'fs/promises';
+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);
+}

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

@@ -51,8 +51,6 @@ class MFClientPlugin {
                 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 {
@@ -63,8 +61,6 @@ class MFClientPlugin {
                 }
                 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));
                 }
             });
         }
@@ -106,6 +102,13 @@ export async function makeMFClientConfig(mode) {
     const pulseConfig = await loadPulseConfig();
     const mainComponent = "./src/main.tsx";
     const actions = discoverAppSkillActions();
+    console.log(`\n🧩 App skill actions:
+${Object.entries(actions)
+        .map(([name, file]) => {
+        return `  - ${name.slice(2)} (from ${file})`;
+    })
+        .join("\n")}
+`);
     return {
         mode: mode,
         name: "client",

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

@@ -46,13 +46,15 @@ class MFServerPlugin {
                         : false;
                     if (isActionChange) {
                         console.log(`[Server] Detected changes in actions. Recompiling...`);
-                        compileAppActionSkills(this.pulseConfig);
+                        this.pulseConfig = compileAppActionSkills(this.pulseConfig);
+                        this.saveConfig();
                     }
                 }
                 else {
                     console.log(`[Server] 🔄 Building app...`);
                     await this.compileServerFunctions(compiler);
-                    compileAppActionSkills(this.pulseConfig);
+                    this.pulseConfig = compileAppActionSkills(this.pulseConfig);
+                    this.saveConfig();
                     console.log(`[Server] ✅ Successfully built server.`);
                     const funcs = discoverServerFunctions();
                     console.log(`\n🛜 Server functions:
@@ -83,7 +85,8 @@ ${Object.entries(funcs)
                 else {
                     try {
                         await this.compileServerFunctions(compiler);
-                        compileAppActionSkills(this.pulseConfig);
+                        this.pulseConfig = compileAppActionSkills(this.pulseConfig);
+                        this.saveConfig();
                     }
                     catch (err) {
                         console.error(`[Server] ❌ Error during compilation:`, err);
@@ -104,6 +107,10 @@ ${Object.entries(funcs)
             console.log("Continuing...");
         }
     }
+    saveConfig() {
+        const filePath = path.resolve(this.projectDirName, "dist/pulse.config.json");
+        fs.writeFileSync(filePath, JSON.stringify(this.pulseConfig, null, 2));
+    }
     /**
      * Programmatically call webpack to compile server functions
      * whenever there are changes in the src/server-function directory.

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

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

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

@@ -1,133 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import mfNode from "@module-federation/node";
 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 wp from "webpack";
-import { compileAppActionSkills, discoverAppSkillActions, getLocalNetworkIP, loadPulseConfig, } from "./utils.js";
-const { NodeFederationPlugin } = mfNode;
-const { webpack } = wp;
-class MFPreviewPlugin {
-    projectDirName;
-    pulseConfig;
-    constructor(pulseConfig) {
-        this.projectDirName = process.cwd();
-        this.pulseConfig = pulseConfig;
-    }
-    apply(compiler) {
-        let isFirstRun = true;
-        compiler.hooks.environment.tap("WatchSkillPlugin", () => {
-            compiler.hooks.thisCompilation.tap("WatchActions", (compilation) => {
-                compilation.contextDependencies.add(path.resolve(this.projectDirName, "src/skill"));
-            });
-        });
-        compiler.hooks.watchRun.tap("MFPreviewPlugin", async () => {
-            if (!isFirstRun) {
-                const isActionChange = compiler.modifiedFiles
-                    ? Array.from(compiler.modifiedFiles).some((file) => file.includes("src/skill"))
-                    : false;
-                if (isActionChange) {
-                    console.log("[preview-server] Detected changes in actions. Recompiling...");
-                    await this.compileActions(compiler);
-                }
-            }
-            else {
-                console.log("[preview-server] 🔄 Building...");
-                await this.compileActions(compiler);
-                console.log("[preview-server] ✅ Successfully built preview server.");
-            }
-        });
-        compiler.hooks.done.tap("MFPreviewPlugin", () => {
-            if (isFirstRun) {
-                isFirstRun = false;
-            }
-            else {
-                console.log("[preview-server] ✅ Reload finished.");
-            }
-            fs.writeFileSync(path.resolve(this.projectDirName, "dist/pulse.config.json"), JSON.stringify(this.pulseConfig, null, 2));
-        });
-    }
-    makeNodeFederationPlugin() {
-        const actions = discoverAppSkillActions();
-        return new NodeFederationPlugin({
-            name: this.pulseConfig.id + "_server",
-            remoteType: "script",
-            useRuntimePlugin: true,
-            library: { type: "commonjs-module" },
-            filename: "remoteEntry.js",
-            exposes: { ...actions },
-        }, {});
-    }
-    async compileActions(compiler) {
-        compileAppActionSkills(this.pulseConfig);
-        const options = {
-            ...compiler.options,
-            watch: false,
-            plugins: [this.makeNodeFederationPlugin()],
-        };
-        const newCompiler = webpack(options);
-        return new Promise((resolve, reject) => {
-            newCompiler?.run((err, stats) => {
-                if (err) {
-                    console.error("[preview-server] ❌ Error during recompilation:", err);
-                    reject(err);
-                }
-                else if (stats?.hasErrors()) {
-                    console.error("[preview-server] ❌ Compilation errors:", stats.toJson().errors);
-                    reject(new Error("Compilation errors"));
-                }
-                else {
-                    console.log("[preview-server] ✅ Compiled actions successfully.");
-                    resolve();
-                }
-            });
-        });
-    }
-}
-export async function makeMFPreviewConfig() {
-    const projectDirName = process.cwd();
-    const pulseConfig = await loadPulseConfig();
-    return {
-        mode: "development",
-        name: "preview-server",
-        entry: {},
-        target: "async-node",
-        output: {
-            publicPath: "auto",
-            path: path.resolve(projectDirName, "dist/server"),
-        },
-        resolve: {
-            extensions: [".ts", ".js"],
-        },
-        plugins: [new MFPreviewPlugin(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",
-        },
-    };
-}
+import { getLocalNetworkIP, loadPulseConfig } from "./utils.js";
 class PreviewClientPlugin {
     projectDirName;
     pulseConfig;
@@ -151,13 +28,13 @@ class PreviewClientPlugin {
         // 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! 🚀
+                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.");
                 const skillActions = this.pulseConfig?.actions || [];
@@ -173,6 +50,8 @@ class PreviewClientPlugin {
             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));
         });
     }
 }

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

@@ -8,7 +8,7 @@ export declare function discoverServerFunctions(): {
 };
 export declare function discoverAppSkillActions(): {
     [x: string]: string;
-} | null;
+};
 export declare function parseTypeDefs(jsDocs: JSDoc[]): Record<string, Record<string, {
     type: string;
     description: string;
@@ -17,5 +17,5 @@ export declare function normalizeJSDocPropertyName(name: string | undefined): st
 export declare function isPromiseLikeType(type: import("ts-morph").Type): boolean;
 export declare function unwrapPromiseLikeType(type: import("ts-morph").Type): import("ts-morph").Type<import("ts-morph").ts.Type>;
 export declare function getActionType(text: string): TypedVariableType;
-export declare function compileAppActionSkills(pulseConfig: any): void;
+export declare function compileAppActionSkills(pulseConfig: any): any;
 export declare function generateTempTsConfig(): void;

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

@@ -137,6 +137,7 @@ export function discoverAppSkillActions() {
             ["./skill/" + actionName]: "./" + file,
         };
     })
+        .filter((entry) => entry !== null)
         .reduce((acc, curr) => {
         return { ...acc, ...curr };
     }, {});
@@ -225,6 +226,8 @@ export function compileAppActionSkills(pulseConfig) {
             if (declaration.getKind() !== SyntaxKind.FunctionDeclaration)
                 return;
             const funcDecl = declaration.asKindOrThrow(SyntaxKind.FunctionDeclaration);
+            // Get action name from path `src/skill/{actionName}/action.ts`
+            // Match `*/src/skill/{actionName}/action.ts` and extract {actionName}
             const pattern = /src\/skill\/([^\/]+)\/action\.ts$/;
             const match = file.replaceAll("\\", "/").match(pattern);
             if (!match) {
@@ -300,9 +303,11 @@ export function compileAppActionSkills(pulseConfig) {
                     params[name] = variable;
                 });
             }
+            /* Extract return type from JSDoc */
             const rawReturnType = funcDecl.getReturnType();
             const isPromiseLikeReturn = isPromiseLikeType(rawReturnType);
             const returnType = unwrapPromiseLikeType(rawReturnType);
+            // Check if the return type is an object
             if (!returnType.isObject()) {
                 console.warn(`[Action Registration] Function ${actionName}'s return type should be an object. Skipping...`);
                 return;
@@ -311,13 +316,17 @@ export function compileAppActionSkills(pulseConfig) {
             const returnProperties = returnType.getProperties();
             const outputTypeDef = typeDefs["output"] ?? {};
             const hasOutputTypeDef = !!typeDefs["output"];
-            if (returnProperties.length > 0 && !hasOutputTypeDef && !isPromiseLikeReturn) {
+            if (returnProperties.length > 0 &&
+                !hasOutputTypeDef &&
+                !isPromiseLikeReturn) {
                 throw new Error(`[Action Validation] Action "${actionName}" in ${file} returns properties but is missing an ` +
                     `"@typedef {Output}" JSDoc block. Please document all return values with ` +
                     `@typedef {Output} and @property tags.` +
                     `Run \`pulse skill fix ${actionName}\` to automatically add a JSDoc template for this action.`);
             }
-            if (returnProperties.length > 0 && !hasOutputTypeDef && isPromiseLikeReturn) {
+            if (returnProperties.length > 0 &&
+                !hasOutputTypeDef &&
+                isPromiseLikeReturn) {
                 console.warn(`[Action Validation] Action "${actionName}" in ${file} is missing an "@typedef {Object} output" JSDoc block. ` +
                     `Falling back to TypeScript-inferred return metadata because the action returns a Promise.`);
             }
@@ -361,6 +370,7 @@ export function compileAppActionSkills(pulseConfig) {
         });
     });
     pulseConfig.actions = actions;
+    return pulseConfig;
 }
 // Generate tsconfig for server functions
 export function generateTempTsConfig() {

package/dist/lib/webpack/dist/pregistered-actions.d.ts

@@ -0,0 +1,2 @@
+import { Action } from "@pulse-editor/shared-utils";
+export declare const preRegisteredActions: Record<string, Action>;

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

@@ -0,0 +1,7 @@
+import { AppConfig } from "@pulse-editor/shared-utils";
+/**
+ * Pulse Editor Extension Config
+ *
+ */
+declare const config: AppConfig;
+export default config;

package/dist/lib/webpack/dist/src/lib/agents/code-modifier-agent.d.ts

@@ -0,0 +1,2 @@
+import { ChatPromptTemplate } from "@langchain/core/prompts";
+export declare const codeModifierAgentPrompt: ChatPromptTemplate<any, any>;

package/dist/lib/webpack/dist/src/lib/agents/vibe-coding-agent.d.ts

@@ -0,0 +1,3 @@
+import { MultiServerMCPClient } from "@langchain/mcp-adapters";
+import { MessageStreamController } from "../streaming/message-stream-controller";
+export declare function runVibeCoding(mcpClient: MultiServerMCPClient, userPrompt: string, controller: MessageStreamController): Promise<void>;

package/dist/lib/webpack/dist/src/lib/mcp/utils.d.ts

@@ -0,0 +1,3 @@
+import { MultiServerMCPClient } from "@langchain/mcp-adapters";
+export declare function writeFileToFS(mcpClient: MultiServerMCPClient, uri: string, content: string): Promise<string>;
+export declare function callTerminal(mcpClient: MultiServerMCPClient, command: string): Promise<string>;

package/dist/lib/webpack/dist/src/lib/streaming/message-stream-controller.d.ts

@@ -0,0 +1,10 @@
+import { AgentTaskMessageData } from "../types";
+export declare class MessageStreamController {
+    private controller;
+    private msgCounter;
+    private messages;
+    private timeCountMap;
+    constructor(controller: ReadableStreamDefaultController);
+    enqueueNew(data: AgentTaskMessageData, isFinal: boolean): number;
+    enqueueUpdate(data: AgentTaskMessageData, isFinal: boolean): void;
+}

package/dist/lib/webpack/dist/src/lib/types.d.ts

@@ -0,0 +1,58 @@
+export type VibeDevFlowNode = {
+    id: string;
+    children: VibeDevFlowNode[];
+};
+export declare enum AgentTaskMessageType {
+    Creation = "creation",
+    Update = "update"
+}
+export declare enum AgentTaskMessageDataType {
+    Notification = "notification",
+    ToolCall = "toolCall",
+    ArtifactOutput = "artifactOutput"
+}
+/**
+ * Data associated with an AgentTaskItem.
+ * The fields included depend on the type of the task item.
+ *
+ * @property type - The type of the task item, defined by the AgentTaskItemType enum.
+ * @property title - (Optional) A brief title or summary of the task item.
+ * @property description - (Optional) A detailed description of the task item.
+ * @property toolName - (Optional) The name of the tool being called (if applicable).
+ * @property parameters - (Optional) A record of parameters associated with the tool call (if applicable).
+ * @property error - (Optional) An error message if the task item represents an error.
+ * @property result - (Optional) The result or output of the task item (if applicable).
+ */
+export type AgentTaskMessageData = {
+    type?: AgentTaskMessageDataType;
+    title?: string;
+    description?: string;
+    toolName?: string;
+    parameters?: Record<string, unknown>;
+    error?: string;
+    result?: string;
+};
+/**
+ * Represents a single task item generated by the agent.
+ * Each task item can be of different types such as tool calls, notifications, or errors.
+ *
+ * @property type - The type of the task item, defined by the AgentTaskItemType enum.
+ * @property messageId - The unique identifier for the task item.
+ * This is an incremental number representing the n-th task item.
+ * @property data - The data associated with the task item, which varies based on the type.
+ * @property isFinal - (Optional) Indicates if the task item is final and no further updates are expected.
+ */
+export type AgentTaskMessage = {
+    type: AgentTaskMessageType;
+    messageId: number;
+    data: AgentTaskMessageData;
+    isFinal?: boolean;
+};
+export type AgentTaskMessageUpdate = {
+    type: AgentTaskMessageType;
+    messageId: number;
+    updateType: "append";
+    delta: AgentTaskMessageData;
+    isFinal?: boolean;
+    timeUsedSec?: string;
+};

package/dist/lib/webpack/dist/src/server-function/generate-code/v1/generate.d.ts

@@ -0,0 +1,5 @@
+/**
+ *  An example function to echo the body of a POST request.
+ *  This route is accessible at /server-function/echo
+ */
+export default function generate(req: Request): Promise<Response>;

package/dist/lib/webpack/dist/src/server-function/generate-code/v2/generate.d.ts

@@ -0,0 +1 @@
+export default function handler(req: Request): Promise<Response>;

package/dist/lib/webpack/tsconfig.server.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "declaration": true,
+        "outDir": "dist",
+    },
+    "include": [
+        "../../../../../../src/server-function/**/*",
+        "../../../../../../pulse.config.ts",
+        "../../../../../../global.d.ts",
+    ],
+    "exclude": [
+        "../../../../../../node_modules",
+        "../../../../../../dist",
+    ]
+}

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

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

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

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

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

@@ -0,0 +1,527 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { networkInterfaces } from 'os';
+import path from 'path';
+import { globSync } from 'glob';
+import fs from 'fs';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import ts from 'typescript';
+import { pathToFileURL } from 'url';
+import mfNode from '@module-federation/node';
+const { NodeFederationPlugin } = mfNode;
+import wp from 'webpack';
+const { webpack } = wp;
+export async function createWebpackConfig(isPreview, buildTarget, mode) {
+    const projectDirName = process.cwd();
+    async function loadPulseConfig() {
+        // 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(jsFile => {
+            let content = fs.readFileSync(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}`;
+            });
+            fs.writeFileSync(jsFile, content);
+        });
+        // Copy package.json if exists
+        const pkgPath = path.join(projectDirName, 'package.json');
+        if (fs.existsSync(pkgPath)) {
+            const destPath = path.join(projectDirName, 'node_modules/.pulse/config/package.json');
+            fs.copyFileSync(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
+        fs.rmSync(path.join(projectDirName, 'node_modules/.pulse/config'), {
+            recursive: true,
+            force: true,
+        });
+        return mod.default;
+    }
+    const pulseConfig = await loadPulseConfig();
+    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
+    }
+    const origin = getLocalNetworkIP();
+    const previewStartupMessage = `
+🎉 Your Pulse extension preview \x1b[1m${pulseConfig.displayName}\x1b[0m is LIVE! 
+
+⚡️ Local: http://localhost:3030
+⚡️ Network: http://${origin}:3030
+
+✨ Try it out in your browser and let the magic happen! 🚀
+`;
+    const devStartupMessage = `
+🎉 Your Pulse extension \x1b[1m${pulseConfig.displayName}\x1b[0m is LIVE! 
+
+⚡️ Local: http://localhost:3030/${pulseConfig.id}/${pulseConfig.version}/
+⚡️ Network: http://${origin}:3030/${pulseConfig.id}/${pulseConfig.version}/
+
+✨ Try it out in the Pulse Editor and let the magic happen! 🚀
+`;
+    // #region Node Federation Plugin for Server Functions
+    function 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();
+        console.log(`Discovered server functions:
+${Object.entries(funcs)
+            .map(([name, file]) => {
+            return `  - ${name.slice(2)} (from ${file})`;
+        })
+            .join('\n')}
+`);
+        return new NodeFederationPlugin({
+            name: pulseConfig.id + '_server',
+            remoteType: 'script',
+            useRuntimePlugin: true,
+            library: { type: 'commonjs-module' },
+            filename: 'remoteEntry.js',
+            exposes: {
+                ...funcs,
+            },
+        }, {});
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function compileServerFunctions(compiler) {
+        // 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...');
+        }
+        // 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
+                makeNodeFederationPlugin(),
+            ],
+        };
+        const newCompiler = webpack(options);
+        // Run the new compiler
+        newCompiler?.run((err, stats) => {
+            if (err) {
+                console.error(`[Server] ❌ Error during recompilation:`, err);
+            }
+            else if (stats?.hasErrors()) {
+                console.error(`[Server] ❌ Compilation errors:`, stats.toJson().errors);
+            }
+            else {
+                console.log(`[Server] ✅ Compiled server functions successfully.`);
+            }
+        });
+    }
+    // #endregion
+    // #region Source file parser for Pulse Config plugin
+    class PulseConfigPlugin {
+        requireFS = false;
+        apply(compiler) {
+            compiler.hooks.beforeCompile.tap('PulseConfigPlugin', () => {
+                this.requireFS = false;
+                globSync(['src/**/*.tsx', 'src/**/*.ts']).forEach(file => {
+                    const source = fs.readFileSync(file, 'utf8');
+                    this.scanSource(source);
+                });
+                // Persist result
+                pulseConfig.requireWorkspace = this.requireFS;
+            });
+        }
+        isWorkspaceHook(node) {
+            return (ts.isCallExpression(node) &&
+                ts.isIdentifier(node.expression) &&
+                [
+                    'useFileSystem',
+                    'useFile',
+                    'useReceiveFile',
+                    'useTerminal',
+                    'useWorkspaceInfo',
+                ].includes(node.expression.text));
+        }
+        scanSource(sourceText) {
+            const sourceFile = ts.createSourceFile('temp.tsx', sourceText, ts.ScriptTarget.Latest, true);
+            const visit = (node) => {
+                // Detect: useFileSystem(...)
+                if (this.isWorkspaceHook(node)) {
+                    this.requireFS = true;
+                }
+                ts.forEachChild(node, visit);
+            };
+            visit(sourceFile);
+        }
+    }
+    // #endregion
+    // #region Webpack Configs
+    const previewClientConfig = {
+        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 PulseConfigPlugin(),
+            new HtmlWebpackPlugin({
+                template: './node_modules/.pulse/server/preview/frontend/index.html',
+            }),
+            new MiniCssExtractPlugin({
+                filename: 'globals.css',
+            }),
+            new CopyWebpackPlugin({
+                patterns: [{ from: 'src/assets', to: 'assets' }],
+            }),
+            {
+                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) {
+                            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(projectDirName, 'dist/client/pulse.config.json'), JSON.stringify(pulseConfig, null, 2));
+                        fs.writeFileSync(path.resolve(projectDirName, 'dist/server/pulse.config.json'), JSON.stringify(pulseConfig, null, 2));
+                    });
+                },
+            },
+        ],
+        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',
+        },
+    };
+    const mfClientConfig = {
+        mode: mode,
+        name: 'client',
+        entry: './src/main.tsx',
+        output: {
+            publicPath: 'auto',
+            path: path.resolve(projectDirName, 'dist/client'),
+        },
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js'],
+        },
+        plugins: [
+            new PulseConfigPlugin(),
+            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,
+                filename: 'remoteEntry.js',
+                exposes: {
+                    './main': './src/main.tsx',
+                },
+                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
+                    },
+                },
+            }),
+            {
+                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()}`);
+                        });
+                        // 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(projectDirName, 'dist/client/pulse.config.json'), JSON.stringify(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(projectDirName, 'dist/client/pulse.config.json'), JSON.stringify(pulseConfig, null, 2));
+                            }
+                        });
+                    }
+                },
+            },
+        ],
+        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',
+        },
+    };
+    const mfServerConfig = {
+        mode: mode,
+        name: 'server',
+        entry: {},
+        target: 'async-node',
+        output: {
+            publicPath: 'auto',
+            path: path.resolve(projectDirName, 'dist/server'),
+        },
+        resolve: {
+            extensions: ['.ts', '.js'],
+        },
+        plugins: [
+            {
+                apply: compiler => {
+                    if (compiler.options.mode === 'development') {
+                        let isFirstRun = true;
+                        // Before build starts
+                        compiler.hooks.watchRun.tap('ReloadMessagePlugin', () => {
+                            if (!isFirstRun) {
+                                console.log(`[Server] 🔄 Reloading app...`);
+                            }
+                            else {
+                                console.log(`[Server] 🔄 Building app...`);
+                            }
+                            compileServerFunctions(compiler);
+                        });
+                        // After build finishes
+                        compiler.hooks.done.tap('ReloadMessagePlugin', () => {
+                            if (isFirstRun) {
+                                console.log(`[Server] ✅ Successfully built server.`);
+                                isFirstRun = false;
+                            }
+                            else {
+                                console.log(`[Server] ✅ Reload finished.`);
+                            }
+                        });
+                        // Watch for changes in the server-function directory to trigger rebuilds
+                        compiler.hooks.thisCompilation.tap('WatchServerFunctions', compilation => {
+                            compilation.contextDependencies.add(path.resolve(projectDirName, 'src/server-function'));
+                        });
+                    }
+                    else {
+                        // Print build success/failed message
+                        compiler.hooks.done.tap('BuildMessagePlugin', stats => {
+                            if (stats.hasErrors()) {
+                                console.log(`[Server] ❌ Failed to build server.`);
+                            }
+                            else {
+                                compileServerFunctions(compiler);
+                                console.log(`[Server] ✅ Successfully built server.`);
+                            }
+                        });
+                    }
+                },
+            },
+        ],
+        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',
+        },
+    };
+    // #endregion
+    if (isPreview) {
+        return [previewClientConfig, mfServerConfig];
+    }
+    else if (buildTarget === 'server') {
+        return [mfServerConfig];
+    }
+    else if (buildTarget === 'client') {
+        return [mfClientConfig];
+    }
+    else {
+        return [mfClientConfig, mfServerConfig];
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pulse-editor/cli",
-	"version": "0.1.5",
+	"version": "0.1.7",
 	"license": "MIT",
 	"bin": {
 		"pulse": "dist/cli.js"
@@ -13,7 +13,8 @@
 		"build": "tsx build.ts",
 		"dev": "tsx watch --include \"./src/**/*\" build.ts",
 		"test": "prettier --check . && xo && ava",
-		"link": "npm link"
+		"link": "npm link",
+		"pack": "npm run build && npm pack --pack-destination dist"
 	},
 	"files": [
 		"dist"