Skip to content

Commit 5d77454

Browse files
ianthomas23ianthomas23
authored
Add vanilla rspack example (#26)
1 parent 91b9659 commit 5d77454

File tree

4 files changed

+377
-75
lines changed

4 files changed

+377
-75
lines changed

‎ci/prepare_playwright.sh

+3-75
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,8 @@
11
#!/usr/bin/env bash
22
#
3-
# Prepare for playwright tests in a single example directory.
4-
# Eventually need to look through all example directories.
3+
# Prepare and run playwright tests in all example directories.
54

65
set -eux
76

8-
export TYPE=typescript
9-
export EXAMPLE=vanilla_webpack
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 and build example code in temporary directory
18-
cd $TYPE && bash ./create_$EXAMPLE.sh && cd ..
19-
20-
# 2. Create *-test directory
21-
mkdir temp/$TYPE/$EXAMPLE-test
22-
cd temp/$TYPE/$EXAMPLE-test
23-
24-
# 3. Create initial package.json
25-
npm init --yes
26-
27-
# 4. Add dev dependencies
28-
npm install --save-dev "@playwright/test"
29-
npm install --save-dev ../$EXAMPLE
30-
31-
# 5. Create playwright.config.ts
32-
cat > playwright.config.ts << EOF
33-
import { defineConfig, devices } from '@playwright/test';
34-
35-
export default defineConfig({
36-
testDir: './tests',
37-
fullyParallel: true,
38-
forbidOnly: !!process.env.CI,
39-
retries: process.env.CI ? 2 : 0,
40-
workers: process.env.CI ? 1 : undefined,
41-
reporter: 'html',
42-
use: {
43-
baseURL: 'http://localhost:4500',
44-
trace: 'on-first-retry',
45-
},
46-
projects: [
47-
{
48-
name: 'chromium',
49-
use: { ...devices['Desktop Chrome'] },
50-
}
51-
],
52-
webServer: {
53-
command: 'npm run serve',
54-
url: 'http://localhost:4500',
55-
reuseExistingServer: !process.env.CI
56-
}
57-
});
58-
EOF
59-
60-
# 4. Add test commands to package.json
61-
cat > temp.json << EOF
62-
{
63-
"scripts": {
64-
"serve": "npm explore $EXAMPLE -- npm run serve",
65-
"test": "playwright test",
66-
"test:ui": "playwright test --ui"
67-
}
68-
}
69-
EOF
70-
merge-json package.json temp.json
71-
rm temp.json
72-
73-
# 5. Copy tests into temp example directory
74-
cp -r ../../../tests .
75-
76-
# 6. Install playwright browser
77-
npx playwright install chromium
78-
79-
# 7. Run tests
80-
npm run test
7+
./single_example.sh typescript vanilla_rspack
8+
./single_example.sh typescript vanilla_webpack

‎ci/single_example.sh

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
#!/usr/bin/env bash
2+
#
3+
# Prepare and run playwright tests in a single example directory.
4+
5+
set -eux
6+
7+
if [ "$#" -ne 2 ]; then
8+
echo "Usage: $0 <type> <example>"
9+
exit 1
10+
fi
11+
12+
export TYPE=$1
13+
export EXAMPLE=$2
14+
15+
function merge-json() {
16+
# merge the second json file into the first.
17+
TEMP_FILE=$(mktemp)
18+
jq '. * input' $1 $2 > TEMP_FILE && mv TEMP_FILE $1
19+
}
20+
21+
# 1. Create and build example code in temporary directory
22+
cd $TYPE && bash ./create_$EXAMPLE.sh && cd ..
23+
24+
# 2. Create *-test directory
25+
mkdir temp/$TYPE/$EXAMPLE-test
26+
cd temp/$TYPE/$EXAMPLE-test
27+
28+
# 3. Create initial package.json
29+
npm init --yes
30+
31+
# 4. Add dev dependencies
32+
npm install --save-dev "@playwright/test"
33+
npm install --save-dev ../$EXAMPLE
34+
35+
# 5. Create playwright.config.ts
36+
cat > playwright.config.ts << EOF
37+
import { defineConfig, devices } from '@playwright/test';
38+
39+
export default defineConfig({
40+
testDir: './tests',
41+
fullyParallel: true,
42+
forbidOnly: !!process.env.CI,
43+
retries: process.env.CI ? 2 : 0,
44+
workers: process.env.CI ? 1 : undefined,
45+
reporter: 'html',
46+
use: {
47+
baseURL: 'http://localhost:4500',
48+
trace: 'on-first-retry',
49+
},
50+
projects: [
51+
{
52+
name: 'chromium',
53+
use: { ...devices['Desktop Chrome'] },
54+
}
55+
],
56+
webServer: {
57+
command: 'npm run serve',
58+
url: 'http://localhost:4500',
59+
reuseExistingServer: !process.env.CI
60+
}
61+
});
62+
EOF
63+
64+
# 4. Add test commands to package.json
65+
cat > temp.json << EOF
66+
{
67+
"scripts": {
68+
"serve": "npm explore $EXAMPLE -- npm run serve",
69+
"test": "playwright test",
70+
"test:ui": "playwright test --ui"
71+
}
72+
}
73+
EOF
74+
merge-json package.json temp.json
75+
rm temp.json
76+
77+
# 5. Copy tests into temp example directory
78+
cp -r ../../../tests .
79+
80+
# 6. Install playwright browser
81+
npx playwright install chromium
82+
83+
# 7. Run tests
84+
npm run test

‎ci/typescript/create_vanilla_rspack.sh

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
#!/usr/bin/env bash
2+
3+
set -eux
4+
5+
export OUTPUT_DIRECTORY=../temp/typescript/vanilla_rspack
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 initial package.json (npm project settings)
18+
npm init --yes
19+
20+
# 2. Install dev dependencies
21+
npm install --save-dev typescript @rspack/core @rspack/cli ts-node ts-loader
22+
23+
# 3. Create typescript configuration tsconfig.json
24+
cat > tsconfig.json << EOF
25+
{
26+
"compilerOptions": {
27+
"baseUrl": ".",
28+
"esModuleInterop": true,
29+
"moduleResolution": "node",
30+
"outDir": "./dist",
31+
"rootDir": "./src",
32+
"target": "ES2022"
33+
},
34+
"include": ["src"]
35+
}
36+
EOF
37+
38+
# 4. Create rspack configuration rspack.config.ts
39+
cat > rspack.config.ts << EOF
40+
import path from 'path';
41+
import { Configuration } from '@rspack/cli';
42+
43+
const config: Configuration = {
44+
entry: './src/index.ts',
45+
mode: 'development',
46+
module: {
47+
rules: [
48+
{ test: /\.ts/, use: "ts-loader", exclude: /node_modules/ }
49+
],
50+
},
51+
output: { filename: 'bundle.js' },
52+
devServer: {
53+
static: {
54+
directory: path.join(__dirname, 'assets'),
55+
},
56+
port: 4500,
57+
},
58+
};
59+
60+
export default config;
61+
EOF
62+
63+
# 5. Create HTML file
64+
mkdir assets
65+
cat > assets/index.html << EOF
66+
<!DOCTYPE html>
67+
<html>
68+
<head>
69+
<title>BokehJS example: typescript vanilla rspack</title>
70+
<script src="bundle.js"></script>
71+
</head>
72+
<body>
73+
<div id="target"></div>
74+
</body>
75+
</html>
76+
EOF
77+
78+
# 6. Create source typescript file
79+
mkdir src
80+
cat > src/index.ts << EOF
81+
console.log("Successfully loaded")
82+
EOF
83+
84+
# 7. Add build and serve commands to package.json
85+
cat > temp.json << EOF
86+
{
87+
"scripts": {
88+
"build": "rspack build",
89+
"serve": "rspack serve"
90+
}
91+
}
92+
EOF
93+
merge-json package.json temp.json
94+
rm temp.json
95+
96+
# 8. Build and run basic example without any BokehJS
97+
# npm install
98+
# npm run build
99+
# npm run serve
100+
101+
# 9. Add BokehJS dependency
102+
npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz
103+
104+
# 10. Replace src/index.ts with code to create BokehJS plot
105+
cat > src/index.ts << EOF
106+
import * as Bokeh from "@bokeh/bokehjs";
107+
108+
console.info("BokehJS version:", Bokeh.version);
109+
110+
function create_bokehjs_plot(target_id: string) {
111+
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
112+
113+
const plot = Bokeh.Plotting.figure({
114+
title: "Example BokehJS plot", height: 500, width: 500,
115+
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
116+
});
117+
118+
plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
119+
120+
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
121+
function button_callback() {
122+
const data = source.data as any;
123+
data.x.push(Math.random());
124+
data.y.push(Math.random());
125+
data.size.push(10 + Math.random()*30);
126+
source.change.emit();
127+
}
128+
button.on_click(button_callback);
129+
130+
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
131+
Bokeh.Plotting.show(column, target_id);
132+
}
133+
134+
create_bokehjs_plot("#target");
135+
EOF
136+
137+
# 11. Rebuild and serve
138+
npm install
139+
npm run build
140+
#npm run serve

0 commit comments

Comments
 (0)