diff --git a/ci/prepare_playwright.sh b/ci/prepare_playwright.sh index a8b1d19..ebe8978 100755 --- a/ci/prepare_playwright.sh +++ b/ci/prepare_playwright.sh @@ -1,80 +1,8 @@ #!/usr/bin/env bash # -# Prepare for playwright tests in a single example directory. -# Eventually need to look through all example directories. +# Prepare and run playwright tests in all example directories. set -eux -export TYPE=typescript -export EXAMPLE=vanilla_webpack - -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 and build example code in temporary directory -cd $TYPE && bash ./create_$EXAMPLE.sh && cd .. - -# 2. Create *-test directory -mkdir temp/$TYPE/$EXAMPLE-test -cd temp/$TYPE/$EXAMPLE-test - -# 3. Create initial package.json -npm init --yes - -# 4. Add dev dependencies -npm install --save-dev "@playwright/test" -npm install --save-dev ../$EXAMPLE - -# 5. Create playwright.config.ts -cat > playwright.config.ts << EOF -import { defineConfig, devices } from '@playwright/test'; - -export default defineConfig({ - testDir: './tests', - fullyParallel: true, - forbidOnly: !!process.env.CI, - retries: process.env.CI ? 2 : 0, - workers: process.env.CI ? 1 : undefined, - reporter: 'html', - use: { - baseURL: 'http://localhost:4500', - trace: 'on-first-retry', - }, - projects: [ - { - name: 'chromium', - use: { ...devices['Desktop Chrome'] }, - } - ], - webServer: { - command: 'npm run serve', - url: 'http://localhost:4500', - reuseExistingServer: !process.env.CI - } -}); -EOF - -# 4. Add test commands to package.json -cat > temp.json << EOF -{ - "scripts": { - "serve": "npm explore $EXAMPLE -- npm run serve", - "test": "playwright test", - "test:ui": "playwright test --ui" - } -} -EOF -merge-json package.json temp.json -rm temp.json - -# 5. Copy tests into temp example directory -cp -r ../../../tests . - -# 6. Install playwright browser -npx playwright install chromium - -# 7. Run tests -npm run test +./single_example.sh typescript vanilla_rspack +./single_example.sh typescript vanilla_webpack diff --git a/ci/single_example.sh b/ci/single_example.sh new file mode 100755 index 0000000..06db8f9 --- /dev/null +++ b/ci/single_example.sh @@ -0,0 +1,84 @@ +#!/usr/bin/env bash +# +# Prepare and run playwright tests in a single example directory. + +set -eux + +if [ "$#" -ne 2 ]; then + echo "Usage: $0 " + exit 1 +fi + +export TYPE=$1 +export EXAMPLE=$2 + +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 and build example code in temporary directory +cd $TYPE && bash ./create_$EXAMPLE.sh && cd .. + +# 2. Create *-test directory +mkdir temp/$TYPE/$EXAMPLE-test +cd temp/$TYPE/$EXAMPLE-test + +# 3. Create initial package.json +npm init --yes + +# 4. Add dev dependencies +npm install --save-dev "@playwright/test" +npm install --save-dev ../$EXAMPLE + +# 5. Create playwright.config.ts +cat > playwright.config.ts << EOF +import { defineConfig, devices } from '@playwright/test'; + +export default defineConfig({ + testDir: './tests', + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 0, + workers: process.env.CI ? 1 : undefined, + reporter: 'html', + use: { + baseURL: 'http://localhost:4500', + trace: 'on-first-retry', + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + } + ], + webServer: { + command: 'npm run serve', + url: 'http://localhost:4500', + reuseExistingServer: !process.env.CI + } +}); +EOF + +# 4. Add test commands to package.json +cat > temp.json << EOF +{ + "scripts": { + "serve": "npm explore $EXAMPLE -- npm run serve", + "test": "playwright test", + "test:ui": "playwright test --ui" + } +} +EOF +merge-json package.json temp.json +rm temp.json + +# 5. Copy tests into temp example directory +cp -r ../../../tests . + +# 6. Install playwright browser +npx playwright install chromium + +# 7. Run tests +npm run test diff --git a/ci/typescript/create_vanilla_rspack.sh b/ci/typescript/create_vanilla_rspack.sh new file mode 100755 index 0000000..1a61846 --- /dev/null +++ b/ci/typescript/create_vanilla_rspack.sh @@ -0,0 +1,140 @@ +#!/usr/bin/env bash + +set -eux + +export OUTPUT_DIRECTORY=../temp/typescript/vanilla_rspack + +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 initial package.json (npm project settings) +npm init --yes + +# 2. Install dev dependencies +npm install --save-dev typescript @rspack/core @rspack/cli ts-node ts-loader + +# 3. Create typescript configuration tsconfig.json +cat > tsconfig.json << EOF +{ + "compilerOptions": { + "baseUrl": ".", + "esModuleInterop": true, + "moduleResolution": "node", + "outDir": "./dist", + "rootDir": "./src", + "target": "ES2022" + }, + "include": ["src"] +} +EOF + +# 4. Create rspack configuration rspack.config.ts +cat > rspack.config.ts << EOF +import path from 'path'; +import { Configuration } from '@rspack/cli'; + +const config: Configuration = { + entry: './src/index.ts', + mode: 'development', + module: { + rules: [ + { test: /\.ts/, use: "ts-loader", exclude: /node_modules/ } + ], + }, + output: { filename: 'bundle.js' }, + devServer: { + static: { + directory: path.join(__dirname, 'assets'), + }, + port: 4500, + }, +}; + +export default config; +EOF + +# 5. Create HTML file +mkdir assets +cat > assets/index.html << EOF + + + + BokehJS example: typescript vanilla rspack + + + +
+ + +EOF + +# 6. Create source typescript file +mkdir src +cat > src/index.ts << EOF +console.log("Successfully loaded") +EOF + +# 7. Add build and serve commands to package.json +cat > temp.json << EOF +{ + "scripts": { + "build": "rspack build", + "serve": "rspack serve" + } +} +EOF +merge-json package.json temp.json +rm temp.json + +# 8. Build and run basic example without any BokehJS +# npm install +# npm run build +# npm run serve + +# 9. Add BokehJS dependency +npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz + +# 10. Replace src/index.ts with code to create BokehJS plot +cat > src/index.ts << EOF +import * as Bokeh from "@bokeh/bokehjs"; + +console.info("BokehJS version:", Bokeh.version); + +function create_bokehjs_plot(target_id: string) { + 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); + + const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"}); + Bokeh.Plotting.show(column, target_id); +} + +create_bokehjs_plot("#target"); +EOF + +# 11. Rebuild and serve +npm install +npm run build +#npm run serve diff --git a/typescript/vanilla_rspack/README.md b/typescript/vanilla_rspack/README.md new file mode 100644 index 0000000..3fa7e2a --- /dev/null +++ b/typescript/vanilla_rspack/README.md @@ -0,0 +1,150 @@ + +# Vanilla (no framework) rspack typescript example + +This is almost identical to the vanilla webpack example, as `rspack` is designed to be a drop-in +replacement for `webpack`. + +1. Create initial `package.json` (`npm` project settings) + + ```bash + npm init --yes + ``` + +2. Install dev dependencies + + ```bash + npm install --save-dev typescript @rspack/core @rspack/cli ts-node ts-loader + ``` + +3. Create typescript configuration `tsconfig.json` containing: + + ```json + { + "compilerOptions": { + "baseUrl": ".", + "esModuleInterop": true, + "moduleResolution": "node", + "outDir": "./dist", + "rootDir": "./src", + "target": "ES2022" + }, + "include": ["src"] + } + ``` + +4. Create webpack configuration `rspack.config.ts` containing: + + ```typescript + import path from 'path'; + import { Configuration } from '@rspack/cli'; + + const config: Configuration = { + entry: './src/index.ts', + mode: 'development', + module: { + rules: [ + { test: /\.ts/, use: "ts-loader", exclude: /node_modules/ } + ], + }, + output: { filename: 'bundle.js' }, + devServer: { + static: { + directory: path.join(__dirname, 'assets'), + }, + port: 4500, + }, + }; + + export default config; + ``` + +5. Create HTML file `assets/index.html` containing: + + ```html + + + + BokehJS example: typescript vanilla rspack + + + +
+ + + ``` + +6. Create source typescript file `src/index.ts` containing: + + ```ts + console.log("Successfully loaded") + ``` + +7. Add build and serve commands to the `scripts` section of `package.json`: + + ```json + "scripts": { + "build": "rspack build", + "serve": "rspack serve" + } + ``` + +8. Build and run basic example without any BokehJS + + ```bash + npm install + npm run build + npm run serve + ``` + + In a web browser navigate to http://localhost:4500/ + +9. Add BokehJS dependency to the 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.7.0-dev.5.tgz + ``` + +10. Remove contents of `src/index.ts` and replace with code to create BokehJS plot: + + ```typescript + import * as Bokeh from "@bokeh/bokehjs"; + + console.info("BokehJS version:", Bokeh.version); + + function create_bokehjs_plot(target_id: string) { + 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); + + const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"}); + Bokeh.Plotting.show(column, target_id); + } + + create_bokehjs_plot("#target"); + ``` + +11. Rebuild and serve + + ```bash + npm install + npm run build + #npm run serve + ``` + + In a web browser navigate to http://localhost:4500/