vueless 0.0.674 → 0.0.675

package/bin/commands/create.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-console */
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { cwd } from "node:process";
+import { cp, readFile, writeFile, rename } from "node:fs/promises";
+import { styleText } from "node:util";
+
+import { getDirFiles } from "../../utils/node/helper.js";
+import { replaceRelativeImports } from "../utils/formatUtil.js";
+import { getLastStorybookId } from "../utils/dataUtils.js";
+
+import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
+
+import { COMPONENTS, VUELESS_DIR, VUELESS_LOCAL_DIR } from "../../constants.js";
+
+const boilerplateName = "UBoilerplate";
+const boilerplatePath = path.join(cwd(), VUELESS_DIR, "ui.boilerplate");
+
+export async function createVuelessComponent(options) {
+  const [componentName] = options;
+
+  if (!componentName) {
+    throw new Error("Component name is required");
+  }
+
+  const isSrcDir = existsSync(path.join(cwd(), VUELESS_LOCAL_DIR));
+  const destPath = isSrcDir
+    ? path.join(cwd(), SRC_COMPONENTS_PATH, componentName)
+    : path.join(cwd(), COMPONENTS_PATH, componentName);
+
+  const isComponentExists = componentName in COMPONENTS || existsSync(destPath);
+
+  if (isComponentExists) {
+    throw new Error(`Component with name ${componentName} alrady exists`);
+  }
+
+  await cp(boilerplatePath, destPath, { recursive: true });
+
+  await modifyCreatedComponent(destPath, componentName);
+
+  const successMessage = styleText(
+    "green",
+    `Success: ${componentName} was created in ${destPath} directory`,
+  );
+
+  console.log(successMessage);
+}
+
+async function modifyCreatedComponent(destPath, componentName) {
+  const destFiles = await getDirFiles(destPath, "");
+  const lastStorybookId = await getLastStorybookId();
+
+  for await (const filePath of destFiles) {
+    const fileContent = await readFile(filePath, "utf-8");
+
+    let updatedContent = replaceRelativeImports(componentName, filePath, fileContent);
+    let targetPath = filePath;
+
+    if (filePath.endsWith("constants.ts")) {
+      updatedContent = updatedContent.replace(boilerplateName, componentName);
+    }
+
+    if (filePath.endsWith("stories.ts")) {
+      updatedContent = updatedContent
+        .replaceAll(boilerplateName, componentName)
+        .replace("{{component_id}}", String(lastStorybookId + 10));
+    }
+
+    if (targetPath.endsWith(`${boilerplateName}.vue`)) {
+      targetPath = targetPath.replace(boilerplateName, componentName);
+
+      await rename(filePath, targetPath);
+    }
+
+    await writeFile(targetPath, updatedContent);
+  }
+}

package/bin/commands/index.js

@@ -1,5 +1,7 @@
 import { vuelssInit } from "./init.js";
+import { createVuelessComponent } from "./create.js";
 
 export const commands = {
   init: vuelssInit,
+  create: createVuelessComponent,
 };

package/bin/commands/init.js

@@ -5,14 +5,10 @@ import path from "node:path";
 import { writeFile } from "node:fs/promises";
 import { styleText } from "node:util";
 
-import {
-  DEFAULT_VUELESS_CONFIG_NAME,
-  DEFAULT_VUELESS_CONFIG_CONTNET,
-  TYPESCRIPT_EXT,
-  JAVASCRIPT_EXT,
-} from "../constants.js";
-
-const destPath = path.join(cwd(), DEFAULT_VUELESS_CONFIG_NAME);
+import { DEFAULT_VUELESS_CONFIG_CONTNET } from "../constants.js";
+import { JAVASCRIPT_EXT, TYPESCRIPT_EXT, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+
+const destPath = path.join(cwd(), VUELESS_CONFIG_FILE_NAME);
 
 const vuelessInitOptions = ["--ts", "--js"];
 

package/bin/constants.js

@@ -1,8 +1,5 @@
-export const DEFAULT_VUELESS_CONFIG_NAME = "vueless.config.js";
-export const DEFAULT_EXIT_CODE = 0;
-export const FAILURE_CODE = 1;
-export const TYPESCRIPT_EXT = ".ts";
-export const JAVASCRIPT_EXT = ".js";
+export const SRC_COMPONENTS_PATH = "/src/components";
+export const COMPONENTS_PATH = "/components";
 export const DEFAULT_VUELESS_CONFIG_CONTNET = `
 export default {
   /**

package/bin/index.js

@@ -4,7 +4,7 @@
 
 import { commands } from "./commands/index.js";
 
-import { DEFAULT_EXIT_CODE, FAILURE_CODE } from "./constants.js";
+import { DEFAULT_EXIT_CODE, FAILURE_CODE } from "../constants.js";
 
 const [command, ...options] = process.argv.slice(2);
 

package/bin/utils/dataUtils.js

@@ -0,0 +1,53 @@
+import { existsSync } from "node:fs";
+import { cwd } from "node:process";
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+
+import { getDirFiles } from "../../utils/node/helper.js";
+
+import { SRC_COMPONENTS_PATH, COMPONENTS_PATH } from "../constants.js";
+import { VUELESS_DIR } from "../../constants.js";
+
+const storiesName = "stories.ts";
+
+export async function getLastStorybookId() {
+  const srcComponentsDir = path.join(cwd(), SRC_COMPONENTS_PATH);
+  const componentsDir = path.join(cwd(), COMPONENTS_PATH);
+  const vuelessPackagePath = path.join(cwd(), VUELESS_DIR);
+  const isSrcComponentsDir = existsSync(srcComponentsDir);
+  const isComponentsDir = existsSync(componentsDir);
+
+  const stories = await getDirFiles(vuelessPackagePath, storiesName);
+
+  if (isSrcComponentsDir) {
+    const srcComponentsDirStories = await getDirFiles(srcComponentsDir, storiesName);
+
+    stories.push(...srcComponentsDirStories);
+  }
+
+  if (isComponentsDir) {
+    const componentsDirStories = await getDirFiles(componentsDir, storiesName);
+
+    stories.push(...componentsDirStories);
+  }
+
+  let id = 200000;
+
+  for await (const storyPath of stories) {
+    const storyContent = await readFile(storyPath, "utf-8");
+
+    const storyIdLine = storyContent.split("\n").find((line, idx, array) => {
+      return line.includes("id:") && idx && array[idx - 1].includes("export default");
+    });
+
+    if (!storyIdLine) continue;
+
+    const currentId = parseInt(storyIdLine.split(" ").at(-1).replaceAll('"', ""));
+
+    if (currentId > id && !Number.isNaN(currentId)) {
+      id = currentId;
+    }
+  }
+
+  return id;
+}

package/bin/utils/formatUtil.js

@@ -0,0 +1,48 @@
+import path from "node:path";
+
+export function replaceRelativeImports(componentName, filePath, fileContent) {
+  const isTopLevelFile = path.dirname(filePath).endsWith(componentName);
+  const contentLines = fileContent.split("\n");
+
+  return contentLines.map((line) => replaceRelativeLineImports(line, isTopLevelFile)).join("\n");
+}
+
+function replaceRelativeLineImports(line, isTopLevelFile) {
+  const importRegex = /import\s+(?:[\w\s{},*]+)\s+from\s+(['"])(\.\.?\/.*?)(\.[tj]s)?\1(?!\?)/g;
+
+  const isTopLevelLocalImport = isTopLevelFile && !line.includes("../");
+  const isInnerLocalImport =
+    !isTopLevelFile && (line.includes("../") || line.includes("./")) && !line.includes("../../");
+
+  if (isTopLevelLocalImport || isInnerLocalImport) {
+    return line;
+  }
+
+  return line.replace(importRegex, (match, quote, oldPath, ext) => {
+    const isDefaultImport = match.includes("{");
+
+    if (!isDefaultImport) {
+      match = defaultToNamedImport(match);
+    }
+
+    return match.replace(oldPath + (ext || ""), "vueless");
+  });
+}
+
+function defaultToNamedImport(importString) {
+  const splittedImport = importString.split(" ");
+
+  return splittedImport
+    .map((importStringToken) => {
+      if (importStringToken.includes("import")) {
+        return `${importStringToken} { `;
+      }
+
+      if (importStringToken.includes("from")) {
+        return ` } ${importStringToken} `;
+      }
+
+      return importStringToken;
+    })
+    .join("");
+}

package/constants.js

@@ -221,6 +221,10 @@ export const VUELESS_ICONS_LOCAL_DIR = `src/${ICONS_DIR}`;
 export const VUELESS_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
 export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 
+/* System error codes */
+export const DEFAULT_EXIT_CODE = 0;
+export const FAILURE_CODE = 1;
+
 /* Other */
 export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{(U[^}]*)}/;
@@ -229,3 +233,5 @@ export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
 export const TAILWIND_VARIANT_DELIMITER = ":";
 export const TAILWIND_VARIANT_DELIMITER_REG_EXP = /:(?![^[]*])/;
+export const JAVASCRIPT_EXT = ".js";
+export const TYPESCRIPT_EXT = ".ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.674",
+  "version": "0.0.675",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -33,7 +33,7 @@
     "build": "npm run pre:start && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && cp -r bin dist/bin",
+    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",

package/plugin-vite.js

@@ -14,6 +14,8 @@ import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicP
 import { buildWebTypes } from "./utils/node/webTypes.js";
 import { hideHiddenStories, showHiddenStories } from "./utils/node/dynamicStories.js";
 
+import { DEFAULT_EXIT_CODE } from "./constants.js";
+
 /* Automatically importing Vueless components on demand */
 export const VuelessUnpluginComponents = (options) =>
   UnpluginVueComponents({
@@ -48,7 +50,7 @@ export const Vueless = function (options = {}) {
     clearTailwindSafelist(debug);
 
     /* stop command line process */
-    process.exit(0);
+    process.exit(DEFAULT_EXIT_CODE);
   });
 
   return {

package/ui.boilerplate/storybook/stories.ts

@@ -10,7 +10,7 @@ interface UBoilerplateArgs extends Props {
 }
 
 export default {
-  id: "110010",
+  id: "{{component_id}}",
   title: "Custom / UBoilerplate",
   component: UBoilerplate,
   args: {