feat: Add reusable frontend composables package (#13077)

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com>

codecov.yml

@@ -46,6 +46,7 @@ component_management:
         - packages/@n8n/codemirror-lang/**
         - packages/design-system/**
         - packages/editor-ui/**
+        - packages/frontend/**
     - component_id: nodes_packages
       name: Nodes
       paths:

packages/design-system/.eslintrc.js

@@ -1,13 +1,9 @@
-const sharedOptions = require('@n8n_io/eslint-config/shared');
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
 
 /**
  * @type {import('@types/eslint').ESLint.ConfigData}
  */
-module.exports = {
-	extends: ['@n8n_io/eslint-config/frontend'],
-
-	...sharedOptions(__dirname, 'frontend'),
-
+module.exports = createFrontendEslintConfig(__dirname, {
 	rules: {
 		// TODO: Remove these
 		'import/no-default-export': 'warn',
@@ -44,4 +40,4 @@ module.exports = {
 			},
 		},
 	],
-};
+});

packages/design-system/package.json

@@ -1,8 +1,8 @@
 {
   "name": "n8n-design-system",
   "version": "1.67.0",
-  "main": "src/main.ts",
-  "import": "src/main.ts",
+  "main": "src/index.ts",
+  "import": "src/index.ts",
   "scripts": {
     "dev": "pnpm run storybook",
     "clean": "rimraf dist .turbo",
@@ -19,6 +19,9 @@
     "lintfix": "eslint src --ext .js,.ts,.vue --fix"
   },
   "devDependencies": {
+    "@n8n/frontend-eslint-config": "workspace:*",
+    "@n8n/frontend-typescript-config": "workspace:*",
+    "@n8n/frontend-vitest-config": "workspace:*",
     "@n8n/storybook": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.0",
@@ -41,6 +44,7 @@
     "vue-tsc": "catalog:frontend"
   },
   "dependencies": {
+    "@n8n/composables": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.3",

packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { computed } from 'vue';
 
-import { useDeviceSupport } from '../../composables/useDeviceSupport';
 import type { KeyboardShortcut } from '../../types/keyboardshortcut';
 
 const props = defineProps<KeyboardShortcut>();

packages/design-system/src/components/N8nUserStack/UserStack.test.ts

@@ -1,8 +1,7 @@
 import { render } from '@testing-library/vue';
 
-import { N8nAvatar, N8nUserInfo } from 'n8n-design-system/main';
-
 import UserStack from './UserStack.vue';
+import { N8nAvatar, N8nUserInfo } from '../index';
 
 describe('UserStack', () => {
 	it('should render flat user list', () => {

packages/design-system/src/index.ts

@@ -1,6 +1,5 @@
 import * as locale from './locale';
 
-export { useDeviceSupport } from './composables/useDeviceSupport';
 export * from './components';
 export * from './plugin';
 export * from './types';

packages/design-system/tsconfig.json

@@ -1,16 +1,10 @@
 {
-	"extends": "../../tsconfig.json",
+	"extends": "@n8n/frontend-typescript-config",
 	"compilerOptions": {
-		"rootDir": ".",
-		"outDir": "dist",
-		"target": "esnext",
-		"module": "esnext",
-		"importHelpers": true,
-		"allowJs": true,
-		"incremental": false,
-		"allowSyntheticDefaultImports": true,
 		"baseUrl": ".",
-		"types": ["vitest/globals"],
+		"rootDirs": [".", "../../frontend/@n8n/composables/src"],
+		"outDir": "dist",
+		"types": ["vite/client", "vitest/globals"],
 		"typeRoots": [
 			"./node_modules/@testing-library",
 			"./node_modules/@types",
@@ -18,12 +12,9 @@
 			"../../node_modules/@types"
 		],
 		"paths": {
-			"n8n-design-system/*": ["./src/*"]
-		},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
-		// TODO: remove all options below this line
-		"noImplicitAny": false,
-		"noImplicitReturns": false
+			"n8n-design-system*": ["./src*"],
+			"@n8n/composables*": ["../frontend/@n8n/composables/src*"]
+		}
 	},
 	"include": ["src/**/*.ts", "src/**/*.vue"]
 }

packages/design-system/vite.config.mts

@@ -1,35 +1,12 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
-import { type UserConfig } from 'vitest';
-import { defineConfig as defineVitestConfig } from 'vitest/config';
 import components from 'unplugin-vue-components/vite';
 import icons from 'unplugin-icons/vite';
 import iconsResolver from 'unplugin-icons/resolver';
+import { vitestConfig } from '@n8n/frontend-vitest-config';
 
-export const vitestConfig = defineVitestConfig({
-	test: {
-		silent: true,
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: ['./src/__tests__/setup.ts'],
-		...(process.env.COVERAGE_ENABLED === 'true'
-			? {
-					coverage: {
-						enabled: true,
-						provider: 'v8',
-						reporter: process.env.CI === 'true' ? 'cobertura' : 'text-summary',
-						all: true,
-					},
-				}
-			: {}),
-		css: {
-			modules: {
-				classNameStrategy: 'non-scoped',
-			},
-		},
-	},
-}) as UserConfig;
+const frontendDir = resolve(__dirname, '..', 'frontend');
 
 export default mergeConfig(
 	defineConfig({
@@ -53,12 +30,13 @@ export default mergeConfig(
 			alias: {
 				'@': resolve(__dirname, 'src'),
 				'n8n-design-system': resolve(__dirname, 'src'),
+				'@n8n/composables(.*)': resolve(frontendDir, '@n8n', 'composables', 'src$1'),
 				lodash: 'lodash-es',
 			},
 		},
 		build: {
 			lib: {
-				entry: resolve(__dirname, 'src', 'main.ts'),
+				entry: resolve(__dirname, 'src', 'index.ts'),
 				name: 'N8nDesignSystem',
 				fileName: (format) => `n8n-design-system.${format}.js`,
 			},

packages/editor-ui/.eslintrc.js

@@ -1,13 +1,9 @@
-const sharedOptions = require('@n8n_io/eslint-config/shared');
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
 
 /**
  * @type {import('@types/eslint').ESLint.ConfigData}
  */
-module.exports = {
-	extends: ['@n8n_io/eslint-config/frontend'],
-
-	...sharedOptions(__dirname, 'frontend'),
-
+module.exports = createFrontendEslintConfig(__dirname, {
 	rules: {
 		'n8n-local-rules/dangerously-use-html-string-missing': 'error',
 
@@ -41,4 +37,4 @@ module.exports = {
 		'@typescript-eslint/no-redundant-type-constituents': 'warn',
 		'@typescript-eslint/no-unsafe-enum-comparison': 'warn',
 	},
-};
+});

packages/editor-ui/package.json

@@ -39,6 +39,7 @@
     "@n8n/chat": "workspace:*",
     "@n8n/codemirror-lang": "workspace:*",
     "@n8n/codemirror-lang-sql": "^1.0.2",
+    "@n8n/composables": "workspace:*",
     "@n8n/permissions": "workspace:*",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@sentry/vue": "catalog:frontend",
@@ -92,6 +93,9 @@
     "xss": "catalog:"
   },
   "devDependencies": {
+    "@n8n/frontend-eslint-config": "workspace:*",
+    "@n8n/frontend-vitest-config": "workspace:*",
+    "@n8n/frontend-typescript-config": "workspace:*",
     "@faker-js/faker": "^8.0.2",
     "@iconify/json": "^2.2.228",
     "@pinia/testing": "^0.1.6",

packages/editor-ui/src/components/CanvasControls.vue

@@ -3,7 +3,7 @@ import { onBeforeMount, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCanvasStore } from '@/stores/canvas.store';
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useI18n } from '@/composables/useI18n';
 
 const canvasStore = useCanvasStore();

packages/editor-ui/src/components/Node.vue

@@ -46,7 +46,8 @@ import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import { get } from 'lodash-es';
-import { N8nIconButton, useDeviceSupport } from 'n8n-design-system';
+import { N8nIconButton } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 
 type Props = {
 	name: string;

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -28,7 +28,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useMessage } from '@/composables/useMessage';
 import { useExternalHooks } from '@/composables/useExternalHooks';

packages/editor-ui/src/components/Sticky.vue

@@ -12,7 +12,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useContextMenu } from '@/composables/useContextMenu';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { GRID_SIZE } from '@/utils/nodeViewUtils';
 import { useToast } from '@/composables/useToast';
 import { assert } from '@/utils/assert';

packages/editor-ui/src/components/canvas/Canvas.test.ts

@@ -6,7 +6,7 @@ import { createPinia, setActivePinia } from 'pinia';
 import type { CanvasConnection, CanvasNode } from '@/types';
 import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/data';
 import { NodeConnectionType } from 'n8n-workflow';
-import type { useDeviceSupport } from 'n8n-design-system';
+import type { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 
 const matchMedia = global.window.matchMedia;
 // @ts-expect-error Initialize window object

packages/editor-ui/src/components/canvas/Canvas.vue

@@ -19,7 +19,8 @@ import Node from './elements/nodes/CanvasNode.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
 import { computed, onMounted, onUnmounted, provide, ref, toRef, useCssModule, watch } from 'vue';
 import type { EventBus } from 'n8n-design-system';
-import { createEventBus, useDeviceSupport } from 'n8n-design-system';
+import { createEventBus } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
 import { useKeybindings } from '@/composables/useKeybindings';
 import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';

packages/editor-ui/src/composables/useCanvasMouseSelect.ts

@@ -1,6 +1,6 @@
 import type { INodeUi, XYPosition } from '@/Interface';
 
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getMousePosition, getRelativePosition } from '@/utils/nodeViewUtils';

packages/editor-ui/src/composables/useCanvasPanning.ts

@@ -3,7 +3,7 @@ import { ref, unref } from 'vue';
 
 import { getMousePosition } from '@/utils/nodeViewUtils';
 import { useUIStore } from '@/stores/ui.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { MOUSE_EVENT_BUTTON, MOUSE_EVENT_BUTTONS } from '@/constants';
 
 /**

packages/editor-ui/src/composables/useDebugInfo.test.ts

@@ -49,7 +49,7 @@ vi.mock('@/stores/settings.store', () => ({
 	useSettingsStore,
 }));
 
-vi.mock('n8n-design-system', () => ({
+vi.mock('@n8n/composables/useDeviceSupport', () => ({
 	useDeviceSupport: () => ({
 		isTouchDevice: false,
 		userAgent: 'Mozilla/5.0',

packages/editor-ui/src/composables/useDebugInfo.ts

@@ -1,6 +1,6 @@
 import { useRootStore } from '@/stores/root.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { WorkflowSettings } from 'n8n-workflow';
 
 type DebugInfo = {

packages/editor-ui/src/composables/useHistoryHelper.ts

@@ -6,7 +6,7 @@ import { useHistoryStore } from '@/stores/history.store';
 import { useUIStore } from '@/stores/ui.store';
 
 import { onMounted, onUnmounted, nextTick } from 'vue';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { getNodeViewTab } from '@/utils/canvasUtils';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { useTelemetry } from './useTelemetry';

packages/editor-ui/src/composables/useKeybindings.ts

@@ -1,5 +1,5 @@
 import { useActiveElement, useEventListener } from '@vueuse/core';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { MaybeRef, Ref } from 'vue';
 import { computed, unref } from 'vue';
 

packages/editor-ui/src/composables/useNodeBase.ts

@@ -22,7 +22,7 @@ import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import type { Endpoint, EndpointOptions } from '@jsplumb/core';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import type { EndpointSpec } from '@jsplumb/common';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { N8nEndpointLabelLength } from '@/plugins/jsplumb/N8nPlusEndpointType';
 import { isValidNodeConnectionType } from '@/utils/typeGuards';
 import { useI18n } from '@/composables/useI18n';

packages/editor-ui/src/views/NodeView.vue

@@ -166,7 +166,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useClipboard } from '@/composables/useClipboard';
 import { usePinnedData } from '@/composables/usePinnedData';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useDebounce } from '@/composables/useDebounce';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { useCanvasPanning } from '@/composables/useCanvasPanning';

packages/editor-ui/tsconfig.json

@@ -1,16 +1,14 @@
 {
-	"extends": "../../tsconfig.json",
+	"extends": "@n8n/frontend-typescript-config",
 	"compilerOptions": {
-		"rootDirs": [".", "../design-system/src", "../@n8n/chat/src"],
-		"outDir": "dist",
-		"target": "esnext",
-		"module": "esnext",
-		"allowJs": true,
-		"importHelpers": true,
-		"incremental": false,
-		"allowSyntheticDefaultImports": true,
-		"resolveJsonModule": true,
 		"baseUrl": ".",
+		"rootDirs": [
+			".",
+			"../../frontend/@n8n/composables/src",
+			"../design-system/src",
+			"../@n8n/chat/src"
+		],
+		"outDir": "dist",
 		"types": [
 			"vitest/globals",
 			"unplugin-icons/types/vue",
@@ -18,12 +16,11 @@
 		],
 		"paths": {
 			"@/*": ["./src/*"],
-			"n8n-design-system": ["../design-system/src/main.ts"],
-			"n8n-design-system/*": ["../design-system/src/*"],
+			"n8n-design-system*": ["../design-system/src*"],
+			"@n8n/composables*": ["../frontend/@n8n/composables/src*"],
 			"@n8n/chat/*": ["../@n8n/chat/src/*"],
 			"@n8n/api-types*": ["../@n8n/api-types/src*"]
 		},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 		// TODO: remove all options below this line
 		"useUnknownInCatchVariables": false
 	},

packages/editor-ui/vite.config.mts

@@ -3,7 +3,7 @@ import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
 import svgLoader from 'vite-svg-loader';
 
-import { vitestConfig } from '../design-system/vite.config.mts';
+import { vitestConfig } from '@n8n/frontend-vitest-config';
 import icons from 'unplugin-icons/vite';
 import iconsResolver from 'unplugin-icons/resolver';
 import components from 'unplugin-vue-components/vite';
@@ -22,7 +22,7 @@ const alias = [
 	{ find: 'stream', replacement: 'stream-browserify' },
 	{
 		find: /^n8n-design-system$/,
-		replacement: resolve(__dirname, '..', 'design-system', 'src', 'main.ts'),
+		replacement: resolve(__dirname, '..', 'design-system', 'src', 'index.ts'),
 	},
 	{
 		find: /^n8n-design-system\//,
@@ -36,6 +36,10 @@ const alias = [
 		find: /^@n8n\/chat\//,
 		replacement: resolve(__dirname, '..', '@n8n', 'chat', 'src') + '/',
 	},
+	{
+		find: /^@n8n\/composables(.+)$/,
+		replacement: resolve(__dirname, '..', 'frontend', '@n8n', 'composables', 'src$1'),
+	},
 	...['orderBy', 'camelCase', 'cloneDeep', 'startCase'].map((name) => ({
 		find: new RegExp(`^lodash.${name}$`, 'i'),
 		replacement: `lodash-es/${name}`,

packages/frontend/@n8n/composables/.eslintrc.cjs

@@ -0,0 +1,3 @@
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
+
+module.exports = createFrontendEslintConfig(__dirname);

packages/frontend/@n8n/composables/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/frontend/@n8n/composables/README.md

@@ -0,0 +1,24 @@
+# @n8n/composables
+
+A collection of Vue composables that provide common functionality across n8n's Front-End packages.
+
+## Table of Contents
+
+- [Features](#features)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- **Reusable Logic**: Encapsulate complex stateful logic into composable functions.
+- **Consistency**: Ensure consistent patterns and practices across our Vue components.
+- **Extensible**: Easily add new composables as our project grows.
+- **Optimized**: Fully compatible with the Composition API.
+
+## Contributing
+
+For more details, please read our [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## License
+
+For more details, please read our [LICENSE.md](LICENSE.md).

packages/frontend/@n8n/composables/biome.jsonc

@@ -0,0 +1,4 @@
+{
+	"$schema": "../../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../../biome.jsonc"]
+}

packages/frontend/@n8n/composables/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "@n8n/composables",
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"exports": {
+		"./*": {
+			"types": "./dist/*.d.ts",
+			"import": "./dist/*.js",
+			"require": "./dist/*.cjs"
+		}
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "pnpm run typecheck && tsup",
+		"preview": "vite preview",
+		"typecheck": "vue-tsc --noEmit",
+		"test": "vitest run",
+		"test:dev": "vitest --silent=false",
+		"lint": "eslint src --ext .js,.ts,.vue --quiet",
+		"lintfix": "eslint src --ext .js,.ts,.vue --fix",
+		"format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
+		"format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore"
+	},
+	"dependencies": {
+		"vue": "catalog:frontend"
+	},
+	"devDependencies": {
+		"@n8n/frontend-eslint-config": "workspace:*",
+		"@n8n/frontend-typescript-config": "workspace:*",
+		"@n8n/frontend-vitest-config": "workspace:*",
+		"@testing-library/jest-dom": "catalog:frontend",
+		"@testing-library/user-event": "catalog:frontend",
+		"@testing-library/vue": "catalog:frontend",
+		"@vitejs/plugin-vue": "catalog:frontend",
+		"@vue/tsconfig": "catalog:frontend",
+		"tsup": "catalog:frontend",
+		"typescript": "catalog:frontend",
+		"vite": "catalog:frontend",
+		"vite-plugin-dts": "catalog:frontend",
+		"vitest": "catalog:frontend",
+		"vue-tsc": "catalog:frontend"
+	},
+	"license": "See LICENSE.md file in the root of the repository"
+}

packages/frontend/@n8n/composables/src/__tests__/setup.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+import { configure } from '@testing-library/vue';
+
+configure({ testIdAttribute: 'data-test-id' });

packages/frontend/@n8n/composables/src/shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/frontend/@n8n/composables/src/useDeviceSupport.test.ts

@@ -1,4 +1,4 @@
-import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
+import { useDeviceSupport } from './useDeviceSupport';
 
 const detectPointerType = (query: string) => {
 	const isCoarse = query === '(any-pointer: coarse)';

packages/frontend/@n8n/composables/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "@n8n/frontend-typescript-config",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"rootDir": ".",
+		"outDir": "dist",
+		"types": ["vite/client", "vitest/globals"]
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts", "tsup.config.ts"]
+}

packages/frontend/@n8n/composables/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+	entry: ['src/useDeviceSupport.ts'],
+	format: ['cjs', 'esm'],
+	clean: true,
+	dts: true,
+	cjsInterop: true,
+	splitting: true,
+	sourcemap: true,
+});

packages/frontend/@n8n/composables/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig, mergeConfig } from 'vite';
+import { vitestConfig } from '@n8n/frontend-vitest-config';
+
+export default mergeConfig(defineConfig({}), vitestConfig);

packages/frontend/tooling/eslint-config/index.cjs

@@ -0,0 +1,14 @@
+const sharedOptions = require('@n8n_io/eslint-config/shared');
+
+/**
+ * @param {string} path
+ * @param {import('@types/eslint').ESLint.ConfigData} config
+ * @returns {import('@types/eslint').ESLint.ConfigData}
+ */
+module.exports.createFrontendEslintConfig = function (path, config = {}) {
+	return {
+		extends: ['@n8n_io/eslint-config/frontend'],
+		...sharedOptions(path, 'frontend'),
+		...config,
+	};
+};

packages/frontend/tooling/eslint-config/index.d.ts

@@ -0,0 +1,3 @@
+import type { ESLint } from '@types/eslint';
+
+export function createFrontendEslintConfig(path: string): ESLint.ConfigData;

packages/frontend/tooling/eslint-config/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@n8n/frontend-eslint-config",
+  "version": "1.0.0",
+  "type": "module",
+  "dependencies": {
+    "@n8n_io/eslint-config": "workspace:*",
+    "eslint-plugin-n8n-local-rules": "^1.0.0"
+  },
+  "files": [
+    "index.cjs"
+  ],
+  "main": "./index.cjs",
+  "module": "./index.cjs",
+  "exports": {
+    ".": {
+      "import": "./index.cjs",
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
+    },
+    "./*": "./*"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}

packages/frontend/tooling/typescript-config/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@n8n/frontend-typescript-config",
+  "version": "1.0.0",
+  "type": "module",
+  "files": [
+    "tsconfig.json"
+  ],
+  "main": "./tsconfig.json",
+  "module": "./tsconfig.json",
+  "exports": {
+    ".": {
+      "import": "./tsconfig.json",
+      "require": "./tsconfig.json"
+    },
+    "./*": "./*"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}

packages/frontend/tooling/typescript-config/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "../../../../tsconfig.json",
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "esnext",
+		"importHelpers": true,
+		"allowJs": true,
+		"incremental": false,
+		"allowSyntheticDefaultImports": true,
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+	},
+	"include": ["src/**/*.ts", "src/**/*.vue"]
+}

packages/frontend/tooling/vitest-config/index.d.ts

@@ -0,0 +1,3 @@
+import type { UserConfig } from 'vitest/node';
+
+export const vitestConfig: UserConfig;

packages/frontend/tooling/vitest-config/index.mjs

@@ -0,0 +1,30 @@
+import { defineConfig as defineVitestConfig } from 'vitest/config';
+
+/**
+ * Define a Vitest configuration
+ *
+ * @returns {import('vitest/node').UserConfig}
+ */
+export const vitestConfig = defineVitestConfig({
+	test: {
+		silent: true,
+		globals: true,
+		environment: 'jsdom',
+		setupFiles: ['./src/__tests__/setup.ts'],
+		...(process.env.COVERAGE_ENABLED === 'true'
+			? {
+					coverage: {
+						enabled: true,
+						provider: 'v8',
+						reporter: process.env.CI === 'true' ? 'cobertura' : 'text-summary',
+						all: true,
+					},
+				}
+			: {}),
+		css: {
+			modules: {
+				classNameStrategy: 'non-scoped',
+			},
+		},
+	},
+});

packages/frontend/tooling/vitest-config/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@n8n/frontend-vitest-config",
+  "version": "1.0.0",
+  "type": "module",
+  "peerDependencies": {
+    "vite": "catalog:frontend",
+    "vitest": "catalog:frontend"
+  },
+  "devDependencies": {
+    "vite": "catalog:frontend",
+    "vitest": "catalog:frontend"
+  },
+  "files": [
+    "index.mjs"
+  ],
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.mjs",
+      "types": "./index.d.ts"
+    },
+    "./*": "./*"
+  },
+  "license": "See LICENSE.md file in the root of the repository"
+}

pnpm-workspace.yaml

@@ -2,6 +2,7 @@ packages:
   - packages/*
   - packages/@n8n/*
   - packages/@n8n_io/*
+  - packages/frontend/**
   - cypress
 
 catalog:
@@ -32,10 +33,17 @@ catalog:
 
 catalogs:
   frontend:
+    '@testing-library/jest-dom': ^6.6.3
+    '@testing-library/user-event': ^14.6.0
+    '@testing-library/vue': ^8.1.0
+    '@vue/tsconfig': ^0.7.0
     '@vitest/coverage-v8': ^3.0.2
     '@vitejs/plugin-vue': ^5.2.1
     '@sentry/vue': ^8.33.1
+    tsup: ^8.3.6
+    typescript: ^5.6.2
     vite: ^6.0.2
+    vite-plugin-dts: ^4.3.0
     vitest: ^3.0.2
     vitest-mock-extended: ^2.0.2
     vue: ^3.5.13

turbo.json

@@ -45,6 +45,7 @@
 				"@n8n/codemirror-lang#lint",
 				"@n8n/storybook#lint",
 				"n8n-cypress#lint",
+				"@n8n/composables#build",
 				"n8n-design-system#lint",
 				"n8n-editor-ui#lint"
 			]
@@ -77,6 +78,7 @@
 			"dependsOn": [
 				"@n8n/chat#test",
 				"@n8n/codemirror-lang#test",
+				"@n8n/composables#build",
 				"n8n-design-system#test",
 				"n8n-editor-ui#test"
 			],