feat: Add example @n8n/n8n-extension-insights extension package (#14360)

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

packages/extensions/insights/.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/extensions/insights/LICENSE

@@ -0,0 +1 @@
+See LICENSE.md in the root of this repository for more information.

packages/extensions/insights/README.md

@@ -0,0 +1 @@
+# @n8n/n8n-extension-insights

packages/extensions/insights/n8n.manifest.json

@@ -0,0 +1,23 @@
+{
+	"name": "@n8n/n8n-extension-insights",
+	"version": "1.0.0",
+	"author": "n8n",
+	"category": "Internal",
+	"minSDKVersion": "0.0.0",
+	"permissions": {
+		"frontend": [],
+		"backend": []
+	},
+	"events": ["workflow:started"],
+	"setup": {
+		"backend": "./dist/backend/index.js",
+		"frontend": "./dist/frontend/index.js"
+	},
+	"extends": {
+		"views": {
+			"workflows": {
+				"header": "InsightsDashboard"
+			}
+		}
+	}
+}

packages/extensions/insights/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@n8n/n8n-extension-insights",
+  "version": "0.0.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "n8n.manifest.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./n8n.manifest.json",
+  "module": "./n8n.manifest.json",
+  "exports": {
+    ".": {
+      "import": "./n8n.manifest.json",
+      "require": "./n8n.manifest.json"
+    },
+    "./backend": {
+      "types": "./dist/backend/index.d.ts",
+      "import": "./dist/backend/index.js",
+      "require": "./dist/backend/index.cjs"
+    },
+    "./frontend": {
+      "types": "./dist/frontend/index.d.ts",
+      "import": "./dist/frontend/index.js",
+      "require": "./dist/frontend/index.umd.cjs"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "cleanup": "rimraf dist",
+    "dev": "vite",
+    "typecheck": "vue-tsc --noEmit",
+    "build:backend": "tsup",
+    "build:frontend": "vite build",
+    "build": "pnpm cleanup && pnpm run \"/^build:.*/\"",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "catalog:frontend",
+    "vue-router": "catalog:frontend"
+  },
+  "dependencies": {
+    "@n8n/extension-sdk": "workspace:*"
+  },
+  "devDependencies": {
+    "@n8n/typescript-config": "workspace:*",
+    "@vitejs/plugin-vue": "catalog:frontend",
+    "@vue/tsconfig": "catalog:frontend",
+    "rimraf": "catalog:",
+    "vite": "catalog:frontend",
+    "vue": "catalog:frontend",
+    "vue-router": "catalog:frontend",
+    "vue-tsc": "catalog:frontend"
+  }
+}

packages/extensions/insights/src/backend/index.ts

@@ -0,0 +1,7 @@
+import { defineBackendExtension } from '@n8n/extension-sdk/backend';
+
+export default defineBackendExtension({
+	setup(n8n) {
+		console.log(n8n);
+	},
+});

packages/extensions/insights/src/frontend/InsightsDashboard.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup></script>
+<template>
+	<div>
+		<h1>INSIGHTS DASHBOARD</h1>
+	</div>
+</template>

packages/extensions/insights/src/frontend/index.ts

@@ -0,0 +1,9 @@
+import { markRaw } from 'vue';
+import { defineFrontendExtension } from '@n8n/extension-sdk/frontend';
+import InsightsDashboard from './InsightsDashboard.vue';
+
+export default defineFrontendExtension({
+	setup(n8n) {
+		n8n.registerComponent('InsightsDashboard', markRaw(InsightsDashboard));
+	},
+});

packages/extensions/insights/src/shims.d.ts

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

packages/extensions/insights/tsconfig.backend.json

@@ -0,0 +1,9 @@
+{
+	"extends": "@n8n/typescript-config/tsconfig.common.json",
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"moduleResolution": "bundler",
+		"module": "esnext"
+	},
+	"include": ["src/backend/**/*.ts", "src/index.ts"]
+}

packages/extensions/insights/tsconfig.frontend.json

@@ -0,0 +1,7 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.dom.json",
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+	},
+	"include": ["src/frontend/**/*.ts", "src/frontend/**/*.vue"]
+}

packages/extensions/insights/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.backend.json" },
+		{ "path": "./tsconfig.frontend.json" },
+		{ "path": "./tsconfig.vite.json" }
+	]
+}

packages/extensions/insights/tsconfig.vite.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"target": "ES2022",
+		"lib": ["ES2023"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"isolatedModules": true,
+		"moduleDetection": "force",
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["vite.config.ts"]
+}

packages/extensions/insights/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+	entry: [
+		'src/backend/**/*.ts',
+		'!src/backend/**/*.test.ts',
+		'!src/backend/**/*.d.ts',
+		'!src/backend/__tests__**/*',
+	],
+	outDir: 'dist/backend',
+	format: ['cjs', 'esm'],
+	dts: true,
+	sourcemap: true,
+	tsconfig: 'tsconfig.backend.json',
+});

packages/extensions/insights/vite.config.ts

@@ -0,0 +1,42 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import dts from 'vite-plugin-dts';
+import { configDefaults as vitestConfig } from 'vitest/config';
+
+const cwd = process.cwd();
+
+export default defineConfig({
+	plugins: [
+		vue(),
+		dts({
+			rollupTypes: true,
+			tsconfigPath: resolve(cwd, 'tsconfig.frontend.json'),
+		}),
+	],
+	build: {
+		emptyOutDir: false,
+		outDir: resolve(cwd, 'dist', 'frontend'),
+		lib: {
+			entry: resolve(cwd, 'src', 'frontend', 'index.ts'),
+			name: 'n8nFrontEndSdk',
+			fileName: 'index',
+		},
+		rollupOptions: {
+			external: ['vue'],
+			output: {
+				preserveModules: false,
+				globals: {
+					vue: 'Vue',
+				},
+			},
+		},
+	},
+	test: {
+		globals: true,
+		environment: 'jsdom',
+		setupFiles: ['src/__tests__/setup.ts'],
+		include: ['src/**/*.spec.ts'],
+		exclude: vitestConfig.exclude,
+	},
+});