Readding missing files, fix SVG spacing
This commit is contained in:
Andy Dixon
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"version": "6.1.0"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||
*
|
||||
* In order to extend the configuration follow the steps in .config/README.md
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
endOfLine: 'auto',
|
||||
printWidth: 120,
|
||||
trailingComma: 'es5',
|
||||
semi: true,
|
||||
jsxSingleQuote: false,
|
||||
singleQuote: true,
|
||||
useTabs: false,
|
||||
tabWidth: 2,
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
ARG grafana_version=latest
|
||||
ARG grafana_image=grafana-enterprise
|
||||
|
||||
FROM grafana/${grafana_image}:${grafana_version}
|
||||
|
||||
ARG anonymous_auth_enabled=true
|
||||
ARG development=false
|
||||
ARG TARGETARCH
|
||||
|
||||
|
||||
ENV DEV "${development}"
|
||||
|
||||
# Make it as simple as possible to access the grafana instance for development purposes
|
||||
# Do NOT enable these settings in a public facing / production grafana instance
|
||||
ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
|
||||
ENV GF_AUTH_ANONYMOUS_ENABLED "${anonymous_auth_enabled}"
|
||||
ENV GF_AUTH_BASIC_ENABLED "false"
|
||||
# Set development mode so plugins can be loaded without the need to sign
|
||||
ENV GF_DEFAULT_APP_MODE "development"
|
||||
|
||||
|
||||
LABEL maintainer="Grafana Labs <hello@grafana.com>"
|
||||
|
||||
ENV GF_PATHS_HOME="/usr/share/grafana"
|
||||
WORKDIR $GF_PATHS_HOME
|
||||
|
||||
USER root
|
||||
|
||||
# Installing supervisor and inotify-tools
|
||||
RUN if [ "${development}" = "true" ]; then \
|
||||
if grep -i -q alpine /etc/issue; then \
|
||||
apk add supervisor inotify-tools git; \
|
||||
elif grep -i -q ubuntu /etc/issue; then \
|
||||
DEBIAN_FRONTEND=noninteractive && \
|
||||
apt-get update && \
|
||||
apt-get install -y supervisor inotify-tools git && \
|
||||
rm -rf /var/lib/apt/lists/*; \
|
||||
else \
|
||||
echo 'ERROR: Unsupported base image' && /bin/false; \
|
||||
fi \
|
||||
fi
|
||||
|
||||
COPY supervisord/supervisord.conf /etc/supervisor.d/supervisord.ini
|
||||
COPY supervisord/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
|
||||
|
||||
|
||||
|
||||
# Inject livereload script into grafana index.html
|
||||
RUN sed -i 's|</body>|<script src="http://localhost:35729/livereload.js"></script></body>|g' /usr/share/grafana/public/views/index.html
|
||||
|
||||
|
||||
COPY entrypoint.sh /entrypoint.sh
|
||||
RUN chmod +x /entrypoint.sh
|
||||
ENTRYPOINT ["/entrypoint.sh"]
|
||||
@@ -0,0 +1,176 @@
|
||||
# Default build configuration by Grafana
|
||||
|
||||
**This is an auto-generated directory and is not intended to be changed! ⚠️**
|
||||
|
||||
The `.config/` directory holds basic configuration for the different tools
|
||||
that are used to develop, test and build the project. In order to make it updates easier we ask you to
|
||||
not edit files in this folder to extend configuration.
|
||||
|
||||
## How to extend the basic configs?
|
||||
|
||||
Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead
|
||||
to issues around working with the project.
|
||||
|
||||
### Extending the ESLint config
|
||||
|
||||
Edit the `eslint.config.mjs` file in the project root to extend the ESLint configuration. The following example disables deprecation notices for source files.
|
||||
|
||||
**Example:**
|
||||
|
||||
```javascript
|
||||
import { defineConfig } from 'eslint/config';
|
||||
import baseConfig from './.config/eslint.config.mjs';
|
||||
|
||||
export default defineConfig([
|
||||
{
|
||||
ignores: [
|
||||
//...
|
||||
],
|
||||
},
|
||||
...baseConfig,
|
||||
{
|
||||
files: ['src/**/*.{ts,tsx}'],
|
||||
rules: {
|
||||
'@typescript-eslint/no-deprecated': 'off',
|
||||
},
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Extending the Prettier config
|
||||
|
||||
Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.
|
||||
|
||||
**Example:**
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
// Prettier configuration provided by Grafana scaffolding
|
||||
...require('./.config/.prettierrc.js'),
|
||||
|
||||
semi: false,
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Extending the Jest config
|
||||
|
||||
There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`.
|
||||
|
||||
**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
|
||||
set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array))
|
||||
|
||||
**`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
|
||||
|
||||
#### ESM errors with Jest
|
||||
|
||||
A common issue with the current jest config involves importing an npm package that only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this, we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be, this can be extended in the following way:
|
||||
|
||||
```javascript
|
||||
process.env.TZ = 'UTC';
|
||||
const { grafanaESModules, nodeModulesToTransform } = require('./config/jest/utils');
|
||||
|
||||
module.exports = {
|
||||
// Jest configuration provided by Grafana
|
||||
...require('./.config/jest.config'),
|
||||
// Inform jest to only transform specific node_module packages.
|
||||
transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])],
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Extending the TypeScript config
|
||||
|
||||
Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.
|
||||
|
||||
**Example:**
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./.config/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"preserveConstEnums": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Extending the Webpack config
|
||||
|
||||
Follow these steps to extend the basic Webpack configuration that lives under `.config/`:
|
||||
|
||||
#### 1. Create a new Webpack configuration file
|
||||
|
||||
Create a new config file that is going to extend the basic one provided by Grafana.
|
||||
It can live in the project root, e.g. `webpack.config.ts`.
|
||||
|
||||
#### 2. Merge the basic config provided by Grafana and your custom setup
|
||||
|
||||
We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.
|
||||
|
||||
```typescript
|
||||
// webpack.config.ts
|
||||
import type { Configuration } from 'webpack';
|
||||
import { merge } from 'webpack-merge';
|
||||
import grafanaConfig, { type Env } from './.config/webpack/webpack.config';
|
||||
|
||||
const config = async (env: Env): Promise<Configuration> => {
|
||||
const baseConfig = await grafanaConfig(env);
|
||||
|
||||
return merge(baseConfig, {
|
||||
// Add custom config here...
|
||||
output: {
|
||||
asyncChunks: true,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
|
||||
#### 3. Update the `package.json` to use the new Webpack config
|
||||
|
||||
We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.
|
||||
|
||||
**Update for `build`:**
|
||||
|
||||
```diff
|
||||
-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
|
||||
+"build": "webpack -c ./webpack.config.ts --env production",
|
||||
```
|
||||
|
||||
**Update for `dev`:**
|
||||
|
||||
```diff
|
||||
-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
|
||||
+"dev": "webpack -w -c ./webpack.config.ts --env development",
|
||||
```
|
||||
|
||||
### Configure grafana image to use when running docker
|
||||
|
||||
By default, `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behavior, simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`.
|
||||
|
||||
**Example:**
|
||||
|
||||
```yaml
|
||||
version: '3.7'
|
||||
|
||||
services:
|
||||
grafana:
|
||||
extends:
|
||||
file: .config/docker-compose-base.yaml
|
||||
service: grafana
|
||||
build:
|
||||
args:
|
||||
grafana_version: ${GRAFANA_VERSION:-9.1.2}
|
||||
grafana_image: ${GRAFANA_IMAGE:-grafana}
|
||||
```
|
||||
|
||||
In this example, we assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker compose commands, which might be convenient in some scenarios.
|
||||
|
||||
---
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { Configuration, ExternalItemFunctionData } from 'webpack';
|
||||
|
||||
type ExternalsType = Configuration['externals'];
|
||||
|
||||
export const externals: ExternalsType = [
|
||||
// Required for dynamic publicPath resolution
|
||||
{ 'amd-module': 'module' },
|
||||
'lodash',
|
||||
'jquery',
|
||||
'moment',
|
||||
'slate',
|
||||
'emotion',
|
||||
'@emotion/react',
|
||||
'@emotion/css',
|
||||
'prismjs',
|
||||
'slate-plain-serializer',
|
||||
'@grafana/slate-react',
|
||||
'react',
|
||||
'react-dom',
|
||||
'react-redux',
|
||||
'redux',
|
||||
'rxjs',
|
||||
'i18next',
|
||||
'react-router',
|
||||
'd3',
|
||||
'angular',
|
||||
/^@grafana\/ui/i,
|
||||
/^@grafana\/runtime/i,
|
||||
/^@grafana\/data/i,
|
||||
|
||||
// Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
|
||||
({ request }: ExternalItemFunctionData, callback: (error?: Error, result?: string) => void) => {
|
||||
const prefix = 'grafana/';
|
||||
const hasPrefix = (request: string) => request.indexOf(prefix) === 0;
|
||||
const stripPrefix = (request: string) => request.slice(prefix.length);
|
||||
|
||||
if (request && hasPrefix(request)) {
|
||||
return callback(undefined, stripPrefix(request));
|
||||
}
|
||||
|
||||
callback();
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,25 @@
|
||||
services:
|
||||
grafana:
|
||||
user: root
|
||||
container_name: 'andydixon-chargevizbattery-panel'
|
||||
|
||||
build:
|
||||
context: .
|
||||
args:
|
||||
grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
|
||||
grafana_version: ${GRAFANA_VERSION:-12.2.0}
|
||||
development: ${DEVELOPMENT:-false}
|
||||
anonymous_auth_enabled: ${ANONYMOUS_AUTH_ENABLED:-true}
|
||||
ports:
|
||||
- 3000:3000/tcp
|
||||
volumes:
|
||||
- ../dist:/var/lib/grafana/plugins/andydixon-chargevizbattery-panel
|
||||
- ../provisioning:/etc/grafana/provisioning
|
||||
- ..:/root/andydixon-chargevizbattery-panel
|
||||
|
||||
environment:
|
||||
NODE_ENV: development
|
||||
GF_LOG_FILTERS: plugin.andydixon-chargevizbattery-panel:debug
|
||||
GF_LOG_LEVEL: debug
|
||||
GF_DATAPROXY_LOGGING: 1
|
||||
GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS: andydixon-chargevizbattery-panel
|
||||
@@ -0,0 +1,18 @@
|
||||
#!/bin/sh
|
||||
|
||||
if [ "${DEV}" = "false" ]; then
|
||||
echo "Starting test mode"
|
||||
exec /run.sh
|
||||
fi
|
||||
|
||||
echo "Starting development mode"
|
||||
|
||||
if grep -i -q alpine /etc/issue; then
|
||||
exec /usr/bin/supervisord -c /etc/supervisord.conf
|
||||
elif grep -i -q ubuntu /etc/issue; then
|
||||
exec /usr/bin/supervisord -c /etc/supervisor/supervisord.conf
|
||||
else
|
||||
echo 'ERROR: Unsupported base image'
|
||||
exit 1
|
||||
fi
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
/*
|
||||
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||
*
|
||||
* In order to extend the configuration follow the steps in
|
||||
* https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-eslint-config
|
||||
*/
|
||||
|
||||
import { defineConfig } from 'eslint/config';
|
||||
import grafanaConfig from '@grafana/eslint-config/flat.js';
|
||||
|
||||
export default defineConfig([
|
||||
...grafanaConfig,
|
||||
{
|
||||
rules: {
|
||||
'react/prop-types': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['src/**/*.{ts,tsx}'],
|
||||
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: './tsconfig.json',
|
||||
},
|
||||
},
|
||||
|
||||
rules: {
|
||||
'@typescript-eslint/no-deprecated': 'warn',
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['./tests/**/*'],
|
||||
|
||||
rules: {
|
||||
'react-hooks/rules-of-hooks': 'off',
|
||||
},
|
||||
},
|
||||
]);
|
||||
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||
*
|
||||
* In order to extend the configuration follow the steps in
|
||||
* https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-jest-config
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom';
|
||||
import { TextEncoder, TextDecoder } from 'util';
|
||||
|
||||
Object.assign(global, { TextDecoder, TextEncoder });
|
||||
|
||||
// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
|
||||
Object.defineProperty(global, 'matchMedia', {
|
||||
writable: true,
|
||||
value: (query) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: jest.fn(), // deprecated
|
||||
removeListener: jest.fn(), // deprecated
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
dispatchEvent: jest.fn(),
|
||||
}),
|
||||
});
|
||||
|
||||
HTMLCanvasElement.prototype.getContext = () => {};
|
||||
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||
*
|
||||
* In order to extend the configuration follow the steps in
|
||||
* https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-jest-config
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
|
||||
|
||||
module.exports = {
|
||||
moduleNameMapper: {
|
||||
'\\.(css|scss|sass)$': 'identity-obj-proxy',
|
||||
'react-inlinesvg': path.resolve(__dirname, 'jest', 'mocks', 'react-inlinesvg.tsx'),
|
||||
},
|
||||
modulePaths: ['<rootDir>/src'],
|
||||
setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
|
||||
testEnvironment: 'jest-environment-jsdom',
|
||||
testMatch: [
|
||||
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
|
||||
'<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
|
||||
'<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
|
||||
],
|
||||
transform: {
|
||||
'^.+\\.(t|j)sx?$': [
|
||||
'@swc/jest',
|
||||
{
|
||||
sourceMaps: 'inline',
|
||||
jsc: {
|
||||
parser: {
|
||||
syntax: 'typescript',
|
||||
tsx: true,
|
||||
decorators: false,
|
||||
dynamicImport: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// Jest will throw `Cannot use import statement outside module` if it tries to load an
|
||||
// ES module without it being transformed first. ./config/README.md#esm-errors-with-jest
|
||||
transformIgnorePatterns: [nodeModulesToTransform(grafanaESModules)],
|
||||
watchPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'],
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
// Due to the grafana/ui Icon component making fetch requests to
|
||||
// `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
|
||||
// the failed fetch requests from displaying errors in console.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
type Callback = (...args: any[]) => void;
|
||||
|
||||
export interface StorageItem {
|
||||
content: string;
|
||||
queue: Callback[];
|
||||
status: string;
|
||||
}
|
||||
|
||||
export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
|
||||
|
||||
const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
|
||||
|
||||
const InlineSVG = ({ src }: { src: string }) => {
|
||||
// testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
|
||||
const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" />;
|
||||
};
|
||||
|
||||
export default InlineSVG;
|
||||
@@ -0,0 +1,37 @@
|
||||
/*
|
||||
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||
*
|
||||
* In order to extend the configuration follow the steps in .config/README.md
|
||||
*/
|
||||
|
||||
/*
|
||||
* This utility function is useful in combination with jest `transformIgnorePatterns` config
|
||||
* to transform specific packages (e.g.ES modules) in a projects node_modules folder.
|
||||
*/
|
||||
const nodeModulesToTransform = (moduleNames) => `node_modules\/(?!.*(${moduleNames.join('|')})\/.*)`;
|
||||
|
||||
// Array of known nested grafana package dependencies that only bundle an ESM version
|
||||
const grafanaESModules = [
|
||||
'.pnpm', // Support using pnpm symlinked packages
|
||||
'@grafana/schema',
|
||||
'@wojtekmaj/date-utils',
|
||||
'd3',
|
||||
'd3-color',
|
||||
'd3-force',
|
||||
'd3-interpolate',
|
||||
'd3-scale-chromatic',
|
||||
'get-user-locale',
|
||||
'marked',
|
||||
'memoize',
|
||||
'mimic-function',
|
||||
'ol',
|
||||
'react-calendar',
|
||||
'react-colorful',
|
||||
'rxjs',
|
||||
'uuid',
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
nodeModulesToTransform,
|
||||
grafanaESModules,
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
[supervisord]
|
||||
nodaemon=true
|
||||
user=root
|
||||
|
||||
[program:grafana]
|
||||
user=root
|
||||
directory=/var/lib/grafana
|
||||
command=/run.sh
|
||||
stdout_logfile=/dev/fd/1
|
||||
stdout_logfile_maxbytes=0
|
||||
redirect_stderr=true
|
||||
killasgroup=true
|
||||
stopasgroup=true
|
||||
autostart=true
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||
*
|
||||
* In order to extend the configuration follow the steps in
|
||||
* https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-typescript-config
|
||||
*/
|
||||
{
|
||||
"compilerOptions": {
|
||||
"alwaysStrict": true,
|
||||
"declaration": false,
|
||||
"rootDir": "../src",
|
||||
"baseUrl": "../src",
|
||||
"typeRoots": ["../node_modules/@types"],
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"ts-node": {
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"transpileOnly": true
|
||||
},
|
||||
"include": ["../src", "./types"],
|
||||
"extends": "@grafana/tsconfig"
|
||||
}
|
||||
Vendored
+37
@@ -0,0 +1,37 @@
|
||||
// Image declarations
|
||||
declare module '*.gif' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.jpg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.jpeg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.png' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.webp' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
// Font declarations
|
||||
declare module '*.woff';
|
||||
declare module '*.woff2';
|
||||
declare module '*.eot';
|
||||
declare module '*.ttf';
|
||||
declare module '*.otf';
|
||||
Vendored
+83
@@ -0,0 +1,83 @@
|
||||
declare module 'replace-in-file-webpack-plugin' {
|
||||
import { Compiler, Plugin } from 'webpack';
|
||||
|
||||
interface ReplaceRule {
|
||||
search: string | RegExp;
|
||||
replace: string | ((match: string) => string);
|
||||
}
|
||||
|
||||
interface ReplaceOption {
|
||||
dir?: string;
|
||||
files?: string[];
|
||||
test?: RegExp | RegExp[];
|
||||
rules: ReplaceRule[];
|
||||
}
|
||||
|
||||
class ReplaceInFilePlugin extends Plugin {
|
||||
constructor(options?: ReplaceOption[]);
|
||||
options: ReplaceOption[];
|
||||
apply(compiler: Compiler): void;
|
||||
}
|
||||
|
||||
export = ReplaceInFilePlugin;
|
||||
}
|
||||
|
||||
declare module 'webpack-livereload-plugin' {
|
||||
import { ServerOptions } from 'https';
|
||||
import { Compiler, Plugin, Stats, Compilation } from 'webpack';
|
||||
|
||||
interface Options extends Pick<ServerOptions, 'cert' | 'key' | 'pfx'> {
|
||||
/**
|
||||
* protocol for livereload `<script>` src attribute value
|
||||
* @default protocol of the page, either `http` or `https`
|
||||
*/
|
||||
protocol?: string | undefined;
|
||||
/**
|
||||
* The desired port for the livereload server.
|
||||
* If you define port 0, an available port will be searched for, starting from 35729.
|
||||
* @default 35729
|
||||
*/
|
||||
port?: number | undefined;
|
||||
/**
|
||||
* he desired hostname for the appended `<script>` (if present) to point to
|
||||
* @default hostname of the page, like `localhost` or 10.0.2.2
|
||||
*/
|
||||
hostname?: string | undefined;
|
||||
/**
|
||||
* livereload `<script>` automatically to `<head>`.
|
||||
* @default false
|
||||
*/
|
||||
appendScriptTag?: boolean | undefined;
|
||||
/**
|
||||
* RegExp of files to ignore. Null value means ignore nothing.
|
||||
* It is also possible to define an array and use multiple anymatch patterns
|
||||
*/
|
||||
ignore?: RegExp | RegExp[] | null | undefined;
|
||||
/**
|
||||
* amount of milliseconds by which to delay the live reload (in case build takes longer)
|
||||
* @default 0
|
||||
*/
|
||||
delay?: number | undefined;
|
||||
/**
|
||||
* create hash for each file source and only notify livereload if hash has changed
|
||||
* @default false
|
||||
*/
|
||||
useSourceHash?: boolean | undefined;
|
||||
}
|
||||
|
||||
class LiveReloadPlugin extends Plugin {
|
||||
readonly isRunning: boolean;
|
||||
constructor(options?: Options);
|
||||
|
||||
apply(compiler: Compiler): void;
|
||||
|
||||
start(watching: any, cb: () => void): void;
|
||||
done(stats: Stats): void;
|
||||
failed(): void;
|
||||
autoloadJs(): string;
|
||||
scriptTag(source: string): string;
|
||||
applyCompilation(compilation: Compilation): void;
|
||||
}
|
||||
|
||||
export = LiveReloadPlugin;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import webpack, { type Compiler } from 'webpack';
|
||||
|
||||
const PLUGIN_NAME = 'BuildModeWebpack';
|
||||
|
||||
export class BuildModeWebpackPlugin {
|
||||
apply(compiler: webpack.Compiler) {
|
||||
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
|
||||
compilation.hooks.processAssets.tap(
|
||||
{
|
||||
name: PLUGIN_NAME,
|
||||
stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
|
||||
},
|
||||
async () => {
|
||||
const assets = compilation.getAssets();
|
||||
for (const asset of assets) {
|
||||
if (asset.name.endsWith('plugin.json')) {
|
||||
const pluginJsonString = asset.source.source().toString();
|
||||
const pluginJsonWithBuildMode = JSON.stringify(
|
||||
{
|
||||
...JSON.parse(pluginJsonString),
|
||||
buildMode: compilation.options.mode,
|
||||
},
|
||||
null,
|
||||
4
|
||||
);
|
||||
compilation.updateAsset(asset.name, new webpack.sources.RawSource(pluginJsonWithBuildMode));
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export const SOURCE_DIR = 'src';
|
||||
export const DIST_DIR = 'dist';
|
||||
@@ -0,0 +1,68 @@
|
||||
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.ts';
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
function loadJson(path: string) {
|
||||
const rawJson = fs.readFileSync(path, 'utf8');
|
||||
return JSON.parse(rawJson);
|
||||
}
|
||||
|
||||
export function getPackageJson() {
|
||||
return loadJson(path.resolve(process.cwd(), 'package.json'));
|
||||
}
|
||||
|
||||
export function getPluginJson() {
|
||||
return loadJson(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
|
||||
}
|
||||
|
||||
export function getCPConfigVersion() {
|
||||
const cprcJson = path.resolve(process.cwd(), './.config', '.cprc.json');
|
||||
return fs.existsSync(cprcJson) ? loadJson(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() {
|
||||
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<Record<string, string>>((result, modules) => {
|
||||
return modules.reduce((innerResult, module) => {
|
||||
const pluginPath = path.dirname(module);
|
||||
const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\/?/i, '');
|
||||
const entryName = pluginName === '' ? 'module' : `${pluginName}/module`;
|
||||
|
||||
innerResult[entryName] = module;
|
||||
return innerResult;
|
||||
}, result);
|
||||
}, {});
|
||||
}
|
||||
@@ -0,0 +1,247 @@
|
||||
/*
|
||||
* ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
|
||||
*
|
||||
* In order to extend the configuration follow the steps in
|
||||
* https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-webpack-config
|
||||
*/
|
||||
|
||||
import CopyWebpackPlugin from 'copy-webpack-plugin';
|
||||
import ESLintPlugin from 'eslint-webpack-plugin';
|
||||
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
|
||||
import path from 'path';
|
||||
import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
|
||||
import TerserPlugin from 'terser-webpack-plugin';
|
||||
import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
|
||||
import webpack, { type Configuration } from 'webpack';
|
||||
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 { externals } from '../bundler/externals.ts';
|
||||
|
||||
const pluginJson = getPluginJson();
|
||||
const cpVersion = getCPConfigVersion();
|
||||
const pluginVersion = getPackageJson().version;
|
||||
|
||||
const virtualPublicPath = new VirtualModulesPlugin({
|
||||
'node_modules/grafana-public-path.js': `
|
||||
import amdMetaModule from 'amd-module';
|
||||
|
||||
__webpack_public_path__ =
|
||||
amdMetaModule && amdMetaModule.uri
|
||||
? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1)
|
||||
: 'public/plugins/${pluginJson.id}/';
|
||||
`,
|
||||
});
|
||||
|
||||
export type Env = {
|
||||
[key: string]: true | string | Env;
|
||||
};
|
||||
|
||||
const config = async (env: Env): Promise<Configuration> => {
|
||||
const baseConfig: Configuration = {
|
||||
cache: {
|
||||
type: 'filesystem',
|
||||
buildDependencies: {
|
||||
// __filename doesn't work in Node 24
|
||||
config: [path.resolve(process.cwd(), '.config', 'webpack', 'webpack.config.ts')],
|
||||
},
|
||||
},
|
||||
|
||||
context: path.join(process.cwd(), SOURCE_DIR),
|
||||
|
||||
devtool: env.production ? 'source-map' : 'eval-source-map',
|
||||
|
||||
entry: await getEntries(),
|
||||
|
||||
externals,
|
||||
|
||||
// Support WebAssembly according to latest spec - makes WebAssembly module async
|
||||
experiments: {
|
||||
asyncWebAssembly: true,
|
||||
},
|
||||
|
||||
mode: env.production ? 'production' : 'development',
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
// This must come first in the rules array otherwise it breaks sourcemaps.
|
||||
{
|
||||
test: /src\/(?:.*\/)?module\.tsx?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'imports-loader',
|
||||
options: {
|
||||
imports: `side-effects grafana-public-path`,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
exclude: /(node_modules)/,
|
||||
test: /\.[tj]sx?$/,
|
||||
use: {
|
||||
loader: 'swc-loader',
|
||||
options: {
|
||||
jsc: {
|
||||
baseUrl: path.resolve(process.cwd(), SOURCE_DIR),
|
||||
target: 'es2015',
|
||||
loose: false,
|
||||
parser: {
|
||||
syntax: 'typescript',
|
||||
tsx: true,
|
||||
decorators: false,
|
||||
dynamicImport: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/,
|
||||
use: ['style-loader', 'css-loader', 'sass-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)$/,
|
||||
type: 'asset/resource',
|
||||
generator: {
|
||||
filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
type: 'asset/resource',
|
||||
generator: {
|
||||
filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
optimization: {
|
||||
minimize: Boolean(env.production),
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
format: {
|
||||
comments: (_, { type, value }) => type === 'comment2' && value.trim().startsWith('[create-plugin]'),
|
||||
},
|
||||
compress: {
|
||||
drop_console: ['log', 'info'],
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
output: {
|
||||
clean: {
|
||||
keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
|
||||
},
|
||||
filename: '[name].js',
|
||||
chunkFilename: env.production ? '[name].js?_cache=[contenthash]' : '[name].js',
|
||||
library: {
|
||||
type: 'amd',
|
||||
},
|
||||
path: path.resolve(process.cwd(), DIST_DIR),
|
||||
publicPath: `public/plugins/${pluginJson.id}/`,
|
||||
uniqueName: pluginJson.id,
|
||||
crossOriginLoading: 'anonymous',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new BuildModeWebpackPlugin(),
|
||||
virtualPublicPath,
|
||||
// Insert create plugin version information into the bundle
|
||||
new webpack.BannerPlugin({
|
||||
banner: `/* [create-plugin] version: ${cpVersion} */
|
||||
/* [create-plugin] plugin: ${pluginJson.id}@${pluginVersion} */`,
|
||||
raw: true,
|
||||
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: '**/*.svg', to: '.', noErrorOnMissing: true },
|
||||
{ from: '**/*.png', to: '.', noErrorOnMissing: true },
|
||||
{ from: '**/*.html', to: '.', noErrorOnMissing: true },
|
||||
{ from: 'img/**/*', to: '.', noErrorOnMissing: true },
|
||||
{ from: 'libs/**/*', to: '.', noErrorOnMissing: true },
|
||||
{ from: 'static/**/*', to: '.', noErrorOnMissing: true },
|
||||
{ from: '**/query_help.md', to: '.', noErrorOnMissing: true },
|
||||
],
|
||||
}),
|
||||
// Replace certain template-variables in the README and plugin.json
|
||||
new ReplaceInFileWebpackPlugin([
|
||||
{
|
||||
dir: DIST_DIR,
|
||||
files: ['plugin.json', 'README.md'],
|
||||
rules: [
|
||||
{
|
||||
search: /\%VERSION\%/g,
|
||||
replace: pluginVersion,
|
||||
},
|
||||
{
|
||||
search: /\%TODAY\%/g,
|
||||
replace: new Date().toISOString().substring(0, 10),
|
||||
},
|
||||
{
|
||||
search: /\%PLUGIN_ID\%/g,
|
||||
replace: pluginJson.id,
|
||||
},
|
||||
],
|
||||
},
|
||||
]),
|
||||
new SubresourceIntegrityPlugin({
|
||||
hashFuncNames: ['sha256'],
|
||||
}),
|
||||
...(env.development
|
||||
? [
|
||||
new LiveReloadPlugin(),
|
||||
new ForkTsCheckerWebpackPlugin({
|
||||
async: Boolean(env.development),
|
||||
issue: {
|
||||
include: [{ file: '**/*.{ts,tsx}' }],
|
||||
},
|
||||
typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
|
||||
}),
|
||||
new ESLintPlugin({
|
||||
extensions: ['.ts', '.tsx'],
|
||||
lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
|
||||
failOnError: Boolean(env.production),
|
||||
}),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||
// handle resolving "rootDir" paths
|
||||
modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
|
||||
unsafeCache: true,
|
||||
},
|
||||
};
|
||||
|
||||
if (isWSL()) {
|
||||
baseConfig.watchOptions = {
|
||||
poll: 3000,
|
||||
ignored: /node_modules/,
|
||||
};
|
||||
}
|
||||
|
||||
return baseConfig;
|
||||
};
|
||||
|
||||
export default config;
|
||||
Reference in New Issue
Block a user