Skip to content

Commit b1b3f78

Browse files
ianthomas23ianthomas23
authored
Separate out more of the bokehjs example stages (#30)
1 parent df7cc6e commit b1b3f78

File tree

10 files changed

+31
-33
lines changed

10 files changed

+31
-33
lines changed

‎ci/typescript/create_vanilla_rspack.sh

+3-4
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ import * as Bokeh from "@bokeh/bokehjs";
109109
110110
console.info("BokehJS version:", Bokeh.version);
111111
112-
function create_bokehjs_plot(target_id: string) {
112+
function create_bokehjs_plot(): Bokeh.Column {
113113
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
114114
115115
const plot = Bokeh.Plotting.figure({
@@ -129,11 +129,10 @@ function create_bokehjs_plot(target_id: string) {
129129
}
130130
button.on_click(button_callback);
131131
132-
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
133-
Bokeh.Plotting.show(column, target_id);
132+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
134133
}
135134
136-
create_bokehjs_plot("#target");
135+
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
137136
EOF
138137

139138
# 11. Rebuild and serve

‎ci/typescript/create_vanilla_vite.sh

+3-4
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import * as Bokeh from "@bokeh/bokehjs";
4343
4444
console.info("BokehJS version:", Bokeh.version);
4545
46-
function create_bokehjs_plot(target_id: string) {
46+
function create_bokehjs_plot(): Bokeh.Column {
4747
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
4848
4949
const plot = Bokeh.Plotting.figure({
@@ -63,13 +63,12 @@ function create_bokehjs_plot(target_id: string) {
6363
}
6464
button.on_click(button_callback);
6565
66-
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
67-
Bokeh.Plotting.show(column, target_id);
66+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
6867
}
6968
7069
document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`<div id='target'>Hello</div>\`;
7170
72-
create_bokehjs_plot("#target");
71+
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
7372
EOF
7473

7574
# 8. Rebuild and serve

‎ci/typescript/create_vanilla_webpack.sh

+3-4
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ import * as Bokeh from "@bokeh/bokehjs";
110110
111111
console.info("BokehJS version:", Bokeh.version);
112112
113-
function create_bokehjs_plot(target_id: string) {
113+
function create_bokehjs_plot(): Bokeh.Column {
114114
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
115115
116116
const plot = Bokeh.Plotting.figure({
@@ -130,11 +130,10 @@ function create_bokehjs_plot(target_id: string) {
130130
}
131131
button.on_click(button_callback);
132132
133-
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
134-
Bokeh.Plotting.show(column, target_id);
133+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
135134
}
136135
137-
create_bokehjs_plot("#target");
136+
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
138137
EOF
139138

140139
# 11. Rebuild and serve

‎recipes/src/recipes/typescript/common.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@ export const baseTSConfig =
1313

1414
export const baseTypeScriptExample = {
1515
import: 'import * as Bokeh from "@bokeh/bokehjs";\n',
16+
version: 'console.info("BokehJS version:", Bokeh.version);\n',
1617
function:
17-
`console.info("BokehJS version:", Bokeh.version);
18-
19-
function create_bokehjs_plot(target_id: string) {
18+
`function create_bokehjs_plot(): Bokeh.Column {
2019
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
2120
2221
const plot = Bokeh.Plotting.figure({
@@ -36,9 +35,8 @@ function create_bokehjs_plot(target_id: string) {
3635
}
3736
button.on_click(button_callback);
3837
39-
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
40-
Bokeh.Plotting.show(column, target_id);
38+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
4139
}
4240
`,
43-
create: 'create_bokehjs_plot("#target");'
41+
show: 'Bokeh.Plotting.show(create_bokehjs_plot(), "#target");\n'
4442
};

‎recipes/src/recipes/typescript/vanilla_rspack_recipe.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,9 @@ export default config;`)
103103
'Replace contents of `src/index.ts` with code to create BokehJS plot',
104104
'src/index.ts',
105105
baseTypeScriptExample.import + "\n" +
106+
baseTypeScriptExample.version + "\n" +
106107
baseTypeScriptExample.function + "\n" +
107-
baseTypeScriptExample.create
108+
baseTypeScriptExample.show
108109
));
109110

110111
this.add(new CommandStep(

‎recipes/src/recipes/typescript/vanilla_vite_recipe.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,10 @@ export class VanillaViteRecipe extends Recipe {
5151
'Replace `src/main.ts` with a simple hello example',
5252
'src/main.ts',
5353
baseTypeScriptExample.import + "\n" +
54+
baseTypeScriptExample.version + "\n" +
5455
baseTypeScriptExample.function + "\n" +
5556
"document.querySelector<HTMLDivElement>('#app')!.innerHTML = \\`<div id='target'>Hello</div>\\`;\n\n" +
56-
'create_bokehjs_plot("#target");'
57+
baseTypeScriptExample.show
5758
));
5859

5960
this.add(new CommandStep(

‎recipes/src/recipes/typescript/vanilla_webpack_recipe.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,9 @@ export default config;`)
102102
'Replace contents of `src/index.ts` with code to create BokehJS plot',
103103
'src/index.ts',
104104
baseTypeScriptExample.import + "\n" +
105+
baseTypeScriptExample.version + "\n" +
105106
baseTypeScriptExample.function + "\n" +
106-
baseTypeScriptExample.create
107+
baseTypeScriptExample.show
107108
));
108109

109110
this.add(new CommandStep(

‎typescript/vanilla_rspack/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
111111
112112
console.info("BokehJS version:", Bokeh.version);
113113
114-
function create_bokehjs_plot(target_id: string) {
114+
function create_bokehjs_plot(): Bokeh.Column {
115115
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
116116
117117
const plot = Bokeh.Plotting.figure({
@@ -131,11 +131,11 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
131131
}
132132
button.on_click(button_callback);
133133
134-
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
135-
Bokeh.Plotting.show(column, target_id);
134+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
136135
}
137136
138-
create_bokehjs_plot("#target");
137+
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
138+
139139
```
140140
141141
11. Rebuild and serve

‎typescript/vanilla_vite/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Create an initial basic project using `create-vite`.
5050
5151
console.info("BokehJS version:", Bokeh.version);
5252
53-
function create_bokehjs_plot(target_id: string) {
53+
function create_bokehjs_plot(): Bokeh.Column {
5454
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
5555
5656
const plot = Bokeh.Plotting.figure({
@@ -70,13 +70,13 @@ Create an initial basic project using `create-vite`.
7070
}
7171
button.on_click(button_callback);
7272
73-
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
74-
Bokeh.Plotting.show(column, target_id);
73+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
7574
}
7675
7776
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<div id='target'>Hello</div>`;
7877
79-
create_bokehjs_plot("#target");
78+
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
79+
8080
```
8181
8282
8. Rebuild and serve

‎typescript/vanilla_webpack/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
111111
console.info("BokehJS version:", Bokeh.version);
112112
113-
function create_bokehjs_plot(target_id: string) {
113+
function create_bokehjs_plot(): Bokeh.Column {
114114
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
115115
116116
const plot = Bokeh.Plotting.figure({
@@ -130,11 +130,11 @@
130130
}
131131
button.on_click(button_callback);
132132
133-
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
134-
Bokeh.Plotting.show(column, target_id);
133+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
135134
}
136135
137-
create_bokehjs_plot("#target");
136+
Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
137+
138138
```
139139
140140
11. Rebuild and serve

0 commit comments

Comments
 (0)