Version 0.9.11

examples/app/globals.css

@@ -9,27 +9,7 @@ html {
 }
 
 body {
-  background-blend-mode: normal;
-  background-color: #0000;
-  background-image: repeating-radial-gradient(
-      circle at -62% 25%,
-      #ffffff1f,
-      #ffffff1f 60px,
-      #d1d1d187 60px 62px
-    ),
-    repeating-radial-gradient(
-      circle at -63% -220%,
-      #ffffff1f,
-      #ffffff1f 60px,
-      #d1d1d187 60px 62px
-    ),
-    linear-gradient(23deg, #aaaaaa70, #aaaaaa70 0%, #d1d1d187 100%);
-  background-position: 0 0;
-  background-repeat: repeat, repeat, repeat;
-  background-size: 102% 100%;
-  background-attachment: scroll, scroll, scroll;
-  background-origin: padding-box, padding-box, padding-box;
-  background-clip: border-box, border-box, border-box;
+  background-color: #e1edff;
 }
 
 @media (min-width: 640px) {

examples/app/page.tsx

@@ -19,7 +19,7 @@ export default function Home() {
   return (
     <div className="page max-w-5xl p-4 mx-auto grid gap-12 min-h-screen content-start">
       <header className="grid items-baseline justify-between grid-flow-col">
-        <h1 className="text-xl text-purple-700 font-bold">Graph Selector</h1>
+        <h1 className="text-xl text-indigo-700 font-bold">Graph Selector</h1>
         <div className="right flex gap-3 items-center text-[0px]">
           <a
             href="https://twitter.com/tone_row_"
@@ -115,12 +115,8 @@ export default function Home() {
 function Banner() {
   return (
     <div className="banner grid gap-4 max-w-xl">
-      <h2 className="text-3xl font-bold">
-        Describe graphs and their associated data in an{" "}
-        <span className="text-purple-600 italic">
-          expressive, agnostic syntax
-        </span>
-        .
+      <h2 className="text-2xl tracking-tight">
+        Describe graphs and their associated data in an expressive, agnostic syntax.
       </h2>
       <p className="text-sm">
         Graph Selector is a language for expressing graphs, such as nodes and
@@ -131,14 +127,14 @@ function Banner() {
       </p>
       <div className="flex justify-start gap-2">
         <a
-          className="flex justify-start items-center gap-2 py-2 px-4 bg-purple-700 text-white rounded active:bg-purple-900 hover:bg-purple-800"
+          className="flex justify-start items-center gap-2 py-2 px-4 bg-indigo-700 text-white rounded active:bg-indigo-900 hover:bg-indigo-800"
           href="#installation"
         >
           Get started <FaArrowRight size={16} />
         </a>
         <a
           href="https://github.com/tone-row/graph-selector"
-          className="flex justify-start items-center gap-2 py-2 px-4 bg-white text-purple-700 rounded border-2 border-purple-700 hover:bg-purple-700 hover:text-white active:bg-purple-800"
+          className="flex justify-start items-center gap-2 py-2 px-4 bg-white text-indigo-700 rounded border-2 border-indigo-700 hover:bg-indigo-700 hover:text-white active:bg-indigo-800"
         >
           <FaGithub size={20} />
           Github
@@ -148,7 +144,7 @@ function Banner() {
         Made with ❤️ by{" "}
         <a
           href="https://twitter.com/tone_row_"
-          className="text-purple-600 hover:underline"
+          className="text-indigo-600 hover:underline"
         >
           Tone Row
         </a>

examples/components/Nav.tsx

@@ -59,7 +59,7 @@ export function Nav() {
   };
   return (
     <div className="sticky top-[-1px] pt-3 z-10 -mt-3" ref={navRef}>
-      <nav className="rounded bg-white p-3 border-2 border-black mt-[1px]">
+      <nav className="rounded bg-white p-3 mt-[1px]">
         <button
           className="text-xs flex content-center items-center gap-2 w-full justify-end -mt-2 p-2 pb-0 text-neutral-500 hover:text-neutral-700 sm:hidden"
           onClick={() => {

graph-selector/package.json

@@ -1,25 +1,27 @@
 {
   "name": "graph-selector",
-  "type": "module",
-  "version": "0.9.10",
-  "source": "src/index.ts",
+  "version": "0.9.11",
+  "description": "Parse indented text (flowchart.fun syntax) into a graph",
+  "source": "src/graph-selector.ts",
+  "main": "dist/graph-selector.js",
+  "umd:main": "dist/graph-selector.umd.js",
+  "module": "dist/graph-selector.mjs",
   "exports": {
-    "require": "./dist/graph-selector.cjs",
-    "types": "./dist/index.d.ts",
-    "default": "./dist/graph-selector.modern.js"
+    "types": "./dist/graph-selector.d.ts",
+    "require": "./dist/graph-selector.js",
+    "default": "./dist/graph-selector.modern.mjs"
   },
-  "main": "./dist/graph-selector.cjs",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/graph-selector.module.js",
-  "unpkg": "./dist/graph-selector.umd.js",
-  "description": "Parser flowchart fun syntax into a generalized graph syntax",
+  "types": "dist/graph-selector.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "microbundle",
+    "build": "rm -rf dist && microbundle",
     "dev": "microbundle watch",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:coverage:open": "jest --coverage && open coverage/lcov-report/index.html",
+    "test": "vitest",
+    "test:ci": "vitest run",
+    "test:coverage": "vitest --coverage",
+    "check": "tsc --noEmit",
     "lint": "eslint 'src/**/*.{js,cjs,ts}' --quiet --fix",
     "lint:staged": "eslint --fix",
     "lint:ci": "eslint 'src/**/*.{js,cjs,ts}'",
@@ -29,25 +31,23 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@types/cytoscape": "^3.19.7",
-    "@types/jest": "^28.1.7",
-    "@types/strip-comments": "^2.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.21.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-no-lookahead-lookbehind-regexp": "^0.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "jest": "^28.1.3",
-    "microbundle": "^0.15.0",
-    "monaco-editor": "^0.34.0",
-    "prettier": "^2.7.1",
-    "ts-jest": "^28.0.8",
-    "typescript": "^4.7.4"
+    "@types/strip-comments": "^2.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-no-lookahead-lookbehind-regexp": "^0.3.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "microbundle": "^0.15.1",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.5"
   },
   "dependencies": {
-    "@tone-row/strip-comments": "^2.0.6",
-    "html-entities": "^2.3.3"
+    "@types/cytoscape": "^3.19.11",
+    "html-entities": "^2.4.0",
+    "monaco-editor": "^0.43.0",
+    "strip-comments": "^2.0.1"
   },
   "browserslist": [
     "defaults"

graph-selector/src/getFeatureData.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from "vitest";
+
 import { getFeatureData } from "./getFeatureData";
 
 describe("getFeatureData", () => {

graph-selector/src/getFeatureData.ts

@@ -1,7 +1,9 @@
 import { featuresRe } from "./regexps";
 import { Data, Descriptor } from "./types";
 
-// TODO: not sure if getFeatureData still needs to remove the features from the line and return what's left of the line
+/**
+ * Given a line, it returns the feaures from the line
+ */
 export function getFeatureData(_line: string) {
   let line = _line.slice(0).trim();
   let match: RegExpExecArray | null;
@@ -32,22 +34,24 @@ export function getFeatureData(_line: string) {
     let attrMatch: RegExpExecArray | null;
     while ((attrMatch = attrRe.exec(attributes)) != null) {
       if (!attrMatch.groups) continue;
+      const key = attrMatch.groups.key;
+      if (!key) continue;
       const hasAttributeValue = attrMatch.groups.attributeValue !== undefined;
       // if it doesn't have an attribute value, set to true and move on
       if (!hasAttributeValue) {
-        data[attrMatch.groups.key] = true;
+        data[key] = true;
         continue;
       }
 
       let value: Descriptor =
-        attrMatch.groups.value1 ?? attrMatch.groups.value2 ?? attrMatch.groups.value3;
+        attrMatch.groups.value1 ?? attrMatch.groups.value2 ?? attrMatch.groups.value3 ?? "";
       const userSuppliedString = attrMatch.groups.rawValue !== value;
       // if value is a number and user didn't supply a string (e.g. [hello=1] instead of [hello="1"])
       // then parse it as a number
       if (!userSuppliedString && !isNaN(Number(value))) {
         value = Number(value);
       }
-      data[attrMatch.groups.key] = value;
+      data[key] = value;
     }
   }
 

graph-selector/src/matchAndRemovePointers.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from "vitest";
+
 import { matchAndRemovePointers } from "./matchAndRemovePointers";
 
 describe("matchAndRemovePointers", () => {

graph-selector/src/operate/addClassesToEdge.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it, test } from "vitest";
+
 import { addClassesToEdge } from "./addClassesToEdge";
 
 describe("addClassesToEdge", () => {

graph-selector/src/operate/addClassesToNode.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from "vitest";
+
 import { addClassesToNode } from "./addClassesToNode";
 
 describe("addClassesToNode", () => {

graph-selector/src/operate/addDataAttributeToNode.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from "vitest";
+
 import { addDataAttributeToNode } from "./addDataAttributeToNode";
 
 describe("addDataAttributeToNode", () => {

graph-selector/src/operate/dataToString.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from "vitest";
+
 import { dataToString } from "./dataToString";
 
 describe("dataToString", () => {

graph-selector/src/operate/operate.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { operate } from "./operate";
 
 describe("operate", () => {

graph-selector/src/operate/removeClassesFromEdge.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from "vitest";
 import { removeClassesFromEdge } from "./removeClassesFromEdge";
 
 describe("removeClassesFromEdge", () => {

graph-selector/src/operate/removeClassesFromNode.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from "vitest";
 import { removeClassesFromNode } from "./removeClassesFromNode";
 
 describe("removeClassFromNode", () => {

graph-selector/src/operate/removeDataAttributeFromNode.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from "vitest";
+
 import { removeDataAttributeFromNode } from "./removeDataAttributeFromNode";
 
 describe("removeDataAttributeFromNode", () => {