feat(editor): Migrate codemirror-lang-n8n-expression into this monorepo (no-changelog)

.github/workflows/units-tests-reusable.yml

@@ -69,4 +69,4 @@ jobs:
         if: ${{ inputs.collectCoverage == 'true' }}
         uses: codecov/codecov-action@v3
         with:
-          files: packages/@n8n/chat/coverage/cobertura-coverage.xml,packages/@n8n/nodes-langchain/coverage/cobertura-coverage.xml,packages/@n8n/permissions/coverage/cobertura-coverage.xml,packages/@n8n/client-oauth2/coverage/cobertura-coverage.xml,packages/cli/coverage/cobertura-coverage.xml,packages/core/coverage/cobertura-coverage.xml,packages/design-system/coverage/cobertura-coverage.xml,packages/editor-ui/coverage/cobertura-coverage.xml,packages/nodes-base/coverage/cobertura-coverage.xml,packages/workflow/coverage/cobertura-coverage.xml
+          files: packages/@n8n/chat/coverage/cobertura-coverage.xml,packages/@n8n/nodes-langchain/coverage/cobertura-coverage.xml,packages/@n8n/permissions/coverage/cobertura-coverage.xml,packages/@n8n/client-oauth2/coverage/cobertura-coverage.xml,packages/cli/coverage/cobertura-coverage.xml,packages/core/coverage/cobertura-coverage.xml,packages/design-system/coverage/cobertura-coverage.xml,packages/@n8n/codemirror-lang/coverage/cobertura-coverage.xml,packages/editor-ui/coverage/cobertura-coverage.xml,packages/nodes-base/coverage/cobertura-coverage.xml,packages/workflow/coverage/cobertura-coverage.xml

package.json

@@ -11,8 +11,8 @@
   "scripts": {
     "preinstall": "node scripts/block-npm-install.js",
     "build": "turbo run build",
-    "build:backend": "pnpm --filter=!@n8n/chat --filter=!n8n-design-system --filter=!n8n-editor-ui build",
-    "build:frontend": "pnpm --filter=@n8n/chat --filter=n8n-design-system --filter=n8n-editor-ui build",
+    "build:backend": "pnpm --filter=!@n8n/chat --filter=!@n8n/codemirror-lang --filter=!n8n-design-system --filter=!n8n-editor-ui build",
+    "build:frontend": "pnpm --filter=@n8n/chat --filter=@n8n/codemirror-lang --filter=n8n-design-system --filter=n8n-editor-ui build",
     "typecheck": "turbo run typecheck",
     "dev": "turbo run dev --parallel --filter=!n8n-design-system --filter=!@n8n/chat",
     "dev:ai": "turbo run dev --parallel --filter=@n8n/nodes-langchain --filter=n8n --filter=n8n-core",
@@ -26,9 +26,9 @@
     "start:tunnel": "./packages/cli/bin/n8n start --tunnel",
     "start:windows": "cd packages/cli/bin && n8n",
     "test": "turbo run test",
-    "test:backend": "pnpm --filter=!@n8n/chat --filter=!n8n-design-system --filter=!n8n-editor-ui  --filter=!n8n-nodes-base test",
+    "test:backend": "pnpm --filter=!@n8n/chat --filter=!@n8n/codemirror-lang --filter=!n8n-design-system --filter=!n8n-editor-ui  --filter=!n8n-nodes-base test",
     "test:nodes": "pnpm --filter=n8n-nodes-base test",
-    "test:frontend": "pnpm --filter=@n8n/chat --filter=n8n-design-system --filter=n8n-editor-ui test",
+    "test:frontend": "pnpm --filter=@n8n/chat --filter=@n8n/codemirror-lang --filter=n8n-design-system --filter=n8n-editor-ui test",
     "watch": "turbo run watch --parallel",
     "webhook": "./packages/cli/bin/n8n webhook",
     "worker": "./packages/cli/bin/n8n worker",

packages/@n8n/codemirror-lang/.eslintrc.cjs

@@ -0,0 +1,14 @@
+const sharedOptions = require('@n8n_io/eslint-config/shared');
+
+/**
+ * @type {import('@types/eslint').ESLint.ConfigData}
+ */
+module.exports = {
+	extends: ['@n8n_io/eslint-config/frontend'],
+
+	...sharedOptions(__dirname, 'frontend'),
+
+	ignorePatterns: [
+		'src/expressions/syntax*.ts'
+	]
+};

packages/@n8n/codemirror-lang/.gitignore

@@ -0,0 +1,7 @@
+/node_modules
+package-lock.json
+/dist
+/src/*.js
+/src/*.d.ts
+src/expressions/syntax*.ts
+.DS_Store

packages/@n8n/codemirror-lang/README.md

@@ -0,0 +1,42 @@
+# @n8n/codemirror-lang
+
+n8n expression language support for CodeMirror 6.
+
+## Usage
+
+Install n8n expression language support:
+
+```sh
+npm i @n8n/codemirror-lang
+```
+
+Install setup dependencies:
+
+```sh
+npm i @codemirror/language @lezer/common @lezer/javascript
+```
+
+Set up language support:
+
+```js
+import { parserWithMetaData as n8nParser } from '@n8n/codemirror-lang';
+import { LanguageSupport, LRLanguage } from '@codemirror/language';
+import { parseMixed } from '@lezer/common';
+import { parser as jsParser } from '@lezer/javascript';
+
+const n8nPlusJsParser = n8nParser.configure({
+	wrap: parseMixed((node) => {
+		if (node.type.isTop) return null;
+
+		return node.name === 'Resolvable'
+			? { parser: jsParser, overlay: (node) => node.type.name === 'Resolvable' }
+			: null;
+	}),
+});
+
+const n8nLanguage = LRLanguage.define({ parser: n8nPlusJsParser });
+
+export function n8nExpressionLanguageSupport() {
+	return new LanguageSupport(n8nLanguage);
+}
+```

packages/@n8n/codemirror-lang/jest.config.js

@@ -0,0 +1,2 @@
+/** @type {import('jest').Config} */
+module.exports = require('../../../jest.config');

packages/@n8n/codemirror-lang/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@n8n/codemirror-lang",
+  "version": "0.3.0",
+  "description": "n8n expression language support for CodeMirror 6",
+  "private": true,
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./src/index.ts",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc",
+    "generate:expressions:grammar": "lezer-generator --typeScript --output src/expressions/syntax.ts src/expressions/syntax.grammar",
+    "build": "pnpm generate:expressions:grammar && tsc -p tsconfig.build.json",
+    "test": "jest",
+    "lint": "eslint . --ext .js,.ts,.vue --quiet",
+    "lintfix": "eslint . --ext .js,.ts,.vue --fix",
+    "format": "prettier --write src/"
+  },
+  "peerDependencies": {
+    "@codemirror/autocomplete": "*",
+    "@codemirror/language": "*",
+    "@lezer/highlight": "*"
+  },
+  "devDependencies": {
+    "@lezer/generator": "^1.7.0"
+  }
+}

packages/@n8n/codemirror-lang/src/expressions/index.ts

@@ -0,0 +1,35 @@
+import { completeFromList } from '@codemirror/autocomplete';
+import { LRLanguage, LanguageSupport, foldNodeProp, foldInside } from '@codemirror/language';
+import { styleTags, tags as t } from '@lezer/highlight';
+import { parser } from './syntax';
+
+export const parserWithMetaData = parser.configure({
+	props: [
+		foldNodeProp.add({
+			Application: foldInside,
+		}),
+		styleTags({
+			OpenMarker: t.brace,
+			CloseMarker: t.brace,
+			Plaintext: t.content,
+			Resolvable: t.string,
+		}),
+	],
+});
+
+export const n8nLanguage = LRLanguage.define({
+	parser: parserWithMetaData,
+	languageData: {
+		commentTokens: { line: ';' },
+	},
+});
+
+const completions = n8nLanguage.data.of({
+	autocomplete: completeFromList([
+		// { label: "test", type: "keyword" }, // to add in future
+	]),
+});
+
+export function n8nExpression() {
+	return new LanguageSupport(n8nLanguage, [completions]);
+}

packages/@n8n/codemirror-lang/src/expressions/syntax.grammar

@@ -0,0 +1,21 @@
+@top Program { entity* }
+
+entity { Plaintext | Resolvable }
+
+@tokens {
+  Plaintext { ![{] Plaintext? | "{" (@eof | ![{] Plaintext?) }
+
+  OpenMarker[closedBy="CloseMarker"] { "{{" }
+
+  CloseMarker[openedBy="OpenMarker"] { "}}" }
+
+  Resolvable {
+    OpenMarker resolvableChar* CloseMarker
+  }
+
+  resolvableChar { unicodeChar | "}" ![}] | "\\}}" }
+
+  unicodeChar { $[\u0000-\u007C] | $[\u007E-\u1FFF] | $[\u20A0-\u20CF] | $[\u{1F300}-\u{1F64F}] }
+}
+
+@detectDelim

packages/@n8n/codemirror-lang/src/index.ts

@@ -0,0 +1 @@
+export { parserWithMetaData, n8nLanguage } from './expressions';