Merge pull request #741 from quantified-uncertainty/vscodeext-ops-docs

Vscodeext ops docs (begin issue 729)

.github/workflows/ci.yml

@@ -19,6 +19,7 @@ jobs:
       should_skip_lang: ${{ steps.skip_lang_check.outputs.should_skip }}
       should_skip_components: ${{ steps.skip_components_check.outputs.should_skip }}
       should_skip_website: ${{ steps.skip_website_check.outputs.should_skip }}
+      should_skip_vscodeext: ${{ steps.skip_vscodeext_check.outputs.should_skip }}
     steps:
       - id: skip_lang_check
         name: Check if the changes are about squiggle-lang src files
@@ -35,6 +36,11 @@ jobs:
         uses: fkirc/skip-duplicate-actions@v3.4.1
         with:
           paths: '["packages/website/**"]'
+      - id: skip_vscodeext_check
+        name: Check if the changes are about vscode extension src files
+        uses: fkirc/skip-duplicate-actions@v3.4.1
+        with:
+          paths: '["packages/vscode-ext/**"]'
 
   lang-lint:
     name: Language lint
@@ -158,3 +164,35 @@ jobs:
         run: cd ../components && yarn build
       - name: Build website assets
         run: yarn build
+
+  vscode-ext-lint:
+    name: VS Code extension lint
+    runs-on: ubuntu-latest
+    needs: pre_check
+    if: ${{ needs.pre_check.outputs.should_skip_vscodeext != 'true' }}
+    defaults:
+      run:
+        shell: bash
+        working-directory: packages/vscode-ext
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install dependencies from monorepo level
+        run: cd ../../ && yarn
+      - name: Lint the VSCode Extension source code
+        run: yarn lint
+
+  vscode-ext-build:
+    name: VS Code extension build
+    runs-on: ubuntu-latest
+    needs: pre_check
+    if: ${{ (needs.pre_check.outputs.should_skip_components != 'true') || (needs.pre_check.outputs.should_skip_lang != 'true') }} || (needs.pre_check.outputs.should_skip_vscodeext != 'true') }}
+    defaults:
+      run:
+        shell: bash
+        working-directory: packages/vscode-ext
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install dependencies from monorepo level
+        run: cd ../../ && yarn
+      - name: Build
+        run: yarn compile

.prettierignore

@@ -12,3 +12,4 @@ packages/squiggle-lang/coverage/
 packages/squiggle-lang/.cache/
 packages/website/build/
 packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.js
+packages/vscode-ext/media/vendor/

README.md

@@ -17,6 +17,7 @@ _An estimation language_.
 - [Known bugs](https://www.squiggle-language.com/docs/Discussions/Bugs)
 - [Original lesswrong sequence](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3)
 - [Author your squiggle models as Observable notebooks](https://observablehq.com/@hazelfire/squiggle)
+- [Use squiggle in VS Code](https://marketplace.visualstudio.com/items?itemName=QURI.vscode-squiggle)
 
 ## Our deployments
 
@@ -39,6 +40,7 @@ the packages can be found in `packages`.
   of the calculation.
 - `packages/website` is the main descriptive website for squiggle,
   it is hosted at `squiggle-language.com`.
+- `packages/vscode-ext` is the VS Code extension for writing estimation functions.
 
 # Develop
 

packages/cli/README.md

@@ -2,19 +2,21 @@
 
 This package can be used to incorporate a very simple `import` system into Squiggle.
 
-To use, write special files with a ``.squiggleU`` file type. In these files, you can write lines like,
+To use, write special files with a `.squiggleU` file type. In these files, you can write lines like,
 
 ```
 @import(models/gdp_over_time.squiggle, gdpOverTime)
 gdpOverTime(2.5)
 ```
 
-The imports will be replaced with the contents of the file in `models/gdp_over_time.squiggle` upon compilation. The ``.squiggleU`` file will be converted into a ``.squiggle`` file with the ``import`` statement having this replacement.
+The imports will be replaced with the contents of the file in `models/gdp_over_time.squiggle` upon compilation. The `.squiggleU` file will be converted into a `.squiggle` file with the `import` statement having this replacement.
 
 ## Running
 
 ### `npx squiggle-cli-experimental compile`
+
 Runs compilation in the current directory and all of its subdirectories.
 
 ### `npx squiggle-cli-experimental watch`
-Watches ``.squiggleU`` files in the current directory (and subdirectories) and rebuilds them when they are saved. Note that this will *not* rebuild files when their dependencies are changed, just when they are changed directly.
+
+Watches `.squiggleU` files in the current directory (and subdirectories) and rebuilds them when they are saved. Note that this will _not_ rebuild files when their dependencies are changed, just when they are changed directly.

packages/cli/package.json

@@ -18,5 +18,4 @@
     "glob": "^8.0.3",
     "indent-string": "^5.0.0"
   }
-  }
+}
-  

packages/components/src/styles/base.css

@@ -1,5 +1,5 @@
 .squiggle {
-/*
+  /*
 This file contains:
 1) Base Tailwind preflight styles
 2) Base https://github.com/tailwindlabs/tailwindcss-forms styles
@@ -7,167 +7,192 @@ This file contains:
 (Both are wrapped in .squiggle)
 */
 
-/*
+  /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 */
 
-/* html { */
+  /* html { */
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
-  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+  font-family: theme(
-/* } */
+    "fontFamily.sans",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"
+  ); /* 4 */
+  /* } */
 
-/*
+  /*
 1. Remove the margin in all browsers.
 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
 
-/* body { */
+  /* body { */
   margin: 0; /* 1 */
   line-height: inherit; /* 2 */
-/* } */
+  /* } */
 
-
+  /*
-/*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
 
-*,
+  *,
-::before,
+  ::before,
-::after {
+  ::after {
     box-sizing: border-box; /* 1 */
     border-width: 0; /* 2 */
     border-style: solid; /* 2 */
-  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
+    border-color: theme("borderColor.DEFAULT", currentColor); /* 2 */
-}
+  }
 
-::before,
+  ::before,
-::after {
+  ::after {
-  --tw-content: '';
+    --tw-content: "";
-}
+  }
 
-/*
+  /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 3. Ensure horizontal rules are visible by default.
 */
 
-hr {
+  hr {
     height: 0; /* 1 */
     color: inherit; /* 2 */
     border-top-width: 1px; /* 3 */
-}
+  }
 
-/*
+  /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr:where([title]) {
+  abbr:where([title]) {
     text-decoration: underline dotted;
-}
+  }
 
-/*
+  /*
 Remove the default font size and weight for headings.
 */
 
-h1,
+  h1,
-h2,
+  h2,
-h3,
+  h3,
-h4,
+  h4,
-h5,
+  h5,
-h6 {
+  h6 {
     font-size: inherit;
     font-weight: inherit;
-}
+  }
 
-/*
+  /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
 
-a {
+  a {
     color: inherit;
     text-decoration: inherit;
-}
+  }
 
-/*
+  /*
 Add the correct font weight in Edge and Safari.
 */
 
-b,
+  b,
-strong {
+  strong {
     font-weight: bolder;
-}
+  }
 
-/*
+  /*
 1. Use the user's configured `mono` font family by default.
 2. Correct the odd `em` font sizing in all browsers.
 */
 
-code,
+  code,
-kbd,
+  kbd,
-samp,
+  samp,
-pre {
+  pre {
-  font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
+    font-family: theme(
+      "fontFamily.mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
+    ); /* 1 */
     font-size: 1em; /* 2 */
-}
+  }
 
-/*
+  /*
 Add the correct font size in all browsers.
 */
 
-small {
+  small {
     font-size: 80%;
-}
+  }
 
-/*
+  /*
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
 
-sub,
+  sub,
-sup {
+  sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
-}
+  }
 
-sub {
+  sub {
     bottom: -0.25em;
-}
+  }
 
-sup {
+  sup {
     top: -0.5em;
-}
+  }
 
-/*
+  /*
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
 
-table {
+  table {
     text-indent: 0; /* 1 */
     border-color: inherit; /* 2 */
     border-collapse: collapse; /* 3 */
-}
+  }
 
-/*
+  /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
 
-button,
+  button,
-input,
+  input,
-optgroup,
+  optgroup,
-select,
+  select,
-textarea {
+  textarea {
     font-family: inherit; /* 1 */
     font-size: 100%; /* 1 */
     font-weight: inherit; /* 1 */
@@ -175,197 +200,197 @@ textarea {
     color: inherit; /* 1 */
     margin: 0; /* 2 */
     padding: 0; /* 3 */
-}
+  }
 
-/*
+  /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
 
-button,
+  button,
-select {
+  select {
     text-transform: none;
-}
+  }
 
-/*
+  /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
 
-button,
+  button,
-[type='button'],
+  [type="button"],
-[type='reset'],
+  [type="reset"],
-[type='submit'] {
+  [type="submit"] {
     -webkit-appearance: button; /* 1 */
     background-color: transparent; /* 2 */
     background-image: none; /* 2 */
-}
+  }
 
-/*
+  /*
 Use the modern Firefox focus style for all focusable elements.
 */
 
-:-moz-focusring {
+  :-moz-focusring {
     outline: auto;
-}
+  }
 
-/*
+  /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
 
-:-moz-ui-invalid {
+  :-moz-ui-invalid {
     box-shadow: none;
-}
+  }
 
-/*
+  /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
 
-progress {
+  progress {
     vertical-align: baseline;
-}
+  }
 
-/*
+  /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
 
-::-webkit-inner-spin-button,
+  ::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
+  ::-webkit-outer-spin-button {
     height: auto;
-}
+  }
 
-/*
+  /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
+  [type="search"] {
     -webkit-appearance: textfield; /* 1 */
     outline-offset: -2px; /* 2 */
-}
+  }
 
-/*
+  /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
 
-::-webkit-search-decoration {
+  ::-webkit-search-decoration {
     -webkit-appearance: none;
-}
+  }
 
-/*
+  /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to `inherit` in Safari.
 */
 
-::-webkit-file-upload-button {
+  ::-webkit-file-upload-button {
     -webkit-appearance: button; /* 1 */
     font: inherit; /* 2 */
-}
+  }
 
-/*
+  /*
 Add the correct display in Chrome and Safari.
 */
 
-summary {
+  summary {
     display: list-item;
-}
+  }
 
-/*
+  /*
 Removes the default spacing and border for appropriate elements.
 */
 
-blockquote,
+  blockquote,
-dl,
+  dl,
-dd,
+  dd,
-h1,
+  h1,
-h2,
+  h2,
-h3,
+  h3,
-h4,
+  h4,
-h5,
+  h5,
-h6,
+  h6,
-hr,
+  hr,
-figure,
+  figure,
-p,
+  p,
-pre {
+  pre {
     margin: 0;
-}
+  }
 
-fieldset {
+  fieldset {
     margin: 0;
     padding: 0;
-}
+  }
 
-legend {
+  legend {
     padding: 0;
-}
+  }
 
-ol,
+  ol,
-ul,
+  ul,
-menu {
+  menu {
     list-style: none;
     margin: 0;
     padding: 0;
-}
+  }
 
-/*
+  /*
 Prevent resizing textareas horizontally by default.
 */
 
-textarea {
+  textarea {
     resize: vertical;
-}
+  }
 
-/*
+  /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::placeholder,
+  input::placeholder,
-textarea::placeholder {
+  textarea::placeholder {
     opacity: 1; /* 1 */
-  color: theme('colors.gray.400', #9ca3af); /* 2 */
+    color: theme("colors.gray.400", #9ca3af); /* 2 */
-}
+  }
 
-/*
+  /*
 Set the default cursor for buttons.
 */
 
-button,
+  button,
-[role="button"] {
+  [role="button"] {
     cursor: pointer;
-}
+  }
 
-/*
+  /*
 Make sure disabled buttons don't get the pointer cursor.
 */
-:disabled {
+  :disabled {
     cursor: default;
-}
+  }
 
-/*
+  /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
 
-img,
+  img,
-svg,
+  svg,
-video,
+  video,
-canvas,
+  canvas,
-audio,
+  audio,
-iframe,
+  iframe,
-embed,
+  embed,
-object {
+  object {
     display: block; /* 1 */
     vertical-align: middle; /* 2 */
-}
+  }
 
-/*
+  /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
 
-img,
+  img,
-video {
+  video {
     max-width: 100%;
     height: auto;
-}
+  }
 }

packages/components/src/styles/forms.css

@@ -1,102 +1,130 @@
 /* Fork of https://github.com/tailwindlabs/tailwindcss-forms styles, see the comment in main.css for details. */
 .squiggle {
-.form-input,.form-textarea,.form-select,.form-multiselect {
+  .form-input,
-appearance: none;
+  .form-textarea,
-background-color: #fff;
+  .form-select,
-border-color: #6b7280;
+  .form-multiselect {
-border-width: 1px;
+    appearance: none;
-border-radius: 0px;
+    background-color: #fff;
-padding-top: 0.5rem;
+    border-color: #6b7280;
-padding-right: 0.75rem;
+    border-width: 1px;
-padding-bottom: 0.5rem;
+    border-radius: 0px;
-padding-left: 0.75rem;
+    padding-top: 0.5rem;
-font-size: 1rem;
+    padding-right: 0.75rem;
-line-height: 1.5rem;
+    padding-bottom: 0.5rem;
---tw-shadow: 0 0 #0000;
+    padding-left: 0.75rem;
-}
+    font-size: 1rem;
-.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
+    line-height: 1.5rem;
-outline: 2px solid transparent;
+    --tw-shadow: 0 0 #0000;
-outline-offset: 2px;
+  }
---tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  .form-input:focus,
---tw-ring-offset-width: 0px;
+  .form-textarea:focus,
---tw-ring-offset-color: #fff;
+  .form-select:focus,
---tw-ring-color: #2563eb;
+  .form-multiselect:focus {
---tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    outline: 2px solid transparent;
---tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    outline-offset: 2px;
-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-border-color: #2563eb;
+    --tw-ring-offset-width: 0px;
-}
+    --tw-ring-offset-color: #fff;
-.form-input::placeholder,.form-textarea::placeholder {
+    --tw-ring-color: #2563eb;
-color: #6b7280;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-opacity: 1;
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-}
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-.form-input::-webkit-datetime-edit-fields-wrapper {
+      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-padding: 0;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-}
+      var(--tw-shadow);
-.form-input::-webkit-date-and-time-value {
+    border-color: #2563eb;
-min-height: 1.5em;
+  }
-}
+  .form-input::placeholder,
-.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
+  .form-textarea::placeholder {
-padding-top: 0;
+    color: #6b7280;
-padding-bottom: 0;
+    opacity: 1;
-}
+  }
-.form-checkbox,.form-radio {
+  .form-input::-webkit-datetime-edit-fields-wrapper {
-appearance: none;
+    padding: 0;
-padding: 0;
+  }
--webkit-print-color-adjust: exact;
+  .form-input::-webkit-date-and-time-value {
+    min-height: 1.5em;
+  }
+  .form-input::-webkit-datetime-edit,
+  .form-input::-webkit-datetime-edit-year-field,
+  .form-input::-webkit-datetime-edit-month-field,
+  .form-input::-webkit-datetime-edit-day-field,
+  .form-input::-webkit-datetime-edit-hour-field,
+  .form-input::-webkit-datetime-edit-minute-field,
+  .form-input::-webkit-datetime-edit-second-field,
+  .form-input::-webkit-datetime-edit-millisecond-field,
+  .form-input::-webkit-datetime-edit-meridiem-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .form-checkbox,
+  .form-radio {
+    appearance: none;
+    padding: 0;
+    -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
-display: inline-block;
+    display: inline-block;
-vertical-align: middle;
+    vertical-align: middle;
-background-origin: border-box;
+    background-origin: border-box;
--webkit-user-select: none;
+    -webkit-user-select: none;
     user-select: none;
-flex-shrink: 0;
+    flex-shrink: 0;
-height: 1rem;
+    height: 1rem;
-width: 1rem;
+    width: 1rem;
-color: #2563eb;
+    color: #2563eb;
-background-color: #fff;
+    background-color: #fff;
-border-color: #6b7280;
+    border-color: #6b7280;
-border-width: 1px;
+    border-width: 1px;
---tw-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
-}
+  }
-.form-checkbox {
+  .form-checkbox {
-border-radius: 0px;
+    border-radius: 0px;
-}
+  }
-.form-checkbox:focus,.form-radio:focus {
+  .form-checkbox:focus,
-outline: 2px solid transparent;
+  .form-radio:focus {
-outline-offset: 2px;
+    outline: 2px solid transparent;
---tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+    outline-offset: 2px;
---tw-ring-offset-width: 2px;
+    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
---tw-ring-offset-color: #fff;
+    --tw-ring-offset-width: 2px;
---tw-ring-color: #2563eb;
+    --tw-ring-offset-color: #fff;
---tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-color: #2563eb;
---tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-}
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-.form-checkbox:checked,.form-radio:checked {
+      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-border-color: transparent;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-background-color: currentColor;
+      var(--tw-shadow);
-background-size: 100% 100%;
+  }
-background-position: center;
+  .form-checkbox:checked,
-background-repeat: no-repeat;
+  .form-radio:checked {
-}
+    border-color: transparent;
-.form-checkbox:checked {
+    background-color: currentColor;
-background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    background-size: 100% 100%;
-}
+    background-position: center;
-.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus {
+    background-repeat: no-repeat;
-border-color: transparent;
+  }
-background-color: currentColor;
+  .form-checkbox:checked {
-}
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-.form-checkbox:indeterminate {
+  }
-background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  .form-checkbox:checked:hover,
-border-color: transparent;
+  .form-checkbox:checked:focus,
-background-color: currentColor;
+  .form-radio:checked:hover,
-background-size: 100% 100%;
+  .form-radio:checked:focus {
-background-position: center;
+    border-color: transparent;
-background-repeat: no-repeat;
+    background-color: currentColor;
-}
+  }
-.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus {
+  .form-checkbox:indeterminate {
-border-color: transparent;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-background-color: currentColor;
+    border-color: transparent;
-}
+    background-color: currentColor;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  .form-checkbox:indeterminate:hover,
+  .form-checkbox:indeterminate:focus {
+    border-color: transparent;
+    background-color: currentColor;
+  }
 }

packages/vscode-ext/.eslintrc.json

@@ -5,9 +5,7 @@
     "ecmaVersion": 6,
     "sourceType": "module"
   },
-    "plugins": [
+  "plugins": ["@typescript-eslint"],
-        "@typescript-eslint"
-    ],
   "rules": {
     "@typescript-eslint/naming-convention": "warn",
     "@typescript-eslint/semi": "warn",
@@ -16,9 +14,5 @@
     "no-throw-literal": "warn",
     "semi": "off"
   },
-    "ignorePatterns": [
+  "ignorePatterns": ["out", "dist", "**/*.d.ts"]
-        "out",
-        "dist",
-        "**/*.d.ts"
-    ]
 }

packages/vscode-ext/.vscode/extensions.json

@@ -1,7 +1,5 @@
 {
   // See http://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-	"recommendations": [
+  "recommendations": ["dbaeumer.vscode-eslint"]
-		"dbaeumer.vscode-eslint"
-	]
 }

packages/vscode-ext/.vscode/launch.json

@@ -9,12 +9,8 @@
       "name": "Run Extension",
       "type": "extensionHost",
       "request": "launch",
-			"args": [
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
-				"--extensionDevelopmentPath=${workspaceFolder}"
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
-			],
-			"outFiles": [
-				"${workspaceFolder}/out/**/*.js"
-			],
       "preLaunchTask": "${defaultBuildTask}"
     },
     {
@@ -25,9 +21,7 @@
         "--extensionDevelopmentPath=${workspaceFolder}",
         "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
       ],
-			"outFiles": [
+      "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
-				"${workspaceFolder}/out/test/**/*.js"
-			],
       "preLaunchTask": "${defaultBuildTask}"
     }
   ]

packages/vscode-ext/README.md

@@ -1,3 +1,11 @@
 # Squiggle For VS Code
 
+_[marketplace](https://marketplace.visualstudio.com/items?itemName=QURI.vscode-squiggle)_
+
 This extension provides support for [Squiggle](https://www.squiggle-language.com/) in VS Code.
+
+# Build locally
+
+We assume you ran `yarn` at the monorepo level for all dependencies.
+
+Then, simply `yarn compile` at the `vscode-ext` package level. It will build `squiggle-lang`, `squiggle-components`, and the VS Code extension source code.

packages/vscode-ext/package.json

@@ -43,7 +43,8 @@
     "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",
+    "format": "eslint src --ext ts --fix"
   },
   "devDependencies": {
     "@types/vscode": "^1.68.0",

packages/vscode-ext/tsconfig.json

@@ -3,12 +3,10 @@
     "module": "commonjs",
     "target": "ES2020",
     "outDir": "out",
-		"lib": [
+    "lib": ["ES2020", "dom"],
-			"ES2020", "dom"
-		],
     "sourceMap": true,
     "rootDir": "src",
-		"strict": true,   /* enable all strict type-checking options */
+    "strict": true /* enable all strict type-checking options */
     /* Additional Checks */
     // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
     // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */