npm.io
6.0.3 • Published 3 weeks ago

glib-web

Licence
ISC
Version
6.0.3
Deps
31
Size
1.9 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

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.
    • Disable format-on-save for Volar to avoid formatting conflicts with ESLint.

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'
  },
});
  • 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

Run Cypress tests (glib-web-npm)

  1. Clone and set up the backend repo (glib-web) because Cypress tests require matching test_page/* fixtures.
  2. In glib-web, link this package: yarn link glib-web.
  3. In project that use glib-web, start Rails: bin/rails s and bin/vite dev separately.
  4. In this repo, run tests: yarn test.

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 link glib-web
    • yarn install
    • bin/vite clobber
    • bin/vite dev

Handling Dependabot Dependency Updates

See doc/dependabot.md.

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