Merge pull request #845 from Lemoncode/dev

Merge to Main

Author: manudous

apps/web/src/pods/toolbar/components/new-button/new-button.tsx

@@ -1,13 +1,20 @@
 import { NewIcon } from '#common/components/icons/new-button.components';
-import classes from '#pods/toolbar/toolbar.pod.module.css';
+import { isVSCodeEnv } from '#common/utils/env.utils';
+import { sendToExtension } from '#common/utils/vscode-bridge.utils';
 import { useCanvasContext } from '#core/providers';
-import { ToolbarButton } from '../toolbar-button';
+import classes from '#pods/toolbar/toolbar.pod.module.css';
+import { APP_MESSAGE_TYPE } from '@lemoncode/quickmock-bridge-protocol';
 import { SHORTCUTS } from '../../shortcut/shortcut.const';
+import { ToolbarButton } from '../toolbar-button';
 
 export const NewButton = () => {
   const { createNewFullDocument: clearCanvas } = useCanvasContext();
 
   const handleClick = () => {
+    if (isVSCodeEnv()) {
+      sendToExtension({ type: APP_MESSAGE_TYPE.NEW_FILE });
+      return;
+    }
     clearCanvas();
   };
 

packages/bridge-protocol/src/constant.ts

@@ -10,4 +10,5 @@ export const APP_MESSAGE_TYPE = {
   SAVE: 'qm:save',
   RENDER_COMPLETE: 'qm:render-complete',
   WEBVIEW_READY: 'WEBVIEW_READY',
+  NEW_FILE: 'qm:new-file',
 } as const;

packages/bridge-protocol/src/model.ts

@@ -34,7 +34,8 @@ export type AppMessage =
   | {
       type: typeof APP_MESSAGE_TYPE.RENDER_COMPLETE;
       payload?: ContentBbox;
-    };
+    }
+  | { type: typeof APP_MESSAGE_TYPE.NEW_FILE };
 
 export type PayloadOf<U extends { type: string }, T extends U['type']> =
   Extract<U, { type: T }> extends { payload: infer P } ? P : undefined;

packages/vscode-extension/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lemoncode/quickmock-vscode-extension
 
+## 0.2.0
+
+### Minor Changes
+
+- 3cd4892: Toolbar's **New** button now creates a real `.qm` file when running inside the VS Code extension instead of just clearing the canvas.
+
+### Patch Changes
+
+- b7f9cf1: Fix editor failing to load files opened from outside the workspace. The webview HTML was assigned before registering `onDidReceiveMessage`, causing a race where the initial `READY` / `WEBVIEW_READY` message from the app could be lost and the file content never delivered. The listener is now registered before the HTML assignment.
+
 ## 0.1.0
 
 ### Minor Changes

packages/vscode-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickmock",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",

packages/vscode-extension/src/commands/new-wireframe.ts

@@ -0,0 +1,2 @@
+export * from './new-wireframe.id';
+export * from './new-wireframe.command';

packages/vscode-extension/src/commands/new-wireframe/index.ts

@@ -0,0 +1,14 @@
+import * as vscode from 'vscode';
+import { QUICKMOCK_NEW_WIREFRAME_COMMAND_ID } from './new-wireframe.id';
+import { handleNewWireframe } from './new-wireframe.handler';
+
+export const registerNewWireframeCommand = (
+  context: vscode.ExtensionContext
+): void => {
+  context.subscriptions.push(
+    vscode.commands.registerCommand(
+      QUICKMOCK_NEW_WIREFRAME_COMMAND_ID,
+      handleNewWireframe
+    )
+  );
+};

packages/vscode-extension/src/commands/new-wireframe/new-wireframe.command.ts

@@ -0,0 +1,45 @@
+import { getPrimaryWorkspaceFolder } from '#core';
+import { writeFile } from '#editor/document';
+import * as vscode from 'vscode';
+import {
+  createEmptyQuickMockContent,
+  DEFAULT_QUICKMOCK_FILE_NAME,
+  QUICKMOCK_FILE_EXTENSION,
+} from './new-wireframe.template';
+
+const CUSTOM_EDITOR_VIEW_TYPE = 'quickmock.editor';
+
+const pickSaveTarget = async (): Promise<vscode.Uri | undefined> => {
+  const folder = getPrimaryWorkspaceFolder();
+  const defaultUri = folder
+    ? vscode.Uri.joinPath(folder.uri, DEFAULT_QUICKMOCK_FILE_NAME)
+    : undefined;
+
+  return vscode.window.showSaveDialog({
+    defaultUri,
+    filters: { 'QuickMock Wireframe': [QUICKMOCK_FILE_EXTENSION] },
+    saveLabel: 'Create',
+    title: 'Create QuickMock File',
+  });
+};
+
+export const handleNewWireframe = async (): Promise<void> => {
+  const target = await pickSaveTarget();
+  if (!target) return;
+
+  try {
+    await writeFile(target, createEmptyQuickMockContent());
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    vscode.window.showErrorMessage(
+      `Failed to create QuickMock file: ${message}`
+    );
+    return;
+  }
+
+  await vscode.commands.executeCommand(
+    'vscode.openWith',
+    target,
+    CUSTOM_EDITOR_VIEW_TYPE
+  );
+};

packages/vscode-extension/src/commands/new-wireframe/new-wireframe.handler.ts

@@ -0,0 +1 @@
+export const QUICKMOCK_NEW_WIREFRAME_COMMAND_ID = 'quickmock.newWireframe';