ties down what constitutes a valid 'class' string in ...

- json schema
- peg

- also adds the class attribute to the typescript type definitions
- and unifies the dev graph command to what I'm using on other projects

package.json

@@ -17,7 +17,8 @@
     "depcruise:graph:deps-html": "depcruise --output-type dot --config config/dependency-cruiser-graph.js src bin/smcat | dot -Tsvg | depcruise-wrap-stream-in-html > docs/dependency-cruiser-graph.html",
     "depcruise:graph:deps-svg": "depcruise --output-type dot --config config/dependency-cruiser-graph.js src bin/smcat | dot -Tsvg > docs/dependency-cruiser-graph.svg",
     "depcruise:html-report": "depcruise --output-type err-html --config config/dependency-cruiser.js src test bin/smcat --output-to dependency-violation-report.html",
-    "depcruise:view": "depcruise --output-type dot --config config/dependency-cruiser-graph.js --prefix vscode://file/$(pwd)/ src bin/smcat | dot -Tsvg | depcruise-wrap-stream-in-html | browser",
+    "depcruise:graph:dev": "depcruise --output-type dot --config config/dependency-cruiser-graph.js --prefix vscode://file/$(pwd)/ src bin/smcat | dot -Tsvg | depcruise-wrap-stream-in-html | browser",
+    "depcruise:graph:dev:flat": "depcruise --output-type flat --config config/dependency-cruiser-graph.js --prefix vscode://file/$(pwd)/ src bin/smcat | circo -Tsvg | depcruise-wrap-stream-in-html | browser",
     "depcruise:view-report": "depcruise --output-type err-html --config config/dependency-cruiser.js --prefix vscode://file/$(pwd)/ src test bin/smcat | browser",
     "lint": "run-p --aggregate-output lint:eslint lint:prettier lint:types",
     "lint:eslint": "eslint --cache --cache-location .cache src test config",

src/parse/smcat-ast.schema.json

@@ -44,6 +44,10 @@
         "body": { "type": "string" }
       }
     },
+    "ClassType": {
+      "type": "string",
+      "pattern": "^[a-zA-Z0-9_\\- ]*$"
+    },
     "StateMachineType": {
       "type": "object",
       "additionalProperties": false,
@@ -74,7 +78,7 @@
               },
               "class": {
                 "description": "Class name to give the state in dot and svg output.",
-                "type": "string"
+                "$ref": "#/definitions/ClassType"
               },
               "active": {
                 "description": "If true the state is considered to be active and rendered as such.",
@@ -145,7 +149,7 @@
               },
               "class": {
                 "description": "Class name to give the state in dot and svg output.",
-                "type": "string"
+                "$ref": "#/definitions/ClassType"
               },
               "type": {
                 "description": "Whether the transition is external (default) or internal. See https://www.w3.org/TR/scxml/#transition for details.",

src/parse/smcat/peg/smcat-parser.pegjs

@@ -68,6 +68,10 @@ extended_state_attribute "extended state attribute"
     {
         return {name, value};
     }
+    / _ name:class_attribute_name _ "=" _ value:class_string _
+    {
+        return {name, value}
+    }
     / _ name:extended_state_boolean_attribute_name _
     {
         return {name, value:true}
@@ -78,7 +82,13 @@ extended_state_attribute "extended state attribute"
     }
 
 extended_state_string_attribute_name "state attribute name"
-    = name:("label"i / "color"i/ "class"i)
+    = name:("label"i / "color"i)
+    {
+        return name.toLowerCase();
+    }
+
+class_attribute_name "class attribute"
+    = name:("class"i)
     {
         return name.toLowerCase();
     }
@@ -157,14 +167,18 @@ extended_transition_attribute "extended transition attribute"
     = _ name:extended_transition_string_attribute_name _ "=" _ value:quotedstring _
     {
         return {name, value};
-    } /
-    _ name:(extended_transition_type_name) _ "=" _ value:extended_transition_type_value _
+    }
+    / _ name:class_attribute_name _ "=" _ value:class_string _
+    {
+        return {name, value};
+    }
+    / _ name:(extended_transition_type_name) _ "=" _ value:extended_transition_type_value _
     {
         return {name, value};
     }
 
 extended_transition_string_attribute_name "transition attribute name"
-    = name:("color"i / "class"i)
+    = name:("color"i)
     {
         return name.toLowerCase();
     }
@@ -216,6 +230,12 @@ quotedstring "double quoted string"
 stringcontent
     = (!'"' c:('\\"'/ .) {return c})*
 
+class_string "valid class string"
+    = '"' s:class_stringcontent '"' {return s.join("")}
+
+class_stringcontent
+    = (!'"' c:([a-zA-Z0-9_\- ]) {return c})*
+
 unquotedtransitionstring
     = s:transitionnonsep {return s.join("").trim()}