Live cql (#2403)

Adds live code blocks to the cxl documentation.

<img width="1050" height="1182" alt="Screenshot 2026-02-20 at 17 42 16"
src="https://github.com/user-attachments/assets/8120db2f-9a80-4492-8234-02868947e0a7"
/>

---------

Co-authored-by: Patrice Bender <patrice.bender@sap.com>
Co-authored-by: Steffen Waldmann <steffen.waldmann@sap.com>
Co-authored-by: Christian Georgi <christian.georgi@sap.com>

Author: 4 people

.vitepress/config.js

@@ -4,6 +4,7 @@ const base =  process.env.GH_BASE || '/docs/'
 // Construct vitepress config object...
 import path from 'node:path'
 import { defineConfig } from 'vitepress'
+import playground from './lib/cds-playground/index.js'
 import languages from './languages'
 import { Menu } from './menu.js'
 
@@ -79,6 +80,12 @@ const config = defineConfig({
   ],
 
   vite: {
+    plugins: [...playground.plugins()],
+    esbuild: {
+      supported: {
+        'top-level-await': true //browsers can handle top-level-await features in special cases
+      },
+    },
     build: {
       chunkSizeWarningLimit: 6000, // chunk for local search index dominates
     },
@@ -194,11 +201,13 @@ if (process.env.VITE_CAPIRE_EXTRA_ASSETS) {
 import { dl } from '@mdit/plugin-dl'
 import * as MdAttrsPropagate from './lib/md-attrs-propagate'
 import * as MdTypedModels from './lib/md-typed-models'
+import * as MdLiveCode from './lib/cds-playground/md-live-code'
 import * as MdDiagramSvg from './lib/md-diagram-svg'
 
 config.markdown.config = md => {
   MdAttrsPropagate.install(md)
   MdTypedModels.install(md)
+  MdLiveCode.install(md)
   MdDiagramSvg.install(md)
   md.use(dl)
 }

.vitepress/languages/index.ts

@@ -5,7 +5,7 @@ import scsv from './scsv.tmLanguage.json' with {type:'json'}
 
 import type { LanguageInput } from 'shiki'
 export default [
-  { ...cds, aliases:['cds','dcl'] },
+  { ...cds, aliases:['cds','dcl', 'cql'] },
   { ...csv, aliases:['csv','csvc'] },
   { ...scsv, aliases:['csvs'] },
   { ...log, aliases:['log','logs'] },

.vitepress/lib/cds-playground/index.js

@@ -0,0 +1,23 @@
+import templates from './vite-plugin-templates'
+import path from 'path'
+
+let enabled = false
+let plugins = () => []
+
+try {
+  const { node, cap } = await import('vite-plugin-cds')
+  plugins = () => {
+    return [node(), cap(), templates([path.join(__dirname, 'templates')])]
+  }
+  enabled = true
+}
+catch {
+  // eslint-disable-next-line no-console
+  console.error('live code not available - run `npm i` to update your modules')
+}
+
+export {
+  enabled,
+  plugins,
+}
+export default { enabled, plugins }

.vitepress/lib/cds-playground/md-live-code.ts

@@ -0,0 +1,73 @@
+import { MarkdownRenderer, MarkdownEnv } from 'vitepress'
+import { dirname, join, relative } from 'path'
+import { enabled } from '.'
+
+/**
+ * Makes code blocks with "live" in the info string interactive by rendering a <LiveCode /> component.
+ *
+ * ```cds live
+ * select from Books { title }
+ * ```
+ * 
+ * ```js live
+ * await INSERT.into('Books').entries(
+ *   { ID: 2, author_ID: 150, title: 'Eldorado' }
+ * )
+ * ```
+ *
+ * Additional options:
+ * - as <lang>: specify the language to execute the code block as (defaults to the language specified before "live")
+ *   example: ```cds live as cql
+ * - readonly: make the code block readonly
+ *   example: ```cds live readonly
+ */
+export function install(md: MarkdownRenderer) {
+  if (!enabled) return
+  const fence = md.renderer.rules.fence
+  md.renderer.rules.fence = (tokens, idx, options, env: MarkdownEnv, ...args) => {
+
+    const { info } = tokens[idx]
+    const [language, live, ...rest] = info.split(' ')
+    if (live === 'live') {
+      const mdDir = dirname(env.realPath ?? env.path)
+      const filePath = './' + relative(mdDir, join(__dirname, '../../theme/components/cds-playground/LiveCode.vue'))
+      const imp = `import LiveCode from "${filePath}";`
+      insertScriptSetup(env, imp)
+
+      const opts = Object.fromEntries(['as'].map(key => {
+        const idx = rest.findIndex(k => k === key)
+        return idx > -1 ? [key, rest.splice(idx+1, 1)[0]] : [];
+      }))
+      const props = {
+        language: opts.as ?? language,
+      }
+      const flags = ['readonly'].filter(k => rest.includes(k))
+
+      const content = tokens[idx].content.trim()
+      return `<LiveCode initialQuery="${md.utils.escapeHtml(content)}" ${Object.entries(props).map(([k, v]) => `${k}="${v}"`)} ${flags.join(' ')}></LiveCode>`
+    }
+    return fence!(tokens, idx, options, env, ...args)
+  }
+}
+
+function insertScriptSetup(env: MarkdownEnv, imp: string) {
+  const sfcBlocks = env.sfcBlocks! 
+  if (!sfcBlocks.scriptSetup) {
+    sfcBlocks.scriptSetup = {
+      content: '<script setup>\n</script>',
+      contentStripped: '\n',
+      tagClose: '</script>',
+      tagOpen: '<script setup>',
+      type: 'script'
+    }
+    sfcBlocks.scripts.push(sfcBlocks.scriptSetup)
+  }
+
+  const { scriptSetup } = sfcBlocks
+  const { tagOpen, tagClose, contentStripped: rest } = scriptSetup
+
+  if (!scriptSetup.content.includes(imp)) {
+    scriptSetup.contentStripped = `${imp}\n${rest}`
+    scriptSetup.content = `${tagOpen}${imp}\n${rest}${tagClose}`
+  }
+}

.vitepress/lib/cds-playground/templates/bookshop/db/data/sap.capire.bookshop-Authors.csv

@@ -0,0 +1,5 @@
+ID,name,dateOfBirth,placeOfBirth,dateOfDeath,placeOfDeath
+101,Emily Brontë,1818-07-30,"Thornton, Yorkshire",1848-12-19,"Haworth, Yorkshire"
+107,Charlotte Brontë,1818-04-21,"Thornton, Yorkshire",1855-03-31,"Haworth, Yorkshire"
+150,Edgar Allen Poe,1809-01-19,"Boston, Massachusetts",1849-10-07,"Baltimore, Maryland"
+170,Richard Carpenter,1929-08-14,"King’s Lynn, Norfolk",2012-02-26,"Hertfordshire, England"

.vitepress/lib/cds-playground/templates/bookshop/db/data/sap.capire.bookshop-Books.csv

@@ -0,0 +1,6 @@
+ID,title,descr,author_ID,stock,price,currency_code,genre_ID
+201,Wuthering Heights,"Wuthering Heights, Emily Brontë's only novel, was published in 1847 under the pseudonym ""Ellis Bell"". It was written between October 1845 and June 1846. Wuthering Heights and Anne Brontë's Agnes Grey were accepted by publisher Thomas Newby before the success of their sister Charlotte's novel Jane Eyre. After Emily's death, Charlotte edited the manuscript of Wuthering Heights and arranged for the edited version to be published as a posthumous second edition in 1850.",101,12,11.11,GBP,11aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
+207,Jane Eyre,"Jane Eyre /ɛər/ (originally published as Jane Eyre: An Autobiography) is a novel by English writer Charlotte Brontë, published under the pen name ""Currer Bell"", on 16 October 1847, by Smith, Elder & Co. of London. The first American edition was published the following year by Harper & Brothers of New York. Primarily a bildungsroman, Jane Eyre follows the experiences of its eponymous heroine, including her growth to adulthood and her love for Mr. Rochester, the brooding master of Thornfield Hall. The novel revolutionised prose fiction in that the focus on Jane's moral and spiritual development is told through an intimate, first-person narrative, where actions and events are coloured by a psychological intensity. The book contains elements of social criticism, with a strong sense of Christian morality at its core and is considered by many to be ahead of its time because of Jane's individualistic character and how the novel approaches the topics of class, sexuality, religion and feminism.",107,11,12.34,GBP,11aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
+251,The Raven,"""The Raven"" is a narrative poem by American writer Edgar Allan Poe. First published in January 1845, the poem is often noted for its musicality, stylized language, and supernatural atmosphere. It tells of a talking raven's mysterious visit to a distraught lover, tracing the man's slow fall into madness. The lover, often identified as being a student, is lamenting the loss of his love, Lenore. Sitting on a bust of Pallas, the raven seems to further distress the protagonist with its constant repetition of the word ""Nevermore"". The poem makes use of folk, mythological, religious, and classical references.",150,333,13.13,USD,16aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
+252,Eleonora,"""Eleonora"" is a short story by Edgar Allan Poe, first published in 1842 in Philadelphia in the literary annual The Gift. It is often regarded as somewhat autobiographical and has a relatively ""happy"" ending.",150,555,14,USD,15aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
+271,Catweazle,"Catweazle is a British fantasy television series, starring Geoffrey Bayldon in the title role, and created by Richard Carpenter for London Weekend Television. The first series, produced and directed by Quentin Lawrence, was screened in the UK on ITV in 1970. The second series, directed by David Reid and David Lane, was shown in 1971. Each series had thirteen episodes, most but not all written by Carpenter, who also published two books based on the scripts.",170,22,150,JPY,13aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa

.vitepress/lib/cds-playground/templates/bookshop/db/data/sap.capire.bookshop-Books.texts.csv

@@ -0,0 +1,5 @@
+ID_texts,ID,locale,title,descr
+d2a65a27-9f2a-480f-bc38-84ee8ec5c13e,201,de,Sturmhöhe,"Sturmhöhe (Originaltitel: Wuthering Heights) ist der einzige Roman der englischen Schriftstellerin Emily Brontë (1818–1848). Der 1847 unter dem Pseudonym Ellis Bell veröffentlichte Roman wurde vom viktorianischen Publikum weitgehend abgelehnt, heute gilt er als ein Klassiker der britischen Romanliteratur des 19. Jahrhunderts."
+8c42c706-a979-41cf-9ffe-91e6cf1383a0,201,fr,Les Hauts de Hurlevent,"Les Hauts de Hurlevent (titre original : Wuthering Heights), parfois orthographié Les Hauts de Hurle-Vent, est l'unique roman d'Emily Brontë, publié pour la première fois en 1847 sous le pseudonyme d’Ellis Bell. Loin d'être un récit moralisateur, Emily Brontë achève néanmoins le roman dans une atmosphère sereine, suggérant le triomphe de la paix et du Bien sur la vengeance et le Mal."
+9e1c4c81-dc90-4600-85b1-e9dd4bf12ce0,207,de,Jane Eyre,"Jane Eyre. Eine Autobiographie (Originaltitel: Jane Eyre. An Autobiography), erstmals erschienen im Jahr 1847 unter dem Pseudonym Currer Bell, ist der erste veröffentlichte Roman der britischen Autorin Charlotte Brontë und ein Klassiker der viktorianischen Romanliteratur des 19. Jahrhunderts. Der Roman erzählt in Form einer Ich-Erzählung die Lebensgeschichte von Jane Eyre (ausgesprochen /ˌdʒeɪn ˈɛə/), die nach einer schweren Kindheit eine Stelle als Gouvernante annimmt und sich in ihren Arbeitgeber verliebt, jedoch immer wieder um ihre Freiheit und Selbstbestimmung kämpfen muss. Als klein, dünn, blass, stets schlicht dunkel gekleidet und mit strengem Mittelscheitel beschrieben, gilt die Heldin des Romans Jane Eyre nicht zuletzt aufgrund der Kino- und Fernsehversionen der melodramatischen Romanvorlage als die bekannteste englische Gouvernante der Literaturgeschichte"
+9be0524b-4cb9-4fc1-9dc2-d65b1c13cf53,252,de,Eleonora,"“Eleonora” ist eine Erzählung von Edgar Allan Poe. Sie wurde 1841 erstveröffentlicht. In ihr geht es um das Paradox der Treue in der Treulosigkeit."

.vitepress/lib/cds-playground/templates/bookshop/db/data/sap.capire.bookshop-Genres.csv

@@ -0,0 +1,43 @@
+ID,parent_ID,name
+10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,,Fiction
+11aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Drama
+12aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Poetry
+13aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Fantasy
+131aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,13aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Fairy Tale
+132aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,13aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Epic Fantasy
+133aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,13aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,High Fantasy
+134aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,13aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Gothic
+14aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Science Fiction
+141aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,14aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Utopian and Dystopian
+1411aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,141aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Utopian
+1412aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,141aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Dystopian
+14121aaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,1412aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Cyberpunk
+141211aa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,14121aaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Steampunk
+142aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,14aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Space Opera
+143aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,14aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Time Travel
+144aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,14aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Tech Noir
+15aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Romance
+151aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,15aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Contemporary Romance
+152aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,15aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Historical Romance
+153aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,15aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Romantic Suspense
+16aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Mystery
+161aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,16aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Crime
+1611aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,161aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Thriller
+16111aaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,1611aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Police Procedural
+16112aaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,1611aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Legal Thriller
+16113aaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,1611aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Medical Thriller
+16114aaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,1611aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Spy Thriller
+1612aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,161aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Detective
+1613aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,161aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Suspense
+162aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,16aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Noir
+1621aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,162aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Nordic Noir
+1622aaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,162aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Tart Noir
+163aaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,16aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Cozy Mystery
+17aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Adventure
+18aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Short Story
+19aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,10aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Graphic Novel
+20aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,,Non-Fiction
+21aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,20aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Biography
+22aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,21aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Autobiography
+23aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,20aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Essay
+24aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,20aaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa,Speech

.vitepress/lib/cds-playground/templates/bookshop/db/schema.cds

@@ -0,0 +1,42 @@
+using { Currency, cuid, managed, sap } from '@sap/cds/common';
+namespace sap.capire.bookshop;
+
+entity Books {
+  key ID   : Integer;
+  author   : Association to Authors @mandatory;
+  title    : localized String @mandatory;
+  descr    : localized String(2000);
+  genre    : Association to Genres;
+  stock    : Integer;
+  price    : Price;
+  currency : Currency;
+
+  total = price * stock;
+}
+
+entity Authors {
+  key ID       : Integer;
+  name         : String @mandatory;
+  dateOfBirth  : Date;
+  dateOfDeath  : Date;
+  placeOfBirth : String;
+  placeOfDeath : String;
+  books        : Association to many Books on books.author = $self;
+
+  cheapBooks   = books[price < 19.99]; // based on `books` association
+  age = years_between(dateOfBirth, coalesce(dateOfDeath, date( $now )));
+}
+
+/** Hierarchically organized Code List for Genres */
+entity Genres : cuid, sap.common.CodeList {
+  parent   : Association to Genres;
+  children : Composition of many Genres on children.parent = $self;
+}
+
+type Price : Decimal(9,2);
+
+// --------------------------------------------------------------------------------
+// Temporary workaround for this situation:
+// - Fiori apps in bookstore annotate Books with @fiori.draft.enabled.
+// - Because of that .csv data has to eagerly fill in ID_texts column.
+annotate Books with @fiori.draft.enabled;

.vitepress/lib/cds-playground/templates/bookshop/readme.md

@@ -0,0 +1,3 @@
+# capire/bookshop
+
+A copy of the [capire/bookshop](https://github.com/capire/bookshop) model.