feat: add remote-plugin example

.editorconfig

@@ -13,6 +13,5 @@ insert_final_newline = true
 [*.java]
 indent_size = 4
 
-[*.{html,ts,js,json,css,less}]
-indent_style = space
+[*.{html,ts,tsx,js,jsx,json,css}]
 indent_size = 2

.gitignore

@@ -16,11 +16,9 @@ runtime-EclipseApplication-m2eclipse
 ./fuseenterprise
 .idea
 tags
-node_modules
 hawtio-config
 .tscache
 node/
-bower_components/
 .vscode
 .attach_pid*
 .camel-jbang
@@ -31,10 +29,10 @@ node_modules
 
 # yarn
 .pnp.*
-**/.yarn/*
+.yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-**/build/**
+build

package.json

@@ -0,0 +1,3 @@
+{
+  "packageManager": "[email protected]"
+}

pom.xml

@@ -55,6 +55,7 @@
 
   <modules>
     <module>quarkus-ssl</module>
+    <module>remote-plugin</module>
     <module>springboot-ssl</module>
   </modules>
 

remote-plugin/.eslintrc.cjs

@@ -0,0 +1,44 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react', 'import'],
+  rules: {
+    'import/no-default-export': 'error',
+    '@typescript-eslint/explicit-member-accessibility': [
+      'warn',
+      {
+        accessibility: 'no-public',
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}

remote-plugin/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# yarn (non zero-installs)
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

remote-plugin/.prettierignore

@@ -0,0 +1,5 @@
+build
+coverage
+dist
+target
+.yarn

remote-plugin/.prettierrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 120,
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'avoid',
+}

remote-plugin/.yarnrc.yml

@@ -0,0 +1,9 @@
+cacheFolder: ../.yarn/cache
+
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+yarnPath: ../.yarn/releases/yarn-4.1.1.cjs

remote-plugin/README.md

@@ -0,0 +1,23 @@
+# Sample Hawtio plugin TypeScript project
+
+A sample Hawtio v3 plugin project written in TypeScript. This project doesn't run standalone, but is supposed to be used with other Spring Boot, Quarkus, or WAR projects.
+
+Since a Hawtio plugin is based on React and [Webpack Module Federation](https://module-federation.github.io/), this project uses Yarn v3 and [CRACO](https://craco.js.org/) as the build tools. You can use any JS/TS tools for developing a Hawtio plugin so long as they can build a React and Webpack Module Federation application.
+
+## Key components
+
+The key components in the plugin project are as follows:
+
+<!-- prettier-ignore-start -->
+| File/Directory                                      | Description |
+|-----------------------------------------------------| ----------- |
+| [craco.config.js](../sample-plugin/craco.config.js) | The React application configuration file. The plugin interface is defined with `ModuleFederationPlugin`. The name `samplePlugin` and the module name `./plugin` at the `exposes` section correspond to the parameters `scope` and `module` set to `HawtioPlugin` in `PluginContextListener.java`. |
+| [src/sample-plugin](./src/sample-plugin)            | This is where the actual code of the plugin is located. |
+| [pom.xml](./pom.xml)                                | This project uses Maven as the primary tool for building. Here, the `frontend-maven-plugin` is used to trigger the build of `sample-plugin` TypeScript project. |
+<!-- prettier-ignore-end -->
+
+## How to build
+
+```console
+mvn install
+```

remote-plugin/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "hawtio-example-remote-plugin",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "test": "jest --passWithNoTests",
+    "format": "prettier --write .",
+    "lint": "eslint src/"
+  },
+  "dependencies": {
+    "@hawtio/react": "^1.2.0",
+    "@patternfly/react-core": "~4.278.1",
+    "@patternfly/react-table": "~4.113.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1"
+  },
+  "devDependencies": {
+    "@hawtio/backend-middleware": "^1.0.4",
+    "@swc/core": "^1.4.11",
+    "@types/eslint": "^8",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^6.10.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "style-loader": "^3.3.4",
+    "swc-loader": "^0.2.6",
+    "typescript": "^5.4.3",
+    "typescript-eslint": "^7.4.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "resolutions": {
+    "victory-area": "36.8.6",
+    "victory-bar": "36.8.6",
+    "victory-brush-container": "36.8.6",
+    "victory-core": "36.8.6",
+    "victory-cursor-container": "36.8.6",
+    "victory-create-container": "36.8.6",
+    "victory-legend": "36.8.6",
+    "victory-line": "36.8.6",
+    "victory-pie": "36.8.6",
+    "victory-scatter": "36.8.6",
+    "victory-selection-container": "36.8.6",
+    "victory-shared-events": "36.8.6",
+    "victory-voronoi-container": "36.8.6",
+    "victory-zoom-container": "36.8.6"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "[email protected]"
+}

remote-plugin/pom.xml

@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+
+  <modelVersion>4.0.0</modelVersion>
+
+  <parent>
+    <groupId>io.hawt.examples</groupId>
+    <artifactId>hawtio-examples</artifactId>
+    <version>4.0.0-SNAPSHOT</version>
+  </parent>
+
+  <groupId>io.hawt.examples</groupId>
+  <artifactId>hawtio-example-remote-plugin</artifactId>
+  <name>${project.artifactId}</name>
+  <description>Hawtio :: Remote Hawtio plugin example</description>
+
+  <properties>
+    <!--
+      Path to the Hawtio plugin TS project. You can specify the path if it's placed
+      differently from the project root.
+    -->
+    <plugin.path>${project.basedir}</plugin.path>
+  </properties>
+
+  <build>
+    <!-- Include the build output of the TS project as the resources to JAR -->
+    <resources>
+      <resource>
+        <directory>${plugin.path}/build</directory>
+        <targetPath>META-INF/resources</targetPath>
+        <excludes>
+          <exclude>index.html</exclude>
+        </excludes>
+      </resource>
+    </resources>
+
+    <plugins>
+      <!-- Build the TS plugin project from Maven -->
+      <plugin>
+        <groupId>com.github.eirslett</groupId>
+        <artifactId>frontend-maven-plugin</artifactId>
+        <configuration>
+          <workingDirectory>${plugin.path}</workingDirectory>
+        </configuration>
+        <executions>
+          <execution>
+            <id>install node and yarn</id>
+            <goals>
+              <goal>install-node-and-yarn</goal>
+            </goals>
+            <configuration>
+              <nodeVersion>${node-version}</nodeVersion>
+              <yarnVersion>${yarn-version}</yarnVersion>
+            </configuration>
+          </execution>
+          <execution>
+            <id>yarn npm audit</id>
+            <goals>
+              <goal>yarn</goal>
+            </goals>
+            <configuration>
+              <arguments>npm audit --all</arguments>
+            </configuration>
+          </execution>
+          <execution>
+            <id>yarn install</id>
+            <goals>
+              <goal>yarn</goal>
+            </goals>
+            <configuration>
+              <arguments>install</arguments>
+            </configuration>
+          </execution>
+          <execution>
+            <id>yarn build</id>
+            <goals>
+              <goal>yarn</goal>
+            </goals>
+            <configuration>
+              <arguments>build</arguments>
+            </configuration>
+          </execution>
+        </executions>
+      </plugin>
+
+      <!-- Clean up the plugin's 'build/' and 'node_modules/' directories as well -->
+      <plugin>
+        <artifactId>maven-clean-plugin</artifactId>
+        <configuration>
+          <filesets>
+            <fileset>
+              <directory>${plugin.path}/build</directory>
+              <includes>
+                <include>**/*</include>
+              </includes>
+              <followSymlinks>false</followSymlinks>
+            </fileset>
+            <fileset>
+              <directory>${plugin.path}/node_modules</directory>
+              <includes>
+                <include>**/*</include>
+              </includes>
+              <followSymlinks>false</followSymlinks>
+            </fileset>
+          </filesets>
+        </configuration>
+      </plugin>
+    </plugins>
+  </build>
+
+</project>

remote-plugin/public/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="Hawtio Example: Remote plugin" />
+    <title>Remote Plugin - Hawtio</title>
+
+    <!-- Hawtio branding styles placeholder -->
+    <link id="branding" rel="stylesheet" type="text/css" href="" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

remote-plugin/src/bootstrap.tsx

@@ -0,0 +1,30 @@
+import { Hawtio, connect, hawtio, jmx } from '@hawtio/react'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { plugin } from './remote-plugin'
+
+/*
+const App = () => (
+  <div>
+    <h1>Hawtio Example - Remote Plugin</h1>
+    <p>This is a Hawtio plugin example.</p>
+  </div>
+)
+*/
+
+// Register essential plugins
+connect()
+jmx()
+
+// Register the plugin under development
+plugin()
+
+// Bootstrap Hawtio
+hawtio.bootstrap()
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(
+  <React.StrictMode>
+    <Hawtio />
+  </React.StrictMode>,
+)

remote-plugin/src/declare.d.ts

@@ -0,0 +1,3 @@
+declare module '*.md'
+declare module '*.svg'
+declare module '*.jpg'