Skip to content

Commit feb77dc

Browse files
ianthomas23ianthomas23
committed
Add vue-vite example
1 parent 3290230 commit feb77dc

File tree

14 files changed

+349
-18
lines changed

14 files changed

+349
-18
lines changed

‎ci/prepare_playwright.sh

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ set -eux
77
./single_example.sh typescript vanilla_rspack
88
./single_example.sh typescript vanilla_vite
99
./single_example.sh typescript vanilla_webpack
10+
./single_example.sh typescript vue_vite

‎ci/typescript/create_vue_vite.sh

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
#!/usr/bin/env bash
2+
3+
set -eux
4+
5+
export OUTPUT_DIRECTORY=../temp/typescript/vue_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 vue-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/assets/vue.svg src/components/HelloWorld.vue src/style.css
27+
28+
# 4. Replace src/App.vue with a simple hello example
29+
cat > src/App.vue << EOF
30+
<template>
31+
<div>
32+
Hello!
33+
</div>
34+
</template>
35+
EOF
36+
37+
# 5. Remove CSS lines from src/main.ts by replacing it
38+
cat > src/main.ts << EOF
39+
import { createApp } from 'vue'
40+
import App from './App.vue'
41+
42+
createApp(App).mount('#app')
43+
EOF
44+
45+
# 6. Build and run the minimal example
46+
# # npm run dev
47+
# In a web browser navigate to http://localhost:5173/
48+
49+
# 7. 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.
50+
npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz
51+
52+
# 8. Create a new file of src/components/BokehComponent.vue with code to create BokehJS plot
53+
mkdir -p src/components
54+
cat > src/components/BokehComponent.vue << EOF
55+
<script setup lang="ts">
56+
import { useTemplateRef, onMounted } from 'vue'
57+
import * as Bokeh from "@bokeh/bokehjs";
58+
59+
const ref = useTemplateRef('target')
60+
61+
function create_bokehjs_plot(): Bokeh.Column {
62+
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
63+
64+
const plot = Bokeh.Plotting.figure({
65+
title: "Example BokehJS plot", height: 500, width: 500,
66+
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
67+
});
68+
69+
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
70+
71+
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
72+
function button_callback() {
73+
const data = source.data as any;
74+
data.x.push(Math.random());
75+
data.y.push(Math.random());
76+
data.size.push(10 + Math.random()*30);
77+
source.change.emit();
78+
}
79+
button.on_click(button_callback);
80+
81+
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
82+
}
83+
84+
onMounted(() => {
85+
console.info("BokehJS version:", Bokeh.version);
86+
Bokeh.Plotting.show(create_bokehjs_plot(), ref.value);
87+
})
88+
</script>
89+
90+
<template>
91+
<div ref="target"></div>
92+
</template>
93+
EOF
94+
95+
# 9. Replace src/App.vue so that it uses the BokehComponent
96+
cat > src/App.vue << EOF
97+
<script setup lang="ts">
98+
import BokehComponent from './components/BokehComponent.vue'
99+
</script>
100+
101+
<template>
102+
<BokehComponent />
103+
</template>
104+
EOF
105+
106+
# 10. Rebuild and serve
107+
# npm run dev
108+
# In a web browser navigate to http://localhost:5173/

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,5 @@ export const baseTypeScriptExample = {
3838
return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
3939
}
4040
`,
41-
show: 'Bokeh.Plotting.show(create_bokehjs_plot(), "#target");\n'
41+
show: (target: string = '"#target"') => 'Bokeh.Plotting.show(create_bokehjs_plot(), ' + target + ');\n'
4242
};

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './vanilla_rspack_recipe';
22
export * from './vanilla_vite_recipe';
33
export * from './vanilla_webpack_recipe';
4+
export * from './vue_vite_recipe';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export default config;`)
105105
baseTypeScriptExample.import + "\n" +
106106
baseTypeScriptExample.version + "\n" +
107107
baseTypeScriptExample.function + "\n" +
108-
baseTypeScriptExample.show
108+
baseTypeScriptExample.show()
109109
));
110110

111111
this.add(new CommandStep(

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export class VanillaViteRecipe extends Recipe {
5454
baseTypeScriptExample.version + "\n" +
5555
baseTypeScriptExample.function + "\n" +
5656
"document.querySelector<HTMLDivElement>('#app')!.innerHTML = \\`<div id='target'>Hello</div>\\`;\n\n" +
57-
baseTypeScriptExample.show
57+
baseTypeScriptExample.show()
5858
));
5959

6060
this.add(new CommandStep(

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export default config;`)
104104
baseTypeScriptExample.import + "\n" +
105105
baseTypeScriptExample.version + "\n" +
106106
baseTypeScriptExample.function + "\n" +
107-
baseTypeScriptExample.show
107+
baseTypeScriptExample.show()
108108
));
109109

110110
this.add(new CommandStep(

‎recipes/src/recipes/typescript/vue_vite_recipe.ts

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { Recipe } from '../../recipe';
2+
import { CommandStep, CreateFileStep, RemoveFilesStep, ReplaceFileStep } from '../../step';
3+
import { baseTypeScriptExample } from './common';
4+
5+
export class VueViteRecipe extends Recipe {
6+
constructor() {
7+
super(
8+
'typescript',
9+
'vue',
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 vue-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/assets/vue.svg', 'src/components/HelloWorld.vue', 'src/style.css']
29+
));
30+
31+
this.add(new ReplaceFileStep(
32+
'Replace `src/App.vue` with a simple hello example',
33+
'src/App.vue',
34+
`<template>
35+
<div>
36+
Hello!
37+
</div>
38+
</template>`)
39+
);
40+
41+
this.add(new ReplaceFileStep(
42+
'Remove CSS lines from `src/main.ts` by replacing it',
43+
'src/main.ts',
44+
`import { createApp } from 'vue'
45+
import App from './App.vue'
46+
47+
createApp(App).mount('#app')`)
48+
);
49+
50+
this.add(new CommandStep(
51+
'Build and run the minimal example',
52+
['npm run dev'],
53+
'In a web browser navigate to http://localhost:5173/',
54+
true
55+
));
56+
57+
this.add(new CommandStep(
58+
'Add BokehJS dependency to this project. This assumes the package has been built and ' +
59+
'copied to the root directory of this repository as outlined in the top-level `README.md`.',
60+
['npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz']
61+
));
62+
63+
this.add(new CreateFileStep(
64+
'Create a new file of `src/components/BokehComponent.vue` with code to create BokehJS plot',
65+
'src/components/BokehComponent.vue',
66+
'<script setup lang="ts">\n' +
67+
"import { useTemplateRef, onMounted } from 'vue'\n" +
68+
baseTypeScriptExample.import + "\n" +
69+
"const ref = useTemplateRef('target')\n\n" +
70+
baseTypeScriptExample.function + "\n" +
71+
'onMounted(() => {\n' +
72+
' ' + baseTypeScriptExample.version +
73+
' ' + baseTypeScriptExample.show('ref.value') +
74+
`})
75+
</script>
76+
77+
<template>
78+
<div ref="target"></div>
79+
</template>`)
80+
);
81+
82+
this.add(new ReplaceFileStep(
83+
'Replace `src/App.vue` so that it uses the `BokehComponent`',
84+
'src/App.vue',
85+
`<script setup lang="ts">
86+
import BokehComponent from './components/BokehComponent.vue'
87+
</script>
88+
89+
<template>
90+
<BokehComponent />
91+
</template>`)
92+
);
93+
94+
this.add(new CommandStep(
95+
'Rebuild and serve',
96+
['npm run dev'],
97+
'In a web browser navigate to http://localhost:5173/'
98+
));
99+
}
100+
}

‎recipes/src/step.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export abstract class Step { //} implements IWriteVisitor {
2929
*/
3030
export class CommandStep extends Step {
3131
constructor(
32-
readonly description: string,
32+
description: string,
3333
readonly commands: string[],
3434
readonly postscript: string = '',
3535
readonly ignoreIfBash: boolean = false
@@ -71,7 +71,7 @@ export class CommandStep extends Step {
7171

7272
abstract class CreateOrReplaceFileStep extends Step {
7373
constructor(
74-
readonly description: string,
74+
description: string,
7575
readonly filename: string,
7676
readonly contents: string,
7777
readonly alreadyExists: boolean
@@ -128,7 +128,7 @@ export class CreateFileStep extends CreateOrReplaceFileStep {
128128
* Step to create a file.
129129
*/
130130
export class MergeJsonStep extends Step {
131-
constructor(readonly description: string, readonly filename: string, readonly toMerge: string) {
131+
constructor(description: string, readonly filename: string, readonly toMerge: string) {
132132
super(description);
133133
}
134134

@@ -167,7 +167,7 @@ export class MergeJsonStep extends Step {
167167
* Step to remove files.
168168
*/
169169
export class RemoveFilesStep extends Step {
170-
constructor(readonly description: string, readonly filenames: string[]) {
170+
constructor(description: string, readonly filenames: string[]) {
171171
super(description);
172172
}
173173

‎recipes/src/util.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ export function languageFromExtension(filename: string): string {
1414
case '.json': {
1515
return 'json';
1616
}
17-
case '.ts': {
18-
return 'typescript';
17+
case '.ts':
18+
case '.vue': {
19+
return 'ts';
1920
}
2021
default: {
2122
return '';

‎typescript/vanilla_rspack/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
3232

3333
4. Create rspack configuration `rspack.config.ts` containing
3434

35-
```typescript
35+
```ts
3636
import path from 'path';
3737
import { Configuration } from '@rspack/cli';
3838
@@ -73,7 +73,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
7373
7474
6. Create source typescript file `src/index.ts` containing
7575
76-
```typescript
76+
```ts
7777
console.log("Successfully loaded")
7878
```
7979
@@ -106,7 +106,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
106106
107107
10. Replace contents of `src/index.ts` with code to create BokehJS plot containing
108108
109-
```typescript
109+
```ts
110110
import * as Bokeh from "@bokeh/bokehjs";
111111
112112
console.info("BokehJS version:", Bokeh.version);

‎typescript/vanilla_vite/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Create an initial basic project using `create-vite`.
2525

2626
4. Replace `src/main.ts` with a simple hello example containing
2727

28-
```typescript
28+
```ts
2929
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<div>Hello</div>`
3030
```
3131

@@ -45,7 +45,7 @@ Create an initial basic project using `create-vite`.
4545

4646
7. Replace `src/main.ts` with a simple hello example containing
4747

48-
```typescript
48+
```ts
4949
import * as Bokeh from "@bokeh/bokehjs";
5050
5151
console.info("BokehJS version:", Bokeh.version);

‎typescript/vanilla_webpack/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
4. Create webpack configuration `webpack.config.ts` containing
3232

33-
```typescript
33+
```ts
3434
import path from 'path';
3535
import webpack from 'webpack';
3636
import 'webpack-dev-server';
@@ -72,7 +72,7 @@
7272
7373
6. Create source typescript file `src/index.ts` containing
7474
75-
```typescript
75+
```ts
7676
console.log("Successfully loaded")
7777
```
7878
@@ -105,7 +105,7 @@
105105
106106
10. Replace contents of `src/index.ts` with code to create BokehJS plot containing
107107
108-
```typescript
108+
```ts
109109
import * as Bokeh from "@bokeh/bokehjs";
110110
111111
console.info("BokehJS version:", Bokeh.version);

0 commit comments

Comments
 (0)