grafana/packages/README.md
Jack Westbrook d87bf30e9e
Build: Introduce ESM and Treeshaking to NPM package builds (#51517)
* Revert "Chore: Bump terser to fix security vulnerability (#53052)"

This reverts commit 7ae74d2a18.

* feat: use tsc and rollup directly with esbuild and publishConfig, files props

* refactor(grafana-data): fix isolatedModules re-export type error

* refactor(grafana-data): import paths from src not package name

* refactor(rollup): fix dts output.file

* chore(grafana-schema): delete dashboard_experimental.gen.ts - cannot work with isolatedModules

* refactor(grafana-e2e-selectors): fix export types isolatedModules error

* refactor(grafana-runtime): fix isolatedModules re-export type error

* refactor(grafana-ui): fix isolatedModules re-export type error

* feat(grafana-ui): use named imports for treeshaking

* refactor(grafana-ui): use named imports for treeshaking

* feat: react and react-dom as peerDeps for packages

* feat(grafana-ui): emotion packages as peerDeps

* feat(grafana-e2e): use tsc, rollup, esbuild for bundling

* chore(packages): clean up redundant dependencies

* chore(toolkit): deprecate unused package:build task

* chore(schema): put back dashboard_experimental and exclude to prevent isolatedModules error

* docs(packages): update readme

* chore(storybook): disable isolatedModules for builds

* chore: relax peerDeps for emotion and react

* revert(grafana-ui): put @emotion dependencies back

* refactor: replace relative package imports with package name

* build(packages): set emitDeclaration false for typecheck scripts to work

* test(publicdashboarddatasource): move test next to implementation. try to appease the betterer gods

* chore(storybook): override ts-node config for storybook compilation

* refactor(grafana-data): use ternary so babel doesnt complain about expecting flow types

* chore(toolkit): prefer files and publishConfig package.json props over copying

* build(npm): remove --contents dist arg from publishing commands

* chore(packages): introduce sideEffects prop to package.json to hint package can be treeshaken

* chore(packages): remove redundant index.js files

* feat(packages): set publishConfig.access to public

* feat(packages): use yarn berry and npm for packaging and publishing

* refactor(packages): simplify rollup configs

* chore(schema): add comment explaining need to exclude dashboard_experimental

* revert(toolkit): put back clean to prevent cli failures

* ci(packages): run packages:pack before a canary publish

* chore(gitignore): add npm-artifacts directory to ignore list

* test(publicdashboarddatasource): fix module mocking

* chore(packages): delete package.tgz when running clean

* chore(grafana-data): move dependencies from devDeps to prevent build resolution errors
2022-08-03 15:47:09 +02:00

4.5 KiB

Grafana frontend packages

This document contains information about Grafana frontend package versioning and releases.

Versioning

We use Lerna for packages versioning and releases.

All packages are versioned according to the current Grafana version:

  • Grafana v6.3.0-alpha1 -> @grafana/* packages @ 6.3.0-alpha.1
  • Grafana v6.2.5 -> @grafana/* packages @ 6.2.5
  • Grafana - main branch version (based on package.json, i.e. 6.4.0-pre) -> @grafana/* packages @ 6.4.0-pre- (see details below about packages publishing channels)

Please note that @grafana/toolkit, @grafana/ui, @grafana/data, and @grafana/runtime packages are considered ALPHA even though they are not released as alpha versions.

Stable releases

Even though packages are released under a stable version, they are considered ALPHA until further notice!

Stable releases are published under the latest tag on npm. If there was alpha/beta version released previously, the next tag is updated to stable version.

Alpha and beta releases

Alpha and beta releases are published under the next tag on npm.

Automatic prereleases

Every commit to main that has changes within the packages directory is a subject of npm packages release. ALL packages must be released under version from lerna.json file with the drone build number added to it:

<lerna.json version>-<DRONE_BUILD_NUMBER>

Manual release

All of the steps below must be performed on a release branch, according to Grafana Release Guide.

Make sure you are logged in to npm in your terminal and that you are a part of Grafana org on npm.

  1. Run yarn packages:prepare script from the root directory. This performs tests on the packages and prompts for the version of the packages. The version should be the same as the one being released.

    • Make sure you use semver convention. So, place a dot between prerelease id and prerelease number, i.e. 6.3.0-alpha.1
    • Make sure you confirm the version bump when prompted!
  2. Run yarn packages:build script that compiles distribution code in packages/grafana-*/dist.

  3. Run yarn packages:pack script to zip each package into .tgz. This is required for yarn berry to replace properties in the package.json files declared in publishConfig.

  4. Depending whether or not it's a prerelease:

    • When releasing a prerelease run packages:publishNext to publish new versions.
    • When releasing a stable version run packages:publishLatest to publish new versions.
    • When releasing a test version run packages:publishTest to publish test versions.
  5. Push version commit to the release branch.

Building individual packages

To build individual packages, run:

yarn packages:build --scope=@grafana/<data|e2e|e2e-selectors|runtime|schema|toolkit|ui>

Setting up @grafana/* packages for local development

A known issue with @grafana/* packages is that a lot of times we discover problems on canary channel(see versioning overview) when the version was already pushed to npm.

We can easily avoid that by setting up a local packages registry and test the packages before actually publishing to npm.

In this guide you will set up Verdaccio registry locally to fake npm registry. This will enable testing @grafana/* packages without the need for pushing to main.

Setting up local npm registry

From your terminal:

  1. Navigate to devenv/local-npm directory.
  2. Run docker-compose up. This will start your local npm registry, available at http://localhost:4873/
  3. Run npm login --registry=http://localhost:4873 --scope=@grafana . This will allow you to publish any @grafana/* package into the local registry.
  4. Run npm config set @grafana:registry http://localhost:4873. This will config your npm to install @grafana scoped packages from your local registry.

Publishing packages to local npm registry

You need to follow manual packages release procedure. The only difference is you need to run yarn packages:publishDev task in order to publish to you local registry.

From your terminal:

  1. Run yarn packages:prepare.
  2. Run yarn packages:build.
  3. Run yarn packages:pack.
  4. Run yarn packages:publishDev.
  5. Navigate to http://localhost:4873 and verify that version was published

Locally published packages will be published under dev channel, so in your plugin package.json file you can use that channel. For example:

// plugin's package.json

dependencies: {
  //... other dependencies
  "@grafana/data": "dev"
}