Merge pull request #714 from quantified-uncertainty/more-vscode

More vscode ext stuff

packages/vscode-ext/.gitignore

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

packages/vscode-ext/LICENSE

@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2020 Foretold
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/vscode-ext/README.md

@@ -1,70 +1,3 @@
-# squiggle README
+# Squiggle For VS Code
 
-This is the README for your extension "squiggle". After writing up a brief description, we recommend including the following sections.
+This extension provides support for [Squiggle](https://www.squiggle-language.com/) in VS Code.
-
-## Features
-
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
-
-For example if there is an image subfolder under your extension project workspace:
-
-\!\[feature X\]\(images/feature-x.png\)
-
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
-
-## Requirements
-
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
-
-## Extension Settings
-
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
-
-For example:
-
-This extension contributes the following settings:
-
-* `myExtension.enable`: enable/disable this extension
-* `myExtension.thing`: set to `blah` to do something
-
-## Known Issues
-
-Calling out known issues can help limit users opening duplicate issues against your extension.
-
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
-
-### 1.0.1
-
-Fixed issue #.
-
-### 1.1.0
-
-Added features X, Y, and Z.
-
------------------------------------------------------------------------------------------------------------
-## Following extension guidelines
-
-Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
-
-* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
-
-## Working with Markdown
-
-**Note:** You can author your README using Visual Studio Code.  Here are some useful editor keyboard shortcuts:
-
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux)
-* Toggle preview (`Shift+CMD+V` on macOS or `Shift+Ctrl+V` on Windows and Linux)
-* Press `Ctrl+Space` (Windows, Linux) or `Cmd+Space` (macOS) to see a list of Markdown snippets
-
-### For more information
-
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
-
-**Enjoy!**

packages/vscode-ext/package.json

@@ -2,12 +2,20 @@
   "name": "vscode-squiggle",
   "displayName": "Squiggle",
   "description": "Squiggle language support",
-  "version": "0.0.1",
+  "license": "MIT",
+  "version": "0.0.3",
+  "publisher": "QURI",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quantified-uncertainty/squiggle.git"
+  },
+  "icon": "media/vendor/icon.png",
   "engines": {
     "vscode": "^1.68.0"
   },
   "categories": [
-    "Programming Languages"
+    "Programming Languages",
+    "Visualization"
   ],
   "activationEvents": [
     "onCustomEditor:squiggle.wysiwyg"
@@ -30,11 +38,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 && cp ../website/static/img/quri-logo.png media/vendor/icon.png",
+    "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",
+    "lint": "eslint src --ext ts"
-    "test": "node ./out/test/runTest.js"
   },
   "devDependencies": {
     "@types/vscode": "^1.68.0",

packages/vscode-ext/src/squiggleEditor.ts

@@ -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",
+        "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
@@ -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>
+			<body style="background-color: white; color: black; padding: 12px">
-				<div id="root" style="background-color: white;"></div>
+				<div id="root"></div>
-				<script nonce="${nonce}" src="${scriptUri}"></script>
+        ${scriptUris
+          .map((uri) => `<script nonce="${nonce}" src="${uri}"></script>`)
+          .join("")}
 			</body>
 			</html>`;
   }