package react for vscode ext; minor cleanups

This commit is contained in:
Vyacheslav Matyukhin 2022-06-18 11:57:52 +03:00
parent 387e6bae37
commit ba496eb1a1
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
3 changed files with 23 additions and 18 deletions

View File

@ -1,3 +1,3 @@
/media/components.css
/media/components-bundle.js
/media/vendor
/out
/*.vsix

View File

@ -30,11 +30,12 @@
},
"scripts": {
"vscode:prepublish": "yarn run compile",
"compile": "tsc -p ./ && (cd ../components && yarn all) && cp ../components/dist/bundle.js media/components-bundle.js && cp ../components/dist/main.css media/components.css",
"compile:tsc": "tsc -p ./",
"compile:vendor": "(cd ../components && yarn run build) && mkdir -p media/vendor && cp ../components/dist/bundle.js media/vendor/components.js && cp ../components/dist/main.css media/vendor/components.css && cp ../../node_modules/react/umd/react.production.min.js media/vendor/react.js && cp ../../node_modules/react-dom/umd/react-dom.production.min.js media/vendor/react-dom.js",
"compile": "yarn run compile:tsc && yarn run compile:vendor",
"watch": "tsc -watch -p ./",
"pretest": "yarn run compile && yarn run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
"lint": "eslint src --ext ts"
},
"devDependencies": {
"@types/vscode": "^1.68.0",

View File

@ -85,18 +85,23 @@ export class SquiggleEditorProvider implements vscode.CustomTextEditorProvider {
private getHtmlForWebview(webview: vscode.Webview): string {
// Local path to main script run in the webview
const bundleUri = webview.asWebviewUri(
const styleUri = webview.asWebviewUri(
vscode.Uri.joinPath(
this.context.extensionUri,
"media",
"components-bundle.js"
"media/vendor/components.css"
)
);
const styleUri = webview.asWebviewUri(
vscode.Uri.joinPath(this.context.extensionUri, "media", "components.css")
);
const scriptUri = webview.asWebviewUri(
vscode.Uri.joinPath(this.context.extensionUri, "media", "wysiwyg.js")
const scriptUris = [
// vendor files are copied over by `yarn run compile`
"media/vendor/react.js",
"media/vendor/react-dom.js",
"media/vendor/components.js",
"media/wysiwyg.js",
].map((script) =>
webview.asWebviewUri(
vscode.Uri.joinPath(this.context.extensionUri, script)
)
);
// Use a nonce to whitelist which scripts can be run
@ -113,15 +118,14 @@ export class SquiggleEditorProvider implements vscode.CustomTextEditorProvider {
-->
<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-${nonce}' 'unsafe-eval';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script nonce="${nonce}" src="https://unpkg.com/react@18.2.0/umd/react.production.min.js" crossorigin></script>
<script nonce="${nonce}" src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js" crossorigin></script>
<script nonce="${nonce}" src="${bundleUri}"></script>
<link href="${styleUri}" rel="stylesheet" />
<title>Squiggle Editor</title>
</head>
<body style="background-color: white;">
<body style="background-color: white; color: black; padding: 12px">
<div id="root"></div>
<script nonce="${nonce}" src="${scriptUri}"></script>
${scriptUris.map(
(uri) => `<script nonce="${nonce}" src="${uri}"></script>`
)}
</body>
</html>`;
}