@pulse-editor/cli 0.1.1-beta.16 → 0.1.1-beta.18

package/dist/app.js

@@ -12,6 +12,7 @@ import Build from './components/commands/build.js';
 import Preview from './components/commands/preview.js';
 import Start from './components/commands/start.js';
 import Clean from './components/commands/clean.js';
+import Upgrade from './components/commands/upgrade.js';
 export default function App({ cli }) {
     const [command, setCommand] = useState(undefined);
     if (cli.flags.stage) {
@@ -24,5 +25,5 @@ export default function App({ cli }) {
         const cmd = cli.input[0] ?? 'help';
         setCommand(cmd);
     }, [cli.input]);
-    return (_jsxs(_Fragment, { children: [cli.flags.stage && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : command === 'dev' ? (_jsx(Dev, { cli: cli })) : command === 'build' ? (_jsx(Build, { cli: cli })) : command === 'preview' ? (_jsx(Preview, { cli: cli })) : command === 'start' ? (_jsx(Start, { cli: cli })) : command === 'clean' ? (_jsx(Clean, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
+    return (_jsxs(_Fragment, { children: [cli.flags.stage && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F  You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : command === 'dev' ? (_jsx(Dev, { cli: cli })) : command === 'build' ? (_jsx(Build, { cli: cli })) : command === 'preview' ? (_jsx(Preview, { cli: cli })) : command === 'start' ? (_jsx(Start, { cli: cli })) : command === 'clean' ? (_jsx(Clean, { cli: cli })) : command === 'upgrade' ? (_jsx(Upgrade, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
 }

package/dist/components/commands/build.js

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Build({ cli }) {
     useEffect(() => {
         async function buildProd() {
@@ -48,40 +49,11 @@ export default function Build({ cli }) {
                 }
             }
             await cleanDist();
-            if (buildTarget === undefined) {
-                // Start building
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                    },
-                });
+            try {
+                await webpackCompile('production', buildTarget);
             }
-            else if (buildTarget === 'client') {
-                // Start building client only
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                        BUILD_TARGET: 'client',
-                    },
-                });
-            }
-            else if (buildTarget === 'server') {
-                // Start building server only
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                        BUILD_TARGET: 'server',
-                    },
-                });
-            }
-            else {
-                console.error(`❌ Unknown build target: ${buildTarget}`);
+            catch (err) {
+                console.error('❌ Webpack build failed', err);
             }
         }
         buildProd();

package/dist/components/commands/dev.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text } from 'ink';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { getDepsBinPath } from '../../lib/execa-utils/deps.js';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Dev({ cli }) {
     useEffect(() => {
         async function startDevServer() {
@@ -47,21 +47,34 @@ export default function Dev({ cli }) {
             }
             // Start dev server
             await cleanDist();
-            await execa(getDepsBinPath('concurrently'), [
-                '--prefix',
-                'none',
-                '"npx webpack --mode development --watch"',
-                '"tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"',
+            // Start webpack in dev watch mode and watch for changes
+            const compiler = await webpackCompile('development', undefined, true);
+            // Start server with tsx
+            await execa(getDepsBinPath('tsx'), [
+                'watch',
+                '--clear-screen=false',
+                'node_modules/@pulse-editor/cli/dist/lib/server/express.js',
             ], {
                 stdio: 'inherit',
                 shell: true,
                 env: {
                     NODE_OPTIONS: '--import=tsx',
-                    NODE_ENV: 'development',
                 },
             });
+            // Handle process exit to close webpack compiler
+            process.on('SIGINT', () => {
+                if (compiler && typeof compiler.close === 'function') {
+                    compiler.close(() => {
+                        process.exit();
+                    });
+                }
+                else {
+                    process.exit();
+                }
+            });
         }
+        console.log('🚀 Starting development server...');
         startDevServer();
     }, []);
-    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting dev server..." }) }));
+    return _jsx(_Fragment, {});
 }

package/dist/components/commands/preview.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text } from 'ink';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { getDepsBinPath } from '../../lib/execa-utils/deps.js';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Preview({ cli }) {
     useEffect(() => {
         async function startPreviewServer() {
@@ -47,11 +47,28 @@ export default function Preview({ cli }) {
             }
             // Start preview server
             await cleanDist();
-            await execa(getDepsBinPath('concurrently'), [
-                '--prefix',
-                'none',
-                '"npx webpack --mode development --watch"',
-                '"tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"',
+            // await execa(
+            // 	getDepsBinPath('concurrently'),
+            // 	[
+            // 		'--prefix',
+            // 		'none',
+            // 		'"npx webpack --mode development --watch"',
+            // 		'"tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"',
+            // 	],
+            // 	{
+            // 		stdio: 'inherit',
+            // 		shell: true,
+            // 		env: {
+            // 			NODE_OPTIONS: '--import=tsx',
+            // 			PREVIEW: 'true',
+            // 		},
+            // 	},
+            // );
+            const compiler = await webpackCompile('preview', undefined, true);
+            await execa(getDepsBinPath('tsx'), [
+                'watch',
+                '--clear-screen=false',
+                'node_modules/@pulse-editor/cli/dist/lib/server/express.js',
             ], {
                 stdio: 'inherit',
                 shell: true,
@@ -60,8 +77,20 @@ export default function Preview({ cli }) {
                     PREVIEW: 'true',
                 },
             });
+            // Handle process exit to close webpack compiler
+            process.on('SIGINT', () => {
+                if (compiler && typeof compiler.close === 'function') {
+                    compiler.close(() => {
+                        process.exit();
+                    });
+                }
+                else {
+                    process.exit();
+                }
+            });
         }
+        console.log('🚀 Starting preview server...');
         startPreviewServer();
     }, []);
-    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting preview server..." }) }));
+    return _jsx(_Fragment, {});
 }

package/dist/components/commands/publish.js

@@ -5,12 +5,15 @@ import { checkToken, getToken } from '../../lib/token.js';
 import Spinner from 'ink-spinner';
 import fs from 'fs';
 import { $ } from 'execa';
+import { publishApp } from '../../lib/backend/publish-app.js';
 export default function Publish({ cli }) {
     const [isInProjectDir, setIsInProjectDir] = useState(false);
     const [isCheckingAuth, setIsCheckingAuth] = useState(true);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [isBuilding, setIsBuilding] = useState(false);
     const [isBuildingError, setIsBuildingError] = useState(false);
+    const [isZipping, setIsZipping] = useState(false);
+    const [isZippingError, setIsZippingError] = useState(false);
     const [isPublishing, setIsPublishing] = useState(false);
     const [isPublishingError, setIsPublishingError] = useState(false);
     const [isPublished, setIsPublished] = useState(false);
@@ -45,56 +48,39 @@ export default function Publish({ cli }) {
     // Build the extension
     useEffect(() => {
         async function buildExtension() {
-            setIsBuilding(true);
-            try {
-                await $ `npm run build`;
-            }
-            catch (error) {
-                setIsBuildingError(true);
-                setIsBuilding(false);
-                setFailureMessage('Build failed. Please run `npm run build` to see the error.');
-                return;
+            if (cli.flags.build) {
+                setIsBuilding(true);
+                try {
+                    await $ `npm run build`;
+                }
+                catch (error) {
+                    setIsBuildingError(true);
+                    setFailureMessage('Build failed. Please run `npm run build` to see the error.');
+                    return;
+                }
+                finally {
+                    setIsBuilding(false);
+                }
             }
+            setIsZipping(true);
             // Zip the dist folder
             try {
                 await $({ cwd: 'dist' }) `zip -r ../node_modules/@pulse-editor/dist.zip *`;
             }
             catch (error) {
-                setIsBuildingError(true);
-                setIsBuilding(false);
+                setIsZippingError(true);
                 setFailureMessage('Failed to zip the build output.');
                 return;
             }
             finally {
-                setIsBuilding(false);
+                setIsZipping(false);
             }
             await publishExtension();
         }
         async function publishExtension() {
             setIsPublishing(true);
-            // Read pulse.config.json for visibility
-            const config = JSON.parse(fs.readFileSync('./dist/client/pulse.config.json', 'utf-8'));
-            const visibility = config.visibility;
-            // Upload the zip file to the server
             try {
-                const formData = new FormData();
-                const buffer = fs.readFileSync('./node_modules/@pulse-editor/dist.zip');
-                // @ts-ignore Create a Blob from the buffer
-                const blob = new Blob([buffer], {
-                    type: 'application/zip',
-                });
-                formData.append('file', blob, 'dist.zip');
-                formData.append('visibility', visibility);
-                // Send the file to the server
-                const res = await fetch(cli.flags.stage
-                    ? 'https://localhost:8080/api/app/publish'
-                    : 'https://pulse-editor.com/api/app/publish', {
-                    method: 'POST',
-                    headers: {
-                        Authorization: `Bearer ${getToken(cli.flags.stage)}`,
-                    },
-                    body: formData,
-                });
+                const res = await publishApp(cli.flags.stage);
                 if (res.status === 200) {
                     setIsPublished(true);
                 }
@@ -122,5 +108,5 @@ export default function Publish({ cli }) {
             buildExtension();
         }
     }, [isAuthenticated]);
-    return (_jsx(_Fragment, { children: !isInProjectDir ? (_jsx(Text, { color: 'redBright', children: "\u26D4 The current directory does not contain a Pulse Editor project." })) : isCheckingAuth ? (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Checking authentication..." })] })) : isAuthenticated ? (_jsxs(_Fragment, { children: [isBuilding && (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Building..." })] })), isBuildingError && (_jsx(Text, { color: 'redBright', children: "\u274C Error building the extension. Please run `npm run build` to see the error." })), isPublishing && (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Publishing..." })] })), isPublishingError && (_jsxs(_Fragment, { children: [_jsx(Text, { color: 'redBright', children: "\u274C Failed to publish extension." }), failureMessage && (_jsxs(Text, { color: 'redBright', children: ["Error: ", failureMessage] }))] })), isPublished && (_jsx(Text, { color: 'greenBright', children: "\u2705 Extension published successfully." }))] })) : (_jsxs(Text, { children: ["You are not authenticated or your access token is invalid. Publishing to Extension Marketplace is in Beta access. Please visit", _jsx(Text, { color: 'blueBright', children: " https://pulse-editor.com/beta " }), "to apply for Beta access."] })) }));
+    return (_jsx(_Fragment, { children: !isInProjectDir ? (_jsx(Text, { color: 'redBright', children: "\u26D4 The current directory does not contain a Pulse Editor project." })) : isCheckingAuth ? (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Checking authentication..." })] })) : !isAuthenticated ? (_jsxs(Text, { children: ["You are not authenticated or your access token is invalid. Publishing to Extension Marketplace is in Beta access. Please visit", _jsx(Text, { color: 'blueBright', children: " https://pulse-editor.com/beta " }), "to apply for Beta access."] })) : (_jsxs(_Fragment, { children: [isBuilding && (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Building..." })] })), isBuildingError && (_jsx(Text, { color: 'redBright', children: "\u274C Error building the extension. Please run `npm run build` to see the error." })), isZipping && (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Compressing build..." })] })), isZippingError && (_jsx(Text, { color: 'redBright', children: "\u274C Error zipping the build output." })), isPublishing && (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Publishing..." })] })), isPublishingError && (_jsxs(_Fragment, { children: [_jsx(Text, { color: 'redBright', children: "\u274C Failed to publish extension." }), failureMessage && (_jsxs(Text, { color: 'redBright', children: ["Error: ", failureMessage] }))] })), isPublished && (_jsx(Text, { color: 'greenBright', children: "\u2705 Extension published successfully." }))] })) }));
 }

package/dist/components/commands/upgrade.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Upgrade({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/upgrade.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { $ } from 'execa';
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import fs from 'fs';
+export default function Upgrade({ cli }) {
+    const [isInProjectDir, setIsInProjectDir] = useState(false);
+    const [step, setStep] = useState('check-config');
+    const [isError, setIsError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState(null);
+    useEffect(() => {
+        async function checkConfig() {
+            // Check if the current dir contains pulse.config.ts
+            const currentDir = process.cwd();
+            const pulseConfigPath = `${currentDir}/pulse.config.ts`;
+            if (fs.existsSync(pulseConfigPath)) {
+                setIsInProjectDir(true);
+            }
+            setStep('upgrade');
+        }
+        checkConfig();
+    }, []);
+    useEffect(() => {
+        async function start() {
+            try {
+                await upgradePackages();
+            }
+            catch (error) {
+                setIsError(true);
+                setErrorMessage(error.message);
+            }
+        }
+        if (isInProjectDir) {
+            start();
+        }
+    }, [isInProjectDir]);
+    async function upgradePackages() {
+        const tag = cli.flags.beta ? 'beta' : 'latest';
+        await $ `npm install react@${React.version} react-dom@${React.version} --save-exact --silent --force`;
+        await $ `npm install -D @pulse-editor/cli@${tag} --silent --force`;
+        await $ `npm install @pulse-editor/shared-utils@${tag} @pulse-editor/react-api@${tag} --silent --force`;
+        // Remove webpack.config.ts if exists
+        const webpackConfigPath = `${process.cwd()}/webpack.config.ts`;
+        if (fs.existsSync(webpackConfigPath)) {
+            fs.unlinkSync(webpackConfigPath);
+        }
+        // Uninstall @module-federation/node html-webpack-plugin copy-webpack-plugin glob mini-css-extract-plugin webpack webpack-cli webpack-dev-server
+        await $ `npm uninstall @module-federation/node html-webpack-plugin copy-webpack-plugin glob mini-css-extract-plugin webpack webpack-cli webpack-dev-server --silent --force`;
+        setStep('done');
+    }
+    return (_jsx(_Fragment, { children: isError ? (_jsxs(Text, { color: 'redBright', children: ["\u274C An error occurred: ", errorMessage || 'Unknown error'] })) : !isInProjectDir ? (_jsx(Text, { color: 'redBright', children: "\u26D4 The current directory does not contain a Pulse Editor project." })) : step === 'check-config' ? (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Checking configuration..." })] })) : step === 'upgrade' ? (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Upgrading packages..." })] }) })) : (_jsx(Box, { children: _jsx(Text, { color: 'greenBright', children: "\u2705 Upgrade completed successfully." }) })) }));
+}

package/dist/lib/backend/publish-app.d.ts

@@ -0,0 +1 @@
+export declare function publishApp(isStage: boolean): Promise<Response>;

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

@@ -0,0 +1,27 @@
+import { getToken } from '../token.js';
+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 visibility = config.visibility;
+    const formData = new FormData();
+    const buffer = fs.readFileSync('./node_modules/@pulse-editor/dist.zip');
+    // @ts-ignore Create a Blob from the buffer
+    const blob = new Blob([buffer], {
+        type: 'application/zip',
+    });
+    formData.append('file', blob, 'dist.zip');
+    formData.append('visibility', visibility);
+    // Send the file to the server
+    const res = await fetch(isStage
+        ? 'https://localhost:8080/api/app/publish'
+        : 'https://pulse-editor.com/api/app/publish', {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${getToken(isStage)}`,
+        },
+        body: formData,
+    });
+    return res;
+}

package/dist/lib/cli-flags.d.ts

@@ -25,5 +25,12 @@ export declare const flags: {
         type: "string";
         shortFlag: string;
     };
+    beta: {
+        type: "boolean";
+    };
+    build: {
+        type: "boolean";
+        default: true;
+    };
 };
 export type Flags = typeof flags;

package/dist/lib/cli-flags.js

@@ -29,4 +29,11 @@ export const flags = defineFlags({
         type: 'string',
         shortFlag: 't',
     },
+    beta: {
+        type: 'boolean',
+    },
+    build: {
+        type: 'boolean',
+        default: true,
+    },
 });

package/dist/lib/manual.js

@@ -27,6 +27,9 @@ const logout = `\
 `;
 const publish = `\
   publish         Publish Pulse Editor Extension in current directory to the Pulse Editor Platform.
+                  Flags:
+                    --noBuild
+                      Skip the build step before publishing.
 
 `;
 const create = `\
@@ -71,6 +74,13 @@ const start = `\
 const clean = `\
   clean           Clean the dist/ directory.
 
+`;
+const upgrade = `\
+  upgrade         Upgrade Pulse Editor CLI and related packages to the latest version.
+                  Flags:
+                    --beta
+                      Upgrade to the latest beta version.
+
 `;
 export const commandsManual = {
     help,
@@ -84,4 +94,5 @@ export const commandsManual = {
     build,
     start,
     clean,
+    upgrade,
 };

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

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

package/dist/lib/webpack/compile.js

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

package/dist/lib/webpack/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,545 @@
+/* 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...');
+        }
+        // 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 previewHostConfig = {
+        mode: mode,
+        entry: './node_modules/@pulse-editor/cli/dist/lib/server/preview/backend/index.js',
+        target: 'async-node',
+        output: {
+            publicPath: 'auto',
+            library: { type: 'commonjs-module' },
+            path: path.resolve(projectDirName, 'dist/preview/backend'),
+            filename: 'index.cjs',
+        },
+        resolve: {
+            extensions: ['.ts', '.js'],
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: [
+                        {
+                            loader: 'ts-loader',
+                            options: {
+                                transpileOnly: false, // Enables type-checking and .d.ts file emission
+                            },
+                        },
+                    ],
+                    exclude: [/node_modules/, /dist/],
+                },
+            ],
+        },
+        plugins: [
+            new NodeFederationPlugin({
+                remoteType: 'script',
+                name: 'preview_host',
+                useRuntimePlugin: true,
+                exposes: {},
+            }, {}),
+        ],
+        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: 'ts-loader',
+                    exclude: [/node_modules/, /dist/],
+                },
+            ],
+        },
+        stats: {
+            all: false,
+            errors: true,
+            warnings: true,
+            logging: 'warn',
+            colors: true,
+        },
+        infrastructureLogging: {
+            level: 'warn',
+        },
+    };
+    // #endregion
+    if (isPreview) {
+        return [previewClientConfig, previewHostConfig, 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.1-beta.16",
+	"version": "0.1.1-beta.18",
 	"license": "MIT",
 	"bin": {
 		"pulse": "dist/cli.js"
@@ -11,7 +11,7 @@
 	},
 	"scripts": {
 		"build": "tsx build.ts",
-		"dev": "tsx watch --include \"./source/**/*\" build.ts",
+		"dev": "tsx watch --include \"./src/**/*\" build.ts",
 		"test": "prettier --check . && xo && ava",
 		"link": "npm link"
 	},
@@ -19,6 +19,10 @@
 		"dist"
 	],
 	"dependencies": {
+		"@module-federation/enhanced": "0.21.6",
+		"@module-federation/node": "^2.7.25",
+		"@module-federation/runtime": "0.21.6",
+		"@pulse-editor/shared-utils": "^0.1.1-beta.67",
 		"concurrently": "^9.2.1",
 		"connect-livereload": "^0.6.1",
 		"cors": "^2.8.5",
@@ -34,12 +38,10 @@
 		"meow": "^14.0.0",
 		"openid-client": "^6.8.1",
 		"rimraf": "^6.1.2",
-		"tsx": "^4.21.0"
+		"tsx": "^4.21.0",
+		"webpack": "^5.104.0"
 	},
 	"devDependencies": {
-		"@module-federation/enhanced": "0.21.6",
-		"@module-federation/node": "2.7.25",
-		"@module-federation/runtime": "0.21.6",
 		"@sindresorhus/tsconfig": "^8.1.0",
 		"@types/connect-livereload": "^0.6.3",
 		"@types/cors": "^2.8.19",
@@ -50,20 +52,25 @@
 		"@vdemedes/prettier-config": "^2.0.1",
 		"ava": "^6.4.1",
 		"chalk": "^5.6.2",
+		"copy-webpack-plugin": "^13.0.1",
 		"eslint-config-xo-react": "^0.29.0",
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^7.0.1",
+		"glob": "^13.0.0",
+		"html-webpack-plugin": "^5.6.5",
 		"ink-testing-library": "^4.0.0",
+		"mini-css-extract-plugin": "^2.9.4",
 		"prettier": "^3.7.4",
-		"react": "19.2.2",
-		"react-dom": "19.2.2",
+		"react": "19.2.3",
+		"react-dom": "19.2.3",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.9.3",
+		"webpack-dev-server": "^5.2.2",
 		"xo": "^1.2.3"
 	},
 	"peerDependencies": {
-		"react": "19.2.2",
-		"react-dom": "19.2.2"
+		"react": "19.2.3",
+		"react-dom": "19.2.3"
 	},
 	"ava": {
 		"extensions": {
@@ -82,4 +89,4 @@
 		}
 	},
 	"prettier": "@vdemedes/prettier-config"
-}
+}