html-component-engine-example 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/about.html +45 -0
- package/dist/app.css +0 -0
- package/dist/assets/styles/styles.css +87 -0
- package/dist/index.html +66 -0
- package/package.json +14 -0
- package/src/about.html +27 -0
- package/src/assets/styles/styles.css +87 -0
- package/src/components/Card.html +8 -0
- package/src/components/Footer.html +3 -0
- package/src/components/Header.html +7 -0
- package/src/components/main/Button.html +2 -0
- package/src/index.html +40 -0
- package/vite.config.js +26 -0
package/dist/about.html
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>About - My Website</title>
|
|
8
|
+
<link rel="stylesheet" href="./assets/styles/styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<header>
|
|
13
|
+
<h1>My Website</h1>
|
|
14
|
+
<nav>
|
|
15
|
+
<a href="/">Home</a>
|
|
16
|
+
<a href="/about.html">About</a>
|
|
17
|
+
</nav>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
20
|
+
<main>
|
|
21
|
+
<h2>About Usww</h2>
|
|
22
|
+
<p>This is the about page demonstrating component reuse.</p>
|
|
23
|
+
|
|
24
|
+
<div class="card">
|
|
25
|
+
<div class="card-header">
|
|
26
|
+
<h4>Our Mission</h4>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="card-body">
|
|
29
|
+
<p>We aim to make HTML component development simple and lightweight.</p>
|
|
30
|
+
<p>No JavaScript frameworks needed - just pure HTML!</p>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
<!-- variants: primary=primary-btn, secondary=secondary-btn -->
|
|
36
|
+
<button class=" secondary-btn">Go Back</button>
|
|
37
|
+
|
|
38
|
+
</main>
|
|
39
|
+
<footer>
|
|
40
|
+
<p>© 2025 My Website. All rights reserved.</p>
|
|
41
|
+
</footer>
|
|
42
|
+
|
|
43
|
+
</body>
|
|
44
|
+
|
|
45
|
+
</html>
|
package/dist/app.css
ADDED
|
File without changes
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: Arial, sans-serif;
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
line-height: 1.6;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
header {
|
|
9
|
+
background-color: #333;
|
|
10
|
+
color: white;
|
|
11
|
+
padding: 1rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
nav a {
|
|
15
|
+
color: white;
|
|
16
|
+
margin-right: 1rem;
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
main {
|
|
21
|
+
padding: 2rem;
|
|
22
|
+
max-width: 1200px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Card component styles */
|
|
27
|
+
.card {
|
|
28
|
+
background: white;
|
|
29
|
+
border: 1px solid #ddd;
|
|
30
|
+
border-radius: 8px;
|
|
31
|
+
margin: 1rem 0;
|
|
32
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card-header {
|
|
36
|
+
background: #f5f5f5;
|
|
37
|
+
padding: 1rem;
|
|
38
|
+
border-bottom: 1px solid #ddd;
|
|
39
|
+
border-radius: 8px 8px 0 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.card-header h4 {
|
|
43
|
+
margin: 0;
|
|
44
|
+
color: #333;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.card-body {
|
|
48
|
+
padding: 1rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.card-body p:last-child {
|
|
52
|
+
margin-bottom: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Button styles */
|
|
56
|
+
.primary-btn {
|
|
57
|
+
background-color: #007bff;
|
|
58
|
+
color: white;
|
|
59
|
+
border: none;
|
|
60
|
+
padding: 0.5rem 1rem;
|
|
61
|
+
border-radius: 0.25rem;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.primary-btn:hover {
|
|
66
|
+
background-color: #0056b3;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.secondary-btn {
|
|
70
|
+
background-color: #6c757d;
|
|
71
|
+
color: white;
|
|
72
|
+
border: none;
|
|
73
|
+
padding: 0.5rem 1rem;
|
|
74
|
+
border-radius: 0.25rem;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.secondary-btn:hover {
|
|
79
|
+
background-color: #545b62;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
footer {
|
|
83
|
+
background-color: #333;
|
|
84
|
+
color: white;
|
|
85
|
+
text-align: center;
|
|
86
|
+
padding: 1rem;
|
|
87
|
+
}
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>My Website</title>
|
|
8
|
+
<link rel="stylesheet" href="./assets/styles/styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<header>
|
|
13
|
+
<h1>My Website</h1>
|
|
14
|
+
<nav>
|
|
15
|
+
<a href="/">Home</a>
|
|
16
|
+
<a href="/about.html">About</a>
|
|
17
|
+
</nav>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
20
|
+
<main>
|
|
21
|
+
<h2>Welcome to My Websitew</h2>
|
|
22
|
+
<p>This is an example of using HTML component components.</p>
|
|
23
|
+
|
|
24
|
+
<!-- Example of component with children (slot) -->
|
|
25
|
+
<div class="card">
|
|
26
|
+
<div class="card-header">
|
|
27
|
+
<h4>Featured Content</h4>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="card-body">
|
|
30
|
+
<h3>Hello World!</h3>
|
|
31
|
+
<p>This content is passed as children to the Card component.</p>
|
|
32
|
+
<!-- variants: primary=primary-btn, secondary=secondary-btn -->
|
|
33
|
+
<button class=" primary-btn">Learn More</button>
|
|
34
|
+
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<!-- Another card example -->
|
|
40
|
+
<div class="card">
|
|
41
|
+
<div class="card-header">
|
|
42
|
+
<h4>Another Card</h4>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="card-body">
|
|
45
|
+
<p>Cards support any HTML content inside them.</p>
|
|
46
|
+
<ul>
|
|
47
|
+
<li>Feature 1</li>
|
|
48
|
+
<li>Feature 2</li>
|
|
49
|
+
<li>Feature 3</li>
|
|
50
|
+
</ul>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<!-- Self-closing component -->
|
|
56
|
+
<!-- variants: primary=primary-btn, secondary=secondary-btn -->
|
|
57
|
+
<button class=" secondary-btn">Click Me</button>
|
|
58
|
+
|
|
59
|
+
</main>
|
|
60
|
+
<footer>
|
|
61
|
+
<p>© 2025 My Website. All rights reserved.</p>
|
|
62
|
+
</footer>
|
|
63
|
+
|
|
64
|
+
</body>
|
|
65
|
+
|
|
66
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "html-component-engine-example",
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite",
|
|
7
|
+
"build": "vite build",
|
|
8
|
+
"preview": "vite preview"
|
|
9
|
+
},
|
|
10
|
+
"devDependencies": {
|
|
11
|
+
"vite": "^7.0.0",
|
|
12
|
+
"html-component-engine": "file:.."
|
|
13
|
+
}
|
|
14
|
+
}
|
package/src/about.html
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>About - My Website</title>
|
|
8
|
+
<link rel="stylesheet" href="./assets/styles/styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<Component src="Header" />
|
|
13
|
+
<main>
|
|
14
|
+
<h2>About Usww</h2>
|
|
15
|
+
<p>This is the about page demonstrating component reuse.</p>
|
|
16
|
+
|
|
17
|
+
<Component name="Card" title="Our Mission">
|
|
18
|
+
<p>We aim to make HTML component development simple and lightweight.</p>
|
|
19
|
+
<p>No JavaScript frameworks needed - just pure HTML!</p>
|
|
20
|
+
</Component>
|
|
21
|
+
|
|
22
|
+
<Component src="main/Button" text="Go Back" variant="secondary" />
|
|
23
|
+
</main>
|
|
24
|
+
<Component src="Footer" />
|
|
25
|
+
</body>
|
|
26
|
+
|
|
27
|
+
</html>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: Arial, sans-serif;
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
line-height: 1.6;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
header {
|
|
9
|
+
background-color: #333;
|
|
10
|
+
color: white;
|
|
11
|
+
padding: 1rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
nav a {
|
|
15
|
+
color: white;
|
|
16
|
+
margin-right: 1rem;
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
main {
|
|
21
|
+
padding: 2rem;
|
|
22
|
+
max-width: 1200px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Card component styles */
|
|
27
|
+
.card {
|
|
28
|
+
background: white;
|
|
29
|
+
border: 1px solid #ddd;
|
|
30
|
+
border-radius: 8px;
|
|
31
|
+
margin: 1rem 0;
|
|
32
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card-header {
|
|
36
|
+
background: #f5f5f5;
|
|
37
|
+
padding: 1rem;
|
|
38
|
+
border-bottom: 1px solid #ddd;
|
|
39
|
+
border-radius: 8px 8px 0 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.card-header h4 {
|
|
43
|
+
margin: 0;
|
|
44
|
+
color: #333;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.card-body {
|
|
48
|
+
padding: 1rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.card-body p:last-child {
|
|
52
|
+
margin-bottom: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Button styles */
|
|
56
|
+
.primary-btn {
|
|
57
|
+
background-color: #007bff;
|
|
58
|
+
color: white;
|
|
59
|
+
border: none;
|
|
60
|
+
padding: 0.5rem 1rem;
|
|
61
|
+
border-radius: 0.25rem;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.primary-btn:hover {
|
|
66
|
+
background-color: #0056b3;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.secondary-btn {
|
|
70
|
+
background-color: #6c757d;
|
|
71
|
+
color: white;
|
|
72
|
+
border: none;
|
|
73
|
+
padding: 0.5rem 1rem;
|
|
74
|
+
border-radius: 0.25rem;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.secondary-btn:hover {
|
|
79
|
+
background-color: #545b62;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
footer {
|
|
83
|
+
background-color: #333;
|
|
84
|
+
color: white;
|
|
85
|
+
text-align: center;
|
|
86
|
+
padding: 1rem;
|
|
87
|
+
}
|
package/src/index.html
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>My Website</title>
|
|
8
|
+
<link rel="stylesheet" href="./assets/styles/styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<Component src="Header" />
|
|
13
|
+
<main>
|
|
14
|
+
<h2>Welcome to My Websitew</h2>
|
|
15
|
+
<p>This is an example of using HTML component components.</p>
|
|
16
|
+
|
|
17
|
+
<!-- Example of component with children (slot) -->
|
|
18
|
+
<Component name="Card" title="Featured Content">
|
|
19
|
+
<h3>Hello World!</h3>
|
|
20
|
+
<p>This content is passed as children to the Card component.</p>
|
|
21
|
+
<Component src="main/Button" text="Learn More" variant="primary" />
|
|
22
|
+
</Component>
|
|
23
|
+
|
|
24
|
+
<!-- Another card example -->
|
|
25
|
+
<Component name="Card" title="Another Card">
|
|
26
|
+
<p>Cards support any HTML content inside them.</p>
|
|
27
|
+
<ul>
|
|
28
|
+
<li>Feature 1</li>
|
|
29
|
+
<li>Feature 2</li>
|
|
30
|
+
<li>Feature 3</li>
|
|
31
|
+
</ul>
|
|
32
|
+
</Component>
|
|
33
|
+
|
|
34
|
+
<!-- Self-closing component -->
|
|
35
|
+
<Component src="main/Button" text="Click Me" variant="secondary" />
|
|
36
|
+
</main>
|
|
37
|
+
<Component src="Footer" />
|
|
38
|
+
</body>
|
|
39
|
+
|
|
40
|
+
</html>
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import htmlComponentEngine from 'html-component-engine';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
plugins: [
|
|
5
|
+
htmlComponentEngine({
|
|
6
|
+
srcDir: 'src', // HTML files directly in src/
|
|
7
|
+
componentsDir: 'components', // src/components/
|
|
8
|
+
assetsDir: 'assets', // src/assets/
|
|
9
|
+
})
|
|
10
|
+
],
|
|
11
|
+
publicDir: 'src', // Serve src/assets as /assets during dev
|
|
12
|
+
build: {
|
|
13
|
+
outDir: 'dist',
|
|
14
|
+
emptyOutDir: true,
|
|
15
|
+
},
|
|
16
|
+
// Ensure linked package changes are picked up immediately
|
|
17
|
+
optimizeDeps: {
|
|
18
|
+
exclude: ['html-component-engine'],
|
|
19
|
+
},
|
|
20
|
+
server: {
|
|
21
|
+
watch: {
|
|
22
|
+
// Watch the parent engine directory for changes
|
|
23
|
+
ignored: ['!**/node_modules/html-component-engine/**'],
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
};
|