Skip to content

Commit

Permalink
Switch from yarn to npm (#660)
Browse files Browse the repository at this point in the history
Switch from yarn to npm
  • Loading branch information
thsmi committed Nov 14, 2021
1 parent fc9a756 commit f286486
Show file tree
Hide file tree
Showing 11 changed files with 11,710 additions and 3,682 deletions.
14 changes: 7 additions & 7 deletions .azure/linux.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,24 @@ jobs:
inputs:
versionSpec: '>=16.x'

- script: yarn install
displayName: Install Yarn
- script: npm install
displayName: "Install Dependencies"

- script: yarn gulp "clean"
- script: npm run gulp clean
displayName: "Clean Workspace"

- script: yarn lint
- script: npm run lint
displayName: "Running ESLint"

- script: yarn test
- script: npm run test
displayName: "Running Unit Tests"

- task: PublishTestResults@2
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/TEST-*.xml'

- script: yarn gulp "app:zip-linux"
- script: npm run gulp "app:zip-linux"
displayName: "Package and Zip Linux Artifacts"

- task: CopyFiles@2
Expand All @@ -45,7 +45,7 @@ jobs:
pathtoPublish: '$(Build.ArtifactStagingDirectory)/app'
artifactName: "Zip - Linux Application"

- script: yarn gulp "app:appimage-linux"
- script: npm run gulp "app:appimage-linux"
displayName: "Package AppImage Artifact"

- task: CopyFiles@2
Expand Down
14 changes: 7 additions & 7 deletions .azure/macos.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@ jobs:
inputs:
versionSpec: '>=16.x'

- script: yarn install
displayName: "Install Yarn"
- script: npm install
displayName: "Install Dependencies"

- script: yarn gulp "clean"
- script: npm run gulp clean
displayName: "Clean Workspace"

- script: yarn lint
- script: npm run lint
displayName: "Running ESLint"

- script: yarn test
- script: npm run test
displayName: "Running Unit Tests"

- task: PublishTestResults@2
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/TEST-*.xml'

- script: yarn gulp "app:package-macos"
- script: npm run gulp "app:package-macos"
displayName: "Package macOS Artifacts"

- script: yarn gulp "app:zip-macos"
- script: npm run gulp "app:zip-macos"
displayName: "Package and Zip macOS Artifacts"

- task: CopyFiles@2
Expand Down
14 changes: 7 additions & 7 deletions .azure/web.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,29 @@ jobs:
pool:
vmImage: 'ubuntu-latest'
steps:

- task: NodeTool@0
inputs:
versionSpec: '>=16.x'

- script: yarn install
displayName: "Install Yarn"
- script: npm install
displayName: "Install Dependencies"

- script: yarn gulp "clean"
- script: npm run gulp clean
displayName: "Clean Workspace"

- script: yarn lint
- script: npm run lint
displayName: "Running ESLint"

- script: yarn test
- script: npm run test
displayName: "Running Unit Tests"

- task: PublishTestResults@2
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/TEST-*.xml'

- script: yarn gulp "web:package-zip"
- script: npm run gulp "web:package-zip"
displayName: "Package and Zip Web Application Artifact"

- task: CopyFiles@2
Expand Down
42 changes: 0 additions & 42 deletions .azure/web.yml

This file was deleted.

14 changes: 7 additions & 7 deletions .azure/windows.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,29 @@ jobs:
pool:
vmImage: 'windows-latest'
steps:

- task: NodeTool@0
inputs:
versionSpec: '>=16.x'

- script: yarn install
displayName: "Install Yarn"
- script: npm install
displayName: "Install Dependencies"

- script: yarn gulp "clean"
- script: npm run gulp "clean"
displayName: "Clean Workspace"

- script: yarn lint
- script: npm run lint
displayName: "Running ESLint"

- script: yarn test
- script: npm run test
displayName: "Running Unit Tests"

- task: PublishTestResults@2
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/TEST-*.xml'

- script: yarn gulp "app:zip-win32"
- script: npm run gulp "app:zip-win32"
displayName: "Package and Zip Windows Artifact"

- task: CopyFiles@2
Expand Down
14 changes: 7 additions & 7 deletions .azure/wx.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,29 @@ jobs:
pool:
vmImage: 'ubuntu-latest'
steps:

- task: NodeTool@0
inputs:
versionSpec: '>=16.x'

- script: yarn install
displayName: "Install Yarn"
- script: npm install
displayName: "Install Dependencies"

- script: yarn gulp "clean"
- script: npm run gulp clean
displayName: "Clean Workspace"

- script: yarn lint
- script: npm run lint
displayName: "Running ESLint"

- script: yarn test
- script: npm run test
displayName: "Running Unit Tests"

- task: PublishTestResults@2
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/TEST-*.xml'

- script: yarn gulp "wx:package-xpi"
- script: npm run gulp "wx:package-xpi"
displayName: "Package and Zip WebExtension Artifact"

- task: CopyFiles@2
Expand Down
55 changes: 39 additions & 16 deletions BUILD.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,77 @@
# Build instructions

Over the time building and releasing got more and more complicated, so that yarn and gulp is now used to build and package the artifacts.
Over the time building and releasing got more and more complicated, so that gulp
is now used to build and package the artifacts.

The electron app, the thunderbird addon as well as the thunderbird webextension share a common code base.
The electron app, the web application addon as well as the thunderbird webextension
share a common code base.

You find all app specific code in `src/app`, the WebExtension code is in `src/wx` and all the shared code can be found in `src/common`.
You find all app specific code in `src/app`, the WebExtension code is in `src/wx`
and all the shared code can be found in `src/common`.

## Getting started

To get started clone the project for github.
To get started clone the project for github and install [node](https://nodejs.org/en/).

Then use either [yarn](https://yarnpkg.com/) or `npm install` to download the dependencies.
Then use `npm install` to download the dependencies, npm is shipped with [node](https://nodejs.org/en/).
This will download gulp as well as codemirror, bootstrap, electron and everything else which is needed.

As editor I suggest [Visual Studio Code](https://code.visualstudio.com/)

## Developing the App

The app is based upon electron. It is a JavaScript runtime which ships a Browser as UI. This makes developing is very straight forward and easy compared to a thunderbird addon.
The app is based upon electron. It is a JavaScript runtime which ships a Browser as UI.
This makes developing is very straight forward and easy compared to a thunderbird addon.

To package the app call:

`gulp app:package`

Then give it a test and start the electron:

`yarn run start`
`npm run start`

To speedup the development you can also use `gulp app:watch`. It will automatically update all changed files. The change will be instantly available in electron. You may need to reload the rendering process, by going to the menu bar and select `View->Reload` or `View->Force Reload`
To speedup the development you can also use `gulp app:watch`. It will automatically
update all changed files. The change will be instantly available in electron.
You may need to reload the rendering process, by going to the menu bar and
select `View->Reload` or `View->Force Reload`

To finally package the electron app just run `gulp app:package-win32` or `gulp app:package-linux`.

In case you need to inspect the UI's HTML debug the JavaScript, just select `View->Toggle Developer Tools`.
In case you need to inspect the UI's HTML debug the JavaScript, just select
`View->Toggle Developer Tools`.

## Developing the WebExtension

WebExtensions are the new addon api for Thunderbird.

Internally they show similarities to electron.

The background page is the main entry point, it is a single instance and has neither direct access to the UI nor to any XPCOM functions.
The background page is the main entry point, it is a single instance and has
neither direct access to the UI nor to any XPCOM functions.

The UI is realized by content tabs. These tabs contain normal HTML pages and communicate via a special messaging system with background page. They are basically only dumb renderers.
The UI is realized by content tabs. These tabs contain normal HTML pages and
communicate via a special messaging system with background page. They are
basically only dumb renderers.

Calls to Thunderbird's core (XPCOM) are done in WebExtension Experiments. An Experiment is special privileged code which is allowed to access XPCOM. But only be accessed through a predefined and very limited API from the background page. You can find the APIs in `src/wx/api/sieve`
Calls to Thunderbird's core (XPCOM) are done in WebExtension Experiments. An
Experiment is special privileged code which is allowed to access XPCOM. But only
be accessed through a predefined and very limited API from the background page.
You can find the APIs in `src/wx/api/sieve`

To build the webextension call `gulp wx:package`. It creates a build directory (`build\thunderbird-wx`) relative to your sources root directory.
To build the webextension call `gulp wx:package`. It creates a build directory
(`build\thunderbird-wx`) relative to your sources root directory.

Then load the extension. Go to `Tools->Developer Tools->Debug Addons`, click on the `Load Temporary Extension` button and select the `manifest.json` in the build directory. This will load the addon in developer mode.
Then load the extension. Go to `Tools->Developer Tools->Debug Addons`, click on
the `Load Temporary Extension` button and select the `manifest.json` in the build
directory. This will load the addon in developer mode.

The UI offers buttons to reload and inspect the extension. Keep in mind, a reload just invalidates the background page and any content tabs. It does not reload the API. The only way to reload the API is a restart. Similarly the inspect button can only access the background page and the content tabs but not the Experiments privileged code.
The UI offers buttons to reload and inspect the extension. Keep in mind, a reload
just invalidates the background page and any content tabs. It does not reload the
API. The only way to reload the API is a restart. Similarly the inspect button
can only access the background page and the content tabs but not the Experiments
privileged code.

In order to have the build folder updates upon changes to the source folder, just call `gulp wx:watch`. Gulp will monitor the source files and copies them upon change to the source directory.
In order to have the build folder updates upon changes to the source folder,
just call `gulp wx:watch`. Gulp will monitor the source files and copies them
upon change to the source directory.
2 changes: 0 additions & 2 deletions CONTRIBUTORS.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ Knuth Posern, Tim Van Den Eynde, Marcel Lamm, Lucy Archer

[mozilla.org](https://www.mozilla.org),
[thunderbird.net](https://www.thunderbird.net),
[mozdev](http://www.mozdev.org),
[SourceForge](http://sf.net),
[github](https://www.github.com),
[crowdin](https://crowdin.net),
Expand All @@ -46,5 +45,4 @@ Knuth Posern, Tim Van Den Eynde, Marcel Lamm, Lucy Archer
[gulp](https://gulpjs.com/),
[electron](https://electronjs.org/),
[npm](https://www.npmjs.com/),
[yarn](https://yarnpkg.com/),
[Visual Studio Code](https://code.visualstudio.com/)
Loading

0 comments on commit f286486

Please sign in to comment.