Skip to content

Commit 70656b8

Browse files
authored
Update documentation (#39)
* Update documentation * Update * Update
1 parent d76302e commit 70656b8

File tree

2 files changed

+74
-22
lines changed

2 files changed

+74
-22
lines changed

README.md

+68-19
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,13 @@
11
# BokehJS Examples
22

3-
Examples of integrating bokehjs with other libraries or tooling (e.g. webpack).
3+
## Introduction
44

5-
Initially contains TypeScripts examples, with others to follow later.
5+
Examples using BokehJS as a standalone library without Python.
66

7-
Cannot be built using a release NPM package of BokehJS and changes are required which will not be
8-
released until BokehJS 4.0. In the meantime simple examples work using a particular Bokeh branch
9-
which can be checked out and built in a temporary directory and the resultant NPM package copied
10-
across to the root directory of this repository as follows. Note you will need `git` and `node`
11-
installed.
12-
13-
```bash
14-
cd <directory of choice>
15-
git clone -b ianthomas23/13732_maybe_initialize --single-branch --depth 1 https://github.com/bokeh/bokeh.git
16-
cd bokeh/bokehjs
17-
node make build
18-
npm pack
19-
```
20-
21-
This will produce the file `bokeh-bokehjs-3.8.0-dev.1.tgz` which should be copied to the root
22-
directory of the bokehjs-examples repository.
7+
Currently contains examples of integrating BokehJS with TypeScript frameworks and build tools,
8+
other possibilities to follow later.
239

24-
---
10+
Here is an example of TypeScript code to produce a BokehJS plot:
2511

2612
```ts
2713
import * as Bokeh from "@bokeh/bokehjs";
@@ -46,4 +32,67 @@ function create_bokehjs_plot(): Bokeh.Plotting.Figure {
4632
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
4733
```
4834

35+
and an image of the generated plot:
36+
4937
<img alt="Example plot" src="example.png">
38+
39+
## Contents
40+
41+
### Examples
42+
43+
The examples are located in the top-level `typescript` directory. The following combinations of
44+
frameworks and build tools are included:
45+
46+
Directory | Framework | Build tool
47+
--- | --- | ---
48+
angular_ng | [Angular](https://angular.dev/) | [ng](https://angular.dev/cli/build)
49+
react_vite | [React](https://react.dev/) | [Vite](https://vite.dev/)
50+
vanilla_rspack | None | [Rspack](https://rspack.dev/)
51+
vanilla_vite | None | [Vite](https://vite.dev/)
52+
vanilla_webpack | None | [Webpack](https://webpack.js.org/)
53+
vue_vite | [Vue](https://vuejs.org/) | [Vite](https://vite.dev/)
54+
55+
Each directory contains a `README.md` that describes the steps to follow to create a simple BokehJS
56+
example using that combination of framework and build tool. There is also a subdirectory called
57+
`created` that contains the files generated by following the steps in the `README.md`.
58+
The easiest way to try out an example is to clone this repository, `cd` to the appropriate `created`
59+
directory and build the example using `npm` commands from the `package.json` in the usual manner.
60+
61+
### Recipes
62+
63+
Each example is created from a recipe located in the `recipes` directory. Each recipe is a
64+
TypeScript class that can be used to generate both a human-readable `README.md` file and a `bash`
65+
script that can be used to automatically create the example. See `recipes/README.md` for more
66+
information.
67+
68+
### Testing
69+
70+
All recipes are automatically recreated and tested once a week and whenever a PR is submitted to
71+
this repository. The code for this is contained in the `ci` directory. The `bash` scripts to create
72+
examples are in the `ci/typescript` directory; these can be individually run to create and build a
73+
single example. The `ci/tests` directory contains the [Playwright](https://playwright.dev/) test
74+
code and comparison images used in CI. For further details see the scripts in the `ci` directory
75+
and the github action workflows in `.github/workflows/test.yml`.
76+
77+
## Limitations
78+
79+
Currently these examples cannot be built using a release NPM package of BokehJS as changes are
80+
required which will not be released until BokehJS 4.0.
81+
In the meantime the examples work using an NPM package produced using a particular Bokeh branch
82+
which can be checked out and built in a temporary directory and the resultant NPM package copied
83+
across to the root directory of this repository as follows. Note you will need `git` and `node`
84+
installed.
85+
86+
```bash
87+
cd <directory of choice>
88+
git clone -b ianthomas23/13732_maybe_initialize --single-branch --depth 1 https://github.com/bokeh/bokeh.git
89+
cd bokeh/bokehjs
90+
node make build
91+
npm pack
92+
```
93+
94+
This will produce the file `bokeh-bokehjs-3.8.0-dev.1.tgz` which should be copied to the root
95+
directory of your `bokehjs-examples` repository.
96+
97+
When Bokeh and BokehJS 4.0 are released, these instructions and the code within this repository
98+
will be updated to reflect the simpler installation process.

recipes/README.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
Code to create recipes. Each recipe is defined in a TypeScript class and can be written to both a
2-
README markdown file for humans to follow, and a `bash` script that can be used to automatically
3-
create the recipe.
2+
`README.md` markdown file for humans to follow, and a `bash` script that can be used to
3+
automatically create the recipe.
44

55
To recreate all recipes:
66
```bash
@@ -9,9 +9,12 @@ npm run build
99
npm run create
1010
```
1111

12-
This will overwrite all existing recipes. If you are happy with the changes, `git commit` them.
12+
This will overwrite all existing recipes.
1313

1414
To recreate one or more named recipes rather than all of them use:
1515
```bash
1616
npm run create -- VanillaWebpack VanillaRspack
1717
```
18+
19+
Recipes should be recreated whenever any of the code within this directory or its subdirectories
20+
is changed.

0 commit comments

Comments
 (0)