Skip to content

Commit c43982d

Browse files
lukeclaude
luke
and
claude
committed
Implement HTML Package Bundle core functionality and tests
- Create basic structure & environment detection (Phase 1) - Implement self-modification system (Phase 2) - Add source code management and editor (Phase 3) - Add comprehensive tests for all components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 93be91f commit c43982d

17 files changed

+4572
-8
lines changed

‎README.md

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,18 @@ For development with auto-reload:
3030
pnpm run dev
3131
```
3232

33+
To run tests:
34+
35+
```bash
36+
pnpm test
37+
```
38+
39+
To run tests in watch mode:
40+
41+
```bash
42+
pnpm test:watch
43+
```
44+
3345
## Implementation Plan
3446

3547
See [plan.md](./plan.md) for the detailed implementation phases and progress.
@@ -38,6 +50,24 @@ See [plan.md](./plan.md) for the detailed implementation phases and progress.
3850

3951
This project creates a self-modifying single-file HTML app that bundles JavaScript package files into one HTML file. The implementation follows a phased approach outlined in `plan.md`.
4052

53+
### Key Components:
54+
55+
- **Environment Detector**: Identifies the running context (file://, localhost, or https://)
56+
- **File System Manager**: Handles file access operations with proper permissions
57+
- **Source Bundle Manager**: Manages the bundled source files inside the HTML
58+
- **Editor**: Provides code editing capabilities for bundled files
59+
4160
## Environment Handling
4261

43-
The app handles different environments (file://, localhost, and https://) with appropriate feature support for each context.
62+
The app handles different environments (file://, localhost, and https://) with appropriate feature support for each context.
63+
64+
## Testing
65+
66+
The project includes tests for each component:
67+
68+
- Unit tests for environment detection
69+
- Unit tests for source bundle management
70+
- Unit tests for file system operations
71+
- Unit tests for editor functionality
72+
73+
Tests are written using Vitest which provides a Jest-compatible API with Vite integration.

‎index.html

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HTML Package Bundle</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
10+
max-width: 800px;
11+
margin: 0 auto;
12+
padding: 20px;
13+
line-height: 1.6;
14+
color: #333;
15+
}
16+
h1 {
17+
color: #2c3e50;
18+
border-bottom: 2px solid #eee;
19+
padding-bottom: 10px;
20+
}
21+
h2 {
22+
color: #2c3e50;
23+
margin-top: 0;
24+
}
25+
.section {
26+
margin-bottom: 30px;
27+
padding: 15px;
28+
border-left: 4px solid #4285f4;
29+
background-color: #f9f9fa;
30+
border-radius: 0 4px 4px 0;
31+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
32+
}
33+
.environment-info {
34+
padding: 10px;
35+
background-color: #e8f0fe;
36+
border-radius: 4px;
37+
margin-top: 15px;
38+
}
39+
.status {
40+
margin-top: 15px;
41+
padding: 12px;
42+
border-radius: 4px;
43+
background-color: #f5f5f5;
44+
}
45+
.success {
46+
background-color: #e6f4ea;
47+
color: #0d652d;
48+
}
49+
.error {
50+
background-color: #fdeded;
51+
color: #5f2120;
52+
}
53+
.action-btn {
54+
background-color: #4285f4;
55+
color: white;
56+
border: none;
57+
padding: 8px 16px;
58+
border-radius: 4px;
59+
font-size: 14px;
60+
cursor: pointer;
61+
margin-right: 8px;
62+
margin-top: 10px;
63+
}
64+
.action-btn:hover {
65+
background-color: #3b78e7;
66+
}
67+
.action-btn:disabled {
68+
background-color: #cccccc;
69+
cursor: not-allowed;
70+
}
71+
.bundle-controls {
72+
margin-bottom: 15px;
73+
}
74+
.bundle-content {
75+
background-color: white;
76+
padding: 15px;
77+
border-radius: 4px;
78+
border: 1px solid #eee;
79+
}
80+
.file-list {
81+
list-style-type: none;
82+
padding: 0;
83+
margin: 0;
84+
}
85+
.file-list li {
86+
padding: 8px 0;
87+
border-bottom: 1px solid #f0f0f0;
88+
}
89+
.file-list li:last-child {
90+
border-bottom: none;
91+
}
92+
.file-name {
93+
font-weight: bold;
94+
color: #2c3e50;
95+
}
96+
.file-info {
97+
color: #666;
98+
font-size: 0.9em;
99+
}
100+
.validation-result {
101+
margin-top: 20px;
102+
}
103+
.validation-result h3 {
104+
margin-top: 0;
105+
margin-bottom: 10px;
106+
font-size: 18px;
107+
}
108+
.validation-result ul {
109+
margin-top: 8px;
110+
padding-left: 20px;
111+
}
112+
.validation-result li {
113+
margin-bottom: 5px;
114+
}
115+
#save-status {
116+
margin-top: 15px;
117+
}
118+
#save-status a {
119+
color: #0366d6;
120+
text-decoration: none;
121+
}
122+
#save-status a:hover {
123+
text-decoration: underline;
124+
}
125+
/* Editor styles */
126+
#editor-container {
127+
display: none;
128+
}
129+
.editor-header {
130+
display: flex;
131+
justify-content: space-between;
132+
align-items: center;
133+
padding: 10px 0;
134+
margin-bottom: 10px;
135+
border-bottom: 1px solid #eee;
136+
}
137+
#editor-filename {
138+
font-weight: bold;
139+
font-family: monospace;
140+
color: #333;
141+
}
142+
.editor-actions {
143+
display: flex;
144+
gap: 10px;
145+
}
146+
#editor-area {
147+
border: 1px solid #ddd;
148+
border-radius: 4px;
149+
height: 400px;
150+
}
151+
/* Adjust CodeMirror styles to fit our UI */
152+
.CodeMirror {
153+
height: 100%;
154+
font-family: 'Fira Code', monospace;
155+
font-size: 14px;
156+
}
157+
.file-list li {
158+
cursor: pointer;
159+
}
160+
.file-list li:hover {
161+
background-color: #f5f5f5;
162+
}
163+
</style>
164+
</head>
165+
<body>
166+
<h1>HTML Package Bundle</h1>
167+
168+
<div class="section">
169+
<h2>Environment Detection</h2>
170+
<div id="environment-info" class="environment-info">
171+
Detecting environment...
172+
</div>
173+
</div>
174+
175+
<div class="section">
176+
<h2>File Operations</h2>
177+
<div id="file-operations">
178+
<p>File operations will be enabled based on detected environment.</p>
179+
</div>
180+
</div>
181+
182+
<div class="section">
183+
<h2>Source Bundle</h2>
184+
<div id="source-bundle">
185+
<p>Source code will be bundled here.</p>
186+
</div>
187+
</div>
188+
189+
<div class="section" id="editor-container" style="display: none;">
190+
<h2>File Editor</h2>
191+
<div id="code-editor"></div>
192+
</div>
193+
194+
<!-- This element will contain the bundled source files as JSON -->
195+
<script id="source-bundle-data" type="application/json" style="display:none"></script>
196+
197+
<script type="module" src="/src/main.ts"></script>
198+
</body>
199+
</html>

‎package.json

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,25 @@
55
"main": "index.js",
66
"scripts": {
77
"start": "node index.js",
8-
"dev": "nodemon index.js",
9-
"build": "tsc",
10-
"typecheck": "tsc --noEmit"
8+
"dev": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview",
11+
"typecheck": "tsc --noEmit",
12+
"test": "vitest run",
13+
"test:watch": "vitest"
1114
},
1215
"devDependencies": {
1316
"@types/node": "^20.11.0",
17+
"@types/codemirror": "^5.60.12",
1418
"nodemon": "^3.0.2",
15-
"typescript": "^5.3.3"
16-
}
17-
}
19+
"typescript": "^5.3.3",
20+
"vite": "^6.2.3",
21+
"vitest": "^1.3.1",
22+
"jsdom": "^24.0.0",
23+
"happy-dom": "^13.6.2"
24+
},
25+
"dependencies": {
26+
"codemirror": "^5.65.16"
27+
},
28+
"packageManager": "[email protected]+sha512.f6d863130973207cb7a336d6b439a242a26ac8068077df530d6a86069419853dc1ffe64029ec594a9c505a3a410d19643c870aba6776330f5cfddcf10a9c1617"
29+
}

0 commit comments

Comments
 (0)