create-wowo 1.0.0
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 +5 -0
- package/index.mjs +91 -0
- package/package.json +20 -0
- package/template/.vscode/extensions.json +3 -0
- package/template/.vscode/settings.json +6 -0
- package/template/index.html +13 -0
- package/template/package.json +19 -0
- package/template/public/robots.txt +8 -0
- package/template/src/components/sumatera.js +113 -0
- package/template/src/main.js +48 -0
- package/template/src/router/404.js +95 -0
- package/template/src/router/router.js +15 -0
- package/template/src/services/api.js +9 -0
- package/template/src/store/store.js +17 -0
- package/template/src/styles/globals.css +5 -0
- package/template/vite.config.js +19 -0
package/README.md
ADDED
package/index.mjs
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import fs from "fs";
|
|
4
|
+
import path from "path";
|
|
5
|
+
import process from "process";
|
|
6
|
+
import { fileURLToPath } from "url";
|
|
7
|
+
|
|
8
|
+
const colors = {
|
|
9
|
+
green: "\x1b[32m",
|
|
10
|
+
cyan: "\x1b[36m",
|
|
11
|
+
reset: "\x1b[0m",
|
|
12
|
+
bold: "\x1b[1m",
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
16
|
+
|
|
17
|
+
const inputName = process.argv[2];
|
|
18
|
+
const isCurrentDir = inputName === "." || !inputName;
|
|
19
|
+
const name = isCurrentDir
|
|
20
|
+
? path.basename(process.cwd())
|
|
21
|
+
: inputName || "my-wowo-app";
|
|
22
|
+
const targetDir = isCurrentDir ? process.cwd() : path.join(process.cwd(), name);
|
|
23
|
+
|
|
24
|
+
console.log(
|
|
25
|
+
`${colors.cyan}! Menyiapkan Wowojs di: ${targetDir}${colors.reset}\n`,
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
if (!fs.existsSync(targetDir)) {
|
|
29
|
+
fs.mkdirSync(targetDir, { recursive: true });
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const copyTemplate = (fileName) => {
|
|
33
|
+
const templatePath = path.join(__dirname, "template", fileName);
|
|
34
|
+
const targetPath = path.join(targetDir, fileName);
|
|
35
|
+
const dirName = path.dirname(targetPath);
|
|
36
|
+
if (!fs.existsSync(dirName)) {
|
|
37
|
+
fs.mkdirSync(dirName, { recursive: true });
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (!fs.existsSync(templatePath)) {
|
|
41
|
+
console.error(`:( Template tidak ditemukan: ${templatePath}`);
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
let content = fs.readFileSync(templatePath, "utf8");
|
|
46
|
+
content = content.replace(/{{name}}/g, name);
|
|
47
|
+
|
|
48
|
+
fs.writeFileSync(targetPath, content);
|
|
49
|
+
console.log(` ${colors.green}#${colors.reset} Membuat file: ${fileName}`);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const makeDir = (folderName) => {
|
|
53
|
+
const fullPath = path.join(targetDir, folderName);
|
|
54
|
+
if (!fs.existsSync(fullPath)) {
|
|
55
|
+
fs.mkdirSync(fullPath, { recursive: true });
|
|
56
|
+
console.log(
|
|
57
|
+
` ${colors.green}#${colors.reset} Membuat folder: ${folderName}`,
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const filesToCopy = [
|
|
63
|
+
"package.json",
|
|
64
|
+
"index.html",
|
|
65
|
+
".gitignore",
|
|
66
|
+
"vite.config.js",
|
|
67
|
+
"public/robots.txt",
|
|
68
|
+
".vscode/extensions.json",
|
|
69
|
+
".vscode/settings.json",
|
|
70
|
+
"src/components/sumatera.js",
|
|
71
|
+
"src/router/router.js",
|
|
72
|
+
"src/router/404.js",
|
|
73
|
+
"src/services/api.js",
|
|
74
|
+
"src/store/store.js",
|
|
75
|
+
"src/styles/globals.css",
|
|
76
|
+
"src/main.js",
|
|
77
|
+
];
|
|
78
|
+
|
|
79
|
+
filesToCopy.forEach(copyTemplate);
|
|
80
|
+
|
|
81
|
+
makeDir("src/asset");
|
|
82
|
+
|
|
83
|
+
console.log(`
|
|
84
|
+
${colors.green}${colors.bold} ${name} Berhasil dibuat!${colors.reset}
|
|
85
|
+
|
|
86
|
+
${colors.bold}Langkah selanjutnya:${colors.reset}
|
|
87
|
+
${isCurrentDir ? "" : `${colors.cyan} cd ${name}${colors.reset}\n`}${colors.cyan} npm install
|
|
88
|
+
npm run dev${colors.reset}
|
|
89
|
+
|
|
90
|
+
${colors.bold}Happy coding with Wowojs! :)${colors.reset}
|
|
91
|
+
`);
|
package/package.json
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "create-wowo",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "membuat framework wowojs otomatis",
|
|
5
|
+
"main": "index.mjs",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"bin": {
|
|
8
|
+
"create-wowo": "index.mjs"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
"index.mjs",
|
|
12
|
+
"template"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
16
|
+
},
|
|
17
|
+
"keywords": [],
|
|
18
|
+
"author": "",
|
|
19
|
+
"license": "ISC"
|
|
20
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
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
|
+
<link rel="stylesheet" href="./src/styles/globals.css" />
|
|
7
|
+
<title>{{name}}</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<wowo-router></wowo-router>
|
|
11
|
+
<script type="module" src="./src/main.js"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{name}}",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "vite.config.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
8
|
+
"dev": "vite",
|
|
9
|
+
"build": "vite build",
|
|
10
|
+
"preview": "vite preview"
|
|
11
|
+
},
|
|
12
|
+
"keywords": [],
|
|
13
|
+
"author": "",
|
|
14
|
+
"license": "ISC",
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"vite": "^7.3.1",
|
|
17
|
+
"wowojs": "^1.2.1"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { $BuatWilayah } from "wowojs";
|
|
2
|
+
import store, { sawit } from "../store/store";
|
|
3
|
+
|
|
4
|
+
export default function sumatera() {
|
|
5
|
+
$BuatWilayah({
|
|
6
|
+
namaWilayah: "sumatera",
|
|
7
|
+
isiWilayah: ({ nama }) => {
|
|
8
|
+
return /*html*/ `
|
|
9
|
+
<main>
|
|
10
|
+
<h3>Selamat anda telah berhasil menjalankan ${nama}</h3>
|
|
11
|
+
<output>Sawit: ${sawit}</output>
|
|
12
|
+
<nav>
|
|
13
|
+
<button @click="tambah">Tambah</button>
|
|
14
|
+
<button @click="reset">Reset</button>
|
|
15
|
+
<button @click="kurang">Kurang</button>
|
|
16
|
+
</nav>
|
|
17
|
+
</main>
|
|
18
|
+
`;
|
|
19
|
+
},
|
|
20
|
+
methods: {
|
|
21
|
+
tambah() {
|
|
22
|
+
store("TAMBAH");
|
|
23
|
+
},
|
|
24
|
+
reset() {
|
|
25
|
+
store("RESET");
|
|
26
|
+
},
|
|
27
|
+
kurang() {
|
|
28
|
+
store("KURANG");
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
style: /*css*/ `
|
|
32
|
+
main {
|
|
33
|
+
background: rgba(255, 255, 255, 0.15);
|
|
34
|
+
backdrop-filter: blur(12px);
|
|
35
|
+
-webkit-backdrop-filter: blur(12px);
|
|
36
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
37
|
+
padding: 1.5rem;
|
|
38
|
+
border-radius: 30px;
|
|
39
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
|
|
40
|
+
text-align: center;
|
|
41
|
+
color: white;
|
|
42
|
+
margin-top: 20vw;
|
|
43
|
+
transition: all 0.3s ease;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
h3 {
|
|
47
|
+
font-weight: 300;
|
|
48
|
+
opacity: 0.9;
|
|
49
|
+
margin-bottom: 10px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
output {
|
|
53
|
+
display: block;
|
|
54
|
+
font-size: 2rem;
|
|
55
|
+
font-weight: 800;
|
|
56
|
+
margin: 1rem 0;
|
|
57
|
+
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
nav {
|
|
61
|
+
display: flex;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
margin-top: 20px;
|
|
64
|
+
filter: drop-shadow(0 4px 15px rgba(0,0,0,0.2));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
button {
|
|
68
|
+
padding: 15px 25px;
|
|
69
|
+
border: 1px solid rgba(255,255,255,0.2);
|
|
70
|
+
background: rgba(255, 255, 255, 0.2);
|
|
71
|
+
color: white;
|
|
72
|
+
font-weight: bold;
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
transition: all 0.2s ease;
|
|
75
|
+
border-radius: 0;
|
|
76
|
+
font-size: clamp(0.8rem, 2.5vw, 1rem);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
button:first-child {
|
|
80
|
+
border-radius: 15px 0 0 15px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
button:last-child {
|
|
84
|
+
border-radius: 0 15px 15px 0;
|
|
85
|
+
border-left: none;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
button:not(:first-child):not(:last-child) {
|
|
89
|
+
border-left: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
button:hover {
|
|
93
|
+
background: rgba(255, 255, 255, 0.4);
|
|
94
|
+
transform: scale(1.05);
|
|
95
|
+
z-index: 10;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
button:active {
|
|
99
|
+
background: #21b8038e;
|
|
100
|
+
color: white;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (min-width: 768px) {
|
|
104
|
+
main {
|
|
105
|
+
max-width: 450px;
|
|
106
|
+
margin: 50px auto;
|
|
107
|
+
padding: 2.5rem;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
`,
|
|
111
|
+
});
|
|
112
|
+
return "wowo-sumatera";
|
|
113
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { $BangunEkonomi, $BuatWilayah } from "wowojs";
|
|
2
|
+
import router from "./router/router";
|
|
3
|
+
import sumatera from "./components/sumatera";
|
|
4
|
+
import notFound from "./router/404";
|
|
5
|
+
|
|
6
|
+
$BuatWilayah({
|
|
7
|
+
namaWilayah: "app",
|
|
8
|
+
isiWilayah: () => {
|
|
9
|
+
return /*html*/ `
|
|
10
|
+
<header>
|
|
11
|
+
<h1>Wowojs</h1>
|
|
12
|
+
</header>
|
|
13
|
+
<wowo-sumatera nama="Wowojs"></wowo-sumatera>
|
|
14
|
+
`;
|
|
15
|
+
},
|
|
16
|
+
style: /*css*/ `
|
|
17
|
+
:host {
|
|
18
|
+
--primary-green: #1e5128;
|
|
19
|
+
--soft-green: #4e944f;
|
|
20
|
+
display: block;
|
|
21
|
+
min-height: 100vh;
|
|
22
|
+
background: linear-gradient(135deg, var(--primary-green) 0%, var(--soft-green) 100%);
|
|
23
|
+
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
header {
|
|
27
|
+
padding: 20px;
|
|
28
|
+
background: rgba(0, 0, 0, 0.2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
h1 {
|
|
32
|
+
margin: 0;
|
|
33
|
+
color: white;
|
|
34
|
+
font-size: 1.5rem;
|
|
35
|
+
letter-spacing: 2px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.container {
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
align-items: center;
|
|
42
|
+
padding: 40px 20px;
|
|
43
|
+
min-height: calc(100vh - 120px);
|
|
44
|
+
}
|
|
45
|
+
`,
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
$BangunEkonomi([router(), sumatera(), notFound()]);
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { $BuatWilayah } from "wowojs";
|
|
2
|
+
|
|
3
|
+
export default function notFound() {
|
|
4
|
+
$BuatWilayah({
|
|
5
|
+
namaWilayah: "404",
|
|
6
|
+
isiWilayah: () => {
|
|
7
|
+
return /*html*/ `
|
|
8
|
+
<main>
|
|
9
|
+
<header>
|
|
10
|
+
<h2>404</h2>
|
|
11
|
+
<h1>Halaman tidak ditemukan!</h1>
|
|
12
|
+
<p>Sepertinya lu nyasar ke kebun orang</p>
|
|
13
|
+
<nav>
|
|
14
|
+
<a href="/">Kembali ke Beranda</a>
|
|
15
|
+
</nav>
|
|
16
|
+
</header>
|
|
17
|
+
</main>
|
|
18
|
+
`;
|
|
19
|
+
},
|
|
20
|
+
style: /*css*/ `
|
|
21
|
+
:host {
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
min-height: 100vh;
|
|
26
|
+
background: linear-gradient(135deg, #1e5128 0%, #4e944f 100%);
|
|
27
|
+
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
28
|
+
margin: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
main {
|
|
32
|
+
background: rgba(255, 255, 255, 0.15);
|
|
33
|
+
backdrop-filter: blur(12px);
|
|
34
|
+
-webkit-backdrop-filter: blur(12px);
|
|
35
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
36
|
+
padding: 2.5rem;
|
|
37
|
+
border-radius: 30px;
|
|
38
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
|
|
39
|
+
text-align: center;
|
|
40
|
+
color: white;
|
|
41
|
+
width: 85%;
|
|
42
|
+
max-width: 400px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
h2 {
|
|
46
|
+
font-size: 5rem;
|
|
47
|
+
margin: 0;
|
|
48
|
+
text-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
|
49
|
+
line-height: 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
h1 {
|
|
53
|
+
font-size: 1.2rem;
|
|
54
|
+
margin: 15px 0;
|
|
55
|
+
font-weight: 600;
|
|
56
|
+
opacity: 0.9;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
p {
|
|
60
|
+
font-size: 0.9rem;
|
|
61
|
+
opacity: 0.7;
|
|
62
|
+
margin-bottom: 30px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
nav {
|
|
66
|
+
display: flex;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
a {
|
|
72
|
+
padding: 15px 30px;
|
|
73
|
+
background: rgba(255, 255, 255, 0.2);
|
|
74
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
75
|
+
color: white;
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
font-weight: bold;
|
|
78
|
+
border-radius: 15px;
|
|
79
|
+
transition: all 0.2s ease;
|
|
80
|
+
text-transform: uppercase;
|
|
81
|
+
font-size: 0.85rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
a:hover {
|
|
85
|
+
background: rgba(255, 255, 255, 0.4);
|
|
86
|
+
transform: scale(1.05);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
a:active {
|
|
90
|
+
background: #21b8038e;
|
|
91
|
+
}
|
|
92
|
+
`,
|
|
93
|
+
});
|
|
94
|
+
return "wowo-404";
|
|
95
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { $antek2, $UrusKeuangan } from "wowojs";
|
|
2
|
+
|
|
3
|
+
export let sawit = $antek2("sawit") || $antek2("sawit", 100);
|
|
4
|
+
|
|
5
|
+
export default function store(tipe) {
|
|
6
|
+
const reducer = ({ type }) => {
|
|
7
|
+
switch (type) {
|
|
8
|
+
case "TAMBAH":
|
|
9
|
+
return (sawit = $antek2("sawit", (t) => t + 1));
|
|
10
|
+
case "RESET":
|
|
11
|
+
return (sawit = $antek2("sawit", (r) => (r = 0)));
|
|
12
|
+
case "KURANG":
|
|
13
|
+
return (sawit = $antek2("sawit", (k) => (k > 0 ? k - 1 : 0)));
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
$UrusKeuangan(reducer, { type: tipe });
|
|
17
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { defineConfig } from "vite";
|
|
2
|
+
|
|
3
|
+
export default defineConfig({
|
|
4
|
+
root: "./",
|
|
5
|
+
server: {
|
|
6
|
+
port: 5173,
|
|
7
|
+
open: true,
|
|
8
|
+
},
|
|
9
|
+
|
|
10
|
+
build: {
|
|
11
|
+
outDir: "dist",
|
|
12
|
+
minify: "terser",
|
|
13
|
+
},
|
|
14
|
+
resolve: {
|
|
15
|
+
// alias: {
|
|
16
|
+
// "@": "/src",
|
|
17
|
+
// },
|
|
18
|
+
},
|
|
19
|
+
});
|