@vueless/storybook 0.0.53 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
@@ -35,9 +35,15 @@
     "@storybook/theming": "^8.4.7",
     "@storybook/vue3": "^8.4.7",
     "@storybook/vue3-vite": "^8.4.7",
+    "chokidar": "^4.0.3",
+    "esbuild": "^0.24.2",
+    "globby": "^14.0.2",
+    "minimist": "^1.2.8",
+    "mkdirp": "^3.0.1",
     "prettier2": "npm:prettier@2.8.8",
     "storybook": "^8.4.7",
-    "storybook-dark-mode": "^4.0.2"
+    "storybook-dark-mode": "^4.0.2",
+    "vue-docgen-api": "^4.79.2"
   },
   "devDependencies": {
     "@release-it/bumper": "^6.0.1",

package/webTypes/index.js

@@ -0,0 +1,19 @@
+#!/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" },
+});
+
+export default async function buildWebTypes(vuelessConfig) {
+  const conf = await extractConfig(cwd || process.cwd(), watch, configFile, pathArray);
+
+  build(conf, vuelessConfig);
+}

package/webTypes/lib/build.js

@@ -0,0 +1,242 @@
+import fs from "node:fs";
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+import { mkdirp } from "mkdirp";
+import chokidar from "chokidar";
+import { globbySync } from "globby";
+import { parse } from "vue-docgen-api";
+import _ from "lodash-es";
+
+export default async function build(config, vuelessConfig) {
+  config.componentsRoot = path.resolve(config.cwd, config.componentsRoot);
+  config.outFile = path.resolve(config.cwd, config.outFile);
+
+  const { watcher, componentFiles } = getSources(config.components, config.componentsRoot);
+
+  const cache = {};
+  const buildWebTypesBound = rebuild.bind(null, config, componentFiles, cache, vuelessConfig);
+
+  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, vuelessConfig) {
+  const cacheWebTypesContent = async (filePath) => {
+    cachedContent[filePath.replace(/\\/g, "/")] = await extractInformation(
+      filePath,
+      config,
+      vuelessConfig,
+    );
+
+    return true;
+  };
+
+  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) html.tags = undefined;
+  if (!html.attributes?.length) html.attributes = undefined;
+  if (!html["vue-filters"]?.length) html["vue-filters"] = undefined;
+
+  writeStream.write(JSON.stringify(contents, null, 2));
+  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, "/");
+}
+
+export function getDefaultConfigJson(fileContents) {
+  const objectStartIndex = fileContents.indexOf("{");
+  const objectString = fileContents.substring(objectStartIndex).replace("};", "}");
+
+  // indirect eval
+  return (0, eval)("(" + objectString + ")"); // Converting into JS object
+}
+
+function getDefaultConfigFileName(folderPath) {
+  const folder = fs.readdirSync(path.dirname(folderPath));
+
+  return folder.find((file) => file === "config.js" || file === "config.ts") || "";
+}
+
+function getEnum(prop) {
+  let values = null;
+
+  if (prop.type?.elements) {
+    values = prop.type.elements.map((item) => item.name.replaceAll('"', ""));
+  }
+
+  if (prop.values) {
+    values = prop.values;
+  }
+
+  return values ? { enum: values } : {};
+}
+
+function getType(prop) {
+  return prop.type?.name ?? "any";
+}
+
+async function extractInformation(absolutePath, config, vuelessConfig) {
+  const doc = await parse(absolutePath, config.apiOptions);
+  const name = doc.name || doc.displayName;
+  let description = doc.description?.trim() ?? "";
+
+  const defaultConfigFileName = getDefaultConfigFileName(absolutePath);
+  let defaultConfig = {};
+
+  if (defaultConfigFileName) {
+    const defaultConfigPath = path.join(path.dirname(absolutePath), defaultConfigFileName);
+    const defaultConfigContent = await readFile(defaultConfigPath, { encoding: "utf-8" });
+
+    defaultConfig = getDefaultConfigJson(defaultConfigContent);
+  }
+
+  const globalConfigComponents = vuelessConfig?.component || {};
+
+  const defaults = _.merge(
+    defaultConfig?.defaults || {},
+    globalConfigComponents[name]?.defaults || {},
+  );
+
+  doc.docsBlocks?.forEach((block) => {
+    if (description.length > 0) {
+      if (config.descriptionMarkup === "html") {
+        description += "<br/><br/>";
+      } else {
+        description += "\n\n";
+      }
+    }
+
+    description += block;
+  });
+
+  const componentPath = ensureRelative(path.relative(config.cwd, absolutePath));
+  // Prevent "Chose declaration" duplication issue in Intellij
+  const source = !componentPath.includes("vueless")
+    ? { source: { module: componentPath, symbol: doc.exportName } }
+    : {};
+
+  return {
+    tags: [
+      {
+        name,
+        description,
+        attributes: doc.props?.map((prop) => ({
+          name: prop.name,
+          required: prop.required,
+          description: prop.tags?.ignore ? "@ignore: " + prop.description : prop.description,
+          ...getEnum(prop),
+          value: {
+            kind: "expression",
+            type: getType(prop),
+          },
+          default:
+            defaults && prop.name in defaults
+              ? defaults[prop.name]?.toString()
+              : prop.defaultValue?.value?.toString(),
+        })),
+        events: doc.events?.map((event) => ({
+          name: event.name,
+          description: event.description,
+          properties: event.properties?.map((property) => ({
+            type: property.type?.names,
+            name: property.name,
+            description: property.description,
+          })),
+        })),
+        slots: doc.slots?.map((slot) => ({
+          name: slot.name,
+          scoped: slot.scoped,
+          description: slot.description,
+          bindings: slot.bindings?.map((binding) => ({
+            type: binding.type?.name,
+            name: binding.name,
+            description: binding.description,
+          })),
+        })),
+        exposes: doc.expose?.map((expose) => ({
+          name: expose.name,
+          description: expose.description,
+          properties: expose.tags?.map((property) => ({
+            type: property.type?.name,
+            name: property.name,
+            description: property.description,
+          })),
+        })),
+        ...source,
+      },
+    ],
+  };
+}

package/webTypes/lib/config.js

@@ -0,0 +1,69 @@
+import fs from "fs";
+import path from "path";
+import { readFile } from "fs/promises";
+import esbuild from "esbuild";
+
+const CACHE_PATH = "./node_modules/.cache/vueless";
+const WEB_TYPES_CONFIG_FILE_NAME = "web-types.config";
+
+export async function extractConfig(cwd, watch = false, configFileFromCmd) {
+  const fileContent = await readFile(path.join(cwd, "package.json"), "utf-8");
+  const packageJson = JSON.parse(fileContent);
+
+  const config = await getConfig(configFileFromCmd);
+
+  const components = config?.isVuelessEnv
+    ? [`${process.cwd()}/src/**/*.vue`]
+    : [
+        `${process.cwd()}/node_modules/vueless/**/*.vue`,
+        `${process.cwd()}/src/components/**/*.vue`,
+      ];
+
+  return {
+    cwd,
+    watch,
+    components,
+    componentsRoot: cwd,
+    outFile: `${CACHE_PATH}/web-types.json`,
+    packageName: packageJson["name"],
+    packageVersion: packageJson["version"],
+    descriptionMarkup: "markdown",
+    typesSyntax: "typescript",
+    ...config,
+  };
+}
+
+async function getConfig(configFromCmd) {
+  const configPathFromCmd = configFromCmd && path.resolve(process.cwd(), configFromCmd);
+  const configPathJs = path.resolve(process.cwd(), `${WEB_TYPES_CONFIG_FILE_NAME}.js`);
+  const configPathTs = path.resolve(process.cwd(), `${WEB_TYPES_CONFIG_FILE_NAME}.ts`);
+  const configOutPath = path.join(process.cwd(), `${CACHE_PATH}/${WEB_TYPES_CONFIG_FILE_NAME}.mjs`);
+
+  let config = {};
+
+  if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
+    return config;
+  }
+
+  fs.existsSync(configPathJs) && (await buildConfig(configPathJs, configOutPath));
+  fs.existsSync(configPathTs) && (await buildConfig(configPathTs, configOutPath));
+  fs.existsSync(configPathFromCmd) && (await buildConfig(configPathFromCmd, configPathFromCmd));
+
+  if (fs.existsSync(configOutPath)) {
+    config = (await import(configOutPath)).default;
+  }
+
+  return config;
+}
+
+async function buildConfig(entryPath, configOutFile) {
+  await esbuild.build({
+    entryPoints: [entryPath],
+    outfile: configOutFile,
+    bundle: true,
+    platform: "node",
+    format: "esm",
+    target: "ESNext",
+    loader: { ".ts": "ts" },
+  });
+}