glib-web

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.

Set up Javascript CI

• Install typescript yarn add typescript --dev
• Install cypress, use same version as cypress package.json. E.g. yarn add cypress@13.13.1 --dev
• Add cypress.config.js to your project

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    specPattern: 'node_modules/glib-web/cypress/e2e',
    defaultBrowser: 'chrome',
    supportFile: 'node_modules/glib-web/cypress/support/e2e.{js,jsx,ts,tsx}'
  },
});

• Copy cypress.yml.example to YOUR_PROJECT/.github/workflows/cypress.yml
• Make sure the workflow is compatible with the project
• Run the test
  • Run rails server bin/rails s
  • Execute yarn run cypress run

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
• Make sure test pass yarn run test
• 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