@remyyy/create-velox 0.0.1

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@remyyy/create-velox",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Scaffolding tool for Velox Framework",
+    "bin": {
+        "create-velox": "index.js",
+        "cv": "index.js"
+    },
+    "main": "index.js",
+    "scripts": {
+        "build": "tsup src/index.ts --format esm --clean --minify",
+        "dev": "tsup src/index.ts --format esm --watch",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "dependencies": {
+        "kolorist": "^1.8.0",
+        "minimist": "^1.2.8",
+        "prompts": "^2.4.2"
+    },
+    "devDependencies": {
+        "@types/minimist": "^1.2.5",
+        "@types/node": "^20.0.0",
+        "@types/prompts": "^2.4.9",
+        "tsup": "^8.0.0",
+        "typescript": "^5.0.0"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    }
+}

package/src/index.ts

@@ -0,0 +1,174 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import minimist from 'minimist'
+import prompts from 'prompts'
+import { red, green, bold } from 'kolorist'
+
+const argv = minimist(process.argv.slice(2), { string: ['_'] })
+const cwd = process.cwd()
+
+const TEMPLATES = [
+    {
+        name: 'vanilla-ts',
+        display: 'Vanilla TypeScript',
+        color: green
+    },
+    {
+        name: 'vanilla-js',
+        display: 'Vanilla JavaScript',
+        color: red // Just for distinction
+    }
+]
+
+const renameFiles: Record<string, string | undefined> = {
+    _gitignore: '.gitignore'
+}
+
+async function init() {
+    const defaultTargetDir = '@remyyy/velox-project'
+    let targetDir = argv._[0] || defaultTargetDir
+
+    let result: prompts.Answers<'projectName' | 'overwrite' | 'packageName' | 'framework'>
+
+    try {
+        result = await prompts(
+            [
+                {
+                    type: targetDir ? null : 'text',
+                    name: 'projectName',
+                    message: 'Project name:',
+                    initial: defaultTargetDir,
+                    onState: (state) => {
+                        targetDir = state.value.trim() || defaultTargetDir
+                    }
+                },
+                {
+                    type: () =>
+                        !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm',
+                    name: 'overwrite',
+                    message: () =>
+                        (targetDir === '.'
+                            ? 'Current directory'
+                            : `Target directory "${targetDir}"`) +
+                        ` is not empty. Remove existing files and continue?`
+                },
+                {
+                    type: (_, { overwrite }: { overwrite?: boolean }) => {
+                        if (overwrite === false) {
+                            throw new Error(red('✖') + ' Operation cancelled')
+                        }
+                        return null
+                    },
+                    name: 'overwriteChecker'
+                },
+                {
+                    type: 'select',
+                    name: 'framework',
+                    message: 'Select a variant:',
+                    initial: 0,
+                    choices: TEMPLATES.map((framework) => {
+                        const frameworkColor = framework.color
+                        return {
+                            title: frameworkColor(framework.display || framework.name),
+                            value: framework
+                        }
+                    })
+                }
+            ],
+            {
+                onCancel: () => {
+                    throw new Error(red('✖') + ' Operation cancelled')
+                }
+            }
+        )
+    } catch (cancelled: any) {
+        console.log(cancelled.message)
+        return
+    }
+
+    const { framework, overwrite, packageName } = result
+    const root = path.join(cwd, targetDir)
+
+    if (overwrite) {
+        emptyDir(root)
+    } else if (!fs.existsSync(root)) {
+        fs.mkdirSync(root, { recursive: true })
+    }
+
+    // Determine template
+    const templateDir = path.resolve(
+        fileURLToPath(import.meta.url),
+        '../..',
+        `templates/${framework.name}`
+    )
+
+    const write = (file: string, content?: string) => {
+        const targetPath = path.join(root, renameFiles[file] ?? file)
+        if (content) {
+            fs.writeFileSync(targetPath, content)
+        } else {
+            copy(path.join(templateDir, file), targetPath)
+        }
+    }
+
+    const files = fs.readdirSync(templateDir)
+    for (const file of files) {
+        write(file)
+    }
+
+    const pkg = JSON.parse(
+        fs.readFileSync(path.join(templateDir, 'package.json'), 'utf-8')
+    )
+
+    pkg.name = packageName || targetDir
+
+    write('package.json', JSON.stringify(pkg, null, 2))
+
+    console.log(`\n${bold(green('Done!'))} Now run:\n`)
+    if (root !== cwd) {
+        console.log(`  cd ${path.relative(cwd, root)}`)
+    }
+    console.log(`  npm install`)
+    console.log(`  npm run dev`)
+    console.log()
+}
+
+function copy(src: string, dest: string) {
+    const stat = fs.statSync(src)
+    if (stat.isDirectory()) {
+        copyDir(src, dest)
+    } else {
+        fs.copyFileSync(src, dest)
+    }
+}
+
+function copyDir(srcDir: string, destDir: string) {
+    fs.mkdirSync(destDir, { recursive: true })
+    for (const file of fs.readdirSync(srcDir)) {
+        const srcFile = path.resolve(srcDir, file)
+        const destFile = path.resolve(destDir, file)
+        copy(srcFile, destFile)
+    }
+}
+
+function isEmpty(path: string) {
+    const files = fs.readdirSync(path)
+    return files.length === 0 || (files.length === 1 && files[0] === '.git')
+}
+
+function emptyDir(dir: string) {
+    if (!fs.existsSync(dir)) {
+        return
+    }
+    for (const file of fs.readdirSync(dir)) {
+        if (file === '.git') {
+            continue
+        }
+        fs.rmSync(path.resolve(dir, file), { recursive: true, force: true })
+    }
+}
+
+init().catch((e) => {
+    console.error(e)
+})

package/templates/vanilla-js/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/templates/vanilla-js/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Velox App</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>

package/templates/vanilla-js/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "velox-app",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "check": "tsc"
+    },
+    "dependencies": {
+        "velox": "^0.0.1"
+    },
+    "devDependencies": {
+        "vite": "^5.2.0",
+        "vite-plugin-velox": "^0.0.1"
+    }
+}

package/templates/vanilla-js/src/App.js

@@ -0,0 +1,22 @@
+import { createSignal } from 'velox'
+
+export default function App() {
+    const [count, setCount] = createSignal(0)
+
+    return (
+        <div>
+        <h1>Hello Velox! </h1>
+            < div class="card" >
+                <button onclick={ () => setCount(c => c + 1) }>
+                    count is { count }
+    </button>
+        <p>
+    Edit < code > src / App.ts </code> and save to test HMR
+        </p>
+        </div>
+        < p class="read-the-docs" >
+            Click on the Velox logo to learn more
+                </p>
+                </div>
+  )
+}

package/templates/vanilla-js/src/main.js

@@ -0,0 +1,6 @@
+import { mount } from 'velox'
+import './style.css'
+import App from './App'
+
+const root = document.getElementById('app')!
+mount(App, root)

package/templates/vanilla-js/src/style.css

@@ -0,0 +1,56 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/vanilla-js/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import velox from 'vite-plugin-velox'
+
+export default defineConfig({
+    plugins: [velox()]
+})

package/templates/vanilla-ts/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/templates/vanilla-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Velox App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vanilla-ts/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "velox-app",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "check": "tsc"
+    },
+    "dependencies": {
+        "@remyyy/velox": "^0.0.1"
+    },
+    "devDependencies": {
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0",
+        "@remyyy/vite-plugin-velox": "^0.0.1"
+    }
+}

package/templates/vanilla-ts/src/App.tsx

@@ -0,0 +1,46 @@
+import { createSignal, Router, Route, Link } from 'velox';
+import './style.css';
+
+function Home() {
+    const [count, setCount] = createSignal(0);
+
+    return (
+        <div className="card">
+            <h1>Velox Framework</h1>
+            <div className="card-body">
+                <button onClick={() => setCount(c => c + 1)}>
+                    Count is {count}
+                </button>
+                <p>
+                    Edit <code>src/App.tsx</code> and save to test HMR
+                </p>
+            </div>
+            <p className="read-the-docs">
+                Click on the Velox logo to learn more
+            </p>
+        </div>
+    );
+}
+
+function About() {
+    return (
+        <div className="card">
+            <h1>About Page</h1>
+            <p>This is a demonstration of Velox Routing.</p>
+        </div>
+    );
+}
+
+export default function App() {
+    return (
+        <div className="app-container">
+            <Router>
+                <nav style="margin-bottom: 2rem;">
+                    <Link to="/">Home</Link> | <Link to="/about">About</Link>
+                </nav>
+                <Route path="/" component={Home} />
+                <Route path="/about" component={About} />
+            </Router>
+        </div>
+    );
+}

package/templates/vanilla-ts/src/main.ts

@@ -0,0 +1,6 @@
+import { mount } from 'velox'
+import './style.css'
+import App from './App'
+
+const root = document.getElementById('app')!
+mount(App, root)

package/templates/vanilla-ts/src/style.css

@@ -0,0 +1,82 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  text-align: center;
+}
+
+#app {
+  width: 100%;
+  max-width: 1280px;
+  padding: 2rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/vanilla-ts/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        /* Velox JSX - Brutally Strict */
+        "jsx": "react-jsx",
+        "jsxImportSource": "velox",
+        /* Linting - Safety First */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "src"
+    ]
+}

package/templates/vanilla-ts/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import velox from 'vite-plugin-velox'
+
+export default defineConfig({
+    plugins: [velox()]
+})

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "target": "es2020",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "esModuleInterop": true,
+        "lib": [
+            "esnext",
+            "dom"
+        ],
+        "skipLibCheck": true
+    },
+    "include": [
+        "src"
+    ]
+}