@grafana/create-plugin 0.1.1 → 0.2.1

package/README.md

@@ -4,11 +4,18 @@ Create Grafana plugins with ease.
 
 **ToC**
 
-- [Create a new plugin](#create-a-new-plugin)
-- [Migrate your existing plugin](#migrate-your-existing-plugin)
-- [Update your plugin build config](#update-your-plugin-build-config)
-- [Start developing your plugin](#start-developing-your-plugin)
-- [Contributing](#contributing)
+- [Grafana / Create Plugin](#grafana--create-plugin)
+  - [Create a new plugin](#create-a-new-plugin)
+    - [Quick overview](#quick-overview)
+      - [`yarn` (1.x)](#yarn-1x)
+      - [`yarn` (> 2.x)](#yarn--2x)
+      - [`npx`](#npx)
+      - [`npm`](#npm)
+  - [Migrate your existing plugin](#migrate-your-existing-plugin)
+    - [Things to check after migration](#things-to-check-after-migration)
+  - [Update your plugin build config](#update-your-plugin-build-config)
+  - [Customizing or extending the basic configs](#customizing-or-extending-the-basic-configs)
+  - [Contributing](#contributing)
 
 **Links**
 
@@ -16,46 +23,39 @@ Create Grafana plugins with ease.
 - [Plugin migration guide](https://grafana.com/docs/grafana/latest/developers/plugins/migration-guide/)
 
 **`@grafana/create-plugin`** works on macOS, Windows and Linux.<br />
-If something doesn’t work, please [file an issue](https://github.com/grafana/create-plugin/issues/new).<br />
+If something doesn't work, please [file an issue](https://github.com/grafana/create-plugin/issues/new).<br />
 If you have questions or need help, please ask in [GitHub Discussions](https://github.com/grafana/create-plugin/discussions).
 
 ## Create a new plugin
 
 ### Quick overview
 
-The following commands scaffold a Grafana plugin inside the `./my-plugin` folder:
+Run the command in the folder where you want to store your plugins. The new plugin will be scaffolded in a sub-directory of the folder where you run the command.
 
-```bash
-mkdir my-plugin && cd my-plugin
-yarn create @grafana/plugin
-yarn install
-yarn dev
-```
+You can run the command with the package manager of your choice:
 
-Alterntives:
-
-#### [`npx`](https://github.com/npm/npx)
+#### [`yarn`](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/) (1.x)
 
 ```bash
-npx @grafana/create-plugin
+yarn create @grafana/plugin
 ```
 
-#### [`npm`](https://docs.npmjs.com/cli/v7/commands/npm-init)
+#### [`yarn`](https://yarnpkg.com/cli/dlx) (> 2.x)
 
 ```bash
-npm init @grafana/plugin
+yarn dlx @grafana/create-plugin
 ```
 
-#### [`yarn`](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/) (1.x)
+#### [`npx`](https://github.com/npm/npx)
 
 ```bash
-yarn create @grafana/plugin
+npx @grafana/create-plugin
 ```
 
-#### [`yarn`](https://yarnpkg.com/cli/dlx) (> 2.x)
+#### [`npm`](https://docs.npmjs.com/cli/v7/commands/npm-init)
 
 ```bash
-yarn dlx @grafana/create-plugin
+npm init @grafana/plugin
 ```
 
 ---
@@ -97,47 +97,10 @@ npx @grafana/create-plugin update
 
 ---
 
-## Start developing your plugin
-
-We have put together the following dev scripts for you, so you can start coding right away:
-
-#### `yarn dev`
-
-Starts the build in watch mode.
-The build output (plugin bundle) is going to be exported to `./dist`.
-
-#### `yarn build`
-
-Creates a production build for your plugin.
-The build output is going to be exported to `./dist`.
-
-#### `yarn test`
-
-Runs the tests under `./src` directory in watch mode.
-Give your test files a `.test.tsx` or `.test.ts` extension.
-
-#### `yarn test:ci`
-
-Runs the tests and returns with either a zero or a non-zero exit status.
-
-#### `yarn typecheck`
-
-Runs the Typescript compiler against the codebase in a dry-run mode to highlight any type errors or warnings.
-
-#### `yarn lint`
-
-Runs ESLint against the codebase.
-
-#### `yarn lint:fix`
-
-Runs ESLint against the codebase and attempts to fix the simpler errors.
-
----
-
 ## Customizing or extending the basic configs
 
 You can read more about customizing or extending the basic configuration [here](templates/common/.config/README.md)
 
 ## Contributing
 
-We are always grateful for contribution! See the [CONTRIBUTING.md](./CONTRIBUTING.md) for more information.
+We are always grateful for contribution! See the [CONTRIBUTING.md](../CONTRIBUTING.md) for more information.

package/dist/commands/migrate.command.js

@@ -120,6 +120,7 @@ var migrate = function () { return __awaiter(void 0, void 0, void 0, function ()
                 else {
                     (0, utils_console_1.printMessage)(constants_1.TEXT.updateNpmScriptsAborted);
                 }
+                (0, utils_npm_1.cleanUpPackageJson)();
                 (0, utils_console_1.printSuccessMessage)(constants_1.TEXT.migrationCommandSuccess);
                 return [3, 12];
             case 11:

package/dist/utils/utils.npm.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.updateNpmScripts = exports.removeNpmDependencies = exports.getRemovableNpmDependencies = exports.getUpdatableNpmDependencies = exports.getPackageJsonUpdates = exports.updateNpmDependencies = exports.updatePackageJson = exports.hasNpmDependenciesToUpdate = exports.getPackageJsonUpdatesAsText = exports.getNpmDependencyUpdatesAsText = exports.writePackageJson = exports.getLatestPackageJson = exports.getPackageJson = void 0;
+exports.cleanUpPackageJson = exports.updateNpmScripts = exports.removeNpmDependencies = exports.getRemovableNpmDependencies = exports.getUpdatableNpmDependencies = exports.getPackageJsonUpdates = exports.updateNpmDependencies = exports.updatePackageJson = exports.hasNpmDependenciesToUpdate = exports.getPackageJsonUpdatesAsText = exports.getNpmDependencyUpdatesAsText = exports.writePackageJson = exports.getLatestPackageJson = exports.getPackageJson = void 0;
 var path_1 = __importDefault(require("path"));
 var fs_1 = __importDefault(require("fs"));
 var semver_1 = __importDefault(require("semver"));
@@ -160,3 +160,19 @@ function updateNpmScripts() {
     writePackageJson(packageJson);
 }
 exports.updateNpmScripts = updateNpmScripts;
+function cleanUpPackageJson() {
+    var packageJson = getPackageJson();
+    packageJson.scripts = sortKeysAlphabetically(packageJson.scripts);
+    packageJson.dependencies = sortKeysAlphabetically(packageJson.dependencies);
+    packageJson.devDependencies = sortKeysAlphabetically(packageJson.devDependencies);
+    writePackageJson(packageJson);
+}
+exports.cleanUpPackageJson = cleanUpPackageJson;
+function sortKeysAlphabetically(obj) {
+    return Object.keys(obj)
+        .sort()
+        .reduce(function (acc, key) {
+        acc[key] = obj[key];
+        return acc;
+    }, {});
+}

package/jest.config.js

@@ -1,20 +1,5 @@
+const sharedConfig = require('../../jest.config.base');
 module.exports = {
-  testMatch: ['<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}'],
-  transform: {
-    '^.+\\.(t|j)sx?$': [
-      '@swc/jest',
-      {
-        sourceMaps: true,
-        jsc: {
-          parser: {
-            syntax: 'typescript',
-            tsx: true,
-            decorators: false,
-            dynamicImport: true,
-          },
-        },
-      },
-    ],
-  },
+  ...sharedConfig,
   modulePathIgnorePatterns: ['<rootDir>/templates/'],
 };

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "main": "index.js",
-  "repository": "git@github.com:grafana/create-plugin.git",
+  "repository": {
+    "directory": "packages/create-plugin",
+    "url": "git@github.com:grafana/create-plugin.git"
+  },
   "author": "Grafana",
   "license": "Apache-2.0",
   "bin": "./dist/bin/run.js",
@@ -17,42 +20,27 @@
     "generate-app": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js -- create-plugin 'Sample app' 'sample-org' 'This is a sample app.' 'app' 't' 't' 't'",
     "generate-panel": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js -- create-plugin 'Sample panel' 'sample-org' 'This is a sample panel.' 'panel' 't' 't' 't'",
     "generate-datasource": "tsc && yarn clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js -- create-plugin 'Sample datasource' 'sample-org' 'This is a sample datasource.' 'datasource' 't' 't' 't'",
-    "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx ./src",
+    "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
     "lint:fix": "yarn lint --fix",
-    "test": "jest --watch",
+    "test": "jest",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@grafana/tsconfig": "^1.2.0-rc1",
-    "@swc/core": "^1.2.162",
     "@types/minimist": "^1.2.2",
     "@types/mkdirp": "^1.0.2",
     "@types/semver": "^7.3.9",
     "enquirer": "^2.3.6",
     "glob": "^7.1.7",
-    "jest": "^27.5.1",
-    "marked-terminal": "^5.1.1",
     "marked": "^4.0.12",
+    "marked-terminal": "^5.1.1",
     "mkdirp": "^1.0.4",
     "plop": "^2.7.4",
     "semver": "^7.3.5"
   },
   "devDependencies": {
-    "@grafana/eslint-config": "^2.5.0",
-    "@swc/jest": "^0.2.20",
     "@types/glob": "^7.0.0",
-    "@types/jest": "^27.4.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsdoc": "^36.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "nodemon": "^2.0.13",
-    "tsc-watch": "^4.5.0",
-    "typescript": "^4.4.3"
+    "eslint-plugin-react-hooks": "^4.2.0"
   },
   "nodemonConfig": {
     "watch": [

package/src/commands/migrate.command.ts

@@ -9,6 +9,7 @@ import {
   getRemovableNpmDependencies,
   removeNpmDependencies,
   updateNpmScripts,
+  cleanUpPackageJson,
 } from '../utils/utils.npm';
 
 export const migrate = async () => {
@@ -90,7 +91,11 @@ export const migrate = async () => {
       printMessage(TEXT.updateNpmScriptsAborted);
     }
 
-    // 4. Summary
+    // Tidy package.json file so any changed fields are sorted as a
+    // package manager would expect.
+    cleanUpPackageJson();
+
+    // 7. Summary
     // -------------
     printSuccessMessage(TEXT.migrationCommandSuccess);
   } catch (error) {

package/src/utils/utils.npm.ts

@@ -187,3 +187,20 @@ export function updateNpmScripts() {
 
   writePackageJson(packageJson);
 }
+
+export function cleanUpPackageJson() {
+  const packageJson = getPackageJson();
+  packageJson.scripts = sortKeysAlphabetically(packageJson.scripts);
+  packageJson.dependencies = sortKeysAlphabetically(packageJson.dependencies);
+  packageJson.devDependencies = sortKeysAlphabetically(packageJson.devDependencies);
+  writePackageJson(packageJson);
+}
+
+function sortKeysAlphabetically(obj: Record<string, string>) {
+  return Object.keys(obj)
+    .sort()
+    .reduce<Record<string, string>>((acc, key) => {
+      acc[key] = obj[key];
+      return acc;
+    }, {});
+}

package/templates/common/.config/README.md

@@ -109,12 +109,12 @@ We need to update the `scripts` in the `package.json` to use the extended Webpac
 
 **Update for `build`:**
 ```diff
--"build": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -c ./.config/webpack/webpack.config.ts --env production",
-+"build": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -c ./webpack.config.ts --env production",
+-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
++"build": "webpack -c ./webpack.config.ts --env production",
 ```
 
 **Update for `dev`:**
 ```diff
--"dev": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -w -c ./.config/webpack/webpack.config.ts --env development",
-+"dev": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -w -c ./webpack.config.ts --env development",
+-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
++"dev": "webpack -w -c ./webpack.config.ts --env development",
 ```

package/templates/common/.config/tsconfig.json

@@ -12,6 +12,14 @@
     "typeRoots": ["../node_modules/@types"],
     "resolveJsonModule": true
   },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es5",
+      "esModuleInterop": true
+    },
+    "transpileOnly": true
+  },
   "include": ["../src", "./types"],
   "extends": "@grafana/tsconfig"
 }

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

@@ -45,6 +45,7 @@ const config = async (env): Promise<Configuration> => ({
     'react-redux',
     'redux',
     'rxjs',
+    'react-router',
     'react-router-dom',
     'd3',
     'angular',

package/templates/common/docker-compose.yaml

@@ -3,12 +3,12 @@ version: '3.0'
 services:
   grafana:
     container_name: '{{ kebabCase pluginName }}'
-    build: 
+    build:
       context: ./.config
       args:
         grafana_version: ${GRAFANA_VERSION:-{{~grafanaVersion~}} }
     ports:
       - 3000:3000/tcp
     volumes:
-      - ./dist:/var/lib/grafana/plugins/{{ kebabCase pluginName }},
+      - ./dist:/var/lib/grafana/plugins/{{ kebabCase pluginName }}
       - ./provisioning:/etc/grafana/provisioning

package/templates/common/jest.config.js

@@ -1,3 +1,7 @@
+// force timezone to UTC to allow tests to work regardless of local timezone
+// generally used by snapshots, but can affect specific tests
+process.env.TZ = 'UTC';
+
 module.exports = {
   // Jest configuration provided by Grafana scaffolding
   ...require('./.config/jest.config'),

package/templates/common/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "description": "{{ sentenceCase pluginDescription }}",
   "scripts": {
-    "build": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -c ./.config/webpack/webpack.config.ts --env production",
-    "dev": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -w -c ./.config/webpack/webpack.config.ts --env development",
+    "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
+    "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --maxWorkers 4",
     "typecheck": "tsc --noEmit",
@@ -28,7 +28,8 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@types/glob": "^8.0.0",
-    "@types/jest": "^27.4.1",{{#if_eq pluginType "app"}}
+    "@types/jest": "^27.4.1",
+    "@types/lodash": "latest",{{#if_eq pluginType "app"}}
     "@types/react-router-dom": "^5.3.3",{{/if_eq}}
     "@types/node": "^17.0.19",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -62,8 +63,8 @@
     "@grafana/data": "{{ grafanaVersion }}",
     "@grafana/runtime": "{{ grafanaVersion }}",
     "@grafana/ui": "{{ grafanaVersion }}",
-    "@types/lodash": "latest"{{#if_eq pluginType "app"}},
-    "react-router-dom": "^5.2.0"
-    {{/if_eq}}
+    "react": "17.0.2",
+    "react-dom": "17.0.2"{{#if_eq pluginType "app"}},
+    "react-router-dom": "^5.2.0"{{/if_eq}}
   }
 }

package/templates/github/ci/.github/workflows/release.yml

@@ -120,10 +120,10 @@ jobs:
       - name: Lint plugin
         run: |
           git clone https://github.com/grafana/plugin-validator
-          pushd ./plugin-validator/cmd/plugincheck
+          pushd ./plugin-validator/pkg/cmd/plugincheck2
           go install
           popd
-          plugincheck $\{{ steps.metadata.outputs.archive }}
+          plugincheck2 -config ./plugin-validator/config/publishing.yaml $\{{ steps.metadata.outputs.archive }}
 
       - name: Create release
         id: create_release

package/tsconfig.json

@@ -1,17 +1,8 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
-    "removeComments": true,
-    "preserveConstEnums": true,
-    "outDir": "./dist",
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "pretty": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
+    "outDir": "./dist"
   },
-  "include": ["src"],
   "exclude": ["node_modules", "templates"],
-}
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"]
+}

package/.eslintrc

@@ -1,6 +0,0 @@
-{
-  "extends": ["@grafana/eslint-config"],
-  "rules": {
-    "react/prop-types": "off"
-  }
-}

package/.github/workflows/create-release.yml

@@ -1,49 +0,0 @@
-on:
-  push:
-    tags:
-      - 'v*'
-
-name: Create Release
-
-jobs:
-  publish:
-    name: Publish to npm
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Setup environment
-        uses: actions/setup-node@v2.5.1
-        with:
-          node-version: '16'
-          registry-url: 'https://registry.npmjs.org'
-          cache: 'yarn'
-
-      - name: Install dependencies
-        run: yarn install --immutable
-
-      - name: Build package
-        run: yarn build
-
-      - name: Publish
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-  create-github-release:
-    name: Create GitHub Release
-    runs-on: ubuntu-latest
-    needs: publish
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Create Release Notes
-        uses: actions/github-script@v4.0.2
-        with:
-          github-token: ${{secrets.GH_BOT_ACCESS_TOKEN}}
-          script: |
-            await github.request(`POST /repos/${{ github.repository }}/releases`, {
-              tag_name: "${{ github.ref }}",
-              generate_release_notes: true
-            });

package/.github/workflows/npm-bump-version.yml

@@ -1,51 +0,0 @@
-name: NPM bump version
-
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        description: 'Semver type of new version (major / minor / patch)'
-        required: true
-        type: choice
-        options:
-          - patch
-          - minor
-          - major
-
-jobs:
-  bump-version:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          token: ${{ secrets.GH_BOT_ACCESS_TOKEN }}
-
-      - name: Setup environment
-        uses: actions/setup-node@v3.1.1
-        with:
-          node-version: '16'
-          cache: 'yarn'
-
-      - name: Install dependencies
-        run: yarn install --immutable
-
-      - name: Check types
-        run: yarn typecheck
-
-      - name: Lint
-        run: yarn lint
-
-      - name: Unit tests
-        run: yarn jest
-
-      - name: Setup Git
-        run: |
-          git config user.name 'grafanabot'
-          git config user.email 'bot@grafana.com'
-
-      - name: bump version
-        run: npm version ${{ github.event.inputs.version }}
-
-      - name: Push latest version
-        run: git push origin main --follow-tags

package/.github/workflows/test.yml

@@ -1,31 +0,0 @@
-name: test
-on: push
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    name: Run unit tests
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.ref }}
-      - name: Setup .npmrc file for NPM registry
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-          registry-url: 'https://registry.npmjs.org'
-      - name: Install dependencies
-        run: yarn
-      - name: Check types
-        run: yarn typecheck
-      - name: Lint
-        run: yarn lint
-      - name: Unit tests
-        run: yarn jest
-      - name: test an app plugin generation
-        run: yarn generate-app && (cd generated && yarn && yarn build && yarn lint)
-      - name: test panel plugin generation
-        run: yarn generate-panel && (cd generated && yarn && yarn build && yarn lint)
-      - name: test datasource plugin generation
-        run: yarn generate-datasource && (cd generated && yarn && yarn build && yarn lint)

package/.prettierrc

@@ -1,10 +0,0 @@
-{
-  "endOfLine": "auto",
-  "printWidth": 120,
-  "trailingComma": "es5",
-  "semi": true,
-  "jsxSingleQuote": false,
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 2
-}

package/CONTRIBUTING.md

@@ -1,42 +0,0 @@
-# Contributing to Grafana / Create Plugin
-
-We are always grateful to receive contribution!<br />
-The following guidelines help you on how to start with the codebase and how to submit your work.
-
-## Installation
-
-### Prerequisites
-
-You need to have `npm` or `yarn` installed.
-
-### Installing
-
-```bash
-git clone git@github.com:grafana/create-plugin.git
-cd create-plugin
-yarn install
-```
-
-## Overview
-
-### Technologies
-
-- [**`Plop`**](https://github.com/plopjs/plop) - we are using Plop for the CLI tool and for scaffolding
-
-### Folder structure
-
-_Work in progress._
-
-## Development
-
-### Conventions
-
-_Work in progress._
-
-### Developing the templates
-
-_Work in progress._
-
-### Submitting a Pull Request
-
-_Work in progress._

package/templates/common/.config/webpack/tsconfig.webpack.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "es5",
-    "esModuleInterop": true
-  },
-  "transpileOnly": true,
-  "transpiler": "ts-node/transpilers/swc-experimental"
-}