Skip to content

Latest commit

 

History

History
89 lines (54 loc) · 3.75 KB

CONTRIBUTING.md

File metadata and controls

89 lines (54 loc) · 3.75 KB

Contributing to Saladict

👍🎉 First off, thanks for taking the time to contribute! 🎉👍

How to Contribute

How to get started

Clone the repo and run yarn install.

UI Tweaking

yarn start --main=[entry id] to view a certain entry with WDS in a fake WebExtension environment.

Entry ids are generally directory names in src.

index.[html/js(x)/ts[x]] in [entry id]/__fake__ has higher priority.

Testing

yarn test to run Jest.

Toggle:

  • --coverage: Show coverage instead of watching.

Building

yarn devbuild to start a quick build without compression.

yarn build to start a full build.

Toggle:

  • --notypecheck: Skip TypeScript full check.
  • --analyze: Show detailed Webpack bundle analyzer.

Releasing

yarn release to bump version and generate CHANGELOG.

Zipball

yarn zip to pack zibballs to ./dist/.

How to add a dictionary

Check out style-extractor.js and helpers.ts for useful tools to extract information from a webpage.

  1. Register the dictionary in app config so that TypeScript generates the correct typings. Dict ID should follow alphabetical order.
  2. Create a directory at src/components/dictionaries/, with the name of the dict ID.
  3. Use Bing as guidance. Copy the files to the new directory.
  4. Replace the favicon with a new 32x32 png.
  5. Update _locales.json with the new dictionary name. Add locales for options, if any.
  6. engine.ts exports two functions
    1. getSrcPage function is responsible for generating source page url base on search text and app config. Source page url is opened when user clicks the dictionary title.
    2. search function is responsible for fetching, parsing and returning dictionary results. See the typings for more detail.
      • If the dictionary supports pronunciation:
        1. Register the ID at config.autopron.
        2. Include an audio field in the object which search engine returns.
  7. Search result will ultimately be passed to a React PureComponent in View.tsx, which renders the result accordingly.
  8. Scope the styles in _style.scss following ECSS-ish naming convention.

Add Testing

  1. Add response samples at test/specs/components/dictionaries/[dictID]/response.
  2. Add engine.spec.ts to test the engine.

Develop the dictionary UI live

  1. Intercept ajax calls in config/fake-env/fake-ajax.js. Use the testing response samples.
  2. Edit src/components/__fake__/index.tsx.
  3. Run yarn start --main=components.

Code Style

This project follows the TypeScript variation of Standard JavaScript code style.

If you are using IDEs like VSCode, make sure TSLint related plugins are installed. Or you can just run building command to perform a TypeScript full check.

Commit Style

This project follows conventional commit style.

You can run yarn commit and follow the instructions. Or use vscode-commitizen extension in VSCode.