@agentix-e/spel-editor 0.1.1 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.1.1] - 2026-07-14
+
+### Changed
+- Remove unused imports across source files
+- Add `.prettierrc` configuration for consistent formatting
+- Tighten `tsconfig.json` strictness checks
+
+### Added
+- Playwright browser integration tests (`test:browser` / `test:browser:ui`)
+- nl2spel integration tests with DeepSeek provider
+- `DEEPSEEK_API_KEY` secret handling for integration tests
+
 ## [0.1.0] - 2026-07-12
 
 ### Added
@@ -16,4 +28,5 @@ All notable changes to this project will be documented in this file.
 - `change` event with `value` and `isValid` detail
 - Framework-agnostic — works with React, Vue, Angular, Svelte, or plain HTML
 
+[0.1.1]: https://github.com/AgentiX-E/spel-editor/releases/tag/v0.1.1
 [0.1.0]: https://github.com/AgentiX-E/spel-editor/releases/tag/v0.1.0

package/README.md

@@ -85,6 +85,145 @@ npm install @agentix-e/spel-editor
 | `--spel-border-color` | `#d0d5dd` | Editor border color |
 | `--spel-border-radius` | `6px` | Editor border radius |
 
+## NL Integration — Natural Language → SpEL
+
+`@agentix-e/spel-editor` accepts `@agentix-e/nl2spel` as an **optional peer dependency**.
+You can wire nl2spel into the editor to translate natural language input into valid SpEL expressions.
+
+### Pattern Matching (Zero Dependencies, No API Key)
+
+nl2spel ships with 63 built-in patterns that cover common SpEL constructs without any LLM call:
+
+```html
+<spel-editor id="editor" min-height="100px"></spel-editor>
+
+<script type="module">
+  import '@agentix-e/spel-editor';
+  import { NL2SpelEngine } from '@agentix-e/nl2spel';
+
+  const editor = document.querySelector('#editor');
+  const engine = new NL2SpelEngine();
+
+  async function generateSpEL(naturalLanguage) {
+    const result = await engine.generate(naturalLanguage, { offlineOnly: true });
+    if (result.expression) {
+      editor.setValue(result.expression);
+    }
+  }
+
+  // Usage:
+  await generateSpEL('amount greater than 500');
+  // Editor now shows: #amount > 500
+</script>
+```
+
+### LLM-Powered: DeepSeek / OpenAI-Compatible
+
+```bash
+npm install @agentix-e/nl2spel-openai
+```
+
+```html
+<spel-editor id="editor" min-height="100px"></spel-editor>
+
+<script type="module">
+  import '@agentix-e/spel-editor';
+  import { NL2SpelEngine } from '@agentix-e/nl2spel';
+  import { OpenAICompatibleProvider } from '@agentix-e/nl2spel-openai';
+
+  const editor = document.querySelector('#editor');
+  const engine = new NL2SpelEngine();
+
+  // Register DeepSeek as the LLM provider
+  engine.registerProvider(
+    new OpenAICompatibleProvider({
+      provider: 'deepseek',
+      apiKey: 'sk-your-deepseek-key-here',
+    })
+  );
+
+  async function generateSpEL(naturalLanguage, contextSchema) {
+    const result = await engine.generate(naturalLanguage, { contextSchema });
+    if (result.expression) {
+      editor.setValue(result.expression);
+    }
+  }
+
+  // With context schema for smarter completions:
+  const schema = {
+    root: {
+      name: 'order',
+      type: 'Order',
+      fields: {
+        amount: { type: 'number', description: 'Order amount' },
+        status: { type: 'string', description: 'Order status' },
+      },
+      methods: {},
+    },
+    variables: {},
+    beans: {},
+    types: {},
+    functions: {},
+  };
+
+  // Wire the schema for context-aware diagnostics
+  editor.contextSchema = schema;
+
+  // Generate SpEL with full context
+  await generateSpEL('orders where amount exceeds one thousand and status is active', schema);
+  // Editor shows: #order.amount > 1000 and #order.status == 'active'
+</script>
+```
+
+### Browser-Local LLM: WebLLM (Gemma)
+
+```bash
+npm install @agentix-e/nl2spel-webllm @mlc-ai/web-llm
+```
+
+```html
+<spel-editor id="editor" min-height="100px"></spel-editor>
+
+<script type="module">
+  import '@agentix-e/spel-editor';
+  import { NL2SpelEngine } from '@agentix-e/nl2spel';
+  import { WebLLMProvider } from '@agentix-e/nl2spel-webllm';
+
+  const editor = document.querySelector('#editor');
+  const engine = new NL2SpelEngine();
+
+  const provider = new WebLLMProvider({
+    modelId: 'gemma-2-2b-it',          // 2B parameter model
+    maxTokens: 256,
+    temperature: 0.1,
+    debug: false,                       // Set true to see model logs
+  });
+
+  await provider.initialize();
+  engine.registerProvider(provider);
+
+  async function generateSpEL(naturalLanguage) {
+    const result = await engine.generate(naturalLanguage);
+    if (result.expression) {
+      editor.setValue(result.expression);
+    }
+  }
+
+  // First call loads the model (~1.5 GB download, cached in IndexedDB)
+  await generateSpEL('amount greater than 500');
+  // Subsequent calls are fast — model stays in memory
+  await generateSpEL('status is not null and not empty');
+</script>
+```
+
+### Integration Pattern Summary
+
+| Mode | Package | API Key | Data Leaves Browser | Setup |
+|------|---------|---------|-------------------|-------|
+| **Pattern matching** | `@agentix-e/nl2spel` | ❌ None | ❌ No | `npm install` |
+| **DeepSeek / OpenAI** | `+ nl2spel-openai` | ✅ Required | ✅ Yes | `npm install` + API key |
+| **Browser-local LLM** | `+ nl2spel-webllm` | ❌ None | ❌ No | 1.5 GB model download |
+
 ## License
 
 MIT © AgentiX-E

package/dist/index.js

@@ -113,64 +113,66 @@ function tokenKindToStyle(kind) {
   }
 }
 function createSpelStreamParser() {
+  return StreamLanguage.define(createTokenParser());
+}
+function createTokenParser() {
   let _tokenizer = null;
   let _tokens = [];
   let _tokenIndex = 0;
-  return StreamLanguage.define({
-    startState: () => null,
-    token: (stream) => {
-      if (!_tokenizer || _tokenIndex === 0) {
-        _tokenizer = new SpelTokenizer(stream.string);
-        let rawTokens;
-        try {
-          rawTokens = _tokenizer.tokenize();
-        } catch {
-          _tokens = [];
-          _tokenIndex = 0;
-          stream.skipToEnd();
-          return null;
-        }
+  const startState = () => null;
+  const token = (stream) => {
+    if (!_tokenizer || _tokenIndex === 0) {
+      _tokenizer = new SpelTokenizer(stream.string);
+      let rawTokens;
+      try {
+        rawTokens = _tokenizer.tokenize();
+      } catch {
         _tokens = [];
         _tokenIndex = 0;
-        for (let i = 0; i < rawTokens.length - 1; i++) {
-          const tok = rawTokens[i];
-          const style = tokenKindToStyle(tok.kind);
-          if (tok.kind === TokenKind.IDENTIFIER) {
-            const prevTok = i > 0 ? rawTokens[i - 1] : null;
-            if (prevTok?.kind === TokenKind.HASH) {
-              _tokens.push({
-                from: tok.startPos,
-                to: tok.endPos,
-                style: "variableName"
-              });
-              continue;
-            }
-            if (prevTok?.kind === TokenKind.DOT || prevTok?.kind === TokenKind.SAFE_NAV) {
-              _tokens.push({
-                from: tok.startPos,
-                to: tok.endPos,
-                style: "propertyName"
-              });
-              continue;
-            }
+        stream.skipToEnd();
+        return null;
+      }
+      _tokens = [];
+      _tokenIndex = 0;
+      for (let i = 0; i < rawTokens.length - 1; i++) {
+        const tok = rawTokens[i];
+        const style = tokenKindToStyle(tok.kind);
+        if (tok.kind === TokenKind.IDENTIFIER) {
+          const prevTok = i > 0 ? rawTokens[i - 1] : null;
+          if (prevTok?.kind === TokenKind.HASH) {
+            _tokens.push({
+              from: tok.startPos,
+              to: tok.endPos,
+              style: "variableName"
+            });
+            continue;
+          }
+          if (prevTok?.kind === TokenKind.DOT || prevTok?.kind === TokenKind.SAFE_NAV) {
+            _tokens.push({
+              from: tok.startPos,
+              to: tok.endPos,
+              style: "propertyName"
+            });
+            continue;
           }
-          _tokens.push({ from: tok.startPos, to: tok.endPos, style });
         }
+        _tokens.push({ from: tok.startPos, to: tok.endPos, style });
       }
-      while (_tokenIndex < _tokens.length) {
-        const t = _tokens[_tokenIndex];
-        if (t.from >= stream.pos) {
-          stream.pos = t.to;
-          _tokenIndex++;
-          return t.style || null;
-        }
+    }
+    while (_tokenIndex < _tokens.length) {
+      const t = _tokens[_tokenIndex];
+      if (t.from >= stream.pos) {
+        stream.pos = t.to;
         _tokenIndex++;
+        return t.style || null;
       }
-      stream.skipToEnd();
-      _tokenIndex = 0;
-      return null;
+      _tokenIndex++;
     }
-  });
+    stream.skipToEnd();
+    _tokenIndex = 0;
+    return null;
+  };
+  return { startState, token };
 }
 
 // src/cm6/spel-language.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentix-e/spel-editor",
-  "version": "0.1.1",
+  "version": "1.1.0",
   "description": "Web-embeddable Spring Expression Language (SpEL) editor — CodeMirror 6 + spel-ts powered",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,6 +20,9 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean",
     "test": "vitest run --coverage",
+    "test:browser": "playwright test",
+    "test:browser:ui": "playwright test --ui",
+    "test:all": "pnpm test && pnpm test:browser",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write 'src/**/*.ts' 'tests/**/*.ts'",
@@ -49,11 +52,15 @@
     }
   },
   "devDependencies": {
+    "@agentix-e/nl2spel": "^1.1.2",
+    "@agentix-e/nl2spel-openai": "^1.1.2",
+    "@playwright/test": "^1.61.1",
     "@vitest/coverage-v8": "^3.0.0",
     "jsdom": "^29.1.1",
     "prettier": "^3.9.5",
     "tsup": "^8.0.0",
     "typescript": "^5.8.3",
+    "vite": "^8.1.4",
     "vitest": "^3.0.0"
   },
   "keywords": [
@@ -75,6 +82,9 @@
     "url": "https://github.com/AgentiX-E/spel-editor/issues"
   },
   "homepage": "https://github.com/AgentiX-E/spel-editor#readme",
+  "pnpm": {
+    "onlyBuiltDependencies": ["esbuild"]
+  },
   "publishConfig": {
     "access": "public"
   }