Component Previewer allows you to preview the component in visual Studio code in real time. When the editor switches to a different component, the page is refreshed in real time, and the data prepared in advance (test cases) can be provided to the component and then previewed in real time, and the test cases can be debugged with the browser.
You can set up multiple test cases to see the effects of components with different parameters. With the browser, you can debug test cases.
Mapping Preview
For example, if we wanted to write test cases for A.tsx, we would create A.test.tsx in the same directory:
import A from "./A"
export default function TestCaseA(){
return <A prop1="test data 1"/>
}
export function TestCaseB(){
return <A prop1="test data 2"/>
}
This will export two test cases. When we open A.test.tsx, the preview screen shows a.test.tsx. We can select test cases at the top of the preview screen
View the extension configuration "Watch File Path Reg Exp"
Principle
The file that vscode is currently editing, we'll call it an active file.
When the active file changes (vscode switches files), the extension immediately writes the active file information to bridgeFile.js. (bridgeFile.js is located in the .c_preview folder automatically generated by the extension),
bridgeFile.js depends on the active file, and .c_preview/index.htmldepends on' bridgeFile.js', so when you open .c_preview/index.htmlin browser, you will see the page of the active file.
With Vite (Webpack), when bridgeFile.js changes, Vite will automatically follow the new dependency and automatically update the page, with this function, so that the component preview can be achieved in the browser.
Tips: You can use bridgeFile.js to implement the preview interface yourself
Vite configuration
For Vite, you can preview components by going to .c_preview/index.html
Note: the.c_previewfolder must be accessible to vite, see the root configuration for vite.config.js
Configuration sample
vite.config.js configuration:
{
root: "./src/",
}
Component Previewer configuration:
Preview Folder: ./src
Server URL: http://localhost:5173/.c_preview/index.html //If you don't want to preview in vscode's built-in preview window, this option can be ignored
Preview address in browser: http://localhost:5173/.c_preview/index.html //The default Vite port is 5173
Run Vite to automatically preview
Webpack configuration
For Webpack, just set entry of webpack.config.js to .c_preview/main.js to achieve component preview
Configuration sample
webpack.config.js configuration
{
entry: __dirname+"/.c_preview/main.js",
...
}
Component Previewer configuration:
Preview Folder: .
Server URL: http://localhost:8080 //If you don't want to preview in vscode's built-in preview window, this option can be ignored
Preview address in browser:http://localhost:8080 //The default Webpack port is 8080
Run webpack-dev-server to automatically preview
.c_preview
The .c_preview folder will be automatically generated when preview listening is enabled. You can change the generation location of the folder in the Settings.
The folder contains the following files:
- bridge
bridgeFile.js
+ preset //The default presets are put here
main.js
index.html
bridgeFile
BridgeFile contains the following information:
import { render } from "../preset/vue.js"; //The imported presets are generated according to presetName
export const bridgeData = {
workspaceFolder: "viteReact",
previewFolderRelPath: "",
activeFileRelPath: "./B.test.tsx", //Relative to the workspace path
mapFileRelPath: "./B.test.tsx", //Relative to the workspace path
presetName: string, //The default judged by watchFilePathRegExp
workspaceFolderName: string
};
export const preview = () => render(getMod, bridgeData);
const getMod = () => import("../../B.test.tsx"); //This always importing an active file
Extension configuration
Preview Folder
The location where the .c_preview folder was generated. By default, it is generated in the workspace folder directory
You can set .c_preview to node_modules, but note that Vite and Webpack do not listen to files in node_modules by default. Additional configuration is required for Vite and Webpack. To eliminate . C_preview
See the server.watch of vite.config.js
See the watchOptions.ignored of webpack.config.js
File Path Map Replace
According to the configuration, if the mapping file exists, it will preview the mapping file, if none exists, it will preview the original file.
The substitution character "<>" represents the capture group that references the regular expression, and "<1>" represents group 1
This is an array of values, matched and replaced in order, in the format [regular expression to match, [map detection list]]. The default value is:
[
[ "^(.+)(\\.\\w+)$", [ "<1>.test<2>", "<1>.spec<2>" ]]
]
For example: Active file path:
/user/work/myProject/src/hello/page.tsx
Mapping configuration: "^(.+)(\.\w+))$":"<1>.test<2>"
Regular expression matching result:["/user/work/myProject/src/hello/src/page.tsx", "/user/work/myProject/src/hello/src/page", ".tsx"]
The final splice is "/user/work/myProject/src/hello/page .test .tsx"
Mapping configuration ： "^(.+?/)src(/.+)$":"<1>test<2>"
Regular expression matching result:["/user/work/myProject/src/hello/page.tsx","/user/work/myProject/","/\hello/page.tsx"]
The final splice is "/user/work/myProject/ test /hello/page.tsx"
#### Watch File Path Reg Exp
The file to listen on. For react component previews, maybe we just need to listen for the .tsx file and ignore the bridgeFile.js update when the editor switches to another file
This is an array of values that will be checked sequentially. The format is[default name, matched regular expression], default value::
[
[ "react", "\\.[tj]sx$" ],
[ "vue", "\\.vue$" ]
]
