Currently we have a small set of public-facing packages that can be dowloaded from npm and used in external applications.
@woocommerce/components: A library of components that can be used to create pages in the WooCommerce dashboard and reports pages.@woocommerce/csv-export: A set of functions to convert data into CSV values, and enable a browser download of the CSV data.@woocommerce/currency: A class to display and work with currency values.@woocommerce/date: A collection of utilities to display and work with date values.@woocommerce/navigation: A collection of navigation-related functions for handling query parameter objects, serializing query parameters, updating query parameters, and triggering path changes.@woocommerce/tracks: User event tracking utility functions for Automattic based projects.
- You can make changes to packages files as normal, and running
pnpm startwill compile and watch both app files and packages. ⚠️ Make sure any dependencies you add to a package are also added to that package'spackage.json, not just the woocommerce-admin package.json⚠️ Make sure you're not importing from any woocommerce-admin files outside of the package (you can import from other packages, just use theimport from @woocommerce/packagesyntax).- Add your change to the CHANGELOG for that package under the next version number, creating one if necessary (we use semantic versioning for packages, see these guidelines).
- Don't change the version in
package.json. - Label your PR with the
Packageslabel. - Once merged, you can wait for the next package release roundup, or you can publish a release now (see below, "Publishing packages").
Most of this is pulled from the Gutenberg workflow.
To create a new package, add a new folder to /packages, containing…
-
package.jsonbased on the template:{ "name": "@woocommerce/package-name", "version": "1.0.0-beta.0", "description": "Package description.", "author": "Automattic", "license": "GPL-2.0-or-later", "keywords": [ "wordpress", "woocommerce" ], "homepage": "https://github.com/woocommerce/woocommerce/tree/main/packages/[_YOUR_PACKAGE_]/README.md", "repository": { "type": "git", "url": "https://github.com/woocommerce/woocommerce.git" }, "bugs": { "url": "https://github.com/woocommerce/woocommerce/issues" }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", "publishConfig": { "access": "public" } } -
.npmrcfile which disables creatingpackage-lock.jsonfile for the package:package-lock=false -
README.mdfile containing at least:- Package name
- Package description
- Installation details
- Usage example
-
A
srcdirectory for the source of your module, which will be built by default using thepnpm run build:packagescommand. Note that you'll want anindex.jsfile that exports the package contents, see other packages for examples. -
Add the new package name to
packages/dependency-extraction-webpack-plugin/assets/packages.jsso that users of that plugin will also be able to use the new package without enqueuing it.
- Run
pnpm run publish-packages:checkto run pnpm publish with the--dry-runoption - Create a PR with a CHANGELOG for each updated package (or try to add to the CHANGELOG with any PR editing
packages/) - Run
pnpm run publish-packages:prodto publish the package - OR Run
pnpm run publish-packages:devto publish "next" releases (installed aspnpm i @woocommerce/package@next). Only use:devif you have a reason to. - Both commands will run
build:packagesbefore the publishing task, just to catch any last updates.
Sometimes, its helpful to release a singular package. This can be done directly through pnpm. Be sure versions and builds are correct.
- Bump the version in the package's package.json as well as its CHANGELOG file.
pnpm install && pnpm run build:packagesto build packages.cd packages/<package-name>pnpm publish