frontend-hamroun 1.2.69 → 1.2.71
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/package.json +1 -1
- package/templates/go-wasm-app/README.md +38 -0
- package/templates/go-wasm-app/babel.config.js +15 -0
- package/templates/go-wasm-app/build-client.js +49 -0
- package/templates/go-wasm-app/build-wasm.js +95 -73
- package/templates/go-wasm-app/package-lock.json +6459 -0
- package/templates/go-wasm-app/package.json +9 -8
- package/templates/go-wasm-app/public/index.html +118 -3
- package/templates/go-wasm-app/public/styles.css +197 -0
- package/templates/go-wasm-app/public/wasm/example.wasm +0 -0
- package/templates/go-wasm-app/public/wasm/wasm_exec.js +561 -0
- package/templates/go-wasm-app/public/wasm/wasm_exec_node.js +39 -0
- package/templates/go-wasm-app/server.js +521 -0
- package/templates/go-wasm-app/src/App.jsx +38 -0
- package/templates/go-wasm-app/src/client.js +57 -0
- package/templates/go-wasm-app/src/components/Footer.jsx +13 -0
- package/templates/go-wasm-app/src/components/Header.jsx +19 -0
- package/templates/go-wasm-app/src/components/WasmDemo.jsx +120 -0
- package/templates/go-wasm-app/src/main.jsx +12 -0
- package/templates/go-wasm-app/src/wasm/example.go +75 -0
- package/templates/go-wasm-app/tsconfig.server.json +18 -0
- package/templates/go-wasm-app/vite.config.js +10 -4
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "go-wasm-app",
|
|
3
3
|
"version": "1.0.0",
|
|
4
|
-
"description": "WebAssembly integration with Go for Frontend Hamroun",
|
|
4
|
+
"description": "WebAssembly integration with Go for Frontend Hamroun with SSR",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "
|
|
6
|
+
"main": "server.js",
|
|
7
7
|
"scripts": {
|
|
8
|
+
"prepare": "mkdir -p public/wasm || mkdir public\\wasm",
|
|
8
9
|
"build:wasm": "node build-wasm.js",
|
|
9
|
-
"dev": "npm run build:wasm &&
|
|
10
|
-
"build": "npm run build:wasm &&
|
|
11
|
-
"
|
|
12
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
10
|
+
"dev": "npm run prepare && npm run build:wasm && node --watch server.js",
|
|
11
|
+
"build": "npm run build:wasm && mkdir -p dist && cp -r public/* dist/",
|
|
12
|
+
"start": "NODE_ENV=production node server.js"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"
|
|
15
|
+
"express": "^4.18.2",
|
|
16
|
+
"frontend-hamroun": "^1.2.70"
|
|
16
17
|
},
|
|
17
18
|
"devDependencies": {
|
|
18
|
-
"
|
|
19
|
+
"@babel/core": "^7.22.9"
|
|
19
20
|
}
|
|
20
21
|
}
|
|
@@ -4,10 +4,125 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Frontend Hamroun + Go WebAssembly</title>
|
|
7
|
-
<
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--primary-color: #0070f3;
|
|
10
|
+
--secondary-color: #0051cc;
|
|
11
|
+
--background: #f9f9f9;
|
|
12
|
+
--text-color: #333;
|
|
13
|
+
--card-background: #fff;
|
|
14
|
+
--border-color: #eaeaea;
|
|
15
|
+
--error-color: #f44336;
|
|
16
|
+
--success-color: #4caf50;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
* {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
body {
|
|
24
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
25
|
+
max-width: 800px;
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
padding: 2rem;
|
|
28
|
+
line-height: 1.6;
|
|
29
|
+
color: #333;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.app {
|
|
33
|
+
max-width: 900px;
|
|
34
|
+
margin: 0 auto;
|
|
35
|
+
padding: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
header {
|
|
39
|
+
text-align: center;
|
|
40
|
+
margin-bottom: 2rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
header h1 {
|
|
44
|
+
margin-bottom: 0.5rem;
|
|
45
|
+
color: var(--primary-color);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
header p {
|
|
49
|
+
color: #666;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.card {
|
|
53
|
+
background-color: var(--card-background);
|
|
54
|
+
border: 1px solid var(--border-color);
|
|
55
|
+
border-radius: 8px;
|
|
56
|
+
padding: 1.5rem;
|
|
57
|
+
margin-bottom: 2rem;
|
|
58
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
pre {
|
|
62
|
+
background-color: #f5f5f5;
|
|
63
|
+
padding: 1rem;
|
|
64
|
+
border-radius: 4px;
|
|
65
|
+
overflow-x: auto;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
footer {
|
|
69
|
+
margin-top: 3rem;
|
|
70
|
+
text-align: center;
|
|
71
|
+
color: #666;
|
|
72
|
+
padding: 1rem 0;
|
|
73
|
+
border-top: 1px solid var(--border-color);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.warning {
|
|
77
|
+
display: none;
|
|
78
|
+
background-color: #fff3cd;
|
|
79
|
+
border: 1px solid #ffecb5;
|
|
80
|
+
color: #856404;
|
|
81
|
+
padding: 1rem;
|
|
82
|
+
border-radius: 4px;
|
|
83
|
+
margin-bottom: 1rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
code {
|
|
87
|
+
background-color: #f5f5f5;
|
|
88
|
+
padding: 0.2rem 0.4rem;
|
|
89
|
+
border-radius: 3px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.loading {
|
|
93
|
+
text-align: center;
|
|
94
|
+
padding: 3rem 1rem;
|
|
95
|
+
color: #666;
|
|
96
|
+
}
|
|
97
|
+
</style>
|
|
98
|
+
<script src="/wasm/wasm_exec.js" defer></script>
|
|
8
99
|
</head>
|
|
9
100
|
<body>
|
|
10
|
-
<div id="root"
|
|
11
|
-
|
|
101
|
+
<div id="root">
|
|
102
|
+
<!-- Server-rendered content will be inserted here -->
|
|
103
|
+
<div class="loading">
|
|
104
|
+
<h2>Loading...</h2>
|
|
105
|
+
<p>Please wait while the server starts.</p>
|
|
106
|
+
<p>If this message persists, there might be an issue with the server.</p>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
<script type="module" src="/src/client.js"></script>
|
|
110
|
+
<script>
|
|
111
|
+
// The server should replace this entire page with server-rendered content
|
|
112
|
+
// If you're seeing this, something is wrong with the server-side rendering
|
|
113
|
+
setTimeout(() => {
|
|
114
|
+
if (document.querySelector('.loading')) {
|
|
115
|
+
document.querySelector('#root').innerHTML = `
|
|
116
|
+
<div class="warning" style="display:block; background-color: #fff3cd; border: 1px solid #ffecb5; color: #856404; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
|
|
117
|
+
<h2>Server Not Responding</h2>
|
|
118
|
+
<p>The server is not responding with the expected server-rendered content.</p>
|
|
119
|
+
<p>Please make sure the server is running properly with:</p>
|
|
120
|
+
<code>npm run dev</code>
|
|
121
|
+
<p>This static HTML file should be replaced by server-rendered content.</p>
|
|
122
|
+
</div>
|
|
123
|
+
`;
|
|
124
|
+
}
|
|
125
|
+
}, 2000);
|
|
126
|
+
</script>
|
|
12
127
|
</body>
|
|
13
128
|
</html>
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--primary-color: #0070f3;
|
|
3
|
+
--secondary-color: #0051cc;
|
|
4
|
+
--background: #f9f9f9;
|
|
5
|
+
--text-color: #333;
|
|
6
|
+
--card-background: #fff;
|
|
7
|
+
--border-color: #eaeaea;
|
|
8
|
+
--error-color: #f44336;
|
|
9
|
+
--success-color: #4caf50;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
* {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
18
|
+
background-color: var(--background);
|
|
19
|
+
color: var(--text-color);
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
line-height: 1.6;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.app {
|
|
26
|
+
max-width: 900px;
|
|
27
|
+
margin: 0 auto;
|
|
28
|
+
padding: 20px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
header {
|
|
32
|
+
text-align: center;
|
|
33
|
+
margin-bottom: 2rem;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
header h1 {
|
|
37
|
+
margin-bottom: 0.5rem;
|
|
38
|
+
color: var(--primary-color);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
header p {
|
|
42
|
+
color: #666;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.rendering-info {
|
|
46
|
+
display: flex;
|
|
47
|
+
gap: 10px;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
margin-top: 10px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.badge {
|
|
53
|
+
display: inline-block;
|
|
54
|
+
padding: 4px 8px;
|
|
55
|
+
border-radius: 4px;
|
|
56
|
+
background-color: #eaeaea;
|
|
57
|
+
color: #666;
|
|
58
|
+
font-size: 0.8rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.badge.active {
|
|
62
|
+
background-color: var(--success-color);
|
|
63
|
+
color: white;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
footer {
|
|
67
|
+
margin-top: 3rem;
|
|
68
|
+
text-align: center;
|
|
69
|
+
color: #666;
|
|
70
|
+
padding: 1rem 0;
|
|
71
|
+
border-top: 1px solid var(--border-color);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
footer a {
|
|
75
|
+
color: var(--primary-color);
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.loading {
|
|
80
|
+
text-align: center;
|
|
81
|
+
padding: 2rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.error {
|
|
85
|
+
background-color: rgba(244, 67, 54, 0.1);
|
|
86
|
+
border: 1px solid var(--error-color);
|
|
87
|
+
border-radius: 8px;
|
|
88
|
+
padding: 1rem;
|
|
89
|
+
margin: 1rem 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.error-message {
|
|
93
|
+
background-color: rgba(244, 67, 54, 0.1);
|
|
94
|
+
color: var(--error-color);
|
|
95
|
+
padding: 1rem;
|
|
96
|
+
border-radius: 8px;
|
|
97
|
+
margin-bottom: 1rem;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.card {
|
|
101
|
+
background-color: var(--card-background);
|
|
102
|
+
border: 1px solid var(--border-color);
|
|
103
|
+
border-radius: 8px;
|
|
104
|
+
padding: 1.5rem;
|
|
105
|
+
margin-bottom: 2rem;
|
|
106
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.demo-section {
|
|
110
|
+
background-color: var(--card-background);
|
|
111
|
+
border: 1px solid var(--border-color);
|
|
112
|
+
border-radius: 8px;
|
|
113
|
+
padding: 1.5rem;
|
|
114
|
+
margin-bottom: 2rem;
|
|
115
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.input-row {
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
gap: 0.5rem;
|
|
122
|
+
margin-bottom: 1rem;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.input-row input {
|
|
126
|
+
width: 80px;
|
|
127
|
+
padding: 0.5rem;
|
|
128
|
+
border: 1px solid var(--border-color);
|
|
129
|
+
border-radius: 4px;
|
|
130
|
+
font-size: 1rem;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.input-row .operator {
|
|
134
|
+
font-size: 1.5rem;
|
|
135
|
+
margin: 0 0.5rem;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
button {
|
|
139
|
+
background-color: var(--primary-color);
|
|
140
|
+
color: white;
|
|
141
|
+
border: none;
|
|
142
|
+
border-radius: 4px;
|
|
143
|
+
padding: 0.5rem 1rem;
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
font-size: 1rem;
|
|
146
|
+
transition: background-color 0.2s;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
button:hover {
|
|
150
|
+
background-color: var(--secondary-color);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.json-editor {
|
|
154
|
+
display: flex;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
gap: 1rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.json-editor textarea {
|
|
160
|
+
width: 100%;
|
|
161
|
+
padding: 0.5rem;
|
|
162
|
+
border: 1px solid var(--border-color);
|
|
163
|
+
border-radius: 4px;
|
|
164
|
+
font-family: monospace;
|
|
165
|
+
font-size: 0.9rem;
|
|
166
|
+
resize: vertical;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.result {
|
|
170
|
+
background-color: #f0f7ff;
|
|
171
|
+
padding: 1rem;
|
|
172
|
+
border-radius: 4px;
|
|
173
|
+
margin-top: 1rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.result pre {
|
|
177
|
+
margin: 0;
|
|
178
|
+
white-space: pre-wrap;
|
|
179
|
+
font-family: monospace;
|
|
180
|
+
font-size: 0.9rem;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.info-section {
|
|
184
|
+
background-color: #f0f7ff;
|
|
185
|
+
border: 1px solid #e1e7fd;
|
|
186
|
+
border-radius: 8px;
|
|
187
|
+
padding: 1.5rem;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.info-section h2 {
|
|
191
|
+
color: var(--primary-color);
|
|
192
|
+
margin-top: 0;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.info-section ol {
|
|
196
|
+
padding-left: 1.5rem;
|
|
197
|
+
}
|
|
Binary file
|