add DuckDB support

.agents/skills/livecodes/language-support/references/languages.md

@@ -163,6 +163,7 @@ Enabled via `processors` config:
 | ---------- | ------------------------------------------------------------ | ------------------- |
 | SQL        | `sql`, `sqlite`, `sqlite3`                                   | SQLite in browser   |
 | PostgreSQL | `pg.sql`, `pgsql.sql`, `pgsql`, `pg`, `pglite`, `postgresql` | PGLite              |
+| DuckDB     | `duckdb`, `duckdb.sql`                                       | DuckDB-Wasm         |
 | Prolog     | `prolog.pl`, `prolog`                                        | Prolog logic        |
 | MiniZinc   | `minizinc`, `mzn`, `dzn`                                     | Constraint modeling |
 | JSON       | `json`                                                       | JSON data           |

README.md

@@ -13,7 +13,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 [![LiveCodes: npm version](https://img.shields.io/npm/v/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: npm downloads](https://img.shields.io/npm/dm/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/livecodes)
-[![LiveCodes: languages](https://img.shields.io/badge/languages-122-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: languages](https://img.shields.io/badge/languages-123-blue)](https://livecodes.io/docs/languages/)
 [![LiveCodes: docs](https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white)](https://livecodes.io/docs/)
 [![LiveCodes: llms.txt](https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms.txt)
 [![LiveCodes: llms-full.txt](https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms-full.txt)

docs/docs/languages/duckdb.mdx

@@ -0,0 +1,154 @@
+# DuckDB
+
+[DuckDB](https://duckdb.org/) is an in-process SQL OLAP (analytical) database management system. LiveCodes runs DuckDB in the browser using [DuckDB-Wasm](https://github.com/duckdb/duckdb-wasm) (DuckDB packaged as [Wasm](https://webassembly.org/)).
+
+:::info Note
+
+Please note that LiveCodes also supports [SQL using SQLite](./sql.mdx) and [PostgreSQL](./postgresql.mdx).
+
+:::
+
+## Usage
+
+The SQL code runs (in the browser) and the output is produced as a JSON object. This JSON object is added to the [result page](../features/result.mdx) in a `script` block with type `application/json`.
+
+[Helper methods](#helper-methods) are provided for easy access/rendering of the JSON object (see below).
+
+### Helper Methods
+
+The JavaScript object `livecodes.sql` is globally available in the [result page](../features/result.mdx). This can be used in `script` blocks in the [markup editor](../features/projects.mdx) (page HTML - see HTML editor is [example usage](#example-usage)). It provides the following methods for easy access/rendering of the JSON object:
+
+- `livecodes.sql.getResult`
+
+  Type: `() => Promise<{ data: Array<{ columns: string[]; values: unknown[][]; }>}>`:
+
+  Returns a promise that resolves to the JSON object. The object has a single property `data` which is an array of objects, each representing the output of a query (e.g. `SELECT * FROM table`). Each object has two properties `columns` (an array of column names) and `values` (an array of arrays of values).
+
+  In case of errors, the promise rejects with the error message.
+
+  Example:
+
+  ```html title="HTML"
+  <script>
+    livecodes.sql
+      .getResult()
+      .then((result) => {
+        console.log(result);
+        // { data: [{ columns: ['columnA', 'columnB'], values: [['row 1 - value A', 'row 1 - value B'], ['row 2 - value A', 'row 2 - value B']] }] }
+      })
+      .catch((error) => {
+        console.error(error);
+        // 'error message'
+      });
+  </script>
+  ```
+
+- `livecodes.sql.getResultAsObjects`
+
+  Type: `() => Promise<{ [key: string]: unknown; }[][]>`:
+
+  Returns a promise that resolves to the data as an array (representing queries/tables) of arrays (representing rows) of objects. Each object has key/value pairs for the column names and their values.
+
+  In case of errors, the promise rejects with the error message.
+
+  Example:
+
+  ```html title="HTML"
+  <script>
+    livecodes.sql
+      .getResultAsObjects()
+      .then((result) => {
+        console.log(result);
+        // [[{ columnA: 'row 1 - value A', columnB: 'row 1 - value B' }, { columnA: 'row 2 - value A', columnB: 'row 2 - value B' }]]
+      })
+      .catch((error) => {
+        console.error(error);
+        // 'error message'
+      });
+  </script>
+  ```
+
+- `livecodes.sql.render: (element?: HTMLElement | string) => Promise<void>`:
+
+  Accepts a single parameter which can be a DOM element or a CSS selector and renders the JSON object as HTML `table`(s) in that element. If no element is specified, it renders the table(s) in `document.body`.
+
+  Example:
+
+  ```html title="HTML"
+  <div id="tables"></div>
+  <script>
+    livecodes.sql.render('#tables');
+  </script>
+  ```
+
+:::info Note
+
+Helper methods for DuckDB are identical to those for [SQL using SQLite](./sql.mdx) and [PostgreSQL](./postgresql.mdx). So the same code can be used for all engines.
+
+:::
+
+### Limitations
+
+Currently parameters are not supported.
+
+### Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+<LiveCodes template="duckdb"></LiveCodes>
+
+### Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) added to the property `duckdb` are used during running the SQL code. It is a JSON object with the following properties:
+
+- `scriptURLs`: An array of URLs to SQL scripts that should be loaded before running the SQL code.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+**Example:**
+
+```json title="Custom Settings"
+{
+  "duckdb": {
+    "scriptURLs": ["https://myserver.com/sql.sql"]
+  }
+}
+```
+
+## Language Info
+
+### Name
+
+`duckdb`
+
+### Aliases/Extensions
+
+`duckdb.sql`, `duckdb`
+
+### Editor
+
+`script`
+
+## Compiler
+
+[DuckDB-Wasm](https://github.com/duckdb/duckdb-wasm)
+
+### Version
+
+`@duckdb/duckdb-wasm`: v1.32.0
+
+## Code Formatting
+
+using [`sql-formatter`](https://github.com/sql-formatter-org/sql-formatter)
+
+## Starter Template
+
+https://livecodes.io/?template=duckdb
+
+## Links
+
+- [DuckDB official website](https://duckdb.org/)
+- [DuckDB documentation](https://duckdb.org/docs/)
+- [DuckDB-Wasm GitHub repo](https://github.com/duckdb/duckdb-wasm)
+- [SQL in LiveCodes](./sql.mdx) (using SQLite)
+- [PostgreSQL in LiveCodes](./postgresql.mdx)

docs/src/components/LanguageSliders.tsx

@@ -133,6 +133,7 @@ export default function Sliders() {
       { name: 'assembly-wasm', title: 'Assembly (Wasm)' },
       { name: 'sql', title: 'SQL' },
       { name: 'postgresql', title: 'PostgreSQL' },
+      { name: 'duckdb', title: 'DuckDB' },
       { name: 'prolog', title: 'Prolog' },
       { name: 'minizinc', title: 'MiniZinc' },
       { name: 'blockly', title: 'Blockly' },

docs/src/components/TemplateList.tsx

@@ -90,6 +90,7 @@ const templates = [
   { name: 'assembly-wasm', title: 'Assembly (Wasm) Starter', thumbnail: 'assembly.svg' },
   { name: 'sql', title: 'SQL Starter', thumbnail: 'sqlite.svg' },
   { name: 'postgresql', title: 'PostgreSQL Starter', thumbnail: 'postgresql.svg' },
+  { name: 'duckdb', title: 'DuckDB Starter', thumbnail: 'duckdb.svg' },
   { name: 'prolog', title: 'Prolog Starter', thumbnail: 'tau-prolog.svg' },
   { name: 'minizinc', title: 'MiniZinc Starter', thumbnail: 'minizinc.png' },
   { name: 'blockly', title: 'Blockly Starter', thumbnail: 'blockly.svg' },

e2e/specs/starter.spec.ts

@@ -1804,6 +1804,18 @@ test.describe('Starter Templates from URL', () => {
     expect(resultText).toContain('Whatever you do, do it well. – Walt Disney');
   });
 
+  test('DuckDB Starter (in URL)', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl({ template: 'duckdb' }));
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const resultText = await getResult().innerText('table');
+    expect(resultText).toContain('Whatever you do, do it well. – Walt Disney');
+  });
+
   test('Prolog Starter (in URL)', async ({ page, getTestUrl }) => {
     await page.goto(getTestUrl({ template: 'prolog' }));
 

functions/vendors/templates.js

@@ -89,6 +89,7 @@ export const starterTemplates = {
   "assembly-wasm": "Assembly (Wasm) Starter",
   "sql": "SQL Starter",
   "postgresql": "PostgreSQL Starter",
+  "duckdb": "DuckDB Starter",
   "prolog": "Prolog Starter",
   "minizinc": "MiniZinc Starter",
   "blockly": "Blockly Starter",

scripts/build.js

@@ -201,6 +201,7 @@ const esmBuild = () =>
       'UI/code-to-image.ts',
       'languages/diagrams/lang-diagrams-compiler-esm.ts',
       'languages/postgresql/lang-postgresql-compiler-esm.ts',
+      'languages/duckdb/lang-duckdb-compiler-esm.ts',
       'languages/r/lang-r-script-esm.ts',
       'languages/rescript/lang-rescript-compiler-esm.ts',
       'i18n/i18n.ts',

server/php/inc/starter-templates.json

@@ -89,6 +89,7 @@
   "assembly-wasm": "Assembly (Wasm) Starter",
   "sql": "SQL Starter",
   "postgresql": "PostgreSQL Starter",
+  "duckdb": "DuckDB Starter",
   "prolog": "Prolog Starter",
   "minizinc": "MiniZinc Starter",
   "blockly": "Blockly Starter",

src/livecodes/UI/command-menu-actions.ts

@@ -345,6 +345,7 @@ export const getCommandMenuActions = ({
         'assembly-wasm',
         'sql',
         'postgresql',
+        'duckdb',
         'prolog',
         'minizinc',
         'blockly',

src/livecodes/compiler/compile.page.ts

@@ -1,4 +1,5 @@
 import { runOutsideWorker as diagrams } from '../languages/diagrams';
+import { runOutsideWorker as duckdb } from '../languages/duckdb';
 import { runOutsideWorker as mdx } from '../languages/mdx';
 import { runOutsideWorker as postgresql } from '../languages/postgresql';
 import { runOutsideWorker as rescript } from '../languages/rescript';
@@ -10,4 +11,5 @@ import { runOutsideWorker as rescript } from '../languages/rescript';
   mdx,
   diagrams,
   postgresql,
+  duckdb,
 };

src/livecodes/html/language-info.html

@@ -1984,6 +1984,33 @@ <h3 data-i18n="language-info:phpWasm.name">PHP (Wasm)</h3>
     </li>
   </ul>
 </section>
+<section data-lang="duckdb">
+  <h3 data-i18n="language-info:duckdb.name">DuckDB</h3>
+  <div data-i18n="language-info:duckdb.desc">DuckDB packaged as WASM using DuckDB-Wasm</div>
+  <ul data-i18n="language-info:duckdb.link" data-i18n-prop="innerHTML">
+    <li>
+      <a href="https://duckdb.org/" target="_blank" rel="noopener">DuckDB official website</a>
+    </li>
+    <li>
+      <a href="https://duckdb.org/docs/" target="_blank" rel="noopener">DuckDB documentation</a>
+    </li>
+    <li>
+      <a href="https://github.com/duckdb/duckdb-wasm" target="_blank" rel="noopener"
+        >DuckDB-Wasm GitHub repo</a
+      >
+    </li>
+    <li>
+      <a href="https://learnxinyminutes.com/sql/" target="_blank" rel="noopener"
+        >Learn X in Y minutes, where X=SQL</a
+      >
+    </li>
+    <li>
+      <a href="?template=duckdb" class="button" target="_parent" data-template="duckdb"
+        >Load starter template</a
+      >
+    </li>
+  </ul>
+</section>
 <section data-lang="postgresql">
   <h3 data-i18n="language-info:postgresql.name">PostgreSQL</h3>
   <div data-i18n="language-info:postgresql.desc">PostgreSQL packaged as WASM using PGlite</div>

src/livecodes/i18n/locales/ar/language-info.lokalise.json

@@ -1,7 +1,7 @@
 {
   "$comment": "ATTENTION: This file is auto-generated from source code. Do not edit manually!",
   "adaWasm.desc": {
-    "translation": "يتم تجميع Ada وتشغيله بالكامل داخل المتصفح بواسطة <1>HAC</1>، وهو مُترجم Ada مكتوب بلغة Ada ومُجمَّع إلى WebAssembly. لا يتضمن ذلك أي خادم."
+    "translation": "يتم تجميع Ada وتشغيله بالكامل داخل المتصفح بواسطة <tag-1>HAC</tag-1>، وهو مُترجم Ada مكتوب بلغة Ada ومُجمَّع إلى WebAssembly. لا يتضمن ذلك أي خادم."
   },
   "adaWasm.link": {
     "translation": "<tag-1> <tag-2>مركز معلومات Ada</tag-2> </tag-1> <tag-3> <tag-4>برمجة Ada (ويكيبوكس)</tag-4> </tag-3> <tag-5> <tag-6>مستودع HAC</tag-6> </tag-5> <tag-7> <tag-8>وثائق LiveCodes</tag-8> </tag-7> <tag-9> <tag-10>تحميل قالب البداية</tag-10> </tag-9>"
@@ -243,6 +243,15 @@
   "dot.name": {
     "translation": "doT.js"
   },
+  "duckdb.desc": {
+    "translation": "DuckDB معبأة كـ WASM باستخدام DuckDB-Wasm"
+  },
+  "duckdb.link": {
+    "translation": "<tag-1> <tag-2>الموقع الرسمي لـ DuckDB</tag-2> </tag-1> <tag-3> <tag-4>وثائق DuckDB</tag-4> </tag-3> <tag-5> <tag-6>مستودع GitHub لـ DuckDB-Wasm</tag-6> </tag-5> <tag-7> <tag-8>تعلم X في Y دقائق، حيث X=SQL</tag-8> </tag-7> <tag-9> <tag-10>تحميل القالب الأولي</tag-10> </tag-9>"
+  },
+  "duckdb.name": {
+    "translation": "DuckDB"
+  },
   "ejs.desc": {
     "translation": "قوالب JavaScript المضمنة."
   },

src/livecodes/i18n/locales/ar/language-info.ts

@@ -377,6 +377,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1> <2>الموقع الرسمي لـ PostgreSQL</2> </1> <3> <4>وثائق PostgreSQL</4> </3> <5> <6>مستودع GitHub لـ PGlite</6> </5> <7> <8>تعلم X في Y دقائق، حيث X=SQL</8> </7> <9> <10>تحميل القالب الأولي</10> </9>',
     name: 'PostgreSQL',
   },
+  duckdb: {
+    desc: 'DuckDB معبأة كـ WASM باستخدام DuckDB-Wasm',
+    link: '<1> <2>الموقع الرسمي لـ DuckDB</2> </1> <3> <4>وثائق DuckDB</4> </3> <5> <6>مستودع GitHub لـ DuckDB-Wasm</6> </5> <7> <8>تعلم X في Y دقائق، حيث X=SQL</8> </7> <9> <10>تحميل القالب الأولي</10> </9>',
+    name: 'DuckDB',
+  },
   prolog: {
     desc: 'مترجم Prolog مفتوح المصدر في JavaScript.',
     link: '<1> <2>الموقع الرسمي لـ Tau Prolog</2> </1> <3> <4>وثائق Tau Prolog</4> </3> <5> <6>SWI-Prolog</6> </5> <7> <8>تعلم X في Y دقائق، حيث X=Prolog</8> </7> <9> <10>تحميل القالب الأولي</10> </9>',

src/livecodes/i18n/locales/ar/translation.lokalise.json

@@ -1989,6 +1989,9 @@
   "templates.starter.diagrams": {
     "translation": "قالب الرسوم البيانية"
   },
+  "templates.starter.duckdb": {
+    "translation": "قالب DuckDB"
+  },
   "templates.starter.elm": {
     "translation": "قالب Elm"
   },

src/livecodes/i18n/locales/ar/translation.ts

@@ -1043,6 +1043,7 @@ const translation: I18nTranslation = {
       php: 'قالب PHP',
       'php-wasm': 'قالب PHP (Wasm)',
       postgresql: 'قالب PostgreSQL',
+      duckdb: 'قالب DuckDB',
       preact: 'قالب Preact',
       prolog: 'قالب Prolog',
       python: 'قالب Python',

src/livecodes/i18n/locales/bn/language-info.lokalise.json

@@ -1,7 +1,7 @@
 {
   "$comment": "ATTENTION: This file is auto-generated from source code. Do not edit manually!",
   "adaWasm.desc": {
-    "translation": "Ada সম্পূর্ণরূপে ব্রাউজারে <1>HAC</1> দ্বারা কম্পাইল ও চালিত হয়, যা Ada-তে লেখা এবং WebAssembly-তে কম্পাইল করা একটি Ada কম্পাইলার। কোনো সার্ভার জড়িত নয়।"
+    "translation": "Ada সম্পূর্ণরূপে ব্রাউজারে <tag-1>HAC</tag-1> দ্বারা কম্পাইল ও চালিত হয়, যা Ada-তে লেখা এবং WebAssembly-তে কম্পাইল করা একটি Ada কম্পাইলার। কোনো সার্ভার জড়িত নয়।"
   },
   "adaWasm.link": {
     "translation": "<tag-1> <tag-2>Ada তথ্য কেন্দ্র</tag-2> </tag-1> <tag-3> <tag-4>Ada প্রোগ্রামিং (উইকিবই)</tag-4> </tag-3> <tag-5> <tag-6>HAC রিপো</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes ডকুমেন্টেশন</tag-8> </tag-7> <tag-9> <tag-10>স্টার্টার টেমপ্লেট লোড করুন</tag-10> </tag-9>"
@@ -243,6 +243,15 @@
   "dot.name": {
     "translation": "doT.js"
   },
+  "duckdb.desc": {
+    "translation": "DuckDB-Wasm ব্যবহার করে WASM হিসাবে প্যাকেজ করা DuckDB"
+  },
+  "duckdb.link": {
+    "translation": "<tag-1> <tag-2>DuckDB অফিসিয়াল ওয়েবসাইট</tag-2> </tag-1> <tag-3> <tag-4>DuckDB ডকুমেন্টেশন</tag-4> </tag-3> <tag-5> <tag-6>DuckDB-Wasm GitHub রেপো</tag-6> </tag-5> <tag-7> <tag-8>Y মিনিটে X শিখুন, যেখানে X=SQL</tag-8> </tag-7> <tag-9> <tag-10>স্টার্টার টেমপ্লেট লোড করুন</tag-10> </tag-9>"
+  },
+  "duckdb.name": {
+    "translation": "DuckDB"
+  },
   "ejs.desc": {
     "translation": "এম্বেডেড JavaScript টেমপ্লেটিং।"
   },

src/livecodes/i18n/locales/bn/language-info.ts

@@ -379,6 +379,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1> <2>PostgreSQL অফিসিয়াল ওয়েবসাইট</2> </1> <3> <4>PostgreSQL ডকুমেন্টেশন</4> </3> <5> <6>PGlite GitHub রেপো</6> </5> <7> <8>Y মিনিটে X শিখুন, যেখানে X=SQL</8> </7> <9> <10>স্টার্টার টেমপ্লেট লোড করুন</10> </9>',
     name: 'PostgreSQL',
   },
+  duckdb: {
+    desc: 'DuckDB-Wasm ব্যবহার করে WASM হিসাবে প্যাকেজ করা DuckDB',
+    link: '<1> <2>DuckDB অফিসিয়াল ওয়েবসাইট</2> </1> <3> <4>DuckDB ডকুমেন্টেশন</4> </3> <5> <6>DuckDB-Wasm GitHub রেপো</6> </5> <7> <8>Y মিনিটে X শিখুন, যেখানে X=SQL</8> </7> <9> <10>স্টার্টার টেমপ্লেট লোড করুন</10> </9>',
+    name: 'DuckDB',
+  },
   prolog: {
     desc: 'JavaScript-এ একটি ওপেন সোর্স Prolog ইন্টারপ্রেটার।',
     link: '<1> <2>Tau Prolog অফিসিয়াল ওয়েবসাইট</2> </1> <3> <4>Tau Prolog ডকুমেন্টেশন</4> </3> <5> <6>SWI-Prolog</6> </5> <7> <8>Y মিনিটে X শিখুন, যেখানে X=Prolog</8> </7> <9> <10>স্টার্টার টেমপ্লেট লোড করুন</10> </9>',

src/livecodes/i18n/locales/bn/translation.lokalise.json

@@ -1989,6 +1989,9 @@
   "templates.starter.diagrams": {
     "translation": "Diagrams স্টার্টার"
   },
+  "templates.starter.duckdb": {
+    "translation": "DuckDB স্টার্টার"
+  },
   "templates.starter.elm": {
     "translation": "Elm স্টার্টার"
   },

src/livecodes/i18n/locales/bn/translation.ts

@@ -1043,6 +1043,7 @@ const translation: I18nTranslation = {
       php: 'PHP স্টার্টার',
       'php-wasm': 'PHP (Wasm) স্টার্টার',
       postgresql: 'PostgreSQL স্টার্টার',
+      duckdb: 'DuckDB স্টার্টার',
       preact: 'Preact স্টার্টার',
       prolog: 'Prolog স্টার্টার',
       python: 'Python স্টার্টার',