Skip to content

Contributing

Jump to bottom
Cay Henning edited this page May 15, 2024 · 6 revisions

How to contribute to Materia Widget Dev Kit

Requirements

  • Node v16 or higher
  • Yarn or Bun (both package managers are viable options and work for MWDK development)

Installation

  1. Checkout this repo or make your own fork (recommended).
  2. Run yarn install && yarn build && yarn linkinside the Materia Widget Development Kit.
  3. Run yarn start

Testing a Widget

  1. Find a widget to run the MWDK for. Run rm -rf node_modules.
  2. In your package.json, enter the GitHub URL for your MWDK development branch. For example, you can use: "materia-widget-development-kit": "https://github.com/cayb0rg/Materia-Widget-Dev-Kit.git#issue/webpack-5-upgrade"
  3. Run yarn install
  4. (Optional) Run yarn link materia-widget-development-kit. This will allow you to make changes to the MWDK without having to reinstall it in your widget.
  5. Run yarn start

How MWDK works

The MWDK uses the following technologies:

  • Express.js for the server and webpack-dev-middleware for compiling and viewing assets
  • Handlebars view engine for rendering .hbs template files. All template files can be found in the views folder.
  • Webpack 5 for compiling and bundling the assets
    • webpack.config.js is for the MWDK only.
    • webpack-generate-widget-hash.js is responsible for generating the .wigt file for installing to Materia.
    • webpack-widget.js is where the webpack configuration for individual widgets are generated.
      • A HTMLWebpackPlugin is created for every .html file in the widget's entries. This plugin outputs an HTML file with all of the necessary CSS and JS assets.
      • The MiniCssExtractPlugin is responsible for extracting the CSS from the entries.
      • All of the default loaders are defined here as well, such as the React loader, Coffee loader, image loaders, etc.

The player, creator, and scorescreen run on the same files as Materia, published in the Materia widget dependencies package. API Endpoints (calls to /api/json/*) are being mocked in express.js.

This Wiki will be updated over time. For now, good luck and have fun!

Clone this wiki locally