frontend-hamroun 1.2.12 → 1.2.14
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/backend/auth.js +3 -4
- package/dist/frontend-hamroun.es.js +232 -234
- package/dist/frontend-hamroun.umd.js +9 -9
- package/package.json +1 -1
- package/scripts/build-cli.js +248 -0
- package/src/backend/auth.ts +4 -4
- package/templates/basic/index.html +12 -12
- package/templates/basic/jsconfig.json +14 -0
- package/templates/basic/package.json +20 -30
- package/templates/basic/src/App.js +105 -0
- package/templates/basic/src/main.js +11 -0
- package/templates/basic/vite.config.js +18 -0
- package/templates/full-stack/index.html +12 -13
- package/templates/full-stack/jsconfig.json +14 -0
- package/templates/full-stack/package.json +20 -33
- package/templates/full-stack/src/App.js +105 -0
- package/templates/full-stack/src/main.js +11 -0
- package/templates/full-stack/vite.config.js +18 -34
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { useState, useRef } from 'frontend-hamroun';
|
|
2
|
+
|
|
3
|
+
export function App() {
|
|
4
|
+
const [count, setCount] = useState(0);
|
|
5
|
+
const renderCount = useRef(0);
|
|
6
|
+
|
|
7
|
+
renderCount.current++;
|
|
8
|
+
|
|
9
|
+
// Return a plain JavaScript object representation of the UI
|
|
10
|
+
return {
|
|
11
|
+
type: 'div',
|
|
12
|
+
props: {
|
|
13
|
+
style: {
|
|
14
|
+
fontFamily: 'Arial, sans-serif',
|
|
15
|
+
maxWidth: '600px',
|
|
16
|
+
margin: '0 auto',
|
|
17
|
+
padding: '2rem'
|
|
18
|
+
},
|
|
19
|
+
children: [
|
|
20
|
+
{
|
|
21
|
+
type: 'h1',
|
|
22
|
+
props: {
|
|
23
|
+
style: { textAlign: 'center' },
|
|
24
|
+
children: 'Frontend Hamroun App'
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
type: 'p',
|
|
29
|
+
props: {
|
|
30
|
+
style: { textAlign: 'center' },
|
|
31
|
+
children: `Render count: ${renderCount.current}`
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
type: 'div',
|
|
36
|
+
props: {
|
|
37
|
+
style: {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'column',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
padding: '1rem',
|
|
42
|
+
border: '1px solid #ccc',
|
|
43
|
+
borderRadius: '8px'
|
|
44
|
+
},
|
|
45
|
+
children: [
|
|
46
|
+
{
|
|
47
|
+
type: 'h2',
|
|
48
|
+
props: {
|
|
49
|
+
children: 'Counter Example'
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: 'p',
|
|
54
|
+
props: {
|
|
55
|
+
children: `Count: ${count}`
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'div',
|
|
60
|
+
props: {
|
|
61
|
+
style: {
|
|
62
|
+
display: 'flex',
|
|
63
|
+
gap: '8px'
|
|
64
|
+
},
|
|
65
|
+
children: [
|
|
66
|
+
{
|
|
67
|
+
type: 'button',
|
|
68
|
+
props: {
|
|
69
|
+
onClick: () => setCount(count - 1),
|
|
70
|
+
style: {
|
|
71
|
+
padding: '8px 16px',
|
|
72
|
+
backgroundColor: '#ff4d4d',
|
|
73
|
+
color: 'white',
|
|
74
|
+
border: 'none',
|
|
75
|
+
borderRadius: '4px',
|
|
76
|
+
cursor: 'pointer'
|
|
77
|
+
},
|
|
78
|
+
children: 'Decrement'
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
type: 'button',
|
|
83
|
+
props: {
|
|
84
|
+
onClick: () => setCount(count + 1),
|
|
85
|
+
style: {
|
|
86
|
+
padding: '8px 16px',
|
|
87
|
+
backgroundColor: '#4d79ff',
|
|
88
|
+
color: 'white',
|
|
89
|
+
border: 'none',
|
|
90
|
+
borderRadius: '4px',
|
|
91
|
+
cursor: 'pointer'
|
|
92
|
+
},
|
|
93
|
+
children: 'Increment'
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { render } from 'frontend-hamroun';
|
|
2
|
+
import { App } from './App.js';
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
const rootElement = document.getElementById('app');
|
|
6
|
+
if (rootElement) {
|
|
7
|
+
// Call App as a function to create the VDOM structure
|
|
8
|
+
render(App(), rootElement);
|
|
9
|
+
console.log('App rendered successfully');
|
|
10
|
+
}
|
|
11
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import { nodePolyfills } from 'vite-plugin-node-polyfills';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
build: {
|
|
6
|
+
outDir: 'dist',
|
|
7
|
+
emptyOutDir: true
|
|
8
|
+
},
|
|
9
|
+
server: {
|
|
10
|
+
port: 3000,
|
|
11
|
+
open: true
|
|
12
|
+
},
|
|
13
|
+
plugins: [
|
|
14
|
+
nodePolyfills({
|
|
15
|
+
protocolImports: true,
|
|
16
|
+
}),
|
|
17
|
+
]
|
|
18
|
+
});
|
|
@@ -1,13 +1,12 @@
|
|
|
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>Frontend Hamroun App</title>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
</
|
|
13
|
-
</html>
|
|
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>Frontend Hamroun App</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.js"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"moduleResolution": "node",
|
|
7
|
+
"allowSyntheticDefaultImports": true,
|
|
8
|
+
"resolveJsonModule": true,
|
|
9
|
+
"checkJs": false,
|
|
10
|
+
"strict": false
|
|
11
|
+
},
|
|
12
|
+
"include": ["src/**/*.js"],
|
|
13
|
+
"exclude": ["node_modules"]
|
|
14
|
+
}
|
|
@@ -1,33 +1,20 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "frontend-hamroun-app",
|
|
3
|
-
"private": true,
|
|
4
|
-
"version": "0.1.0",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"helmet": "^7.0.0",
|
|
22
|
-
"morgan": "^1.10.0"
|
|
23
|
-
},
|
|
24
|
-
"devDependencies": {
|
|
25
|
-
"@types/express": "^4.17.21",
|
|
26
|
-
"@types/node": "^20.10.0",
|
|
27
|
-
"concurrently": "^8.2.2",
|
|
28
|
-
"ts-node": "^10.9.1",
|
|
29
|
-
"typescript": "^5.3.2",
|
|
30
|
-
"vite": "^5.0.0",
|
|
31
|
-
"vite-plugin-node-polyfills": "^0.21.0"
|
|
32
|
-
}
|
|
33
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "frontend-hamroun-app",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "tsc && vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"frontend-hamroun": "latest"
|
|
13
|
+
},
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"@types/node": "^20.10.0",
|
|
16
|
+
"typescript": "^5.3.2",
|
|
17
|
+
"vite": "^5.0.0",
|
|
18
|
+
"vite-plugin-node-polyfills": "^0.21.0"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { useState, useRef } from 'frontend-hamroun';
|
|
2
|
+
|
|
3
|
+
export function App() {
|
|
4
|
+
const [count, setCount] = useState(0);
|
|
5
|
+
const renderCount = useRef(0);
|
|
6
|
+
|
|
7
|
+
renderCount.current++;
|
|
8
|
+
|
|
9
|
+
// Return a plain JavaScript object representation of the UI
|
|
10
|
+
return {
|
|
11
|
+
type: 'div',
|
|
12
|
+
props: {
|
|
13
|
+
style: {
|
|
14
|
+
fontFamily: 'Arial, sans-serif',
|
|
15
|
+
maxWidth: '600px',
|
|
16
|
+
margin: '0 auto',
|
|
17
|
+
padding: '2rem'
|
|
18
|
+
},
|
|
19
|
+
children: [
|
|
20
|
+
{
|
|
21
|
+
type: 'h1',
|
|
22
|
+
props: {
|
|
23
|
+
style: { textAlign: 'center' },
|
|
24
|
+
children: 'Frontend Hamroun App'
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
type: 'p',
|
|
29
|
+
props: {
|
|
30
|
+
style: { textAlign: 'center' },
|
|
31
|
+
children: `Render count: ${renderCount.current}`
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
type: 'div',
|
|
36
|
+
props: {
|
|
37
|
+
style: {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'column',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
padding: '1rem',
|
|
42
|
+
border: '1px solid #ccc',
|
|
43
|
+
borderRadius: '8px'
|
|
44
|
+
},
|
|
45
|
+
children: [
|
|
46
|
+
{
|
|
47
|
+
type: 'h2',
|
|
48
|
+
props: {
|
|
49
|
+
children: 'Counter Example'
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: 'p',
|
|
54
|
+
props: {
|
|
55
|
+
children: `Count: ${count}`
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'div',
|
|
60
|
+
props: {
|
|
61
|
+
style: {
|
|
62
|
+
display: 'flex',
|
|
63
|
+
gap: '8px'
|
|
64
|
+
},
|
|
65
|
+
children: [
|
|
66
|
+
{
|
|
67
|
+
type: 'button',
|
|
68
|
+
props: {
|
|
69
|
+
onClick: () => setCount(count - 1),
|
|
70
|
+
style: {
|
|
71
|
+
padding: '8px 16px',
|
|
72
|
+
backgroundColor: '#ff4d4d',
|
|
73
|
+
color: 'white',
|
|
74
|
+
border: 'none',
|
|
75
|
+
borderRadius: '4px',
|
|
76
|
+
cursor: 'pointer'
|
|
77
|
+
},
|
|
78
|
+
children: 'Decrement'
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
type: 'button',
|
|
83
|
+
props: {
|
|
84
|
+
onClick: () => setCount(count + 1),
|
|
85
|
+
style: {
|
|
86
|
+
padding: '8px 16px',
|
|
87
|
+
backgroundColor: '#4d79ff',
|
|
88
|
+
color: 'white',
|
|
89
|
+
border: 'none',
|
|
90
|
+
borderRadius: '4px',
|
|
91
|
+
cursor: 'pointer'
|
|
92
|
+
},
|
|
93
|
+
children: 'Increment'
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { render } from 'frontend-hamroun';
|
|
2
|
+
import { App } from './App.js';
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
const rootElement = document.getElementById('app');
|
|
6
|
+
if (rootElement) {
|
|
7
|
+
// Call App as a function to create the VDOM structure
|
|
8
|
+
render(App(), rootElement);
|
|
9
|
+
console.log('App rendered successfully');
|
|
10
|
+
}
|
|
11
|
+
});
|
|
@@ -1,34 +1,18 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
export default defineConfig({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
'@testing-library/jest-dom'
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
server: {
|
|
24
|
-
port: 3001,
|
|
25
|
-
proxy: {
|
|
26
|
-
'/api': 'http://localhost:3000'
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
resolve: {
|
|
30
|
-
alias: {
|
|
31
|
-
'@': path.resolve(__dirname, 'src/client')
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import { nodePolyfills } from 'vite-plugin-node-polyfills';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
build: {
|
|
6
|
+
outDir: 'dist',
|
|
7
|
+
emptyOutDir: true
|
|
8
|
+
},
|
|
9
|
+
server: {
|
|
10
|
+
port: 3000,
|
|
11
|
+
open: true
|
|
12
|
+
},
|
|
13
|
+
plugins: [
|
|
14
|
+
nodePolyfills({
|
|
15
|
+
protocolImports: true,
|
|
16
|
+
}),
|
|
17
|
+
]
|
|
18
|
+
});
|