feat: example-plugin with api access

.env.example

@@ -0,0 +1,2 @@
+ACCESS_TOKEN = ''
+API_URL = 'http://localhost:3449/api/rpc/command'

.gitignore

@@ -39,3 +39,4 @@ testem.log
 Thumbs.db
 
 .nx/cache
+.env

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "firsttris.vscode-jest-runner"
   ]
 }

apps/example-plugin/src/app/app.element.css

@@ -53,10 +53,17 @@ svg {
 }
 
 p {
-  margin-bottom: var(--spacing-12);
+  margin-block-end: var(--spacing-12);
 }
 
 h1 {
   font-size: 20px;
-  margin-bottom: var(--spacing-12);
+  margin-block-end: var(--spacing-12);
+}
+
+.help {
+  color: #6b7280;
+  display: block;
+  font-size: 11px;
+  padding-inline-start: var(--spacing-12);
 }

apps/example-plugin/src/app/app.element.ts

@@ -40,11 +40,17 @@ export class AppElement extends HTMLElement {
 
       <p>Current project name: <span id="project-name">Unknown</span></p>
       <p>Selection id: <span id="selection-id">Unknown</span></p>
+      <div class="profile"></div>
 
       <p>
         <button type="button" data-appearance="primary" class="act-ping-pong">Ping Pong message</button>
       </p>
 
+      <p>
+        <button type="button" data-appearance="primary" class="get-profile">API get profile</button>
+        <span class="help">Need the .env file and run "start:rpc-api"</span>
+      </p>
+
       <p>
         <button type="button" data-appearance="primary" data-variant="destructive" class="act-close-plugin">Close plugin</button>
       </p>
@@ -63,6 +69,22 @@ export class AppElement extends HTMLElement {
       parent.postMessage({ content: 'close' }, '*');
     });
 
+    const getProfileAction = this.querySelector<HTMLElement>('.get-profile');
+
+    getProfileAction?.addEventListener('click', () => {
+      fetch('http://localhost:3000/get-profile')
+        .then((response) => {
+          return response.json();
+        })
+        .then((data) => {
+          const profile = document.querySelector('.profile');
+
+          if (profile) {
+            profile.innerHTML = '<p>' + JSON.stringify(data) + '</p>';
+          }
+        });
+    });
+
     parent.postMessage({ content: 'ready' }, '*');
   }
 }

apps/rpc-api/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/rpc-api/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'rpc-api',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/apps/rpc-api',
+};

apps/rpc-api/project.json

@@ -0,0 +1,63 @@
+{
+  "name": "rpc-api",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/rpc-api/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "platform": "node",
+        "outputPath": "dist/apps/rpc-api",
+        "format": ["cjs"],
+        "bundle": false,
+        "main": "apps/rpc-api/src/main.ts",
+        "tsConfig": "apps/rpc-api/tsconfig.app.json",
+        "assets": ["apps/rpc-api/src/assets"],
+        "generatePackageJson": true,
+        "esbuildOptions": {
+          "sourcemap": true,
+          "outExtension": {
+            ".js": ".js"
+          }
+        }
+      },
+      "configurations": {
+        "development": {},
+        "production": {
+          "esbuildOptions": {
+            "sourcemap": false,
+            "outExtension": {
+              ".js": ".js"
+            }
+          }
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "rpc-api:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "rpc-api:build:development"
+        },
+        "production": {
+          "buildTarget": "rpc-api:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/rpc-api/jest.config.ts"
+      }
+    }
+  },
+  "tags": []
+}

apps/rpc-api/src/app/app.spec.ts

@@ -0,0 +1,20 @@
+import Fastify, { FastifyInstance } from 'fastify';
+import { app } from './app';
+
+describe('GET /', () => {
+  let server: FastifyInstance;
+
+  beforeEach(() => {
+    server = Fastify();
+    server.register(app);
+  });
+
+  it('should respond with a message', async () => {
+    const response = await server.inject({
+      method: 'GET',
+      url: '/',
+    });
+
+    expect(response.json()).toEqual({ message: 'Hello API' });
+  });
+});

apps/rpc-api/src/app/app.ts

@@ -0,0 +1,25 @@
+import * as path from 'path';
+import { FastifyInstance } from 'fastify';
+import AutoLoad from '@fastify/autoload';
+
+/* eslint-disable-next-line */
+export interface AppOptions {}
+
+export async function app(fastify: FastifyInstance, opts: AppOptions) {
+  fastify;
+
+  // This loads all plugins defined in plugins
+  // those should be support plugins that are reused
+  // through your application
+  fastify.register(AutoLoad, {
+    dir: path.join(__dirname, 'plugins'),
+    options: { ...opts },
+  });
+
+  // This loads all plugins defined in routes
+  // define your routes in one of these
+  fastify.register(AutoLoad, {
+    dir: path.join(__dirname, 'routes'),
+    options: { ...opts },
+  });
+}

apps/rpc-api/src/app/plugins/cors.ts

@@ -0,0 +1,7 @@
+import { FastifyInstance } from 'fastify';
+import fp from 'fastify-plugin';
+import cors from '@fastify/cors';
+
+export default fp(async function (fastify: FastifyInstance) {
+  fastify.register(cors);
+});

apps/rpc-api/src/app/plugins/sensible.ts

@@ -0,0 +1,12 @@
+import { FastifyInstance } from 'fastify';
+import fp from 'fastify-plugin';
+import sensible from '@fastify/sensible';
+
+/**
+ * This plugins adds some utilities to handle http errors
+ *
+ * @see https://github.com/fastify/fastify-sensible
+ */
+export default fp(async function (fastify: FastifyInstance) {
+  fastify.register(sensible);
+});

apps/rpc-api/src/app/routes/root.ts

@@ -0,0 +1,22 @@
+import { FastifyInstance } from 'fastify';
+
+const token = process.env.ACCESS_TOKEN;
+
+export default async function (fastify: FastifyInstance) {
+  const apiUrl = process.env.API_URL;
+
+  fastify.get('/get-profile', function () {
+    console.log('sdfdsf');
+
+    return fetch(`${apiUrl}/get-profile`, {
+      method: 'GET',
+      headers: {
+        Authorization: `Token ${token}`,
+      },
+    })
+      .then((response) => response.json())
+      .catch((error) => {
+        console.error('Error:', error);
+      });
+  });
+}

apps/rpc-api/src/main.ts

@@ -0,0 +1,23 @@
+import Fastify from 'fastify';
+import { app } from './app/app';
+
+const host = process.env.HOST ?? 'localhost';
+const port = process.env.PORT ? Number(process.env.PORT) : 3000;
+
+// Instantiate Fastify with some config
+const server = Fastify({
+  logger: true,
+});
+
+// Register your application as a normal plugin.
+server.register(app);
+
+// Start listening.
+server.listen({ port, host }, (err) => {
+  if (err) {
+    server.log.error(err);
+    process.exit(1);
+  } else {
+    console.log(`[ ready ] http://${host}:${port}`);
+  }
+});

apps/rpc-api/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["node"]
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

apps/rpc-api/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

apps/rpc-api/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

nx.json

@@ -11,6 +11,11 @@
       "cache": true,
       "dependsOn": ["^build"],
       "inputs": ["default", "^default"]
+    },
+    "@nx/esbuild:esbuild": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["default", "^default"]
     }
   },
   "plugins": [

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "start": "npx nx run plugins-runtime:serve-static --port 4200",
     "start:example": "npx nx run example-plugin:serve-static --port 4201",
+    "start:rpc-api": "npx nx serve rpc-api",
     "build": "npx nx build plugins-runtime --emptyOutDir=true",
     "lint": "nx run-many --all --target=lint --parallel",
     "lint:affected": "npx nx affected --target=lint",
@@ -14,26 +15,36 @@
   "devDependencies": {
     "@commitlint/cli": "^18.6.0",
     "@commitlint/config-conventional": "^18.6.0",
+    "@fastify/cors": "^9.0.1",
+    "@nx/esbuild": "18.0.2",
     "@nx/eslint": "18.0.2",
     "@nx/eslint-plugin": "18.0.2",
+    "@nx/jest": "18.0.2",
     "@nx/js": "18.0.2",
+    "@nx/node": "^18.0.2",
     "@nx/vite": "18.0.2",
     "@nx/web": "18.0.2",
     "@swc-node/register": "~1.6.7",
     "@swc/core": "~1.3.85",
     "@swc/helpers": "~0.5.2",
+    "@types/jest": "^29.4.0",
     "@types/node": "20.11.16",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
     "@vitest/coverage-v8": "1.2.2",
     "@vitest/ui": "1.2.2",
+    "esbuild": "^0.19.2",
     "eslint": "~8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "husky": "^9.0.10",
+    "jest": "^29.4.1",
+    "jest-environment-node": "^29.4.1",
     "jsdom": "~22.1.0",
     "nx": "18.0.2",
     "prettier": "^2.6.2",
     "swc-loader": "0.1.15",
+    "ts-jest": "^29.1.0",
+    "ts-node": "10.9.1",
     "typescript": "~5.2.2",
     "vite": "^5.0.0",
     "vite-plugin-dts": "~2.3.0",
@@ -43,6 +54,11 @@
     "packages/*"
   ],
   "dependencies": {
+    "@fastify/autoload": "~5.7.1",
+    "@fastify/sensible": "~5.2.0",
+    "axios": "^1.6.0",
+    "fastify": "~4.13.0",
+    "fastify-plugin": "~4.5.0",
     "ses": "^1.1.0",
     "tslib": "^2.3.0",
     "zod": "^3.22.4"