Skip to content

Commit 62c12ea

Browse files
ioucyfioucyf
committed
utilize deno bundle + add watcher to build and serve files on change
1 parent 0f210de commit 62c12ea

25 files changed

+607
-287
lines changed

‎.github/temp/pages.with.build.tools.yml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ permissions:
1010
id-token: write
1111

1212
concurrency:
13-
group: 'pages'
13+
group: "pages"
1414
cancel-in-progress: true
1515

1616
jobs:
@@ -63,11 +63,10 @@ jobs:
6363
run: |
6464
find build -type f -name '*.css' -exec postcss {} --replace \;
6565
66-
6766
- name: Upload build artifact
6867
uses: actions/upload-pages-artifact@v3
6968
with:
70-
path: './build'
69+
path: "./build"
7170

7271
- name: Deploy to GitHub Pages
7372
uses: actions/deploy-pages@v4

‎.github/workflows/pages.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ permissions:
1010
id-token: write
1111

1212
concurrency:
13-
group: 'pages'
13+
group: "pages"
1414
cancel-in-progress: true
1515

1616
jobs:
@@ -24,7 +24,7 @@ jobs:
2424
- name: Setup Deno
2525
uses: denoland/setup-deno@v1
2626
with:
27-
deno-version: v1.x
27+
deno-version: "x"
2828

2929
- name: Cache Deno dependencies
3030
run: deno cache scripts/build.js
@@ -38,7 +38,7 @@ jobs:
3838
- name: Upload build artifact
3939
uses: actions/upload-pages-artifact@v3
4040
with:
41-
path: './dist'
41+
path: "./dist"
4242

4343
- name: Deploy to GitHub Pages
4444
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Mini print studio: https://prints.byy.design
1+
Mini print studio: https://prints.byy.design

‎deno.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
{
22
"tasks": {
3-
"dev": "deno run -A --watch main.js",
3+
"dev": "deno run -A scripts/dev.js",
44
"build": "deno run -A scripts/build.js",
5-
"start": "deno run -A server.js"
5+
"start": "deno run -A server.js",
6+
"fmt": "deno fmt"
67
},
78
"imports": {
9+
"@std/async": "https://deno.land/std@0.224.0/async/mod.ts",
10+
"@std/cli": "https://deno.land/std@0.224.0/cli/mod.ts",
811
"@std/fs": "https://deno.land/std@0.177.0/fs/mod.ts",
912
"@std/path": "https://deno.land/std@0.177.0/path/mod.ts",
1013
"hono": "npm:hono@^4.11.1",

‎deno.lock‎

Lines changed: 11 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎main.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { Hono } from 'hono';
2-
import { serveStatic } from 'hono/deno';
1+
import { Hono } from "hono";
2+
import { serveStatic } from "hono/deno";
33

4-
5-
const app = new Hono({strict: 'false'});
4+
const app = new Hono({ strict: "false" });
65

76
const ROOT = new URL(import.meta.url);
87

9-
app.get('/', serveStatic({root:'./src/', path: 'index.html'}));
10-
app.use('/*', serveStatic({root: './src/', precompressed: true}))
11-
Deno.serve({port: 20284}, app.fetch);
12-
8+
app.get("/", serveStatic({ root: "./src/", path: "index.html" }));
9+
app.use("/*", serveStatic({ root: "./src/", precompressed: true }));
10+
Deno.serve({ port: 20284 }, app.fetch);

‎postcss.config.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export default {
22
plugins: {
3-
'postcss-import': {},
4-
'postcss-preset-env': {},
5-
'autoprefixer': {},
6-
'cssnano': {}
7-
}
8-
};
3+
"postcss-import": {},
4+
"postcss-preset-env": {},
5+
"autoprefixer": {},
6+
"cssnano": {},
7+
},
8+
};

‎public/assets/browserconfig.xml‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<browserconfig>
3-
<msapplication>
4-
<tile>
5-
<square70x70logo src="/assets/mstile-70x70.png"/>
6-
<square150x150logo src="/assets/mstile-150x150.png"/>
7-
<wide310x150logo src="/assets/mstile-310x150.png"/>
8-
<square310x310logo src="/assets/mstile-310x310.png"/>
9-
<TileColor>#000000</TileColor>
10-
11-
</tile>
12-
13-
</msapplication>
14-
3+
<msapplication>
4+
<tile>
5+
<square70x70logo src="/assets/mstile-70x70.png" />
6+
<square150x150logo src="/assets/mstile-150x150.png" />
7+
<wide310x150logo src="/assets/mstile-310x150.png" />
8+
<square310x310logo src="/assets/mstile-310x310.png" />
9+
<TileColor>#000000</TileColor>
10+
</tile>
11+
</msapplication>
1512
</browserconfig>

‎scripts/build.js‎

Lines changed: 109 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
1-
import { emptyDir, copy, ensureDir } from "@std/fs";
1+
import { copy, emptyDir, ensureDir } from "@std/fs";
22
import { join, resolve } from "@std/path";
3+
import { parseArgs } from "@std/cli";
34
import postcss from "postcss";
45
import postcssImport from "postcss-import";
56
import postcssPresetEnv from "postcss-preset-env";
67
import autoprefixer from "autoprefixer";
78
import cssnano from "cssnano";
89

10+
const flags = parseArgs(Deno.args, {
11+
boolean: ["dev"],
12+
});
13+
const isDev = flags.dev;
14+
915
// --- Configuration ---
1016
const ROOT_DIR = Deno.cwd();
11-
const SRC_DIR = resolve(ROOT_DIR, 'src');
12-
const PUBLIC_DIR = resolve(ROOT_DIR, 'public');
13-
const DIST_DIR = resolve(ROOT_DIR, 'dist');
14-
const SW_TEMPLATE_PATH = resolve(SRC_DIR, 'service-worker.js');
17+
const SRC_DIR = resolve(ROOT_DIR, "src");
18+
const PUBLIC_DIR = resolve(ROOT_DIR, "public");
19+
const DIST_DIR = resolve(ROOT_DIR, "dist");
20+
const SW_TEMPLATE_PATH = resolve(
21+
SRC_DIR,
22+
isDev ? "service-worker.dev.js" : "service-worker.js",
23+
);
1524

1625
async function getGitSha() {
1726
try {
@@ -24,93 +33,140 @@ async function getGitSha() {
2433
return new TextDecoder().decode(stdout).trim();
2534
}
2635
} catch (err) {
27-
console.warn('Could not get git sha', err);
28-
return 'dev';
36+
console.warn("Could not get git sha", err);
37+
return "dev";
2938
}
3039
}
3140

3241
async function getAssetFiles(dir) {
33-
const assets = [];
34-
for await (const entry of Deno.readDir(dir)) {
35-
const fullPath = join(dir, entry.name);
36-
if (entry.isDirectory) {
37-
assets.push(...await getAssetFiles(fullPath));
38-
}
39-
else {
40-
assets.push(fullPath);
41-
}
42+
const assets = [];
43+
for await (const entry of Deno.readDir(dir)) {
44+
const fullPath = join(dir, entry.name);
45+
if (entry.isDirectory) {
46+
assets.push(...await getAssetFiles(fullPath));
47+
} else {
48+
assets.push(fullPath);
4249
}
43-
return assets.map(asset => asset.replace(DIST_DIR, '').replace(/\\/g, '/'));
50+
}
51+
return assets.map((asset) => asset.replace(DIST_DIR, "").replace(/\\/g, "/"));
4452
}
4553

4654
async function processCss() {
47-
console.log('🖌️ Processing CSS...');
48-
const cssSrcPath = resolve(SRC_DIR, 'css', 'main.css');
49-
const cssDistPath = resolve(DIST_DIR, 'css', 'main.css');
50-
51-
const css = await Deno.readTextFile(cssSrcPath);
52-
53-
const processor = postcss([
54-
postcssImport(),
55-
postcssPresetEnv(),
56-
autoprefixer(),
57-
cssnano(),
58-
]);
59-
60-
const result = await processor.process(css, { from: cssSrcPath, to: cssDistPath });
61-
await ensureDir(resolve(DIST_DIR, 'css'));
62-
await Deno.writeTextFile(cssDistPath, result.css);
63-
console.log('✅ CSS processed successfully');
55+
console.log("🖌️ Processing CSS...");
56+
const cssSrcPath = resolve(SRC_DIR, "css", "main.css");
57+
const cssDistPath = resolve(DIST_DIR, "css", "main.css");
58+
59+
const css = await Deno.readTextFile(cssSrcPath);
60+
61+
const processor = postcss([
62+
postcssImport(),
63+
postcssPresetEnv(),
64+
autoprefixer(),
65+
cssnano(),
66+
]);
67+
68+
const result = await processor.process(css, {
69+
from: cssSrcPath,
70+
to: cssDistPath,
71+
});
72+
await ensureDir(resolve(DIST_DIR, "css"));
73+
await Deno.writeTextFile(cssDistPath, result.css);
74+
console.log("✅ CSS processed successfully");
6475
}
6576

77+
async function bundleJs() {
78+
console.log("📦 Bundling JS with deno bundle...");
79+
const command = new Deno.Command("deno", {
80+
args: [
81+
"bundle",
82+
"--unstable-raw-imports",
83+
"--outdir=dist/js",
84+
isDev ? "" : "--minify",
85+
"--platform=browser",
86+
"src/js/main.js",
87+
"src/js/sw.installer.js",
88+
"src/js/wc/card-id1.js",
89+
].filter(Boolean),
90+
});
91+
const { code, stderr } = await command.output();
92+
if (code !== 0) {
93+
console.error("Error bundling JS with deno bundle:");
94+
console.error(new TextDecoder().decode(stderr));
95+
} else {
96+
console.log("✅ JS bundled successfully");
97+
}
98+
}
6699

67-
async function build() {
68-
console.log('🚀 Starting build...');
100+
async function build(isDev = false) {
101+
const buildType = isDev ? "Development" : "Production";
102+
console.log(`🚀 Starting ${buildType} build...`);
69103

70104
// 1. Clean output directory
71105
await emptyDir(DIST_DIR);
72-
console.log('✅ Cleaned dist directory');
106+
console.log("✅ Cleaned dist directory");
73107

74-
// 2. Copy non-CSS src files and public files to dist
75-
await copy(SRC_DIR, DIST_DIR, { overwrite: true, filter: path => !path.includes('/css/') });
108+
// 2. Copy static assets
76109
await copy(PUBLIC_DIR, DIST_DIR, { overwrite: true });
77-
console.log('✅ Copied source and public files to dist');
110+
await copy(resolve(SRC_DIR, "assets"), resolve(DIST_DIR, "assets"), {
111+
overwrite: true,
112+
});
113+
await copy(resolve(SRC_DIR, "lib"), resolve(DIST_DIR, "lib"), {
114+
overwrite: true,
115+
});
116+
await copy(resolve(SRC_DIR, "index.html"), resolve(DIST_DIR, "index.html"), {
117+
overwrite: true,
118+
});
119+
await copy(
120+
resolve(SRC_DIR, "manifest.json"),
121+
resolve(DIST_DIR, "manifest.json"),
122+
{ overwrite: true },
123+
);
124+
console.log("✅ Copied static assets");
125+
126+
// 3. Process CSS and bundle JS in parallel
127+
await Promise.all([processCss(), bundleJs(isDev)]);
78128

79-
// 3. Process CSS
80-
await processCss();
81-
82129
// 4. Get git SHA for versioning
83130
const sha = await getGitSha();
84131
console.log(`✅ Git SHA: ${sha}`);
85132

86133
// 5. Collect asset paths
87134
const assetFiles = (await getAssetFiles(DIST_DIR))
88-
.filter(file => !file.endsWith('service-worker.js'));
135+
.filter((file) => !file.endsWith("service-worker.js"));
89136
console.log(`✅ Collected ${assetFiles.length} asset files`);
90137

91138
// 6. Inject SHA and assets into service worker
92-
let swContent = await Deno.readTextFile(SW_TEMPLATE_PATH);
139+
const swTemplatePath = resolve(
140+
SRC_DIR,
141+
isDev ? "service-worker.dev.js" : "service-worker.js",
142+
);
143+
let swContent = await Deno.readTextFile(swTemplatePath);
93144
swContent = swContent
94145
.replace(/__BUILD_SHA__/g, sha)
95146
.replace(/__ASSETS__/g, JSON.stringify(assetFiles, null, 2));
96147

97-
const swOutputPath = resolve(DIST_DIR, 'service-worker.js');
148+
const swOutputPath = resolve(DIST_DIR, "service-worker.js");
98149
await Deno.writeTextFile(swOutputPath, swContent);
99-
console.log('✅ Injected SHA and assets into service-worker.js');
150+
console.log("✅ Injected SHA and assets into service-worker.js");
100151

101152
// 7. Inject version into index.html
102-
const htmlPath = resolve(DIST_DIR, 'index.html');
153+
const htmlPath = resolve(DIST_DIR, "index.html");
103154
let htmlContent = await Deno.readTextFile(htmlPath);
104155
htmlContent = htmlContent.replace(/__VERSION__/g, sha);
105156
await Deno.writeTextFile(htmlPath, htmlContent);
106-
console.log('✅ Injected version into index.html');
107-
157+
console.log("✅ Injected version into index.html");
158+
108159
// 8. copy CNAME file over to the dist directory
109-
await copy(resolve(ROOT_DIR, "CNAME"), resolve(DIST_DIR, 'CNAME'));
160+
await copy(resolve(ROOT_DIR, "CNAME"), resolve(DIST_DIR, "CNAME"));
110161
console.log("✅ CNAME file copied to dist directory");
111162

163+
console.log("🎉 Build complete!");
164+
}
112165

113-
console.log('🎉 Build complete!');
166+
if (import.meta.main) {
167+
const flags = parseArgs(Deno.args, {
168+
boolean: ["dev"],
169+
});
170+
build(flags.dev);
114171
}
115172

116-
build();

0 commit comments

Comments
 (0)