chore: add ESLint config, root package.json, and fix type import ordering

README.md

@@ -93,6 +93,30 @@ export JOINTJS_NPM_TOKEN="jjs-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
 $env:JOINTJS_NPM_TOKEN="jjs-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
 ```
 
+## 🛠️ Root Scripts
+
+After cloning the repository, install the root dev dependencies once:
+
+```bash
+npm install
+```
+
+The following scripts are then available from the repository root:
+
+| Script | Command | Description |
+|---|---|---|
+| `lint` | `npm run lint` | Lint all JS/TS files using the root ESLint config |
+| `build` | `npm run build` | Build all demos into `_site/` (stops on first failure) |
+| `screenshot` | `npm run screenshot` | Capture screenshots for demos that don't have one yet |
+
+> [!NOTE]
+> `build` require Bash. On Windows, run them from Git Bash or WSL.
+>
+> `screenshot` require Playwright's Chromium browser. Install it once with:
+> ```bash
+> npx playwright install chromium
+> ```
+
 ## 🤝 Resources
 
 - [Documentation](https://docs.jointjs.com/)

abstract-syntax-tree/js/src/app.js

@@ -48,17 +48,17 @@ export const init = () => {
 
         const cells = graphUtils.constructTree(syntax, {
             children: getChildren,
-            makeElement: function (node) {
+            makeElement: function(node) {
                 return new Node({
                     size: { width: 120, height: 30 },
                     attrs: {
-                        text: { textWrap: { text: getLabel(node) } },
+                        text: { textWrap: { text: getLabel(node) }},
                         rect: { fill: getElementColor(node) }
                     },
                     node: node
                 });
             },
-            makeLink: function (parentElement, childElement) {
+            makeLink: function(parentElement, childElement) {
                 return new Link({
                     source: { id: parentElement.id, selector: 'rect' },
                     target: { id: childElement.id, selector: 'rect' }
@@ -117,9 +117,9 @@ export const init = () => {
         displayTree();
     });
 
-    let subtrees = {};
+    const subtrees = {};
 
-    paper.on('cell:pointerclick', function (cellView) {
+    paper.on('cell:pointerclick', function(cellView) {
         const cell = cellView.model;
         if (cell.isLink())
             return;
@@ -133,7 +133,7 @@ export const init = () => {
             const successors = graph.getSuccessors(cell);
             if (successors.length > 0) {
                 subtrees[cell.id] = [].concat(graph.getSubgraph(successors), graph.getConnectedLinks(cell, { outbound: true }));
-                successors.forEach(function (successor) {
+                successors.forEach(function(successor) {
                     successor.remove();
                 });
             }

abstract-syntax-tree/js/src/helpers.js

@@ -164,7 +164,7 @@ const markField = StateField.define({
     create() { return Decoration.none; },
     update(value, tr) {
         value = value.map(tr.changes);
-        for (let effect of tr.effects) {
+        for (const effect of tr.effects) {
             if (effect.is(highlightMark))
                 value = value.update({ add: effect.value, sort: true });
             else if (effect.is(filterMarks))

abstract-syntax-tree/js/src/shapes.js

@@ -31,12 +31,12 @@ export class Node extends dia.Element {
     }
 
     markup = [{
-            tagName: 'rect',
-            selector: 'rect'
-        }, {
-            tagName: 'text',
-            selector: 'text',
-        }];
+        tagName: 'rect',
+        selector: 'rect'
+    }, {
+        tagName: 'text',
+        selector: 'text',
+    }];
 }
 
 export class Link extends shapes.standard.Link {

abstract-syntax-tree/ts/src/app.ts

@@ -75,6 +75,7 @@ export const init = () => {
         document.querySelector('#stats .stats-n-tokens').textContent = syntax.tokens.length.toString();
         document.querySelector('#stats .stats-tokens').innerHTML = '';
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         syntax.tokens.forEach((token: any) => {
             const li = document.createElement('li');
             li.setAttribute('data-range', JSON.stringify(token.range));
@@ -121,7 +122,7 @@ export const init = () => {
         displayTree();
     });
 
-    let subtrees: { [key: dia.Cell.ID]: dia.Cell[] } = {};
+    const subtrees: { [key: dia.Cell.ID]: dia.Cell[] } = {};
 
     paper.on('cell:pointerclick', function(cellView) {
         const cell = cellView.model;

abstract-syntax-tree/ts/src/helpers.ts

@@ -1,13 +1,15 @@
-import type { Range } from '@codemirror/state';
 import { StateEffect, StateField } from '@codemirror/state';
-import type { DecorationSet } from '@codemirror/view';
 import { Decoration, keymap } from '@codemirror/view';
 import { EditorView, basicSetup } from 'codemirror';
 import { indentWithTab } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
 import presets from './presets';
 
-export function getChildren(node: any) {
+import type { Range } from '@codemirror/state';
+import type { DecorationSet } from '@codemirror/view';
+import type { graphUtils } from '@joint/plus';
+
+export function getChildren(node: graphUtils.ConstructTreeNode) {
 
     switch (node.type) {
 
@@ -73,7 +75,7 @@ export function getChildren(node: any) {
     }
 }
 
-export function getLabel(node: any) {
+export function getLabel(node: graphUtils.ConstructTreeNode) {
 
     switch (node.type) {
 
@@ -94,15 +96,15 @@ export function getLabel(node: any) {
 
         case 'FunctionDeclaration':
         case 'FunctionExpression': {
-            const params = node.params.map((param: any) => param.name).join(',');
+            const params = node.params.map((param: graphUtils.ConstructTreeNode) => param.name).join(',');
             return 'function ' + (node.id && node.id.name || '') + '(' + params + ')';
         }
         default:
             return node.type;
     }
 }
 
-export function getElementColor(node: any) {
+export function getElementColor(node: graphUtils.ConstructTreeNode) {
 
     const color = ({
         'Program': 'black',
@@ -152,7 +154,7 @@ function tokenHover(e: Event) {
 export function changePreset() {
     const preset = document.getElementById('select-program') as HTMLSelectElement;
     const value = preset.value;
-    const code = (presets as any)[value];
+    const code = (presets as Record<string, string>)[value];
     editorView.dispatch({
         changes: { from: 0, to: editorView.state.doc.length, insert: code }
     });
@@ -166,7 +168,7 @@ const markField = StateField.define({
     create() { return Decoration.none; },
     update(value: DecorationSet, tr) {
         value = value.map(tr.changes);
-        for (let effect of tr.effects) {
+        for (const effect of tr.effects) {
             if (effect.is(highlightMark)) value = value.update({ add: effect.value, sort: true });
             else if (effect.is(filterMarks)) value = value.update({ filter: () => false });
         }

ai-agent-builder/js/src/controllers/KeyboardController.js

@@ -44,7 +44,7 @@ function onEscape(app) {
 
 // Conditional wrapper to execute the callback only if no dialog is opened
 function ifNoDialogOpen(callback) {
-    return function (app, evt) {
+    return function(app, evt) {
         const { state } = app;
         if (state.get(State.DialogOpened))
             return;

ai-agent-builder/js/src/diagram/data/defaults.js

@@ -33,10 +33,10 @@ export function getDefaultConditionData() {
         type: Condition.type,
         [Attribute.Label]: 'Condition',
         to: [{
-                // Add an extra branch to the existing one
-                [Attribute.EdgePrompt]: '',
-                id: util.uuid()
-            }]
+            // Add an extra branch to the existing one
+            [Attribute.EdgePrompt]: '',
+            id: util.uuid()
+        }]
     };
 }
 
@@ -45,10 +45,10 @@ export function getDefaultAgentData() {
         type: Agent.type,
         skills: {},
         to: [{
-                // Add an extra branch to the existing one
-                [Attribute.EdgePrompt]: '',
-                id: util.uuid()
-            }]
+            // Add an extra branch to the existing one
+            [Attribute.EdgePrompt]: '',
+            id: util.uuid()
+        }]
     };
 }
 

ai-agent-builder/js/src/diagram/models/Action.js

@@ -120,7 +120,7 @@ export default class Action extends LabeledNode {
 
     updateProvider(provider, action) {
         const { icon } = provider;
-        const { name = '', data = {} } = action;
+        const { name = '', data = {}} = action;
 
         this.attr({
             icon: {

ai-agent-builder/js/src/diagram/models/Button.js

@@ -32,7 +32,7 @@ export default class Button extends SystemButton {
                 },
                 icon: {
                     ...buttonIconAttributes,
-                    transform: `translate(calc(s/2), calc(s/2))`,
+                    transform: 'translate(calc(s/2), calc(s/2))',
                 }
             }
         };

ai-agent-builder/js/src/diagram/models/Edge.js

@@ -119,12 +119,12 @@ export default class Edge extends SystemEdge {
         const size = measureTextSize(wrappedText, fontSize, fontFamily);
         this.set({
             labels: [{
-                    attrs: {
-                        labelText: {
-                            text: wrappedText
-                        }
+                attrs: {
+                    labelText: {
+                        text: wrappedText
                     }
-                }],
+                }
+            }],
             // Directed graph uses this property to make space for the label
             labelSize: {
                 width: margin + size.width,

ai-agent-builder/js/src/diagram/models/Placeholder.js

@@ -42,7 +42,7 @@ export default class Placeholder extends SystemPlaceholder {
                 },
                 buttonIcon: {
                     ...buttonIconAttributes,
-                    transform: `translate(calc(w/2), calc(h/2))`,
+                    transform: 'translate(calc(w/2), calc(h/2))',
                 }
             }
         };

ai-agent-builder/js/src/diagram/tools/InsertNodeTool.js

@@ -10,14 +10,14 @@ export default class InsertNodeTool extends linkTools.Button {
         };
         /** Note: it mimics the SystemButton plus icon */
         this.children = [{
-                tagName: 'circle',
-                className: 'add-button-body',
-                attributes: { ...buttonBodyAttributes }
-            }, {
-                tagName: 'path',
-                className: 'add-button-icon',
-                attributes: { ...buttonIconAttributes }
-            }];
+            tagName: 'circle',
+            className: 'add-button-body',
+            attributes: { ...buttonBodyAttributes }
+        }, {
+            tagName: 'path',
+            className: 'add-button-icon',
+            attributes: { ...buttonIconAttributes }
+        }];
         this.options = {
             distance: '50%',
             ...options,

ai-agent-builder/js/src/features/Navigator.js

@@ -97,7 +97,7 @@ export default class Navigator {
                     min: zoomOptions.min * 100,
                     max: zoomOptions.max * 100,
                     step: zoomOptions.step,
-                    attrs: { input: { 'data-tooltip': 'Slide to zoom' } }
+                    attrs: { input: { 'data-tooltip': 'Slide to zoom' }}
                 },
                 { type: 'separator' },
                 {

ai-agent-builder/js/src/features/file-drop.js

@@ -5,17 +5,17 @@
  */
 export function enableFileDrop(paper, options = {}) {
     const { dropTarget: dropTargetEl = paper.el, format = 'text', } = options;
-    
+
     dropTargetEl.addEventListener('drop', (evt) => {
         evt.preventDefault();
-        
+
         // Always remove the drop-zone class to ensure the viewport is visible after the drop event is triggered
         dropTargetEl.classList.remove('drop-zone');
-        
-        const file = (evt.dataTransfer?.files).item(0);
+
+        const file = (evt.dataTransfer.files).item(0);
         if (!file)
             return;
-        
+
         const reader = new FileReader();
         reader.onload = () => {
             let file = reader.result;
@@ -30,15 +30,15 @@ export function enableFileDrop(paper, options = {}) {
             }
             paper.trigger('file:drop', file, evt);
         };
-        
+
         reader.readAsText(file);
     });
-    
+
     dropTargetEl.addEventListener('dragover', (evt) => {
         evt.preventDefault();
         dropTargetEl.classList.add('drop-zone');
     });
-    
+
     dropTargetEl.addEventListener('dragleave', (evt) => {
         evt.preventDefault();
         dropTargetEl.classList.remove('drop-zone');

ai-agent-builder/js/src/system/diagram/builder/index.js

@@ -19,9 +19,9 @@ const ZIndex = {
 export function buildDiagram(data, graph, options = {}) {
     const { 
     // By default the data node is used as-is to create the model.
-    buildNode = (node) => node, 
-    // By default, nodes have no growth limit.
-    growthLimit = () => Infinity, disableOptimalOrderHeuristic = true, } = options;
+        buildNode = (node) => node, 
+        // By default, nodes have no growth limit.
+        growthLimit = () => Infinity, disableOptimalOrderHeuristic = true, } = options;
     updateGraph(graph, data, buildNode, growthLimit);
     layoutGraph(graph, disableOptimalOrderHeuristic);
 }
@@ -146,15 +146,15 @@ function makeButton(nodeId) {
     const buttonId = `${nodeId}-button`;
     const buttonLineId = `${nodeId}-button-line`;
     return [{
-            id: buttonId,
-            type: SystemButton.type,
-            z: ZIndex.Button,
-        }, {
-            id: buttonLineId,
-            type: SystemButtonLine.type,
-            source: { id: nodeId },
-            target: { id: buttonId },
-            z: ZIndex.ButtonLine,
-        }];
+        id: buttonId,
+        type: SystemButton.type,
+        z: ZIndex.Button,
+    }, {
+        id: buttonLineId,
+        type: SystemButtonLine.type,
+        source: { id: nodeId },
+        target: { id: buttonId },
+        z: ZIndex.ButtonLine,
+    }];
 }
 

ai-agent-builder/ts/src/diagram/models/Agent.ts

@@ -1,9 +1,9 @@
-import type { dia } from '@joint/plus';
 import { util } from '@joint/plus';
 import LabeledNode from './LabeledNode';
 import Theme, { nodeLabelAttributes, typeLabelAttributes } from '../theme';
 import { Attribute } from '../const';
 
+import type { dia } from '@joint/plus';
 import type { LabeledNodeAttributes } from './LabeledNode';
 import type { InspectorConfig } from '../../types';