|
| 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/ |
0 commit comments