MCS Lite Developer Guide

Table of Contents

• CI
• Release Flow
• I18n Workflow
• Technology Stack
• Packages Relation
• DataChannelAdapter Design
• How To Add New Icon?

CI

We use two CIs at same time.

1. test.sh: For unit testing of all packages.
2. test-page.sh: For building demo page.

Note: Required status checks have been enabled to ensure both CI tests are passing.

Release Flow

1. prerelease

• run tasks/build.sh - npm run build for all packages

2. lerna publish

• Version of package.json will be updated.
• Create git tags.
• npm run prepack for all projects (mcs-lite-*-web)
• Publish to npm.

I18n workflow

Further readings: I18n Workflow for React Project 中文

Developer

Extract messages from source code as PO format.

# packages/mcs-lite-mobile-web

$ yarn run extract:messages
$ yarn run extract:pot

If you forget to extract the messages, the DangerJS checker will FAIL the build in Travis CI.

Translator

Update POT file using Poedit editor.

Step 1	Step 2	Step 3

Release

The translation file will be generated automatically at mcs-lite-translation building phase ($ npm run build).

When release, the flow will be:

1. npm run release (lerna)
2. run tasks/build.sh (prerelease)
   • npm run build for all packages (mcs-lite-translation)
3. NPM publish
   • npm run prepack for all projects (mcs-lite-*-web)

Technology Stack

Further readings: Build A Web App in MediaTek (中文)

• create-react-app
• react-router
• react-helmet
• react-motion
• redux
• redux-cycles
• styled-components
• react-storybook
• react-intl
• recompose

Packages Relation

DataChannelAdapter Design

How To Add New Icon?

Step 1	Step 2	Step 3

Step 4	Step 5