Skip to content

Commit fee3ef7

Browse files
cyokodogcyokodog
committed
第１回デモ
1 parent 3381203 commit fee3ef7

33 files changed

+1179
-0
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
*/dev/dist
3+
*/public/scripts/*.css
4+

‎01/.node-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
20.13.1

‎01/build/commonConfig.mjs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const commonConfig = {
2+
logLevel: 'info',
3+
entryPoints: {
4+
dom: './src/apps/domApp/index.ts',
5+
jsx: './src/apps/jsxApp/index.tsx',
6+
jsxComponent: './src/apps/jsxComponentApp/index.tsx',
7+
},
8+
bundle: true,
9+
platform: 'browser',
10+
};

‎01/build/config.cjs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const cssModulesPlugin = require('esbuild-css-modules-plugin');
2+
3+
module.exports = {
4+
logLevel: 'info',
5+
entryPoints: {
6+
dom: './src/apps/domApp/index.tsx',
7+
// hello: './src/apps/helloApp/index.tsx',
8+
// dialog: './src/apps/dialogApp/index.tsx',
9+
// counter: './src/apps/counterApp/index.tsx',
10+
},
11+
bundle: true,
12+
outdir: 'public/scripts',
13+
platform: 'browser',
14+
metafile: true,
15+
plugins: [
16+
cssModulesPlugin({
17+
localsConvention: 'camelCase',
18+
inject: true,
19+
}),
20+
],
21+
};

‎01/build/dev.mjs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import esbuild from 'esbuild';
2+
import cssModulesPlugin from 'esbuild-css-modules-plugin';
3+
import { commonConfig } from './commonConfig.mjs';
4+
5+
const main = async () => {
6+
try {
7+
const ctx = await esbuild.context({
8+
...commonConfig,
9+
outdir: 'dev/dist',
10+
sourcemap: true,
11+
plugins: [
12+
cssModulesPlugin({
13+
localsConvention: 'camelCase',
14+
}),
15+
],
16+
});
17+
await ctx.watch();
18+
await ctx.serve({ servedir: './dev' });
19+
} catch (e) {
20+
console.error(e);
21+
process.exit(1);
22+
}
23+
};
24+
main();

‎01/build/prod.cjs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const esbuild = require('esbuild');
2+
const config = require('./config.cjs');
3+
4+
const main = async () => {
5+
try {
6+
await esbuild.build({
7+
...config,
8+
minify: true,
9+
sourcemap: 'linked',
10+
});
11+
} catch (e) {
12+
console.error(e);
13+
process.exit(1);
14+
}
15+
};
16+
main();

‎01/build/prod.mjs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import esbuild from 'esbuild';
2+
import cssModulesPlugin from 'esbuild-css-modules-plugin';
3+
import { commonConfig } from './commonConfig.mjs';
4+
5+
const main = async () => {
6+
try {
7+
await esbuild.build({
8+
...commonConfig,
9+
outdir: 'public/scripts',
10+
minify: true,
11+
metafile: true,
12+
plugins: [
13+
cssModulesPlugin({
14+
localsConvention: 'camelCase',
15+
inject: true,
16+
}),
17+
],
18+
});
19+
} catch (e) {
20+
console.error(e);
21+
process.exit(1);
22+
}
23+
};
24+
main();

‎01/dev/dom.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>DOM Demo</title>
7+
<style>
8+
.counter-widget {
9+
margin: 30px;
10+
padding: 20px;
11+
text-align: center;
12+
border: solid 1px silver;
13+
}
14+
.counter-widget button {
15+
background-color: #007bff;
16+
border: none;
17+
color: white;
18+
padding: 10px 20px;
19+
margin: 5px;
20+
border-radius: 5px;
21+
cursor: pointer;
22+
font-size: 30px;
23+
min-width: 100px;
24+
}
25+
.counter-widget button:focus {
26+
outline: thick double #32a1ce;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="counterWidget"></div>
32+
<script src="dist/dom.js"></script>
33+
</body>
34+
</html>

‎01/dev/jsx.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>JSX Demo</title>
7+
<style>
8+
.counter-widget {
9+
margin: 30px;
10+
padding: 20px;
11+
text-align: center;
12+
border: solid 1px silver;
13+
}
14+
.counter-widget button {
15+
background-color: #007bff;
16+
border: none;
17+
color: white;
18+
padding: 10px 20px;
19+
margin: 5px;
20+
border-radius: 5px;
21+
cursor: pointer;
22+
font-size: 30px;
23+
min-width: 100px;
24+
}
25+
.counter-widget button:focus {
26+
outline: thick double #32a1ce;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="counterWidget"></div>
32+
<script src="dist/jsx.js"></script>
33+
</body>
34+
</html>

‎01/dev/jsxComponent.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>JSX Component Demo</title>
7+
<link rel="stylesheet" href="dist/jsxComponent.css" />
8+
</head>
9+
<body>
10+
<div id="counterWidget"></div>
11+
<script src="dist/jsxComponent.js"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)