Fix grammar, outline, completion & hover (#11)

* Add missing perspectives for infrastructure node

* Fix outline

* Add completion for custom view

* Add element completion

* Add custom view hover

* Bump version

* Fix UT

* Fix typos

CHANGELOG.md

@@ -1,10 +1,19 @@
 # Changelog
 
+## 0.31.1 - December 2024
+
+### Bugs fixed
+
+* Add missing `perspectives` support for `infrastructureNode`
+* Fix broken `outline` due to `custom` support within `view`
+* Add missing completion for `element` & `custom` `view`
+* Add missing `custom` `view` hover
+
 ## 0.31.0 - November 2024
 
 ### New features
 
-* Add `element` support within `model` and `custom` support within `view` 
+* Add `element` support within `model` and `custom` support within `view`
 
 ## 0.30.0 - May 2024
 

README.md

@@ -1,7 +1,7 @@
 # C4 DSL Visual Studio Code Extension
 
-![](https://img.shields.io/badge/last_updated-november_2024-0c7cba)
-![](https://img.shields.io/badge/vsix-v0.31.0-ef8d22)
+![](https://img.shields.io/badge/last_updated-december_2024-0c7cba)
+![](https://img.shields.io/badge/vsix-v0.31.1-ef8d22)
 
 ![](https://img.shields.io/badge/publisher-rvr06-fcc438)
 ![](https://img.shields.io/badge/chat-on_github_issue-19967d)

package.json

@@ -11,7 +11,7 @@
 	},
 	"license": "SEE LICENSE IN LICENSE.txt",
 	"publisher": "rvr06",
-	"version": "0.31.0",
+	"version": "0.31.1",
 	"preview": true,
 	"homepage": "https://github.com/rvr06/cornifer/blob/main/README.md",
 	"repository": {

src/completionProvider.ts

@@ -58,14 +58,20 @@ export function setupCompletionProvider(context: ExtensionContext) {
 				relationshipCompletion.insertText = new SnippetString('${1:identifier} -> ${2:identifier} "${3:description}" "${4:technology}" "${5:tags}"');
 				relationshipCompletion.detail = 'identifier -> identifier\n  "description"\n  "technology"\n  "tags"';
 
+				const elementCompletion = new CompletionItem('element', IconManager.gimmeCompletionItemKind('element'));
+				elementCompletion.commitCharacters = ['\t'];
+				elementCompletion.insertText = new SnippetString('${1:identifier} = element "${2:name}" "${3:metadata}" "${4:description}" "${5:tags}" {\n\t${0}\n}');
+				elementCompletion.detail = 'identifier =\n  element\n  "name"\n  "metadata"\n  "description"\n  "tags" {}';
+
 				return [
 					workspaceCompletion,
 					groupCompletion,
 					personCompletion,
 					systemCompletion,
 					containerCompletion,
 					componentCompletion,
-					relationshipCompletion
+					relationshipCompletion,
+					elementCompletion
 				];
 			}
 		});
@@ -174,14 +180,20 @@ export function setupCompletionProvider(context: ExtensionContext) {
 				filtered.insertText = new SnippetString('filtered "${1:baseview_name}" ${2:include|exclude} "${3:tags}" "${4:name}" "${5:description}"');
 				filtered.detail = 'filtered\n  "baseview_name"\n  include|exclude\n  "tags"\n  "name"\n  "description"';
 
+				const custom = new CompletionItem('custom', IconManager.gimmeCompletionItemKind('view'));
+				custom.commitCharacters = ['\t'];
+				custom.insertText = new SnippetString('custom "${1:key}" "${2:title}" "${3:description}" { \n\tinclude *\n}');
+				custom.detail = 'custom\n  "key"\n  "title"\n  "description"';
+
 				return [
 					systemLandscape,
 					systemContext,
 					container,
 					component,
 					deployment,
 					dynamic,
-					filtered
+					filtered,
+					custom
 				];
 			}
 		});

src/documentSymbolProvider.ts

@@ -24,7 +24,7 @@ export function setupDocumentSymbolProvider(context: ExtensionContext) {
         'deploymentEnvironment', 'deploymentGroup', 'deploymentNode', 'infrastructureNode',
         'softwareSystemInstance', 'containerInstance',
         'views', 'theme', 'branding', 'styles', 'properties', 'element', 'relationship',
-        'systemLandscape', 'systemContext', 'filtered', 'deployment', 'dynamic'
+        'systemLandscape', 'systemContext', 'filtered', 'deployment', 'dynamic', 'custom'
     ];
 
     const provider = languages.registerDocumentSymbolProvider(['c4', 'c4u'],

src/hoverProvider.ts

@@ -784,6 +784,22 @@ export function setupHoverProvider(context: ExtensionContext) {
 						'}',
 						'```'
 					],
+				custom:
+					['```c4u',
+						'custom "key" "title" "description" {}',
+						'```',
+						'---',
+						'>',
+						'```c4',
+						'workspace "" "" {',
+						'views {',
+						'custom "key" "title" "description" {}',
+						'```',
+						'---',
+						'### Custom view',
+						`[$(book)](${link}-view)\n`,
+						'Defines a `custom view`.',
+					],
 			};
 
 			return {

src/iconManager.ts

@@ -44,7 +44,7 @@ export class IconManager {
             'styles': CompletionItemKind.Color,
             'properties': CompletionItemKind.Color,
             'configuration': CompletionItemKind.Color,
-            'element': SymbolKind.Field,
+            'element': CompletionItemKind.Field,
             'branding': CompletionItemKind.Color
         };
 
@@ -78,6 +78,7 @@ export class IconManager {
             'deployment': SymbolKind.Struct,
             'dynamic': SymbolKind.Struct,
             'filtered': SymbolKind.Struct,
+            'custom': SymbolKind.Struct,
             'theme': SymbolKind.TypeParameter,
             'styles': SymbolKind.TypeParameter,
             'properties': SymbolKind.TypeParameter,

src/test/suite/completion.test.ts

@@ -20,11 +20,13 @@ suite('Completion item provider', () => {
 				{ label: 'container', kind: CompletionItemKind.Field },
 				{ label: 'container', kind: CompletionItemKind.Struct },
 				{ label: 'containerInstance', kind: CompletionItemKind.Variable },
+				{ label: 'custom', kind: CompletionItemKind.Struct },
 				{ label: 'deployment', kind: CompletionItemKind.Struct },
 				{ label: 'deploymentEnvironment', kind: CompletionItemKind.Class },
 				{ label: 'deploymentGroup', kind: CompletionItemKind.Interface },
 				{ label: 'deploymentNode', kind: CompletionItemKind.Interface },
 				{ label: 'dynamic', kind: CompletionItemKind.Struct },
+				{ label: 'element', kind: CompletionItemKind.Field },
 				{ label: 'filtered', kind: CompletionItemKind.Struct },
 				{ label: 'group', kind: CompletionItemKind.Keyword },
 				{ label: 'healthCheck', kind: CompletionItemKind.Event },

syntaxes/c4.tmLanguage.json

@@ -1074,6 +1074,9 @@
                 {
                     "include": "#url"
                 },
+                {
+                    "include": "#perspectives"
+                },
                 {
                     "include": "#description"
                 },