f306cc2ba5
* Copied .tsconfig into ./client to enable ts checking - Made sub-repos composite typescript packages where necessary * Prevent tsc from transpiling ./client - we use webpack for transpiling so no need for this * Added tsc resolution path for @automattic/explat-client - Seems like there's a type export issue (?) with @automattic/explat-client and @automattic/explat-client-react-helpers - adding the node_modules/@automattic/explat-client path in tsconfig seems to help TS resolve this using the source .ts files - found answer here: https://github.com/microsoft/TypeScript/issues/42873 - should figure out what's actually wrong with the type exports and fix that there instead * Removed mandatory checking from webpack - removed this for now as it will block all development until all type inconsistencies are fixed - for now, run the optional ts:check task either in console or vscode for highlighting type errors * Added vscode tasks for typescript checking * Patch @automattic/explat-client-react-helpers - this changes the installed code in node_modules (post-installation) for @automattic/explat-client-react-helpers so that it exports the necessary type interfaces required by us - attempted unsuccessfully to override type exports using declare module - not too sure how to fix this internally by other means - have to investigate what fixes to propose to @automattic/explat-client-react-helpers team * changed tests in ./client to use ts-jest instead of babel-jest - rewrote jest config to use ts-jest instead of babel-jest - set ts errors to warnings instead so that tests don't fail on type errors - created new tsconfig for ./packages/js-tests so that build and ts-check are separate, as js-tests need to be built for commonjs |
||
---|---|---|
.. | ||
admin-e2e-tests | ||
components | ||
csv-export | ||
currency | ||
customer-effort-score | ||
data | ||
date | ||
dependency-extraction-webpack-plugin | ||
eslint-plugin | ||
experimental | ||
explat | ||
js-tests | ||
navigation | ||
notices | ||
number | ||
onboarding | ||
style-build | ||
tracks | ||
README.md | ||
tsconfig-cjs.json | ||
tsconfig.json |
README.md
WooCommerce Packages
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.
Working with existing packages
- You can make changes to packages files as normal, and running
npm start
will compile and watch both app files and packages. - ⚠️ Make sure any dependencies you add to a package are also added to that package's
package.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 the
import from @woocommerce/package
syntax). - 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
Packages
label. - Once merged, you can wait for the next package release roundup, or you can publish a release now (see below, "Publishing packages").
Creating a new package
Most of this is pulled from the Gutenberg workflow.
To create a new package, add a new folder to /packages
, containing…
-
package.json
based 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-admin/tree/main/packages/[_YOUR_PACKAGE_]/README.md", "repository": { "type": "git", "url": "https://github.com/woocommerce/woocommerce-admin.git" }, "bugs": { "url": "https://github.com/woocommerce/woocommerce-admin/issues" }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", "publishConfig": { "access": "public" } }
-
.npmrc
file which disables creatingpackage-lock.json
file for the package:package-lock=false
-
README.md
file containing at least:- Package name
- Package description
- Installation details
- Usage example
-
A
src
directory for the source of your module, which will be built by default using thenpm run build:packages
command. Note that you'll want anindex.js
file that exports the package contents, see other packages for examples. -
Add the new package name to
packages/dependency-extraction-webpack-plugin/assets/packages.js
so that users of that plugin will also be able to use the new package without enqueuing it.
Publishing packages
- Run
npm run publish-packages:check
to see which packages will be published - Create a PR with a CHANGELOG for each updated package (or try to add to the CHANGELOG with any PR editing
packages/
) - Run
npm run publish-packages:prod
to publish the package - OR Run
npm run publish-packages:dev
to publish "next" releases (installed asnpm i @woocommerce/package@next
). Only use:dev
if you have a reason to. - Both commands will run
build:packages
before the lerna task, just to catch any last updates.
It will confirm with you once more before publishing:
Changes:
- @woocommerce/components: 1.0.1 => 1.1.0
- @woocommerce/date: 1.0.1 => 1.0.2
- @woocommerce/navigation: 1.0.0 => 1.1.0
? Are you sure you want to publish these packages?
If you accept, Lerna will create git tags, publish those to github, then push your packages to npm.
🎉 You have a published package!
Publishing a single package
Sometimes, its helpful to release a singular package. This can be done directly through npm. Be sure versions and builds are correct.
- Bump the version in the package's package.json as well as its CHANGELOG file.
npm install && npm run build:packages
to build packages.cd packages/<package-name>
npm publish