vfront-lib 0.0.2 → 0.0.3
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/README.md +16 -7
- package/index.html +13 -10
- package/package.json +3 -2
- package/src/lib/app.js +38 -14
- package/src/lib/vfront.js +48 -0
- package/src/pages/contact/contact.html +1 -0
- package/src/pages/contact/contact.js +9 -0
- package/src/pages/contact/contact.scss +0 -0
- package/src/pages/home/home.html +2 -1
- package/src/pages/home/home.js +7 -4
package/README.md
CHANGED
|
@@ -36,18 +36,25 @@ Structure
|
|
|
36
36
|
│ │ │ ├── home.html
|
|
37
37
|
│ │ │ ├── home.scss
|
|
38
38
|
│ │ │ └── home.ts
|
|
39
|
+
│ │ ├── contact/
|
|
40
|
+
│ │ │ ├── contact.html
|
|
41
|
+
│ │ │ ├── contact.scss
|
|
42
|
+
│ │ │ └── contact.ts
|
|
39
43
|
```
|
|
40
44
|
|
|
41
45
|
```js
|
|
42
|
-
import { Render
|
|
46
|
+
import { Render } from "vfront-lib";
|
|
47
|
+
import Contact from "../contact/contact";
|
|
43
48
|
|
|
44
49
|
export default function Home(params) {
|
|
45
50
|
// Render(htmlFileUniqueName, objectSignal)
|
|
46
|
-
Render('home', {
|
|
47
|
-
|
|
51
|
+
return Render('home', {
|
|
52
|
+
imports: [Contact], // import contact component
|
|
53
|
+
start() { },
|
|
54
|
+
name: 'Victor',
|
|
48
55
|
count: 0,
|
|
49
|
-
setCount
|
|
50
|
-
|
|
56
|
+
setCount() {
|
|
57
|
+
this.count += 1;
|
|
51
58
|
}
|
|
52
59
|
});
|
|
53
60
|
}
|
|
@@ -56,7 +63,9 @@ export default function Home(params) {
|
|
|
56
63
|
```html
|
|
57
64
|
<h1>Hello {{name}}.</h1>
|
|
58
65
|
<p>Count: {{count}}</p>
|
|
59
|
-
<button onclick="
|
|
66
|
+
<button onclick="home.setCount()">Click here</button>
|
|
67
|
+
|
|
68
|
+
<contact></contact>
|
|
60
69
|
```
|
|
61
70
|
|
|
62
71
|
### Create route
|
|
@@ -72,7 +81,7 @@ export default {
|
|
|
72
81
|
### Start app
|
|
73
82
|
|
|
74
83
|
```js
|
|
75
|
-
import { App } from 'vfront';
|
|
84
|
+
import { App } from 'vfront-lib';
|
|
76
85
|
import routes from './routes';
|
|
77
86
|
|
|
78
87
|
App(routes);
|
package/index.html
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
</
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<title>vfront</title>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<div id="app"></div>
|
|
13
|
+
<script type="module" src="/src/main.js"></script>
|
|
14
|
+
</body>
|
|
15
|
+
|
|
13
16
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vfront-lib",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
"scripts": {
|
|
27
27
|
"dev": "vite",
|
|
28
28
|
"build": "vite build",
|
|
29
|
-
"preview": "vite preview"
|
|
29
|
+
"preview": "vite preview",
|
|
30
|
+
"create": "node ./src/lib/vfront.js"
|
|
30
31
|
},
|
|
31
32
|
"devDependencies": {
|
|
32
33
|
"sass-embedded": "^1.97.1",
|
package/src/lib/app.js
CHANGED
|
@@ -6,11 +6,12 @@ import { CreateElement } from "./dom";
|
|
|
6
6
|
|
|
7
7
|
const app = document.getElementById('app');
|
|
8
8
|
|
|
9
|
-
export let $this = null;
|
|
10
|
-
export let $app = null;
|
|
11
|
-
|
|
12
9
|
export const Router = new Navigo("/", { hash: true });
|
|
13
10
|
|
|
11
|
+
export function App(routes) {
|
|
12
|
+
Router.on(routes).resolve();
|
|
13
|
+
}
|
|
14
|
+
|
|
14
15
|
export function Render(name, data = {}) {
|
|
15
16
|
const element = Templates.find(t => t.path.includes(name))?.html;
|
|
16
17
|
const style = Styles.find(t => t.path.includes(name))?.style;
|
|
@@ -20,19 +21,42 @@ export function Render(name, data = {}) {
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
const template = Handlebars.compile(element);
|
|
24
|
+
const tpl = (values => CreateElement(`<div><style>${style}</style>${template(values)}</div>`));
|
|
25
|
+
|
|
26
|
+
const target = app.querySelectorAll(name);
|
|
27
|
+
|
|
28
|
+
if (target.length > 0) {
|
|
29
|
+
const component = Signal(data, (values) => {
|
|
30
|
+
app.querySelectorAll(name).forEach(item => {
|
|
31
|
+
item.replaceChildren(tpl(values));
|
|
32
|
+
});
|
|
33
|
+
if (values.start && !window[name]) {
|
|
34
|
+
values.start();
|
|
35
|
+
}
|
|
36
|
+
if (values.imports && values.imports.length > 0) {
|
|
37
|
+
values.imports.forEach(a => a());
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
window[name] = component;
|
|
42
|
+
return component;
|
|
43
|
+
}
|
|
23
44
|
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
window.$this = Signal(data, (values) => {
|
|
45
|
+
const component = Signal(data, (values) => {
|
|
27
46
|
app.replaceChildren(tpl(values));
|
|
28
|
-
|
|
47
|
+
Signal(data, (values) => {
|
|
48
|
+
app.querySelectorAll(name).forEach(item => {
|
|
49
|
+
item.replaceChildren(tpl(values));
|
|
50
|
+
});
|
|
51
|
+
if (values.start && !window[name]) {
|
|
52
|
+
values.start();
|
|
53
|
+
}
|
|
54
|
+
if (values.imports && values.imports.length > 0) {
|
|
55
|
+
values.imports.forEach(a => a());
|
|
56
|
+
}
|
|
57
|
+
});
|
|
29
58
|
});
|
|
30
59
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export function App(routes) {
|
|
37
|
-
Router.on(routes).resolve();
|
|
60
|
+
window[name] = component;
|
|
61
|
+
return component;
|
|
38
62
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import fs from 'fs';
|
|
2
|
+
import path from 'path';
|
|
3
|
+
|
|
4
|
+
const input = process.argv[2];
|
|
5
|
+
|
|
6
|
+
if (!input) {
|
|
7
|
+
console.error('❌ Informe o nome do arquivo. Ex: contact ou pages/contact');
|
|
8
|
+
process.exit(1);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const parts = input.split('/');
|
|
12
|
+
const name = parts.pop();
|
|
13
|
+
|
|
14
|
+
const baseDir = path.resolve(process.cwd(), 'src', ...parts, name);
|
|
15
|
+
const filePath = path.join(baseDir, name);
|
|
16
|
+
|
|
17
|
+
fs.mkdirSync(baseDir, { recursive: true });
|
|
18
|
+
|
|
19
|
+
if (fs.existsSync(filePath)) {
|
|
20
|
+
console.error('❌ Arquivo já existe:', filePath);
|
|
21
|
+
process.exit(1);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const html = `<p>{{name}}</p>`;
|
|
25
|
+
|
|
26
|
+
const script = `import { Render } from "vfront-lib";
|
|
27
|
+
|
|
28
|
+
export default function ${name.charAt(0).toUpperCase() + name.slice(1)}(params) {
|
|
29
|
+
return Render('${name}', {
|
|
30
|
+
imports: [],
|
|
31
|
+
start() {},
|
|
32
|
+
name: '${name}'
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
36
|
+
|
|
37
|
+
const style = ``;
|
|
38
|
+
|
|
39
|
+
fs.writeFileSync(`${filePath}.html`, html, 'utf8');
|
|
40
|
+
fs.writeFileSync(`${filePath}.js`, script, 'utf8');
|
|
41
|
+
fs.writeFileSync(`${filePath}.scss`, style, 'utf8');
|
|
42
|
+
|
|
43
|
+
console.log('✅ Criado:', filePath);
|
|
44
|
+
|
|
45
|
+
function capitalize(str) {
|
|
46
|
+
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
47
|
+
}
|
|
48
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<p>{{name}}</p>
|
|
File without changes
|
package/src/pages/home/home.html
CHANGED
package/src/pages/home/home.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { Render
|
|
1
|
+
import { Render } from "../../lib/app";
|
|
2
|
+
import Contact from "../contact/contact";
|
|
2
3
|
|
|
3
4
|
export default function Home(params) {
|
|
4
|
-
Render('home', {
|
|
5
|
+
return Render('home', {
|
|
6
|
+
imports: [Contact],
|
|
7
|
+
start() { },
|
|
5
8
|
name: 'Victor',
|
|
6
9
|
count: 0,
|
|
7
|
-
setCount
|
|
8
|
-
|
|
10
|
+
setCount() {
|
|
11
|
+
this.count += 1;
|
|
9
12
|
}
|
|
10
13
|
});
|
|
11
14
|
}
|