WIP

Author: GordonSmith

.gitmodules

@@ -10,3 +10,6 @@
 [submodule "ref/wit-bindgen"]
 	path = ref/wit-bindgen
 	url = https://github.com/bytecodealliance/wit-bindgen.git
+[submodule "ref/vscode-wit"]
+	path = ref/vscode-wit
+	url = https://github.com/bytecodealliance/vscode-wit.git

.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import { witLang } from '../grammar/dist/index.js'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -7,6 +8,12 @@ export default defineConfig({
     base: '/component-model-cpp',
     srcExclude: ["./build/**", "./grammar/**", "./node_modules/**", "./ref/**", "./vcpkg/**", "./vcpkg_overlays/**"],
 
+    markdown: {
+        languages: [
+            witLang()
+        ]
+    },
+
     themeConfig: {
         editLink: {
             pattern: 'https://github.com/GordonSmith/component-model-cpp/edit/main/docs/:path',
@@ -27,7 +34,8 @@ export default defineConfig({
                 items: [
                     { text: 'Generated Files Structure', link: '/docs/generated-files-structure' },
                     { text: 'Generated WAMR Helpers', link: '/docs/generated-wamr-helpers' },
-                    { text: 'Packaging', link: '/docs/PACKAGING' }
+                    { text: 'Packaging', link: '/docs/PACKAGING' },
+                    { text: 'WIT Syntax Examples', link: '/docs/wit-syntax-example' }
                 ]
             },
             {

README.md

@@ -10,6 +10,8 @@
 
 # Component Model C++ (Developer Reference)
 
+> **Under Construction:** The documentation is being reorganized and some sections may change without notice.
+
 This repository provides a header-only C++20 implementation of the WebAssembly Component Model canonical ABI. The code mirrors the official [Python Reference](https://github.com/GordonSmith/component-model-cpp/blob/main/ref/component-model/design/mvp/canonical-abi/definitions.py) and the [Specification](https://github.com/GordonSmith/component-model-cpp/blob/main/ref/component-model/design/mvp/CanonicalABI.md). All behavior (naming, state transitions, error conditions) should remain aligned with the reference.
 
 ## Official Documentation, Issues, and Discussions
@@ -37,7 +39,7 @@ include/                -> Header-only implementation (public surface via cmcpp.
   cmcpp.hpp             -> Aggregate public include (pulls in full cmcpp namespace)
   wamr.hpp              -> WAMR host integration helpers
   pfr.hpp               -> Boost.PFR lightweight reflection shim used internally
-grammar/                -> ANTLR WIT grammar and generation targets
+grammar/                -> ANTLR WIT grammar and Shiki syntax highlighting for docs
 tools/wit-codegen/      -> Binding generation utilities (WIT -> C++ host stubs)
 test/                   -> doctest suites + ICU-backed string conversion helpers
 samples/                -> Optional WAMR host sample (ENABLE via BUILD_SAMPLES)

docs/wit-syntax-example.md

@@ -0,0 +1,130 @@
+# WIT Syntax Highlighting Example
+
+This page demonstrates WIT (WebAssembly Interface Types) syntax highlighting in VitePress.
+
+## Basic Package Definition
+
+```wit
+package example:[email protected];
+
+interface types {
+    /// A person with name and age
+    record person {
+        name: string,
+        age: u32,
+    }
+    
+    /// Get a greeting for a person
+    greet: func(p: person) -> string;
+}
+
+world hello {
+    export types;
+}
+```
+
+## Resource Example
+
+```wit
+package example:[email protected];
+
+interface database {
+    /// A database connection resource
+    resource connection {
+        /// Create a new connection
+        constructor(url: string);
+        
+        /// Execute a query
+        query: func(sql: string) -> result<list<string>, string>;
+        
+        /// Close the connection
+        close: func();
+    }
+}
+```
+
+## Async Operations
+
+```wit
+package example:[email protected];
+
+interface io {
+    use wasi:io/[email protected].{input-stream, output-stream};
+    
+    /// Read data asynchronously
+    read-async: func(stream: borrow<input-stream>) -> future<result<list<u8>, error-code>>;
+    
+    /// Write data asynchronously
+    write-async: func(stream: borrow<output-stream>, data: list<u8>) -> future<result<_, error-code>>;
+}
+```
+
+## Complex Types
+
+```wit
+package example:[email protected];
+
+interface types {
+    /// Boolean values
+    type flag = bool;
+    
+    /// Variant type
+    variant color {
+        rgb(u8, u8, u8),
+        rgba(u8, u8, u8, u8),
+        named(string),
+    }
+    
+    /// Flags for permissions
+    flags permissions {
+        read,
+        write,
+        execute,
+    }
+    
+    /// Enum for log levels
+    enum log-level {
+        debug,
+        info,
+        warning,
+        error,
+    }
+    
+    /// Option type
+    type maybe-string = option<string>;
+    
+    /// Result type
+    type io-result = result<u32, string>;
+}
+```
+
+## World with Imports and Exports
+
+```wit
+package example:[email protected];
+
+world application {
+    import wasi:filesystem/[email protected];
+    import wasi:http/[email protected];
+    import wasi:clocks/[email protected];
+    
+    export run: func() -> result<_, string>;
+}
+```
+
+## Feature Gates
+
+```wit
+package example:[email protected];
+
+interface experimental {
+    @since(version = 0.2.0)
+    @unstable(feature = new-api)
+    new-function: func() -> string;
+    
+    @deprecated(since = 0.3.0)
+    old-function: func() -> string;
+}
+```
+
+The WIT syntax highlighting is provided by the grammar built from the [vscode-wit](https://github.com/bytecodealliance/vscode-wit) TextMate grammar, making it consistent with VS Code's WIT extension.

grammar/index.ts

@@ -0,0 +1,12 @@
+import type { LanguageInput } from "shiki";
+
+import wit_lang from "../ref/vscode-wit/syntaxes/wit.tmLanguage.json" with { type: "json" };
+
+export function witLang(): LanguageInput {
+    const retVal = {
+        ...wit_lang,
+        name: "wit"
+    } as unknown as LanguageInput;
+    return retVal;
+}
+

index.md

@@ -26,5 +26,7 @@ features:
     details: 🚧 Under construction 🚧  
   - title: WasmEdge Support
     details: 🚧 Under construction 🚧
+
 ---
+> **Under Construction:** Content on this site is evolving quickly; expect placeholders and frequent updates.