Add vue-vite example

ci/prepare_playwright.sh

@@ -7,3 +7,4 @@ set -eux
 ./single_example.sh typescript vanilla_rspack
 ./single_example.sh typescript vanilla_vite
 ./single_example.sh typescript vanilla_webpack
+./single_example.sh typescript vue_vite

ci/single_example.sh

@@ -12,7 +12,7 @@ fi
 export TYPE=$1
 export EXAMPLE=$2
 
-if [ $EXAMPLE == "vanilla_vite" ]; then
+if [[ $EXAMPLE =~ _vite$ ]]; then
   export PORT=5173
   export SERVE_CMD="npm run dev"
 else

ci/typescript/create_vue_vite.sh

@@ -0,0 +1,108 @@
+#!/usr/bin/env bash
+
+set -eux
+
+export OUTPUT_DIRECTORY=../temp/typescript/vue_vite
+
+mkdir -p $OUTPUT_DIRECTORY
+cd $OUTPUT_DIRECTORY
+rm -rf *
+
+function merge-json() {
+  # merge the second json file into the first.
+  TEMP_FILE=$(mktemp)
+  jq '. * input' $1 $2 > TEMP_FILE && mv TEMP_FILE $1
+}
+
+# 1. Create base vite project
+npm create vite@latest . -- --template vue-ts --yes
+
+# 2. Build and run initial basic project
+# npm install
+# # npm run dev
+# In a web browser navigate to http://localhost:5173/
+
+# 3. Simplify by removing some unwanted files
+rm public/vite.svg src/assets/vue.svg src/components/HelloWorld.vue src/style.css
+
+# 4. Replace src/App.vue with a simple hello example
+cat > src/App.vue << EOF
+<template>
+  <div>
+    Hello!
+  </div>
+</template>
+EOF
+
+# 5. Remove CSS lines from src/main.ts by replacing it
+cat > src/main.ts << EOF
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+EOF
+
+# 6. Build and run the minimal example
+# # npm run dev
+# In a web browser navigate to http://localhost:5173/
+
+# 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.
+npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz
+
+# 8. Create a new file of src/components/BokehComponent.vue with code to create BokehJS plot
+mkdir -p src/components
+cat > src/components/BokehComponent.vue << EOF
+<script setup lang="ts">
+import { useTemplateRef, onMounted } from 'vue'
+import * as Bokeh from "@bokeh/bokehjs";
+
+const ref = useTemplateRef('target')
+
+function create_bokehjs_plot(): Bokeh.Column {
+  const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
+
+  const plot = Bokeh.Plotting.figure({
+    title: "Example BokehJS plot", height: 500, width: 500,
+    x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
+  });
+
+  plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
+
+  const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
+  function button_callback() {
+    const data = source.data as any;
+    data.x.push(Math.random());
+    data.y.push(Math.random());
+    data.size.push(10 + Math.random()*30);
+    source.change.emit();
+  }
+  button.on_click(button_callback);
+
+  return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
+}
+
+onMounted(() => {
+  console.info("BokehJS version:", Bokeh.version);
+  Bokeh.Plotting.show(create_bokehjs_plot(), ref.value);
+})
+</script>
+
+<template>
+  <div ref="target"></div>
+</template>
+EOF
+
+# 9. Replace src/App.vue so that it uses the BokehComponent
+cat > src/App.vue << EOF
+<script setup lang="ts">
+import BokehComponent from './components/BokehComponent.vue'
+</script>
+
+<template>
+  <BokehComponent />
+</template>
+EOF
+
+# 10. Rebuild and serve
+# npm run dev
+# In a web browser navigate to http://localhost:5173/

recipes/src/recipes/typescript/common.ts

@@ -38,5 +38,5 @@ export const baseTypeScriptExample = {
   return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
 }
 `,
-  show: 'Bokeh.Plotting.show(create_bokehjs_plot(), "#target");\n'
+  show: (target: string = '"#target"') => 'Bokeh.Plotting.show(create_bokehjs_plot(), ' + target + ');\n'
 };

recipes/src/recipes/typescript/index.ts

@@ -1,3 +1,4 @@
 export * from './vanilla_rspack_recipe';
 export * from './vanilla_vite_recipe';
 export * from './vanilla_webpack_recipe';
+export * from './vue_vite_recipe';

recipes/src/recipes/typescript/vanilla_rspack_recipe.ts

@@ -105,7 +105,7 @@ export default config;`)
         baseTypeScriptExample.import + "\n" +
         baseTypeScriptExample.version + "\n" +
         baseTypeScriptExample.function + "\n" +
-        baseTypeScriptExample.show
+        baseTypeScriptExample.show()
       ));
 
       this.add(new CommandStep(

recipes/src/recipes/typescript/vanilla_vite_recipe.ts

@@ -54,7 +54,7 @@ export class VanillaViteRecipe extends Recipe {
       baseTypeScriptExample.version + "\n" +
       baseTypeScriptExample.function + "\n" +
       "document.querySelector<HTMLDivElement>('#app')!.innerHTML = \\`<div id='target'>Hello</div>\\`;\n\n" +
-      baseTypeScriptExample.show
+      baseTypeScriptExample.show()
     ));
 
     this.add(new CommandStep(

recipes/src/recipes/typescript/vanilla_webpack_recipe.ts

@@ -104,7 +104,7 @@ export default config;`)
         baseTypeScriptExample.import + "\n" +
         baseTypeScriptExample.version + "\n" +
         baseTypeScriptExample.function + "\n" +
-        baseTypeScriptExample.show
+        baseTypeScriptExample.show()
       ));
 
       this.add(new CommandStep(

recipes/src/recipes/typescript/vue_vite_recipe.ts

@@ -0,0 +1,100 @@
+import { Recipe } from '../../recipe';
+import { CommandStep, CreateFileStep, RemoveFilesStep, ReplaceFileStep } from '../../step';
+import { baseTypeScriptExample } from './common';
+
+export class VueViteRecipe extends Recipe {
+  constructor() {
+    super(
+      'typescript',
+      'vue',
+      'vite',
+      'Create an initial basic project using `create-vite`.'
+    );
+
+    this.add(new CommandStep(
+      'Create base `vite` project',
+      ['npm create vite@latest . -- --template vue-ts --yes']
+    ));
+
+    this.add(new CommandStep(
+      'Build and run initial basic project',
+      ['npm install', 'npm run dev'],
+      'In a web browser navigate to http://localhost:5173/',
+      true
+    ));
+
+    this.add(new RemoveFilesStep(
+      'Simplify by removing some unwanted files',
+      ['public/vite.svg', 'src/assets/vue.svg', 'src/components/HelloWorld.vue', 'src/style.css']
+    ));
+
+    this.add(new ReplaceFileStep(
+      'Replace `src/App.vue` with a simple hello example',
+      'src/App.vue',
+`<template>
+  <div>
+    Hello!
+  </div>
+</template>`)
+    );
+
+    this.add(new ReplaceFileStep(
+      'Remove CSS lines from `src/main.ts` by replacing it',
+      'src/main.ts',
+`import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')`)
+    );
+
+    this.add(new CommandStep(
+      'Build and run the minimal example',
+      ['npm run dev'],
+      'In a web browser navigate to http://localhost:5173/',
+      true
+    ));
+
+    this.add(new CommandStep(
+      '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`.',
+      ['npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz']
+    ));
+
+    this.add(new CreateFileStep(
+      'Create a new file of `src/components/BokehComponent.vue` with code to create BokehJS plot',
+      'src/components/BokehComponent.vue',
+      '<script setup lang="ts">\n' +
+      "import { useTemplateRef, onMounted } from 'vue'\n" +
+      baseTypeScriptExample.import + "\n" +
+      "const ref = useTemplateRef('target')\n\n" +
+      baseTypeScriptExample.function + "\n" +
+      'onMounted(() => {\n' +
+      '  ' + baseTypeScriptExample.version +
+      '  ' + baseTypeScriptExample.show('ref.value') +
+`})
+</script>
+
+<template>
+  <div ref="target"></div>
+</template>`)
+    );
+
+    this.add(new ReplaceFileStep(
+      'Replace `src/App.vue` so that it uses the `BokehComponent`',
+      'src/App.vue',
+`<script setup lang="ts">
+import BokehComponent from './components/BokehComponent.vue'
+</script>
+
+<template>
+  <BokehComponent />
+</template>`)
+    );
+
+    this.add(new CommandStep(
+      'Rebuild and serve',
+      ['npm run dev'],
+      'In a web browser navigate to http://localhost:5173/'
+    ));
+  }
+}

recipes/src/step.ts

@@ -29,7 +29,7 @@ export abstract class Step {   //}   implements IWriteVisitor {
  */
 export class CommandStep extends Step {
   constructor(
-    readonly description: string,
+    description: string,
     readonly commands: string[],
     readonly postscript: string = '',
     readonly ignoreIfBash: boolean = false
@@ -71,7 +71,7 @@ export class CommandStep extends Step {
 
 abstract class CreateOrReplaceFileStep extends Step {
   constructor(
-    readonly description: string,
+    description: string,
     readonly filename: string,
     readonly contents: string,
     readonly alreadyExists: boolean
@@ -128,7 +128,7 @@ export class CreateFileStep extends CreateOrReplaceFileStep {
  * Step to create a file.
  */
 export class MergeJsonStep extends Step {
-  constructor(readonly description: string, readonly filename: string, readonly toMerge: string) {
+  constructor(description: string, readonly filename: string, readonly toMerge: string) {
     super(description);
   }
 
@@ -167,7 +167,7 @@ export class MergeJsonStep extends Step {
  * Step to remove files.
  */
 export class RemoveFilesStep extends Step {
-  constructor(readonly description: string, readonly filenames: string[]) {
+  constructor(description: string, readonly filenames: string[]) {
     super(description);
   }
 

recipes/src/util.ts

@@ -14,8 +14,9 @@ export function languageFromExtension(filename: string): string {
     case '.json': {
       return 'json';
     }
-    case '.ts': {
-      return 'typescript';
+    case '.ts':
+    case '.vue': {
+      return 'ts';
     }
     default: {
       return '';

typescript/vanilla_rspack/README.md

@@ -32,7 +32,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
 
 4. Create rspack configuration `rspack.config.ts` containing
 
-    ```typescript
+    ```ts
     import path from 'path';
     import { Configuration } from '@rspack/cli';
 
@@ -73,7 +73,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
 
 6. Create source typescript file `src/index.ts` containing
 
-    ```typescript
+    ```ts
     console.log("Successfully loaded")
     ```
 
@@ -106,7 +106,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
 
 10. Replace contents of `src/index.ts` with code to create BokehJS plot containing
 
-    ```typescript
+    ```ts
     import * as Bokeh from "@bokeh/bokehjs";
 
     console.info("BokehJS version:", Bokeh.version);

typescript/vanilla_vite/README.md

@@ -25,7 +25,7 @@ Create an initial basic project using `create-vite`.
 
 4. Replace `src/main.ts` with a simple hello example containing
 
-    ```typescript
+    ```ts
     document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<div>Hello</div>`
     ```
 
@@ -45,7 +45,7 @@ Create an initial basic project using `create-vite`.
 
 7. Replace `src/main.ts` with a simple hello example containing
 
-    ```typescript
+    ```ts
     import * as Bokeh from "@bokeh/bokehjs";
 
     console.info("BokehJS version:", Bokeh.version);

typescript/vanilla_webpack/README.md

@@ -30,7 +30,7 @@
 
 4. Create webpack configuration `webpack.config.ts` containing
 
-    ```typescript
+    ```ts
     import path from 'path';
     import webpack from 'webpack';
     import 'webpack-dev-server';
@@ -72,7 +72,7 @@
 
 6. Create source typescript file `src/index.ts` containing
 
-    ```typescript
+    ```ts
     console.log("Successfully loaded")
     ```
 
@@ -105,7 +105,7 @@
 
 10. Replace contents of `src/index.ts` with code to create BokehJS plot containing
 
-    ```typescript
+    ```ts
     import * as Bokeh from "@bokeh/bokehjs";
 
     console.info("BokehJS version:", Bokeh.version);