Extension doesn't load selected regular expressions in view

anothermh commented 1 year ago

Steps to reproduce:

Highlight a regex
Right-click and select RegExp Visualize
Web view appears but does not have the expression and does not render a view

Entering any expression doesn't cause the expression to load a visualization. It remains blank.

yubaoquan commented 1 year ago

what is the content of your regex? open the devTool of vscode with Help>Toggle Developer Tools, is there any error in console?

anothermh commented 1 year ago

The content is for example ^(foo|bar|baz)$. For that regex here is the console output:

console.ts:137 [Extension Host] ^(foo|bar|baz)$

VM11:236 Uncaught SyntaxError: Unexpected string
    at index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:980:23
(anonymous) @ index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:980
setTimeout (async)
onFrameLoaded @ index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:978
(anonymous) @ index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:1009

VM12:1 Uncaught SyntaxError: Unexpected token ','
    at index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:980:23
(anonymous) @ index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:980
setTimeout (async)
onFrameLoaded @ index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:978
(anonymous) @ index.html?id=a67bba0b-652a-4335-b620-ebcb1b49a7ee&origin=fafcb746-10a5-4f4b-8a9d-1be1230e42d4&swVersion=4&extensionId=ybq.reg-visualizer&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:1009

Clicking VM11:236 shows the problem at the top of the source file in params:

/* eslint-disable no-restricted-globals, no-alert, global-require */
/* globals document, window */

const params = {
  embed: false,
  re: `^(foo|bar|baz)<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Regulex：JavaScript Regular Expression Visualizer</title>
    <style>body,
html * {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

This error causes the webview that it loads to be unusable. If I close the webview and then type a simple string like foo and then right-click and visualize it then the webview loads properly:

I can then manually enter my original regex ^(foo|bar|baz)$ into this webview and it renders properly, because params was not malformed when it was generated:

The problem is likely that the $ is likely not being escaped somewhere. Any regex including $ appears to break the webview if it is present when the webview is generated.

yubaoquan commented 1 year ago

The problem is likely that the $ is likely not being escaped somewhere. Any regex including $ appears to break the webview if it is present when the webview is generated.

Yes you are right. I fixed it now. Upgrade to version 0.0.2 please. Tell me if the issue still exists. Thank you for your help. :)

anothermh commented 1 year ago

Works great, thank you.

yubaoquan / reg-visualizer

Extension doesn't load selected regular expressions in view #1