* Change moduleResolution to bundler This makes TS follow the module resolution of newer versions of Node.js which makes it use the `imports` and `exports` fields of the package.json while not requiring file extensions in some cases which it does when set to node16 or nodenext. I'm changing this to make it so that VS Code can correctly import things from our types package without adding `/src/` to the import path erroneously. Hopefully it doesn't introduce any other issues. * Change make clean to use package.json script * Remove missing fields from SystemEmoji type These were removed from emoji.json in https://github.com/mattermost/mattermost-webapp/pull/9597, but we forgot to remove the fields from the type definition. They weren't used anyway. * MM-66867 Add initial version of shared package This initial version includes the shared context, React Intl support (although that's currently untested), linting, and testing support. It builds with Parcel. * Move isSystemEmoji into Types package * MM-67318 Add Emoji component to shared package To limit the number of changes to the web app, it still uses RenderEmoji which wraps the new component for the time being. I'll likely replace RenderEmoji with using it directly in a future PR, but I may leave it as-is if the changes are too big because the API is different. * Add postinstall script to build shared package * Revert changes to moduleResolution and add typesVersions to shared package I plan to still change moduleResolution to bundler since it's the new default for TS projects, and since it lets TS use the exports field in package.json, but it requires other changes to fix some minor issues in this repo which I don't want to muddy this PR with. Adding typesVersions lets TS resolve the components in the shared package like it does with the types package while using the old value for moduleResolution. Plugins still use the old value for moduleResolution, so this will let them use the shared package with fewer updates changes as well. * Fix Webpack not always watching other packages for changes * Add shared package dependencies and build output to CI cache * Update @parcel/watcher to fix segfaults This package seems to be older than the rest of the newly added Parcel dependencies because it's used by sass. * Fix build script not doing that * Go back to manually specifying postinstall order I just learned that postinstall scripts run in parallel because I was running into an issue where the client and types packages were building at the same time, causing one of them to fail. They still run in parallel, so that may still occasionally happen, but by specifying the order manually, we hopefully avoid that happening like we seemed to do before. * Further revert changes to postinstall script The subpackages were also being built when installed by a plugin * Increment cache keys * Fix typo * Change the cache busting to look at shared/package.json * Attempt to debug tests and caching * Debugging... * Add shared package to platform code coverage * Remove caching of package builds and manually run postinstall during web app CI setup * Debugging... * Remove CI debugging logic * Update package-lock.json * Change Emoji component back to taking an emojiName prop * Add .parcel-cache to .gitignore
Mattermost Web App
This folder contains the client code for the Mattermost web app. It's broken up into multiple packages each of which either contains an area of the app (such as playbooks) or shared logic used across other packages (such as the packages located in the platform directory). For anyone who's used to working in the mattermost/mattermost-webapp repo, most of that is now located in channels.
npm Workspaces
To interact with a workspace using npm, such as to add a dependency or run a script, use the --workspace (or --workspaces) flag. This can be done when using built-in npm commands such as npm add or when running scripts. Those commands should be run from this directory.
# Add a dependency to a single package
npm add react --workspace=playbooks
# Build multiple packages
npm run build --workspace=platform/client --workspace=platform/components
# Test all workspaces
npm test --workspaces
# Clean all workspaces that have a clean script defined
npm run clean --workspaces --if-present
To install dependencies for a workspace, simply run npm install from this folder as you would do normally. Most packages' dependencies will be included in the root node_modules, and all packages' dependencies will appear in the package-lock.json. A node_modules will only be created inside a package if one of its dependencies conflicts with that of another package.
Useful Links
- Developer setup, now included with the Mattermost server developer setup
- Web app developer documentation