vueless 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/src/library.web-types-gen/index.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+import minimist from "minimist";
+import { extractConfig } from "./lib/config.js";
+import build from "./lib/build.js";
+
+const {
+  _: pathArray,
+  configFile,
+  watch,
+  cwd,
+} = minimist(process.argv.slice(2), {
+  alias: { c: "configFile", w: "watch" },
+});
+
+const conf = await extractConfig(cwd || process.cwd(), watch, configFile, pathArray);
+
+build(conf);

package/src/library.web-types-gen/lib/build.js

@@ -0,0 +1,252 @@
+import path from "path";
+import { globbySync } from "globby";
+import * as chokidar from "chokidar";
+import { parse } from "vue-docgen-api";
+import * as fs from "fs";
+import mkdirp from "mkdirp";
+import _ from "lodash-es";
+import { merge } from "lodash-es";
+
+export default async function build(config) {
+  config.componentsRoot = path.resolve(config.cwd, config.componentsRoot);
+  config.outFile = path.resolve(config.cwd, config.outFile);
+
+  // then create the watcher if necessary
+  const { watcher, componentFiles } = getSources(config.components, config.componentsRoot);
+
+  // eslint-disable-next-line no-console
+  console.log("Building web-types to " + config.outFile);
+
+  const cache = {};
+  const buildWebTypesBound = rebuild.bind(null, config, componentFiles, cache, watcher);
+
+  try {
+    await buildWebTypesBound();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error("Error building web-types: " + e.message);
+    await watcher.close();
+
+    return;
+  }
+
+  if (config.watch) {
+    watcher
+      .on("add", buildWebTypesBound)
+      .on("change", buildWebTypesBound)
+      .on("unlink", async (filePath) => {
+        // eslint-disable-next-line no-console
+        console.log("Rebuilding on file removal " + filePath);
+        delete cache[filePath];
+        await writeDownWebTypesFile(config, Object.values(cache), config.outFile);
+      });
+  } else {
+    await watcher.close();
+  }
+}
+
+function getSources(components, cwd) {
+  const watcher = chokidar.watch(components, { cwd });
+
+  const allComponentFiles = globbySync(components, { cwd });
+
+  return { watcher, componentFiles: allComponentFiles };
+}
+
+async function rebuild(config, files, cachedContent, watcher, changedFilePath) {
+  const cacheWebTypesContent = async (filePath) => {
+    cachedContent[filePath.replace(/\\/g, "/")] = await extractInformation(
+      path.join(config.componentsRoot, filePath),
+      config,
+    );
+
+    return true;
+  };
+
+  if (changedFilePath) {
+    // eslint-disable-next-line no-console
+    console.log("Rebuilding on update file " + changedFilePath);
+
+    try {
+      // if in chokidar mode (watch), the path of the file that was just changed
+      // is passed as an argument. We only affect the changed file and avoid re-parsing the rest
+      await cacheWebTypesContent(changedFilePath);
+    } catch (e) {
+      throw new Error(
+        `Error building file ${config.outFile} when file ${changedFilePath} has changed: ${e.message}`,
+      );
+    }
+  } else {
+    try {
+      // if we are initializing the current file, parse all components
+      await Promise.all(files.map(cacheWebTypesContent));
+    } catch (e) {
+      throw new Error(`Error building file ${config.outFile}: ${e.message}`);
+    }
+  }
+
+  // and finally save all concatenated values to the markdown file
+  await writeDownWebTypesFile(config, Object.values(cachedContent), config.outFile);
+}
+
+async function writeDownWebTypesFile(config, definitions, destFilePath) {
+  const destFolder = path.dirname(destFilePath);
+
+  await mkdirp(destFolder);
+  let writeStream = fs.createWriteStream(destFilePath);
+  const contents = {
+    framework: "vue",
+    name: config.packageName,
+    version: config.packageVersion,
+    contributions: {
+      html: {
+        "description-markup": config.descriptionMarkup,
+        "types-syntax": config.typesSyntax,
+        tags: _(definitions)
+          .flatMap((d) => d.tags || [])
+          .orderBy("name", "asc")
+          .value(),
+        attributes: _(definitions)
+          .flatMap((d) => d.attributes || [])
+          .orderBy("name", "asc")
+          .value(),
+        "vue-filters": _(definitions)
+          .flatMap((d) => d["vue-filters"] || [])
+          .orderBy("name", "asc")
+          .value(),
+      },
+    },
+  };
+
+  const html = contents.contributions.html;
+
+  if (html.tags?.length == 0) html.tags = undefined;
+  if (html.attributes?.length == 0) html.attributes = undefined;
+  if (html["vue-filters"]?.length == 0) html["vue-filters"] = undefined;
+
+  writeStream.write(JSON.stringify(contents, null, 2));
+
+  // close the stream
+  writeStream.close();
+}
+
+function ensureRelative(path) {
+  // The .replace() is a fix for paths that end up like "./src\\components\\General\\VerticalButton.vue" on windows machines.
+  return (path.startsWith("./") || path.startsWith("../") ? path : "./" + path).replace(/\\/g, "/");
+}
+
+async function extractInformation(absolutePath, config) {
+  const doc = await parse(absolutePath, config.apiOptions);
+  const name = doc.name || doc.displayName;
+  let description = doc.description?.trim() ?? "";
+
+  // Get default component config
+  const configPath = path.join(path.dirname(absolutePath), "configs/default.config.js");
+  let globalConfig = null;
+  let defaultConfig = null;
+  let defaultValues = null;
+
+  if (fs.existsSync(configPath)) {
+    const defaultConfigFile = fs.readFileSync(configPath).toString();
+    const globalConfigFile = fs.readFileSync(config.cwd + "/vueless.config.js").toString();
+
+    defaultConfig = getDefaultConfigJson(defaultConfigFile);
+    globalConfig = getGlobalConfigJson(globalConfigFile, name);
+    defaultValues = merge(defaultConfig.defaultVariants, globalConfig[name]?.defaultVariants);
+  }
+
+  function getDefaultConfigJson(fileContents) {
+    const objectStartIndex = fileContents.indexOf("{");
+    const variablePattern = /([^:]+):\s*(?!true|false|undefined)([a-zA-Z_]\w*)/g;
+    let objectString = fileContents
+      .substring(objectStartIndex)
+      .replace("};", "}")
+      .replace(/undefined/g, '"undefined"')
+      .replace(variablePattern, (match, key) => key + ": {}");
+
+    return eval("(" + objectString + ")"); // Converting into JS object
+  }
+
+  function getGlobalConfigJson(fileContents, componentName) {
+    const startIndex = fileContents.indexOf(`${componentName}:`);
+
+    // find index of the last closing bracket
+    let endIndex = -1;
+    let braceCount = 0;
+
+    for (let i = startIndex; i < fileContents.length; i++) {
+      if (fileContents[i] === "{") {
+        braceCount++;
+      } else if (fileContents[i] === "}") {
+        braceCount--;
+
+        if (braceCount === 0) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+
+    // Get component config raw string
+    const rawString = fileContents.slice(startIndex, endIndex);
+
+    // If the stings are present in config but commented - remove them
+    const stringWithoutComments = rawString.replace(/\/\/.*$/gm, "");
+
+    // Check if final JSON string is valid: TODO: find better solution
+    if (!stringWithoutComments.includes("}")) return {};
+
+    const jsonString = `{${stringWithoutComments}\n}}`
+      .replace(/[`']/g, '"')
+      .replace(/(\w+)\s*: /g, '"$1":')
+      .replace(/,\s*}/g, "}");
+
+    return JSON.parse(jsonString);
+  }
+
+  doc.docsBlocks?.forEach((block) => {
+    if (description.length > 0) {
+      if (config.descriptionMarkup === "html") {
+        description += "<br/><br/>";
+      } else {
+        description += "\n\n";
+      }
+    }
+
+    description += block;
+  });
+
+  return {
+    tags: [
+      {
+        name,
+        description,
+        attributes: doc.props?.map((prop) => ({
+          name: prop.name,
+          required: prop.required,
+          description: prop.tags?.ignore ? "@ignore: " + prop.description : prop.description,
+          value: {
+            kind: "expression",
+            type: prop.values ? `'${prop.values.join("' | '")}'` : prop.type?.name ?? "any",
+          },
+          default:
+            defaultValues && prop.name in defaultValues
+              ? defaultValues[prop.name].toString()
+              : prop.defaultValue?.value.toString(),
+        })),
+        events: doc.events?.map((event) => ({
+          name: event.name,
+          description: event.description,
+        })),
+        slots: doc.slots?.map((slot) => ({
+          name: slot.name,
+          description: slot.description,
+        })),
+        source: {
+          module: ensureRelative(path.relative(config.cwd, absolutePath)).substring(1), // TODO: maybe substring should be removed when it turns to package
+          symbol: doc.exportName,
+        },
+      },
+    ],
+  };
+}

package/src/library.web-types-gen/lib/config.js

@@ -0,0 +1,32 @@
+import path from "path";
+import fs from "fs";
+import { readFile } from "fs/promises";
+
+export async function extractConfig(cwd, watch = false, configFileFromCmd, pathArray = []) {
+  const configFilePath = configFileFromCmd
+    ? path.resolve(cwd, configFileFromCmd)
+    : path.join(cwd, "web-types.config.js");
+  const [componentsFromCmd, outFileFromCmd] = pathArray;
+
+  const fileContent = await readFile(path.join(cwd, "package.json"), "utf-8");
+  const packageJson = JSON.parse(fileContent);
+
+  let additionalConfig = {};
+
+  if (fs.existsSync(configFilePath)) {
+    additionalConfig = await import(configFilePath);
+  }
+
+  return {
+    cwd,
+    watch,
+    componentsRoot: configFilePath ? path.dirname(configFilePath) : cwd,
+    components: componentsFromCmd || "(.vueless/**/*.vue|src/components/**/*.vue)",
+    outFile: outFileFromCmd || packageJson["web-types"] || "./web-types.json",
+    packageName: packageJson["name"],
+    packageVersion: packageJson["version"],
+    typesSyntax: "typescript",
+    descriptionMarkup: "markdown",
+    ...additionalConfig,
+  };
+}

package/src/library.web-types-gen/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/src/plugin.vite/index.js

@@ -0,0 +1,59 @@
+/* eslint-disable no-console */
+
+import UnpluginVueComponents from "unplugin-vue-components/vite";
+import unpluginComponentsResolver from "./services/unpluginComponentsResolver";
+import { copyIcons, removeIcons } from "./services/iconResolver.service";
+import { loadSvg } from "./services/svgLoader.service";
+import { createTailwindSafelist } from "./services/tailwindSafelist.service";
+
+/* Automatically importing Vueless components on demand */
+export const VuelessUnpluginComponents = (options) =>
+  UnpluginVueComponents({
+    resolvers: [unpluginComponentsResolver],
+    dts: false,
+    ...options,
+  });
+
+/*
+  – Creates tailwind colors safelist (collect only used on the project colors).
+  – Collects SVG icons for build (UIcon bundle size optimization).
+  – Loads SVG images as a Vue components.
+ */
+export const Vueless = function (options = {}) {
+  /* remove icons if server stopped */
+  process.on("SIGINT", () => {
+    removeIcons(options.debug);
+    process.exit(0);
+  });
+
+  return {
+    name: "vite-plugin-vue-vueless",
+    enforce: "pre",
+
+    config: () => ({
+      define: {
+        "process.env": {},
+      },
+    }),
+
+    configResolved: (config) => {
+      if (config.command === "build") {
+        /* collect used in project colors for tailwind safelist */
+        createTailwindSafelist();
+        /* dynamically copy icons before build */
+        copyIcons(options.mode, options.debug);
+      }
+
+      if (config.command === "dev" || config.command === "serve") {
+        /* remove dynamically copied icons after build */
+        removeIcons(options.debug);
+      }
+    },
+
+    /* remove dynamically copied icons after build */
+    buildEnd: () => removeIcons(options.debug),
+
+    /* load SVG images as a Vue components */
+    load: async (id) => await loadSvg(id, options),
+  };
+};

package/src/plugin.vite/services/iconResolver.service.js

@@ -0,0 +1,291 @@
+/**
+ This scrypt find icon names from the UIcon props and objects across the project
+ and copy SVG icons from the default icons library (@material-symbols or other from config)
+ to the ".../.generated" folder.
+
+ Those icons will be used only in the build stage.
+ The script is needed to avoid all @material-symbols icons set in the project bundle.
+ */
+
+/* eslint-disable no-console */
+import fs from "fs";
+import path from "path";
+import { createRequire } from "node:module";
+import { merge } from "lodash-es";
+
+import vuelessConfig from "../../../vueless.config.js";
+
+const DESTINATION_DIR = "./src/assets/images/.generated";
+const DEFAULT_CONFIG_PATH = ".vueless/ui.image-icon/configs/default.config.js";
+const STORYBOOK_STORY_EXTENSION = ".stories.js";
+const U_ICON = "UIcon";
+
+const defaultVariants = getMergedConfig();
+const args = parseArgs();
+
+let isDebug = false;
+
+// run method manually
+if (args.run) {
+  copyIcons(args.mode);
+}
+
+// perform icons copy magick... ✨
+export function copyIcons(mode = "src", debug) {
+  isDebug = debug || false;
+
+  removeIcons();
+
+  const vuelessVueFiles = getFiles(".vueless", ".vue");
+  const vuelessJsFiles = getFiles(".vueless", ".js");
+  const vuelessLayoutsVueFiles = getFiles(".vueless-layouts", ".vue");
+  const vuelessLayoutsJsFiles = getFiles(".vueless-layouts", ".js");
+  const vuelessServicesJsFiles = getFiles(".vueless-services", ".js");
+
+  findAndCopyIcons([
+    ...vuelessVueFiles,
+    ...vuelessJsFiles,
+    ...vuelessLayoutsVueFiles,
+    ...vuelessLayoutsJsFiles,
+    ...vuelessServicesJsFiles,
+    "vueless.config.js",
+    "vueless.config.ts",
+  ]);
+
+  if (mode === "src" || mode === "all") {
+    const srcVueFiles = getFiles("src", ".vue");
+    const srcJsFiles = getFiles("src", ".js");
+    const srcTsFiles = getFiles("src", ".ts");
+
+    findAndCopyIcons([...srcVueFiles, ...srcJsFiles, ...srcTsFiles]);
+  }
+
+  if (mode === "storybook" || mode === "all") {
+    const vuelessStoriesJsFiles = getFiles(".vueless", STORYBOOK_STORY_EXTENSION);
+
+    findAndCopyIcons(vuelessStoriesJsFiles);
+  }
+}
+
+export function removeIcons() {
+  if (fs.existsSync(DESTINATION_DIR)) {
+    fs.rmSync(DESTINATION_DIR, { recursive: true, force: true });
+
+    if (isDebug) {
+      console.log("Dynamically copied icons was successfully removed.");
+    }
+  }
+}
+
+function findAndCopyIcons(files) {
+  const safelistIcons = getSafelistIcons();
+
+  safelistIcons.forEach((iconName) => {
+    copyFile(iconName, false);
+    copyFile(iconName, true);
+  });
+
+  files.forEach(async (file) => {
+    const fileContents = fs.existsSync(file) ? fs.readFileSync(file).toString() : "";
+
+    /* Objects across the project */
+    const objectRegExp = /(\{|[^{])[^}]*\b\w*icon\w*:\s*["']([^"']+)["'][^}]*}/gi;
+    const objectMatches = fileContents.match(objectRegExp);
+
+    if (objectMatches) {
+      for (const match of objectMatches) {
+        const iconNameRegex = /\w*(icon)\w*:\s*["']([^"'\s]+)["']/gi;
+        const iconNameMatch = iconNameRegex.exec(match);
+        const iconName = iconNameMatch && iconNameMatch[2];
+
+        const iconFillRegex = /\w*(fill)\w*:\s*(true|false)/gi;
+        const fillMatch = iconFillRegex.exec(match);
+        const fill = fillMatch ? fillMatch[2] : defaultVariants.fill;
+
+        try {
+          if (iconName) {
+            copyFile(iconName, fill);
+          }
+        } catch (error) {
+          // console.log(error);
+        }
+
+        iconNameRegex.lastIndex = 0;
+        iconFillRegex.lastIndex = 0;
+      }
+    }
+
+    /* UIcon */
+    const regexName = /\bname\s*=\s*["']([^"'\s]+)["']/;
+    const regexFill = /(:(fill)="([^"]*)"|fill)/;
+
+    const matchNameArray = fileContents.match(/<UIcon[^>]+>/g);
+
+    if (matchNameArray) {
+      for (const match of matchNameArray) {
+        const iconNameMatch = regexName.exec(match);
+        const iconFillMatch = regexFill.exec(match);
+
+        const iconName = iconNameMatch ? iconNameMatch[1] : null;
+        const fill = iconFillMatch ? iconFillMatch[1] : defaultVariants.fill;
+
+        try {
+          if (iconName) {
+            if (iconFillMatch && iconFillMatch[3]) {
+              copyFile(iconName, false);
+              copyFile(iconName, true);
+            } else {
+              copyFile(iconName, fill);
+            }
+          }
+        } catch (error) {
+          // console.log(error);
+        }
+      }
+    }
+
+    /* UIcon with ternary operator */
+    const ternaryRegexName = /\bname="[^']*'([^']*)'\s*:\s*'([^']*)'/;
+    const ternaryRegexFill = /(:(fill)="([^"]*)"|fill)/;
+
+    const ternaryMatchNameArray = fileContents.match(/<UIcon[^>]+>/g);
+
+    if (ternaryMatchNameArray) {
+      for (const match of ternaryMatchNameArray) {
+        const iconNameMatch = ternaryRegexName.exec(match);
+        const iconFillMatch = ternaryRegexFill.exec(match);
+
+        const fill = iconFillMatch ? iconFillMatch[1] : defaultVariants.fill;
+
+        try {
+          if (iconFillMatch && iconFillMatch[3]) {
+            copyFile(iconNameMatch[1], false);
+            copyFile(iconNameMatch[2], true);
+            copyFile(iconNameMatch[1], false);
+            copyFile(iconNameMatch[2], true);
+          } else {
+            copyFile(iconNameMatch[1], fill);
+            copyFile(iconNameMatch[2], fill);
+          }
+        } catch (error) {
+          // console.log(error);
+        }
+      }
+    }
+  });
+}
+
+function getFiles(dirPath, extension, fileList) {
+  const files = fs.readdirSync(dirPath);
+
+  fileList = fileList || [];
+
+  files.forEach((file) => {
+    const filePath = path.join(dirPath, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat.isDirectory()) {
+      fileList = getFiles(filePath, extension, fileList);
+    } else {
+      const isStorybookStory =
+        filePath.endsWith(STORYBOOK_STORY_EXTENSION) && extension !== STORYBOOK_STORY_EXTENSION;
+
+      if (filePath.endsWith(extension) && !isStorybookStory) {
+        fileList.push(filePath);
+      }
+    }
+  });
+
+  return fileList;
+}
+
+function copyFile(name, fill) {
+  name = name.toLowerCase();
+  fill = Boolean(fill);
+
+  const library = defaultVariants.library;
+  const weight = defaultVariants.weight;
+  const style = defaultVariants.style;
+
+  const require = createRequire(import.meta.url);
+
+  /* eslint-disable prettier/prettier */
+  const libraries = {
+    "@material-symbols": {
+      source: `${library}/svg-${weight}/${style}/${name}${fill ? "-fill" : ""}.svg`,
+      destination: `${DESTINATION_DIR}/${library}/svg-${weight}/${style}/${name}${fill ? "-fill" : ""}.svg`,
+    },
+    "bootstrap-icons": {
+      source: `${library}/icons/${name}${fill ? "-fill" : ""}.svg`,
+      destination: `${DESTINATION_DIR}/${library}/icons/${name}${fill ? "-fill" : ""}.svg`,
+    },
+    heroicons: {
+      source: `${library}/${style}/${fill ? "solid" : "outline"}/${name}.svg`,
+      destination: `${DESTINATION_DIR}/${library}/${style}/${fill ? "solid" : "outline"}/${name}.svg`,
+    },
+  };
+  /* eslint-enable prettier/prettier */
+
+  const { source, destination } = libraries[library];
+
+  if (fs.existsSync(destination)) {
+    return;
+  }
+
+  const destDir = path.dirname(destination);
+
+  fs.mkdirSync(destDir, { recursive: true });
+  fs.copyFile(require.resolve(source), destination, (err) => {
+    if (args.debug || isDebug) {
+      err
+        ? console.error(`Error copying icon "${name}":`, err)
+        : console.log(`Icon "${name}" copied successfully!`);
+    }
+  });
+}
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const parsedArgs = {};
+
+  let currentKey = null;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg.startsWith("--")) {
+      const key = arg.slice(2);
+
+      parsedArgs[key] = true;
+      currentKey = key;
+    } else if (currentKey) {
+      parsedArgs[currentKey] = arg;
+      currentKey = null;
+    }
+  }
+
+  return parsedArgs;
+}
+
+function getSafelistIcons() {
+  return vuelessConfig.component ? vuelessConfig.component[U_ICON]?.safelistIcons || [] : [];
+}
+
+function getMergedConfig() {
+  if (fs.existsSync(DEFAULT_CONFIG_PATH)) {
+    const defaultConfigFile = fs.readFileSync(DEFAULT_CONFIG_PATH).toString();
+
+    const defaultConfig = getDefaultConfigJson(defaultConfigFile);
+    const globalConfig = vuelessConfig.component || {};
+
+    return merge(defaultConfig.defaultVariants, globalConfig[U_ICON]?.defaultVariants);
+  }
+}
+
+function getDefaultConfigJson(fileContents) {
+  const objectStartIndex = fileContents.indexOf("{");
+  const objectString = fileContents.substring(objectStartIndex).replace("};", "}");
+
+  // indirect eval
+  return (0, eval)("(" + objectString + ")"); // Converting into JS object
+}