This project is an alpha version of the next major version of the editor. The currently supported micro:bit Python editor is available at https://python.microbit.org/ and its source code can be found in GitHub at https://github.com/bbcmicrobit/PythonEditor.
For more background about how this editor relates to the original Python Editor project, see this explanation.
This project is a web-based code editor that targets the MicroPython version of the Python programming language.
Code written with this editor is expected to run on the BBC micro:bit device.
The editor is written in TypeScript using React. We use the Chakra UI component library and CodeMirror 6 editor component.
To learn React, check out the React documentation.
To learn TypeScript, check out the TypeScript documentation.
To learn more about Chakra UI check out the component library documentation.
CodeMirror 6 has great documentation. The system guide is a particularly useful overview of the key concepts.
The project was bootstrapped with Create React App. You can learn more in the Create React App documentation.
If you use Visual Studio Code you might find the devcontainer included in this repository a useful option to get an automatically configured development environment. Find out more about containers and Visual Studio Code.
The editor is deployed by CircleCI.
The main branch is deployed to https://stage-python-editor-next.microbit.org/ on each commit.
Other branches (e.g. for PRs) are deployed to https://review-python-editor-next.microbit.org/{branch}. Special characters in the branch name are replaced by hyphens.
For custom deployments, note that the educational content in the sidebar is currently sourced live from our CMS. For non-localhost deploys this will require CORS configuration on our end. Please open an issue to discuss this.
- Ensure you have a working Node.js environment. We recommend using the LTS version of Node and NPM 8+.
- Checkout this repository.
- Install the dependencies via
npm install. - Choose from the NPM scripts documented below.
If you're using VSCode, it is recomended you do the following to complete steps 1-3:
- Install Docker and get the Remote-Containers extention for VSCode.
- If you have git installed and are logged into GitHub in VSCode (see the Source Control Tab), then you can clone the repo into a Container: Hit Ctrl+Shift+P to open the command palette, run "Clone Repository in Container Volume", choose GitHub and select this repo.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
If you have a connected micro:bit device, then setting the environment variable TEST_MODE_DEVICE=1 will enable additional tests that will connect to your micro:bit. The tests will overwrite programs and data on the micro:bit.
Launches the test runner in the interactive watch mode running the end to end tests.
These are excluded from the normal test run.
The tests expect the app to already be running on http://localhost:3000, for example via npm start.
We use Puppeteer and the helpers provided by Testing Library.
The CI tests run these end-to-end tests against a production build.
An example of how to use jest options to filter to a specific subset of the tests (e2e or unit).
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The editor supports a simple runtime feature flag system to:
- allow work-in-progress features to be integrated before they're ready for general use
- allow scenarios to be set up for user testing
- enable debug features
This system may change without notice. Flags are regularly added and removed.
The current set of flags are documented in the source.
Flags may be specified via the query string with repeated flag parameters,
for example, http://localhost:3000/?flag=oneFlag&flag=anotherFlag
By default, all flags are enabled for local development and branches builds.
They can be disabled with the special flag none.
We use react-intl from FormatJS to manage strings for translation.
Add strings to lang/en.json and run npm run i18n:compile to update the strings used by the app.
There is a French translation of the main user interface text and the "Explore" tab content. The Reference tab and code error messages shown in the editor are not currently translated.
This software is under the MIT open source license.
Binaries for MicroPython are included for micro:bit V1 (license) and micro:bit V2 (license). Both are MIT licensed.
Python diagnostics and autocomplete use a fork of Microsoft's Pyright type checker which has been modified by us to run as a Web Worker. Pyright is © Microsoft Corporation and used under an MIT license.
We use dependencies via the NPM registry as specified by the package.json file under common Open Source licenses.
Full details of each package can be found by running license-checker:
$ npx license-checker --direct --summary --productionOmit the flags as desired to obtain more detail.
Trust, partnership, simplicity and passion are our core values we live and breathe in our daily work life and within our projects. Our open-source projects are no exception. We have an active community which spans the globe and we welcome and encourage participation and contributions to our projects by everyone. We work to foster a positive, open, inclusive and supportive environment and trust that our community respects the micro:bit code of conduct. Please see our code of conduct which outlines our expectations for all those that participate in our community and details on how to report any concerns and what would happen should breaches occur.
Chris was here :c
Logan was here :)