diff --git a/ci/prepare_playwright.sh b/ci/prepare_playwright.sh index 36b33ca..2a8c612 100755 --- a/ci/prepare_playwright.sh +++ b/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 diff --git a/ci/single_example.sh b/ci/single_example.sh index 0a6da3d..ce34ad4 100755 --- a/ci/single_example.sh +++ b/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 diff --git a/ci/typescript/create_vue_vite.sh b/ci/typescript/create_vue_vite.sh new file mode 100755 index 0000000..9e5bd6a --- /dev/null +++ b/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 + +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 + + + +EOF + +# 9. Replace src/App.vue so that it uses the BokehComponent +cat > src/App.vue << EOF + + + +EOF + +# 10. Rebuild and serve +# npm run dev +# In a web browser navigate to http://localhost:5173/ diff --git a/recipes/src/recipes/typescript/common.ts b/recipes/src/recipes/typescript/common.ts index 590eccb..0689511 100644 --- a/recipes/src/recipes/typescript/common.ts +++ b/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' }; diff --git a/recipes/src/recipes/typescript/index.ts b/recipes/src/recipes/typescript/index.ts index 84b62aa..cc9ddb6 100644 --- a/recipes/src/recipes/typescript/index.ts +++ b/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'; \ No newline at end of file diff --git a/recipes/src/recipes/typescript/vanilla_rspack_recipe.ts b/recipes/src/recipes/typescript/vanilla_rspack_recipe.ts index 97e2390..ee588ed 100644 --- a/recipes/src/recipes/typescript/vanilla_rspack_recipe.ts +++ b/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( diff --git a/recipes/src/recipes/typescript/vanilla_vite_recipe.ts b/recipes/src/recipes/typescript/vanilla_vite_recipe.ts index 631b902..29e7804 100644 --- a/recipes/src/recipes/typescript/vanilla_vite_recipe.ts +++ b/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('#app')!.innerHTML = \\`
Hello
\\`;\n\n" + - baseTypeScriptExample.show + baseTypeScriptExample.show() )); this.add(new CommandStep( diff --git a/recipes/src/recipes/typescript/vanilla_webpack_recipe.ts b/recipes/src/recipes/typescript/vanilla_webpack_recipe.ts index e99a16a..2685c98 100644 --- a/recipes/src/recipes/typescript/vanilla_webpack_recipe.ts +++ b/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( diff --git a/recipes/src/recipes/typescript/vue_vite_recipe.ts b/recipes/src/recipes/typescript/vue_vite_recipe.ts new file mode 100644 index 0000000..2f255b9 --- /dev/null +++ b/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', +``) + ); + + 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', + ' + +`) + ); + + this.add(new ReplaceFileStep( + 'Replace `src/App.vue` so that it uses the `BokehComponent`', + 'src/App.vue', +` + +`) + ); + + this.add(new CommandStep( + 'Rebuild and serve', + ['npm run dev'], + 'In a web browser navigate to http://localhost:5173/' + )); + } +} diff --git a/recipes/src/step.ts b/recipes/src/step.ts index 9f1d8c1..3d2ba26 100644 --- a/recipes/src/step.ts +++ b/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); } diff --git a/recipes/src/util.ts b/recipes/src/util.ts index f9b9149..08b3122 100644 --- a/recipes/src/util.ts +++ b/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 ''; diff --git a/typescript/vanilla_rspack/README.md b/typescript/vanilla_rspack/README.md index 3c03bf0..eb0f622 100644 --- a/typescript/vanilla_rspack/README.md +++ b/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); diff --git a/typescript/vanilla_vite/README.md b/typescript/vanilla_vite/README.md index 74f61dc..49d7b3b 100644 --- a/typescript/vanilla_vite/README.md +++ b/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('#app')!.innerHTML = `
Hello
` ``` @@ -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); diff --git a/typescript/vanilla_webpack/README.md b/typescript/vanilla_webpack/README.md index 8e01a79..86d0642 100644 --- a/typescript/vanilla_webpack/README.md +++ b/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); diff --git a/typescript/vue_vite/README.md b/typescript/vue_vite/README.md new file mode 100644 index 0000000..2904a4e --- /dev/null +++ b/typescript/vue_vite/README.md @@ -0,0 +1,120 @@ +# Vue vite typescript example + +Create an initial basic project using `create-vite`. + +1. Create base `vite` project + + ```bash + npm create vite@latest . -- --template vue-ts --yes + ``` + +2. Build and run initial basic project + + ```bash + npm install + npm run dev + ``` + + In a web browser navigate to http://localhost:5173/ + +3. Simplify by removing some unwanted files + + ```bash + 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 containing + + ```ts + + ``` + +5. Remove CSS lines from `src/main.ts` by replacing it containing + + ```ts + import { createApp } from 'vue' + import App from './App.vue' + + createApp(App).mount('#app') + ``` + +6. Build and run the minimal example + + ```bash + 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`. + + ```bash + 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 containing + + ```ts + + + + ``` + +9. Replace `src/App.vue` so that it uses the `BokehComponent` containing + + ```ts + + + + ``` + +10. Rebuild and serve + + ```bash + npm run dev + ``` + + In a web browser navigate to http://localhost:5173/