@grafana/create-plugin 6.7.3 → 6.7.4-canary.2379.20824652165.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "6.7.3",
+  "version": "6.7.4-canary.2379.20824652165.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -55,5 +55,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "023193d34706d034e907105be100711d7988be02"
+  "gitHead": "6e1ce42fd69f428911cf8f5d2edfaca1d7dcc45d"
 }

package/templates/common/.config/bundler/copyFiles.ts

@@ -0,0 +1,23 @@
+import { getPluginJson, hasReadme } from './utils.ts';
+
+const pluginJson = getPluginJson();
+const logoPaths: string[] = Array.from(new Set([pluginJson.info?.logos?.large, pluginJson.info?.logos?.small])).filter(
+  Boolean
+);
+const screenshotPaths: string[] = pluginJson.info?.screenshots?.map((s: { path: string }) => s.path) || [];
+
+export const copyFilePatterns = [
+  // If src/README.md exists use it; otherwise the root README
+  // To `compiler.options.output`
+  { from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
+  { from: 'plugin.json', to: '.' },
+  { from: '../LICENSE', to: '.' },
+  { from: '../CHANGELOG.md', to: '.', force: true },
+  { from: '**/*.json', to: '.' },
+  { from: '**/query_help.md', to: '.', noErrorOnMissing: true },
+  ...logoPaths.map((logoPath) => ({ from: logoPath, to: logoPath })),
+  ...screenshotPaths.map((screenshotPath) => ({
+    from: screenshotPath,
+    to: screenshotPath,
+  })),
+];

package/templates/common/.config/rspack/BuildModeRspackPlugin.ts

@@ -1,14 +1,14 @@
-import * as webpack from 'webpack';
+import { type Compiler, Compilation } from '@rspack/core';
 
 const PLUGIN_NAME = 'BuildModeRspackPlugin';
 
 export class BuildModeRspackPlugin {
-  apply(compiler: webpack.Compiler) {
+  apply(compiler: Compiler) {
     compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
       compilation.hooks.processAssets.tap(
         {
           name: PLUGIN_NAME,
-          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
         },
         (assets) => {
           const assetName = 'plugin.json';
@@ -17,7 +17,7 @@ export class BuildModeRspackPlugin {
             return;
           }
 
-          const { RawSource } = compiler.webpack.sources;
+          const { RawSource } = compiler.rspack.sources;
           const pluginJsonContent = JSON.parse(asset.source().toString());
           const pluginJsonWithBuildMode = JSON.stringify(
             {

package/templates/common/.config/rspack/{liveReloadPlugin.js → liveReloadPlugin.ts}

@@ -1,8 +1,19 @@
-const path = require('path');
-const WebSocket = require('ws');
-const http = require('http');
+import path from 'path';
+import { Compilation, type Compiler } from '@rspack/core';
+import { WebSocketServer } from 'ws';
+import { createServer } from 'http';
+
+interface RspackLiveReloadPluginOptions {
+  port?: number;
+  delay?: number;
+  appendScriptTag?: boolean;
+  protocol?: string;
+}
 
 class RspackLiveReloadPlugin {
+  options: RspackLiveReloadPluginOptions;
+  httpServer: ReturnType<typeof createServer> | null = null;
+  server: WebSocketServer | null = null;
   constructor(options = {}) {
     this.options = Object.assign(
       {
@@ -15,10 +26,10 @@ class RspackLiveReloadPlugin {
     );
   }
 
-  apply(compiler) {
+  apply(compiler: Compiler) {
     const isRspack = compiler.rspack !== undefined;
     if (!isRspack) {
-      throw new Error('This plugin is designed to work with Rspack 1');
+      throw new Error('This plugin is designed to work with Rspack.');
     }
 
     compiler.hooks.afterEmit.tap('RspackLiveReloadPlugin', (compilation) => {
@@ -40,7 +51,7 @@ class RspackLiveReloadPlugin {
 
     const port = this.options.port;
 
-    this.httpServer = http.createServer((req, res) => {
+    this.httpServer = createServer((req, res) => {
       if (req.url === '/livereload.js') {
         res.writeHead(200, { 'Content-Type': 'application/javascript' });
         res.end(this._getLiveReloadScript());
@@ -50,7 +61,7 @@ class RspackLiveReloadPlugin {
       }
     });
 
-    this.server = new WebSocket.Server({ server: this.httpServer });
+    this.server = new WebSocketServer({ server: this.httpServer });
     this.httpServer.listen(port, () => {
       console.log(`LiveReload server started on http://localhost:${port}`);
     });
@@ -68,22 +79,34 @@ class RspackLiveReloadPlugin {
     });
   }
 
-  _injectLiveReloadScript(compilation) {
+  _injectLiveReloadScript(compilation: Compilation) {
     compilation.hooks.processAssets.tap(
       {
         name: 'RspackLiveReloadPlugin',
-        stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
       },
       (assets) => {
         Object.keys(assets).forEach((filename) => {
           if (path.extname(filename) === '.html') {
-            const assetSource = compilation.getAsset(filename).source;
+            const assetSource = compilation.getAsset(filename)?.source;
+            if (!assetSource) {
+              return;
+            }
+
             const updatedSource = assetSource
               .source()
+              .toString()
               .replace('</body>', `<script src="http://localhost:${this.options.port}/livereload.js"></script></body>`);
+
             compilation.updateAsset(filename, {
               source: () => updatedSource,
+              buffer: () => Buffer.from(updatedSource),
               size: () => updatedSource.length,
+              map: () => null,
+              sourceAndMap: () => ({ source: updatedSource, map: null }),
+              updateHash: (hash) => {
+                hash.update(updatedSource);
+              },
             });
           }
         });
@@ -107,4 +130,4 @@ class RspackLiveReloadPlugin {
   }
 }
 
-module.exports = RspackLiveReloadPlugin;
+export default RspackLiveReloadPlugin;

package/templates/common/.config/rspack/rspack.config.ts

@@ -12,11 +12,13 @@ import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { RspackVirtualModulePlugin } from 'rspack-plugin-virtual-module';
-import RspackLiveReloadPlugin from './liveReloadPlugin';
-import { BuildModeRspackPlugin } from './BuildModeRspackPlugin';
-import { DIST_DIR, SOURCE_DIR } from './constants';
-import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils';
-import { externals } from '../bundler/externals';
+
+import RspackLiveReloadPlugin from './liveReloadPlugin.ts';
+import { BuildModeRspackPlugin } from './BuildModeRspackPlugin.ts';
+import { DIST_DIR, SOURCE_DIR } from '../bundler/constants.ts';
+import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from '../bundler/utils.ts';
+import { externals } from '../bundler/externals.ts';
+import { copyFilePatterns } from '../bundler/copyFiles.ts';
 
 const { SubresourceIntegrityPlugin } = rspack.experiments;
 const pluginJson = getPluginJson();
@@ -155,21 +157,7 @@ const config = async (env): Promise<Configuration> => {
         entryOnly: true,
       }),
       new rspack.CopyRspackPlugin({
-        patterns: [
-          // If src/README.md exists use it; otherwise the root README
-          // To `compiler.options.output`
-          { from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
-          { from: 'plugin.json', to: '.' },
-          { from: '../LICENSE', to: '.' },
-          { from: '../CHANGELOG.md', to: '.', force: true },
-          { from: '**/*.json', to: '.' },
-          { from: '**/query_help.md', to: '.', noErrorOnMissing: true },
-          ...logoPaths.map((logoPath) => ({ from: logoPath, to: logoPath })),
-          ...screenshotPaths.map((screenshotPath) => ({
-            from: screenshotPath,
-            to: screenshotPath,
-          })),
-        ],
+        patterns: copyFilePatterns,
       }),
       // Replace certain template-variables in the README and plugin.json
       new ReplaceInFileWebpackPlugin([

package/templates/common/.config/webpack/webpack.config.ts

@@ -17,9 +17,10 @@ import LiveReloadPlugin from 'webpack-livereload-plugin';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 
 import { BuildModeWebpackPlugin } from './BuildModeWebpackPlugin.ts';
-import { DIST_DIR, SOURCE_DIR } from './constants.ts';
-import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils.ts';
+import { DIST_DIR, SOURCE_DIR } from '../bundler/constants.ts';
+import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from '../bundler/utils.ts';
 import { externals } from '../bundler/externals.ts';
+import { copyFilePatterns } from '../bundler/copyFiles.ts';
 
 const pluginJson = getPluginJson();
 const cpVersion = getCPConfigVersion();
@@ -167,21 +168,7 @@ const config = async (env: Env): Promise<Configuration> => {
         entryOnly: true,
       }),
       new CopyWebpackPlugin({
-        patterns: [
-          // If src/README.md exists use it; otherwise the root README
-          // To `compiler.options.output`
-          { from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
-          { from: 'plugin.json', to: '.' },
-          { from: '../LICENSE', to: '.' },
-          { from: '../CHANGELOG.md', to: '.', force: true },
-          { from: '**/*.json', to: '.' },
-          { from: '**/query_help.md', to: '.', noErrorOnMissing: true },
-          ...logoPaths.map((logoPath) => ({ from: logoPath, to: logoPath })),
-          ...screenshotPaths.map((screenshotPath) => ({
-            from: screenshotPath,
-            to: screenshotPath,
-          })),
-        ],
+        patterns: copyFilePatterns,
       }),
       // Replace certain template-variables in the README and plugin.json
       new ReplaceInFileWebpackPlugin([

package/templates/common/_package.json

@@ -31,7 +31,8 @@
     "@types/jest": "^29.5.0",
     "@types/node": "^24.0.0",
     "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.0",{{#if useExperimentalRspack}}
+    "@types/ws": "^8.18.1",{{/if}}
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",{{#unless useExperimentalRspack}}
     "copy-webpack-plugin": "^13.0.0",{{/unless}}
@@ -64,7 +65,8 @@
     "webpack-cli": "^6.0.0",
     "webpack-livereload-plugin": "^3.0.2",
     "webpack-subresource-integrity": "^5.1.0",
-    "webpack-virtual-modules": "^0.6.2"{{/unless}}
+    "webpack-virtual-modules": "^0.6.2"{{/unless}}{{#if useExperimentalRspack}}
+    "ws": "^8.13.0"{{/if}}
   },
   "engines": {
     "node": ">=22"

package/templates/common/.config/rspack/utils.ts

@@ -1,63 +0,0 @@
-import fs from 'fs';
-import process from 'process';
-import os from 'os';
-import path from 'path';
-import { glob } from 'glob';
-import { SOURCE_DIR } from './constants';
-
-export function isWSL() {
-  if (process.platform !== 'linux') {
-    return false;
-  }
-
-  if (os.release().toLowerCase().includes('microsoft')) {
-    return true;
-  }
-
-  try {
-    return fs.readFileSync('/proc/version', 'utf8').toLowerCase().includes('microsoft');
-  } catch {
-    return false;
-  }
-}
-
-export function getPackageJson() {
-  return require(path.resolve(process.cwd(), 'package.json'));
-}
-
-export function getPluginJson() {
-  return require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
-}
-
-export function getCPConfigVersion() {
-  const cprcJson = path.resolve(__dirname, '../', '.cprc.json');
-  return fs.existsSync(cprcJson) ? require(cprcJson).version : { version: 'unknown' };
-}
-
-export function hasReadme() {
-  return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
-}
-
-// Support bundling nested plugins by finding all plugin.json files in src directory
-// then checking for a sibling module.[jt]sx? file.
-export async function getEntries(): Promise<Record<string, string>> {
-  const pluginsJson = await glob('**/src/**/plugin.json', { absolute: true });
-
-  const plugins = await Promise.all(
-    pluginsJson.map((pluginJson) => {
-      const folder = path.dirname(pluginJson);
-      return glob(`${folder}/module.{ts,tsx,js,jsx}`, { absolute: true });
-    })
-  );
-
-  return plugins.reduce((result, modules) => {
-    return modules.reduce((result, module) => {
-      const pluginPath = path.dirname(module);
-      const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\/?/i, '');
-      const entryName = pluginName === '' ? 'module' : `${pluginName}/module`;
-
-      result[entryName] = module;
-      return result;
-    }, result);
-  }, {});
-}

package/templates/common/.config/webpack/constants.ts

@@ -1,2 +0,0 @@
-export const SOURCE_DIR = 'src';
-export const DIST_DIR = 'dist';