package react for vscode ext; minor cleanups
This commit is contained in:
parent
387e6bae37
commit
ba496eb1a1
4
packages/vscode-ext/.gitignore
vendored
4
packages/vscode-ext/.gitignore
vendored
|
@ -1,3 +1,3 @@
|
|||
/media/components.css
|
||||
/media/components-bundle.js
|
||||
/media/vendor
|
||||
/out
|
||||
/*.vsix
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user