Set up ESLint

• Install the following VSCode extensions
  • ESLint
  • Volar
• Edit settings.json
  • CTRL+SHIFT+P -> Preferences: Open User Settings (JSON) -- This will open an editor for settings.json.
  • Copy content of settings.json.example into the editor.

Best practices

• To prevent circular dependencies between components:
  • It’s okay to use dispatchEvent for upward communication (i.e. child component to ancestors). This fits with how the JS event model works as it already supports event propagation out of the box.
  • For downward communication, don’t use any sort of event/pub-sub mechanism. Always use Vuejs data binding instead.

Link to local npm during development

• cd glib-web-npm
• yarn install
• yarn link
• cd PROJECT_DIR
• yarn link glib-web
• bin/vite dev

Add custom colors and use its

Add colors

settings.themes = {
  light: {
    dark: false,
    colors: {
      ...
      custom: "#FF5D6D"
    }
  }
};

Use its as styleClasses

# chip group with custom green color
view.chipGroup styleClasses: ['custom']

Clean up to fix strange errors (e.g. tiny-emitter error) when running vite dev

• Stop vite server

• On your glib-web-npm's directory:

  • rm -rf node_modules
  • yarn install

• On your project's directory:

  • rm -rf node_modules
  • yarn install
  • bin/vite clobber
  • bin/vite dev

Prepare for publishing

• Create a PR to the master branch
• After approval, merge the PR.

Publish package to npm

• One-off login
  • npm login --registry=https://registry.npmjs.org/glib-web
• Bump version in package.json
• Run npm publish
• Check uploaded version on https://www.npmjs.com i.e. https://www.npmjs.com/package/glib-web
• Commit and push the new package.json