create-vuetify 2.2.0 → 2.2.2

package/README.md

@@ -1,10 +1,10 @@
-# create-vuetify
+# Vuetify Create
 
 <p align="center">
-  <img src="https://cdn.vuetifyjs.com/docs/images/logos/v.png" height="128">
+  <img src="https://vuetifyjs.b-cdn.net/docs/images/one/create/vcreate-logo.png" alt="Vuetify Logo" width="200">
 </p>
 
-## Getting Started
+## 💿 Getting Started
 
 Using your terminal, navigate to your sites directory and run the following command:
 
@@ -28,13 +28,13 @@ pnpm create vuetify
 bun create vuetify
 ```
 
-## Vuetify
+## 🐉 Vuetify
 
 Vuetify is an Open Source UI Library that is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.
 
 The documentation for **Vuetify** is hosted [here](https://vuetifyjs.com/).
 
-### Support Development
+### 💖 Support Development
 
 Vuetify is an open source MIT project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
 
@@ -46,11 +46,7 @@ Vuetify is an open source MIT project that has been made possible due to the gen
 - [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
 - [Making a one-time donation with Paypal](https://paypal.me/vuetify)
 
-## Vite
-
-Vite is a build tool that significantly improves the front-end development experience. You can use Vite to set up a development environment for frameworks like Vue and React, and even for a vanilla JavaScript app with a dev server and hot reloading in just three commands. It also easily integrates with [TypeScript](https://vitejs.dev/guide/features.html#typescript).
-
-## Browser Support
+## 🌐 Browser Support
 
 | Browser | Status |
 | - | - |
@@ -61,15 +57,16 @@ Vite is a build tool that significantly improves the front-end development exper
 | Edge <79 | ⛔ Not supported |
 | Internet Explorer | ⛔ Not supported |
 
-## Resources
+## 📃 Resources
 
 - 📄 [Documentation](https://vuetifyjs.com/)
 - 🚨 [Report an Issue](https://issues.vuetifyjs.com/)
 - 🏬 [Vuetify Store](https://store.vuetifyjs.com/)
+- 🗑️ [Vuetify Bin](https://bin.vuetifyjs.com/)
 - 🎮 [Vuetify Playground](https://play.vuetifyjs.com/)
-- 💬 [Discord](https://community.vuetifyjs.com)
+- 💬 [Discord](https://community.vuetifyjs.com/)
 
-## Licensing
+## ⭐ Licensing
 
 - Copyright 2023 Vuetify <https://vuetifyjs.com/>
 - Vuetify [License Information](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md)

package/dist/index.mjs

@@ -0,0 +1,256 @@
+// src/index.ts
+import { dirname as dirname2, join as join2, resolve as resolve3 } from "path";
+import { fileURLToPath } from "url";
+import { mkdirSync as mkdirSync2, rmSync, writeFileSync as writeFileSync2 } from "fs";
+
+// src/utils/prompts.ts
+import { resolve, join } from "path";
+import { existsSync, readdirSync } from "fs";
+
+// src/utils/presets.ts
+var defaultContext = {
+  useEslint: false,
+  useRouter: false,
+  useStore: false
+};
+var baseContext = {
+  ...defaultContext,
+  useEslint: true,
+  useRouter: true
+};
+var essentialsContext = {
+  ...baseContext,
+  useStore: true
+};
+var presets = {
+  base: baseContext,
+  default: defaultContext,
+  essentials: essentialsContext
+};
+
+// src/utils/prompts.ts
+import { red } from "kolorist";
+import prompts from "prompts";
+import validate from "validate-npm-package-name";
+var promptQuestions = (context) => [
+  {
+    name: "projectName",
+    type: "text",
+    message: "Project name:",
+    initial: "vuetify-project",
+    validate: (v) => {
+      const { errors } = validate(String(v).trim());
+      return !(errors && errors.length) || `Package ${errors[0]}`;
+    }
+  },
+  {
+    name: "canOverwrite",
+    active: "Yes",
+    inactive: "No",
+    initial: false,
+    type: (_, { projectName }) => {
+      const projectPath = join(context.cwd, projectName);
+      return !existsSync(projectPath) || readdirSync(projectPath).length === 0 ? null : "toggle";
+    },
+    message: (prev) => `The project path: ${resolve(context.cwd, prev)} already exists, would you like to overwrite this directory?`
+  },
+  {
+    name: "usePreset",
+    type: context.usePreset ? null : "select",
+    message: "Which preset would you like to install?",
+    initial: 0,
+    choices: [
+      { title: "Default (Vuetify)", value: "default" },
+      { title: "Base (Default, Routing)", value: "base" },
+      { title: "Essentials (Base, Layouts, Pinia)", value: "essentials" }
+    ]
+  },
+  {
+    name: "useTypeScript",
+    type: context.useTypeScript ? null : "toggle",
+    message: "Use TypeScript?",
+    active: "Yes",
+    inactive: "No",
+    initial: false
+  },
+  {
+    name: "usePackageManager",
+    type: "select",
+    message: "Would you like to install dependencies with yarn, npm, pnpm, or bun?",
+    initial: 0,
+    choices: [
+      { title: "yarn", value: "yarn" },
+      { title: "npm", value: "npm" },
+      { title: "pnpm", value: "pnpm" },
+      { title: "bun", value: "bun" },
+      { title: "none", value: null }
+    ]
+  },
+  {
+    name: "installDependencies",
+    type: context.installDependencies ? null : "toggle",
+    message: "Install Dependencies?",
+    active: "Yes",
+    inactive: "No",
+    initial: false
+  }
+];
+var promptOptions = {
+  onCancel: () => {
+    throw new Error(red("\u2716") + " Operation cancelled");
+  }
+};
+var initPrompts = async (context) => {
+  if (context.usePreset) {
+    context = {
+      ...context,
+      ...presets[context.usePreset]
+    };
+  }
+  const answers = await prompts(promptQuestions(context), promptOptions);
+  return {
+    ...context,
+    ...answers
+  };
+};
+
+// src/index.ts
+import { red as red2 } from "kolorist";
+import minimist from "minimist";
+
+// src/utils/installDependencies.ts
+import { spawnSync } from "child_process";
+function installDependencies(projectRoot, packageManager) {
+  const cmd = packageManager === "npm" ? "npm install" : packageManager === "yarn" ? "yarn" : packageManager === "bun" ? "bun install" : "pnpm install";
+  const spawn = spawnSync(cmd, {
+    cwd: projectRoot,
+    stdio: ["inherit", "inherit", "pipe"],
+    shell: true
+  });
+  if (spawn.error) {
+    throw spawn.error;
+  }
+}
+
+// src/utils/renderTemplate.ts
+import { copyFileSync, mkdirSync, readdirSync as readdirSync2, readFileSync, statSync, writeFileSync } from "fs";
+import { basename, dirname, resolve as resolve2 } from "path";
+
+// src/utils/deepMerge.ts
+var isObject = (v) => {
+  return v === Object(v) && v !== null && !Array.isArray(v);
+};
+var deepMerge = (...sources) => sources.reduce((acc, curr) => {
+  Object.keys(curr).forEach((key) => {
+    if (Array.isArray(acc[key]) && Array.isArray(curr[key])) {
+      acc[key] = Array.from(new Set(acc[key].concat(curr[key])));
+    } else if (isObject(acc[key]) && isObject(curr[key])) {
+      acc[key] = deepMerge(acc[key], curr[key]);
+    } else {
+      acc[key] = curr[key];
+    }
+  });
+  return acc;
+}, {});
+
+// src/utils/renderTemplate.ts
+function mergePkg(source, destination) {
+  const target = JSON.parse(readFileSync(destination, "utf8"));
+  const src = JSON.parse(readFileSync(source, "utf8"));
+  const mergedPkg = deepMerge(target, src);
+  const keysToSort = ["devDependencies", "dependencies"];
+  keysToSort.forEach((k) => {
+    mergedPkg[k] = Object.keys(mergedPkg[k]).sort().reduce((a, c) => (a[c] = mergedPkg[k][c], a), {});
+  });
+  writeFileSync(destination, JSON.stringify(mergedPkg, null, 2) + "\n");
+}
+function renderDirectory(source, destination) {
+  mkdirSync(destination, { recursive: true });
+  readdirSync2(source).forEach((path) => renderTemplate(resolve2(source, path), resolve2(destination, path)));
+}
+function renderFile(source, destination) {
+  const filename = basename(source);
+  if (filename.startsWith("_"))
+    destination = resolve2(dirname(destination), filename.replace("_", "."));
+  if (filename === "package.json")
+    mergePkg(source, destination);
+  else
+    copyFileSync(source, destination);
+}
+function renderTemplate(source, destination) {
+  if (statSync(source).isDirectory()) {
+    renderDirectory(source, destination);
+  } else {
+    renderFile(source, destination);
+  }
+}
+
+// src/index.ts
+var validPresets = ["base", "custom", "default", "essentials"];
+async function run() {
+  const argv = minimist(process.argv.slice(2), {
+    alias: {
+      "typescript": ["ts"]
+    }
+  });
+  if (argv.preset && !validPresets.includes(argv.preset)) {
+    throw new Error(`'${argv.preset}' is not a valid preset. Valid presets are: ${validPresets.join(", ")}.`);
+  }
+  const banner = "\x1B[38;2;22;151;246mV\x1B[39m\x1B[38;2;22;147;242mu\x1B[39m\x1B[38;2;22;144;238me\x1B[39m\x1B[38;2;22;140;234mt\x1B[39m\x1B[38;2;23;136;229mi\x1B[39m\x1B[38;2;23;133;225mf\x1B[39m\x1B[38;2;23;129;221my\x1B[39m\x1B[38;2;23;125;217m.\x1B[39m\x1B[38;2;23;121;213mj\x1B[39m\x1B[38;2;23;118;209ms\x1B[39m \x1B[38;2;24;114;204m-\x1B[39m \x1B[38;2;24;110;200mM\x1B[39m\x1B[38;2;24;107;196ma\x1B[39m\x1B[38;2;24;103;192mt\x1B[39m\x1B[38;2;32;110;197me\x1B[39m\x1B[38;2;39;118;202mr\x1B[39m\x1B[38;2;47;125;207mi\x1B[39m\x1B[38;2;54;132;211ma\x1B[39m\x1B[38;2;62;140;216ml\x1B[39m \x1B[38;2;70;147;221mC\x1B[39m\x1B[38;2;77;154;226mo\x1B[39m\x1B[38;2;85;161;231mm\x1B[39m\x1B[38;2;93;169;236mp\x1B[39m\x1B[38;2;100;176;240mo\x1B[39m\x1B[38;2;108;183;245mn\x1B[39m\x1B[38;2;115;191;250me\x1B[39m\x1B[38;2;123;198;255mn\x1B[39m\x1B[38;2;126;199;255mt\x1B[39m \x1B[38;2;129;201;255mF\x1B[39m\x1B[38;2;133;202;255mr\x1B[39m\x1B[38;2;136;204;255ma\x1B[39m\x1B[38;2;139;205;255mm\x1B[39m\x1B[38;2;142;207;255me\x1B[39m\x1B[38;2;145;208;255mw\x1B[39m\x1B[38;2;149;210;255mo\x1B[39m\x1B[38;2;152;211;255mr\x1B[39m\x1B[38;2;155;212;255mk\x1B[39m \x1B[38;2;158;214;255mf\x1B[39m\x1B[38;2;161;215;255mo\x1B[39m\x1B[38;2;164;217;255mr\x1B[39m \x1B[38;2;168;218;255mV\x1B[39m\x1B[38;2;171;220;255mu\x1B[39m\x1B[38;2;174;221;255me\x1B[39m";
+  console.log(`
+${banner}
+`);
+  const context = {
+    canOverwrite: false,
+    cwd: process.cwd(),
+    projectName: "vuetify-project",
+    useRouter: false,
+    useTypeScript: argv.typescript,
+    usePreset: argv.preset,
+    useStore: void 0,
+    usePackageManager: void 0
+  };
+  const {
+    canOverwrite,
+    cwd,
+    projectName,
+    useTypeScript,
+    usePackageManager,
+    installDependencies: installDeps,
+    usePreset
+  } = await initPrompts(context);
+  const projectRoot = join2(cwd, projectName);
+  if (canOverwrite) {
+    rmSync(projectRoot, { recursive: true });
+  }
+  mkdirSync2(projectRoot);
+  writeFileSync2(resolve3(projectRoot, "package.json"), JSON.stringify({ name: projectName }, null, 2));
+  const jsOrTs = useTypeScript ? "typescript" : "javascript";
+  let templatePath = resolve3(dirname2(fileURLToPath(import.meta.url)), "../template", jsOrTs);
+  console.log("\n\u25CC Generating scaffold...");
+  renderTemplate(resolve3(templatePath, "default"), projectRoot);
+  if (["base", "essentials"].includes(usePreset)) {
+    renderTemplate(resolve3(templatePath, "base"), projectRoot);
+  }
+  if (["essentials", "recommended"].includes(usePreset)) {
+    renderTemplate(resolve3(templatePath, "essentials"), projectRoot);
+  }
+  if (usePackageManager && installDeps) {
+    console.log(`\u25CC Installing dependencies with ${usePackageManager}...
+`);
+    installDependencies(projectRoot, usePackageManager);
+  }
+  console.log(`
+${projectName} has been generated at ${projectRoot}
+`);
+}
+run().then(() => {
+  console.log("Discord community: https://community.vuetifyjs.com");
+  console.log("Github: https://github.com/vuetifyjs/vuetify");
+  console.log("Support Vuetify: https://github.com/sponsors/johnleider");
+}).catch((err) => {
+  console.error(`
+${red2("\u2716")} ${err}
+`);
+  process.exit(1);
+});

package/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import './dist/index.mjs'

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "create-vuetify",
-  "version": "2.2.0",
-  "main": "dist/output.cjs",
+  "version": "2.2.2",
   "author": "Elijah Kotyluk <elijah@elijahkotyluk.com>",
   "license": "MIT",
   "type": "module",
   "bin": {
-    "create-vuetify": "./dist/output.cjs"
+    "create-vuetify": "index.js"
   },
   "files": [
-    "dist/output.cjs",
-    "template"
+    "index.js",
+    "template",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   },
   "scripts": {
     "build": "node ./scripts/build.js",
-    "start": "node ./dist/output.cjs",
+    "start": "node ./index.js",
     "lint": "eslint --fix 'src/**'",
     "prepublishOnly": "npm run build"
   },

package/template/javascript/base/src/router/index.js

@@ -9,7 +9,7 @@
 import { createRouter, createWebHistory } from 'vue-router/auto'
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
 })
 
 export default router

package/template/javascript/default/jsconfig.json

@@ -4,7 +4,7 @@
     "target": "es5",
     "module": "esnext",
     "baseUrl": "./",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "paths": {
       "@/*": [
         "src/*"

package/template/javascript/default/package.json

@@ -8,8 +8,8 @@
   "dependencies": {
     "@mdi/font": "7.0.96",
     "roboto-fontface": "*",
-    "vue": "^3.3.0",
-    "vuetify": "^3.0.0"
+    "vue": "^3.4.0",
+    "vuetify": "^3.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/template/javascript/essentials/src/router/index.js

@@ -9,7 +9,7 @@ import { createRouter, createWebHistory } from 'vue-router/auto'
 import { setupLayouts } from 'virtual:generated-layouts'
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   extendRoutes: setupLayouts,
 })
 

package/template/typescript/base/src/router/index.ts

@@ -8,7 +8,7 @@
 import { createRouter, createWebHistory } from 'vue-router/auto'
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
 })
 
 export default router

package/template/typescript/default/tsconfig.json

@@ -5,7 +5,7 @@
     "lib": ["DOM", "ESNext"],
     "baseUrl": ".",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "paths": {
       "@/*": ["src/*"]
     },

package/template/typescript/default/tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.mts"]

package/template/typescript/essentials/src/router/index.ts

@@ -9,7 +9,7 @@ import { createRouter, createWebHistory } from 'vue-router/auto'
 import { setupLayouts } from 'virtual:generated-layouts'
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   extendRoutes: setupLayouts,
 })