create-wowo 1.0.2 → 1.1.0

package/index.mjs

@@ -58,26 +58,58 @@ const makeDir = (folderName) => {
     );
   }
 };
+const gitCode = `
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules/
+dist/
+dist-ssr/
+*.local
+
+# Editor folders
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea/
+.DS_Store
+
+# Workspaces
+*.pnp
+*.pnp.js
+
+`;
+const makeGitignore = () => {
+  const file = path.join(targetDir, ".gitignore");
+  fs.writeFileSync(file, gitCode);
+  console.log(`  ${colors.green}#${colors.reset} Membuat file: .gitignore`);
+};
 
 const filesToCopy = [
   "package.json",
   "index.html",
-  ".gitignore",
   "vite.config.js",
+  ".prettierrc",
+  "README.md",
   "public/robots.txt",
   ".vscode/extensions.json",
   ".vscode/settings.json",
-  "src/components/sumatera.js",
+  "app/App.app.js",
+  "src/components/Sumatera.wilayah.js",
   "src/router/router.js",
   "src/router/404.js",
   "src/services/api.js",
   "src/store/store.js",
+  "src/store/states.js",
   "src/styles/globals.css",
   "src/main.js",
 ];
 
 filesToCopy.forEach(copyTemplate);
-
+makeGitignore();
 makeDir("src/asset");
 
 console.log(`
@@ -86,6 +118,7 @@ ${colors.green}${colors.bold} ${name} Berhasil dibuat!${colors.reset}
 ${colors.bold}Langkah selanjutnya:${colors.reset}
 ${isCurrentDir ? "" : `${colors.cyan}  cd ${name}${colors.reset}\n`}${colors.cyan}  npm install
   npm run dev${colors.reset}
+${colors.cyan}atau pakai package manager lain${colors.reset}
 
 ${colors.bold}Happy coding with Wowojs! :)${colors.reset}
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-wowo",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "membuat framework wowojs otomatis",
   "main": "index.mjs",
   "type": "module",
@@ -15,6 +15,6 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
-  "author": "",
+  "author": "Devied Rahmadsyah",
   "license": "ISC"
 }

package/template/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "bracketSameLine": false,
+  "singleAttributePerLine": true
+}

package/template/.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["pushqrdx.inline-html", "dbaeumer.vscode-eslint"]
+  "recommendations": ["pushqrdx.inline-html", "esbenp.prettier-vscode"]
 }

package/template/.vscode/settings.json

@@ -2,5 +2,9 @@
   "emmet.includeLanguages": {
     "javascript": "html"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.semi": true,
+  "prettier.singleQuote": false,
+  "prettier.trailingComma": "none"
 }

package/template/README.md

@@ -0,0 +1,14 @@
+# {{name}}
+
+Selamat! Proyek kamu berhasil dibuat pake **create-wowo** v1.1.0 dan **wowojs** v1.2.1.
+Sekarang kamu punya struktur folder yang over power.
+
+## Struktur Folder
+- `app/`: Tempat buat file **Halaman** utama (`.app.js`).
+- `src/components/`: Tempat naruh **Komponen** kamu (`.wilayah.js`).
+- `src/store/`: Pusat kendali ekonomi (State Management).
+- `src/router/`: Router agar gak tersesat.
+- `src/services/` : Interaksi dengan Server.
+- `src/styles`: Styling
+---
+<a href="https://www.npmjs.com/package/wowojs/v/1.2.1">lihat wowojs</a>

package/template/app/App.app.js

@@ -0,0 +1,46 @@
+import { $BuatWilayah } from "wowojs";
+
+export default function App() {
+  $BuatWilayah({
+    namaWilayah: "app",
+    isiWilayah: () => {
+      return /*html*/ `
+      <header>
+        <h1>Wowojs</h1>
+      </header>
+      <wowo-sumatera nama="Wowojs"></wowo-sumatera>
+    `;
+    },
+    style: /*css*/ `
+    :host {
+      --primary-green: #1e5128;
+      --soft-green: #4e944f;
+      display: block;
+      min-height: 100vh;
+      background: linear-gradient(135deg, var(--primary-green) 0%, var(--soft-green) 100%);
+      font-family: 'Segoe UI', system-ui, sans-serif;
+    }
+
+    header {
+      padding: 20px;
+      background: rgba(0, 0, 0, 0.2);
+    }
+
+    h1 {
+      margin: 0;
+      color: white;
+      font-size: 1.5rem;
+      letter-spacing: 2px;
+    }
+
+    .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 40px 20px;
+      min-height: calc(100vh - 120px);
+    }
+  `,
+  });
+  return "wowo-app";
+}

package/template/package.json

@@ -2,9 +2,8 @@
   "name": "{{name}}",
   "version": "1.0.0",
   "description": "",
-  "main": "vite.config.js",
+  "main": "src/main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"

package/template/src/components/{sumatera.js → Sumatera.wilayah.js}

@@ -1,14 +1,15 @@
 import { $BuatWilayah } from "wowojs";
-import store, { sawit } from "../store/store";
+import store from "../store/store";
+import { states } from "../store/states";
 
-export default function sumatera() {
+export default function Sumatera() {
   $BuatWilayah({
     namaWilayah: "sumatera",
     isiWilayah: ({ nama }) => {
       return /*html*/ `
         <main>
           <h3>Selamat anda telah berhasil menjalankan ${nama}</h3>
-          <output>Sawit: ${sawit}</output>
+          <output>Sawit: ${states.sawit}</output>
           <nav>
             <button @click="tambah">Tambah</button>
             <button @click="reset">Reset</button>

package/template/src/main.js

@@ -1,48 +1,7 @@
-import { $BangunEkonomi, $BuatWilayah } from "wowojs";
+import { $BangunEkonomi } from "wowojs";
 import router from "./router/router";
-import sumatera from "./components/sumatera";
 import notFound from "./router/404";
+import App from "../app/App.app";
+import Sumatera from "./components/Sumatera.wilayah";
 
-$BuatWilayah({
-  namaWilayah: "app",
-  isiWilayah: () => {
-    return /*html*/ `
-      <header>
-        <h1>Wowojs</h1>
-      </header>
-      <wowo-sumatera nama="Wowojs"></wowo-sumatera>
-    `;
-  },
-  style: /*css*/ `
-    :host {
-      --primary-green: #1e5128;
-      --soft-green: #4e944f;
-      display: block;
-      min-height: 100vh;
-      background: linear-gradient(135deg, var(--primary-green) 0%, var(--soft-green) 100%);
-      font-family: 'Segoe UI', system-ui, sans-serif;
-    }
-
-    header {
-      padding: 20px;
-      background: rgba(0, 0, 0, 0.2);
-    }
-
-    h1 {
-      margin: 0;
-      color: white;
-      font-size: 1.5rem;
-      letter-spacing: 2px;
-    }
-
-    .container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 40px 20px;
-      min-height: calc(100vh - 120px);
-    }
-  `,
-});
-
-$BangunEkonomi([router(), sumatera(), notFound()]);
+$BangunEkonomi([router(), Sumatera(), notFound(), App()]);

package/template/src/store/states.js

@@ -0,0 +1,5 @@
+import { $antek2 } from "wowojs";
+
+export let states = {
+  sawit: $antek2("sawit") || $antek2("sawit", 100),
+};

package/template/src/store/store.js

@@ -1,16 +1,15 @@
-import { $antek2, $UrusKeuangan } from "wowojs";
-
-export let sawit = $antek2("sawit") || $antek2("sawit", 100);
+import { $UrusKeuangan, $antek2 } from "wowojs";
+import { states } from "./states";
 
 export default function store(tipe) {
   const reducer = ({ type }) => {
     switch (type) {
       case "TAMBAH":
-        return (sawit = $antek2("sawit", (t) => t + 1));
+        return (states.sawit = $antek2("sawit", (t) => t + 1));
       case "RESET":
-        return (sawit = $antek2("sawit", (r) => (r = 0)));
+        return (states.sawit = $antek2("sawit", (r) => (r = 0)));
       case "KURANG":
-        return (sawit = $antek2("sawit", (k) => (k > 0 ? k - 1 : 0)));
+        return (states.sawit = $antek2("sawit", (k) => (k > 0 ? k - 1 : 0)));
     }
   };
   $UrusKeuangan(reducer, { type: tipe });