quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

package react for vscode ext; minor cleanups

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vscode-ext/.gitignore vendored
View File

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

7
packages/vscode-ext/package.json
View File

@ -30,11 +30,12 @@
}, },
"scripts": { "scripts": {
"vscode:prepublish": "yarn run compile", "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 ./", "watch": "tsc -watch -p ./",
"pretest": "yarn run compile && yarn run lint", "pretest": "yarn run compile && yarn run lint",
"lint": "eslint src --ext ts", "lint": "eslint src --ext ts"
"test": "node ./out/test/runTest.js"
}, },
"devDependencies": { "devDependencies": {
"@types/vscode": "^1.68.0", "@types/vscode": "^1.68.0",

30
packages/vscode-ext/src/squiggleEditor.ts
View File

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