Add improved TypeScript support.

.github/workflows/deploy.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Build
         run: npm run docs:build
 
-      - uses: actions/configure-pages@v4
+      - uses: actions/configure-pages@v5
       - uses: actions/upload-pages-artifact@v3
         with:
           path: docs/.vitepress/dist

bin/prepare-examples.js

@@ -14,13 +14,21 @@ import { parse } from 'yaml';
 const specDir = join('specs', 'yaml');
 const esmTestDir = join('specs', 'esm');
 const jsonTestDir = join('specs', 'json');
+const tsTestDir = join('specs', 'ts');
 
 const docsDir = 'docs';
 const yamlDocsDir = join(docsDir, 'public', 'specs', 'yaml');
 const jsonDocsDir = join(docsDir, 'public', 'specs', 'json');
 const esmDocsDir = join(docsDir, 'public', 'specs', 'esm');
 const exampleDir = join(docsDir, 'examples');
 
+const specToTS = spec => {
+  return `import { Spec } from '@uwdata/mosaic-spec';
+
+export const spec : Spec = ${JSON.stringify(spec, 0, 2)};
+`;
+}
+
 const files = await Promise.allSettled((await readdir(specDir))
   .filter(name => extname(name) === '.yaml')
   .map(async name => {
@@ -43,6 +51,11 @@ const files = await Promise.allSettled((await readdir(specDir))
           resolve(jsonTestDir, `${base}.json`),
           JSON.stringify(ast.toJSON(), 0, 2)
         ),
+        // write TS JSON spec to tests
+        writeFile(
+          resolve(tsTestDir, `${base}.ts`),
+          specToTS(spec)
+        ),
         // copy YAML file to docs
         copyFile(file, resolve(yamlDocsDir, `${base}.yaml`)),
         // write JSON spec to docs

docs/public/specs/esm/axes.js

@@ -1,7 +1,7 @@
 import * as vg from "@uwdata/vgplot";
 
 export default vg.plot(
-  vg.gridY({strokeDasharray: [0.75, 2], strokeOpacity: 1}),
+  vg.gridY({strokeDasharray: "0.75 2", strokeOpacity: 1}),
   vg.axisY({anchor: "left", tickSize: 0, dx: 38, dy: -4, lineAnchor: "bottom"}),
   vg.axisY({
     anchor: "right",

docs/public/specs/esm/seattle-temp.js

@@ -29,7 +29,7 @@ export default vg.plot(
   ),
   vg.ruleY(
     [15],
-    {strokeOpacity: 0.5, strokeDasharray: [5, 5]}
+    {strokeOpacity: 0.5, strokeDasharray: "5 5"}
   ),
   vg.xTickFormat("%b"),
   vg.yLabel("Temperature Range (°C)"),

docs/public/specs/esm/voronoi.js

@@ -17,7 +17,6 @@ export default vg.vconcat(
         stroke: "white",
         strokeWidth: 1,
         strokeOpacity: 0.5,
-        inset: 1,
         fill: "species",
         fillOpacity: 0.2
       }

docs/public/specs/json/axes.json

@@ -6,10 +6,7 @@
   "plot": [
     {
       "mark": "gridY",
-      "strokeDasharray": [
-        0.75,
-        2
-      ],
+      "strokeDasharray": "0.75 2",
       "strokeOpacity": 1
     },
     {

docs/public/specs/json/seattle-temp.json

@@ -51,10 +51,7 @@
         15
       ],
       "strokeOpacity": 0.5,
-      "strokeDasharray": [
-        5,
-        5
-      ]
+      "strokeDasharray": "5 5"
     }
   ],
   "xTickFormat": "%b",

docs/public/specs/json/voronoi.json

@@ -26,7 +26,6 @@
           "stroke": "white",
           "strokeWidth": 1,
           "strokeOpacity": 0.5,
-          "inset": 1,
           "fill": "species",
           "fillOpacity": 0.2
         },

docs/public/specs/yaml/axes.yaml

@@ -5,7 +5,7 @@ meta:
     scale attributes such as `xAxis`, `yGrid`, etc. Just add data!
 plot:
 - mark: gridY
-  strokeDasharray: [0.75, 2] # dashed
+  strokeDasharray: 0.75 2 # dashed
   strokeOpacity: 1 # opaque
 - mark: axisY
   anchor: left

docs/public/specs/yaml/seattle-temp.yaml

@@ -26,7 +26,7 @@ plot:
 - mark: ruleY
   data: [15]
   strokeOpacity: 0.5
-  strokeDasharray: [5, 5]
+  strokeDasharray: 5 5
 xTickFormat: '%b'
 yLabel: Temperature Range (°C)
 width: 680

docs/public/specs/yaml/voronoi.yaml

@@ -19,7 +19,6 @@ vconcat:
     stroke: white
     strokeWidth: 1
     strokeOpacity: 0.5
-    inset: 1
     fill: species
     fillOpacity: 0.2
   - mark: hull