editor-core
The core repository for Data-Forge Notebook's editor. Reused in the Electron and Online builds.
Data-Forge Notebook is being open sourced in this code repository in 2022.
Read more about the decision here
See the issues page to contribute to the discussion
Follow the developer on Twitter for more frequent news and updates
Data-Forge Notebook v1 available here
Project structure
A birds eye view of this project:
└───editor-core ------------ The DFN v2 monorepo.
├───packages --------------- Packages shared within the monorepo.
│ ├───host-bridge ------------ Communication between the DFN and plugins.
│ ├───evaluation-engine ------ Implements the code evaluation engine.
│ ├───model ------------------ The data model for a notebook.
│ ├───notebook-editor -------- Implements the notebook editor.
│ └───plugins ---------------- Contains compiled plugins.
├───plugins ---------------- Visualization plugins.
│ ├───data ------------------- Visualizes structured data.
│ ├───plot ------------------- Plots charts.
│ ├───table ------------------ Renders data in a table.
│ └───text ------------------- Displays text data.
├───scripts ---------------- Scripts for building and serving plugins.
└───shells ----------------- Various implementations of DFN.
├───browser ---------------- Runs DFN in the browser.
├───electron --------------- Runs DFN in Electron.
├───evaluation-engine ------ HTTP server for the code evaluation engine.
├───storybook -------------- Showcases UI components in Storybook.
└───testbed ---------------- A custom testbed for UI components.
Setup
Clone this repo locally, open a terminal and change to the local directory.
This projects used pnpm
instead of npm
because it's so much faster.
Install pnpm:
npm install -g pnpm
Install dependencies for this project:
pnpm install
Run the browser shell
This runs the whole notebook editor in the browser.
pnpm start
It is runs in "dev" mode with live reload enabled.
The plugins (which are complete web pages in their own right) and also served in "dev" mode from the ./plugins
directory. You can edit the code for the plugins, but you might have to manually refresh the browser to see the changes.
Build a static web page
This builds the browser shell to a static web page:
pnpm run build-browser
The static web page is generated to ./shells/browser/dist/browser
.
The plugins are automatically built and inlined into the package.
Run the Electron shell
This runs the whole notebook editor in Electron (with a static build):
pnpm run electron:static
To run in Electron with live reload:
pnpm run electron:dev
Run the testbed
The testbed is used for testing selected UI components.
pnpm run testbed
Run Storybook
Storybox showcases various configurations for UI components.
pnpm run storybook
Build the TypeScript code
pnpm run compile
Compiled JavaScript code is output to the build
subdirectory for each project.
Run automated tests
pnpm test