Skip to content

Commit df7cc6e

Browse files
ianthomas23ianthomas23
authored
Add vanilla_vite typescript recipe (#29)
1 parent dbff267 commit df7cc6e

File tree

12 files changed

+320
-22
lines changed

12 files changed

+320
-22
lines changed

‎ci/prepare_playwright.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@
55
set -eux
66

77
./single_example.sh typescript vanilla_rspack
8+
./single_example.sh typescript vanilla_vite
89
./single_example.sh typescript vanilla_webpack

‎ci/single_example.sh‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,15 @@ fi
1212
export TYPE=$1
1313
export EXAMPLE=$2
1414

15+
if [ $EXAMPLE == "vanilla_vite" ]; then
16+
export PORT=5173
17+
export SERVE_CMD="npm run dev"
18+
else
19+
export PORT=4500
20+
export SERVE_CMD="npm run serve"
21+
fi
22+
23+
1524
function merge-json() {
1625
# merge the second json file into the first.
1726
TEMP_FILE=$(mktemp)
@@ -44,7 +53,7 @@ export default defineConfig({
4453
workers: process.env.CI ? 1 : undefined,
4554
reporter: 'html',
4655
use: {
47-
baseURL: 'http://localhost:4500',
56+
baseURL: 'http://localhost:$PORT',
4857
trace: 'on-first-retry',
4958
},
5059
projects: [
@@ -55,7 +64,7 @@ export default defineConfig({
5564
],
5665
webServer: {
5766
command: 'npm run serve',
58-
url: 'http://localhost:4500',
67+
url: 'http://localhost:$PORT',
5968
reuseExistingServer: !process.env.CI
6069
}
6170
});
@@ -65,7 +74,7 @@ EOF
6574
cat > temp.json << EOF
6675
{
6776
"scripts": {
68-
"serve": "npm explore $EXAMPLE -- npm run serve",
77+
"serve": "npm explore $EXAMPLE -- $SERVE_CMD",
6978
"test": "playwright test",
7079
"test:ui": "playwright test --ui"
7180
}

‎ci/typescript/create_vanilla_rspack.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ rm temp.json
9696
# 8. Build and run basic example without any BokehJS
9797
# npm install
9898
# npm run build
99-
# npm run serve
99+
# # npm run serve
100100
# In a web browser navigate to http://localhost:4500/
101101

102102
# 9. Add BokehJS dependency to this project. This assumes the package has been built and copied to the root directory of this repository as outlined in the top-level README.md.

‎ci/typescript/create_vanilla_vite.sh‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
#!/usr/bin/env bash
2+
3+
set -eux
4+
5+
export OUTPUT_DIRECTORY=../temp/typescript/vanilla_vite
6+
7+
mkdir -p $OUTPUT_DIRECTORY
8+
cd $OUTPUT_DIRECTORY
9+
rm -rf *
10+
11+
function merge-json() {
12+
# merge the second json file into the first.
13+
TEMP_FILE=$(mktemp)
14+
jq '. * input' $1 $2 > TEMP_FILE && mv TEMP_FILE $1
15+
}
16+
17+
# 1. Create base vite project
18+
npm create vite@latest . -- --template vanilla-ts --yes
19+
20+
# 2. Build and run initial basic project
21+
# npm install
22+
# # npm run dev
23+
# In a web browser navigate to http://localhost:5173/
24+
25+
# 3. Simplify by removing some unwanted files
26+
rm public/vite.svg src/counter.ts src/style.css src/typescript.svg
27+
28+
# 4. Replace src/main.ts with a simple hello example
29+
cat > src/main.ts << EOF
30+
document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`<div>Hello</div>\`
31+
EOF
32+
33+
# 5. Build and run the minimal example
34+
# # npm run dev
35+
# In a web browser navigate to http://localhost:5173/
36+
37+
# 6. Add BokehJS dependency to this project. This assumes the package has been built and copied to the root directory of this repository as outlined in the top-level README.md.
38+
npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz
39+
40+
# 7. Replace src/main.ts with a simple hello example
41+
cat > src/main.ts << EOF
42+
import * as Bokeh from "@bokeh/bokehjs";
43+
44+
console.info("BokehJS version:", Bokeh.version);
45+
46+
function create_bokehjs_plot(target_id: string) {
47+
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
48+
49+
const plot = Bokeh.Plotting.figure({
50+
title: "Example BokehJS plot", height: 500, width: 500,
51+
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
52+
});
53+
54+
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
55+
56+
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
57+
function button_callback() {
58+
const data = source.data as any;
59+
data.x.push(Math.random());
60+
data.y.push(Math.random());
61+
data.size.push(10 + Math.random()*30);
62+
source.change.emit();
63+
}
64+
button.on_click(button_callback);
65+
66+
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
67+
Bokeh.Plotting.show(column, target_id);
68+
}
69+
70+
document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`<div id='target'>Hello</div>\`;
71+
72+
create_bokehjs_plot("#target");
73+
EOF
74+
75+
# 8. Rebuild and serve
76+
# npm run dev
77+
# In a web browser navigate to http://localhost:5173/

‎ci/typescript/create_vanilla_webpack.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ rm temp.json
9797
# 8. Build and run basic example without any BokehJS
9898
# npm install
9999
# npm run build
100-
# npm run serve
100+
# # npm run serve
101101
# In a web browser navigate to http://localhost:4500/
102102

103103
# 9. Add BokehJS dependency to this project. This assumes the package has been built and copied to the root directory of this repository as outlined in the top-level README.md.

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ export const baseTSConfig =
1111
"include": ["src"]
1212
}`;
1313

14-
export const baseTypeScriptExample =
15-
`import * as Bokeh from "@bokeh/bokehjs";
16-
17-
console.info("BokehJS version:", Bokeh.version);
14+
export const baseTypeScriptExample = {
15+
import: 'import * as Bokeh from "@bokeh/bokehjs";\n',
16+
function:
17+
`console.info("BokehJS version:", Bokeh.version);
1818
1919
function create_bokehjs_plot(target_id: string) {
2020
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
@@ -38,4 +38,7 @@ function create_bokehjs_plot(target_id: string) {
3838
3939
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
4040
Bokeh.Plotting.show(column, target_id);
41-
}`;
41+
}
42+
`,
43+
create: 'create_bokehjs_plot("#target");'
44+
};

‎recipes/src/recipes/typescript/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './vanilla_rspack_recipe';
2+
export * from './vanilla_vite_recipe';
23
export * from './vanilla_webpack_recipe';

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@ export default config;`)
102102
this.add(new CreateFileStep(
103103
'Replace contents of `src/index.ts` with code to create BokehJS plot',
104104
'src/index.ts',
105-
baseTypeScriptExample + '\n\ncreate_bokehjs_plot("#target");'
105+
baseTypeScriptExample.import + "\n" +
106+
baseTypeScriptExample.function + "\n" +
107+
baseTypeScriptExample.create
106108
));
107109

108110
this.add(new CommandStep(

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Recipe } from '../../recipe';
2+
import { CommandStep, RemoveFilesStep, ReplaceFileStep } from '../../step';
3+
import { baseTypeScriptExample } from './common';
4+
5+
export class VanillaViteRecipe extends Recipe {
6+
constructor() {
7+
super(
8+
'typescript',
9+
'vanilla',
10+
'vite',
11+
'Create an initial basic project using `create-vite`.'
12+
);
13+
14+
this.add(new CommandStep(
15+
'Create base `vite` project',
16+
['npm create vite@latest . -- --template vanilla-ts --yes']
17+
));
18+
19+
this.add(new CommandStep(
20+
'Build and run initial basic project',
21+
['npm install', 'npm run dev'],
22+
'In a web browser navigate to http://localhost:5173/',
23+
true
24+
));
25+
26+
this.add(new RemoveFilesStep(
27+
'Simplify by removing some unwanted files',
28+
['public/vite.svg', 'src/counter.ts', 'src/style.css', 'src/typescript.svg']
29+
));
30+
31+
this.add(new ReplaceFileStep(
32+
'Replace `src/main.ts` with a simple hello example',
33+
'src/main.ts',
34+
"document.querySelector<HTMLDivElement>('#app')!.innerHTML = \\`<div>Hello</div>\\`")
35+
);
36+
37+
this.add(new CommandStep(
38+
'Build and run the minimal example',
39+
['npm run dev'],
40+
'In a web browser navigate to http://localhost:5173/',
41+
true
42+
));
43+
44+
this.add(new CommandStep(
45+
'Add BokehJS dependency to this project. This assumes the package has been built and ' +
46+
'copied to the root directory of this repository as outlined in the top-level `README.md`.',
47+
['npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz']
48+
));
49+
50+
this.add(new ReplaceFileStep(
51+
'Replace `src/main.ts` with a simple hello example',
52+
'src/main.ts',
53+
baseTypeScriptExample.import + "\n" +
54+
baseTypeScriptExample.function + "\n" +
55+
"document.querySelector<HTMLDivElement>('#app')!.innerHTML = \\`<div id='target'>Hello</div>\\`;\n\n" +
56+
'create_bokehjs_plot("#target");'
57+
));
58+
59+
this.add(new CommandStep(
60+
'Rebuild and serve',
61+
['npm run dev'],
62+
'In a web browser navigate to http://localhost:5173/'
63+
));
64+
}
65+
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@ export default config;`)
101101
this.add(new CreateFileStep(
102102
'Replace contents of `src/index.ts` with code to create BokehJS plot',
103103
'src/index.ts',
104-
baseTypeScriptExample + '\n\ncreate_bokehjs_plot("#target");'
104+
baseTypeScriptExample.import + "\n" +
105+
baseTypeScriptExample.function + "\n" +
106+
baseTypeScriptExample.create
105107
));
106108

107109
this.add(new CommandStep(

0 commit comments

Comments
 (0)