Skip to content

Commit 0a85e63

Browse files
committed
Update documentation
1 parent d76302e commit 0a85e63

File tree

2 files changed

+72
-22
lines changed

2 files changed

+72
-22
lines changed

README.md

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

recipes/README.md

Lines changed: 6 additions & 3 deletions
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)