vueless 0.0.76 → 0.0.78

package/index.js

@@ -14,14 +14,7 @@ export {
   loaderRenderingOn,
   loaderRenderingOff,
 } from "./ui.loader-rendering/services/loaderRedering.service";
-export {
-  loaderTopOn,
-  loaderTopOff,
-  addLoadingTopRequestUrl,
-  removeLoadingTopRequestUrl,
-  setLoadingTopComponentRequestQueue,
-  removeLoadingTopComponentRequestQueue,
-} from "./ui.loader-top/services/loaderTop.service";
+export { loaderTopOn, loaderTopOff } from "./ui.loader-top/services/loaderTop.service";
 export {
   notify,
   notifySuccess,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -21,7 +21,7 @@
     "sb:dev": "storybook dev -p 6006 --docs --no-open",
     "sb:build": "storybook build --docs",
     "sb:preview": "vite preview --host --outDir=storybook-static",
-    "package:prepare": "node src/gen.web-types && node icons.prepare && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node dist.prepare"
+    "package:prepare": "npx @vueless/web-types && node icons.prepare && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node dist.prepare"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
@@ -42,6 +42,7 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vueless/plugin-vite": "^0.0.7",
     "@vueless/storybook": "^0.0.17",
+    "@vueless/web-types": "^0.0.4",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^8.55.0",
@@ -50,7 +51,6 @@
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-tailwindcss": "^3.15.1",
     "eslint-plugin-vue": "^9.25.0",
-    "globby": "^13.2.2",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",

package/ui.loader-top/Docs.mdx

@@ -22,12 +22,10 @@ You can control loader state using *useLoaderRendering* composable.
 import { useLoaderTop } from "vueless";
 
 const { 
-    setLoadingOn,
-    setLoadingOff,
+    setLoaderOn,
+    setLoaderOff,
     addRequestUrl,
-    removeRequestUrl,
-    setComponentRequestQueue,
-    removeComponentRequestQueue,
+    removeRequestUrl
 } = useLoaderTop();
 `} language="jsx" dark />
 
@@ -38,9 +36,5 @@ You can control loader state outside of vue components using following methods.
 import {
   loaderTopOn,
   loaderTopOff,
-  addLoadingTopRequestUrl,
-  removeLoadingTopRequestUrl,
-  setLoadingTopComponentRequestQueue,
-  removeLoadingTopComponentRequestQueue,
 } from "vueless";
 `} language="jsx" dark />

package/ui.loader-top/composables/useLoaderTop.js

@@ -8,7 +8,7 @@ const loaderRequestQueue = ref([]);
 const loaderRequestTimeout = ref(0);
 const componentLoaderRequestQueue = ref([]);
 
-function setLoadingOn(url) {
+function setLoaderOn(url) {
   loaderRequestQueue.value.push(url);
 
   isLoading.value = true;
@@ -16,7 +16,7 @@ function setLoadingOn(url) {
   clearTimeout(loaderRequestTimeout.value);
 }
 
-function setLoadingOff(url) {
+function setLoaderOff(url) {
   loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
 
   loaderRequestTimeout.value = setTimeout(() => {
@@ -42,16 +42,12 @@ function removeComponentRequestQueue() {
   componentLoaderRequestQueue.value = [];
 }
 
-function addRequestUrlHandler(event) {
-  addRequestUrl(event.detail.url);
+function setLoaderOnHandler(event) {
+  setLoaderOn(event.detail.resource);
 }
 
-function removeRequestUrlHandler(event) {
-  removeRequestUrl(event.detail.url);
-}
-
-function setComponentRequestQueueHandler(event) {
-  setComponentRequestQueue(event.detail.requests);
+function setLoaderOffHandler(event) {
+  setLoaderOff(event.detail.resource);
 }
 
 export function createLoaderTop() {
@@ -61,8 +57,8 @@ export function createLoaderTop() {
     loaderRequestQueue: readonly(loaderRequestQueue),
     loaderRequestTimeout: readonly(loaderRequestTimeout),
     componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
-    setLoadingOn,
-    setLoadingOff,
+    setLoaderOn,
+    setLoaderOff,
     addRequestUrl,
     removeRequestUrl,
     setComponentRequestQueue,
@@ -74,21 +70,13 @@ export function useLoaderTop() {
   const loaderTopState = inject(LoaderTopSymbol);
 
   onMounted(() => {
-    window.addEventListener("setLoadingOn", setLoadingOn);
-    window.addEventListener("setLoadingOff", setLoadingOff);
-    window.addEventListener("addRequestUrl", addRequestUrlHandler);
-    window.addEventListener("removeRequestUrl", removeRequestUrlHandler);
-    window.addEventListener("setComponentRequestQueue", setComponentRequestQueueHandler);
-    window.addEventListener("removeComponentRequestQueue", removeComponentRequestQueue);
+    window.addEventListener("setLoaderOn", setLoaderOnHandler);
+    window.addEventListener("setLoaderOff", setLoaderOffHandler);
   });
 
   onBeforeUnmount(() => {
-    window.removeEventListener("setLoadingOn", setLoadingOn);
-    window.removeEventListener("setLoadingOff", setLoadingOff);
-    window.removeEventListener("addRequestUrl", addRequestUrlHandler);
-    window.removeEventListener("removeRequestUrl", removeRequestUrlHandler);
-    window.removeEventListener("setComponentRequestQueue", setComponentRequestQueueHandler);
-    window.removeEventListener("removeComponentRequestQueue", removeComponentRequestQueue);
+    window.removeEventListener("setLoaderOn", setLoaderOnHandler);
+    window.removeEventListener("setLoaderOff", setLoaderOffHandler);
   });
 
   return loaderTopState;

package/ui.loader-top/index.stories.js

@@ -17,17 +17,17 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoadingOn, setLoadingOff } = useLoaderTop();
+    const { setLoaderOn, setLoaderOff } = useLoaderTop();
 
-    return { args, setLoadingOn, setLoadingOff };
+    return { args, setLoaderOn, setLoaderOff };
   },
   template: `
     <div>
         <ULoaderTop color="blue" v-bind="args" resource-names="https://api.publicapis.org/entries"/>
 
         <div class="flex gap-2">
-          <UButton label="On" @click="setLoadingOn('https://api.publicapis.org/entries')" />
-          <UButton label="Off" @click="setLoadingOff('https://api.publicapis.org/entries')" />
+          <UButton label="On" @click="setLoaderOn('https://api.publicapis.org/entries')" />
+          <UButton label="Off" @click="setLoaderOff('https://api.publicapis.org/entries')" />
         </div>
     </div>
   `,
@@ -36,12 +36,12 @@ const DefaultTemplate = (args) => ({
 const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { ULoaderTop, UButton },
   setup() {
-    const { setLoadingOn, setLoadingOff } = useLoaderTop();
+    const { setLoaderOn, setLoaderOff } = useLoaderTop();
 
     return {
       args,
-      setLoadingOn,
-      setLoadingOff,
+      setLoaderOn,
+      setLoaderOff,
       colors: argTypes.color.options,
     };
   },
@@ -56,8 +56,8 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
       />
     </div>
     <div class="flex gap-2 pt-4">
-      <UButton label="On" @click="setLoadingOn('https://api.publicapis.org/entries')" />
-      <UButton label="Off" @click="setLoadingOff('https://api.publicapis.org/entries')" />
+      <UButton label="On" @click="setLoaderOn('https://api.publicapis.org/entries')" />
+      <UButton label="Off" @click="setLoaderOff('https://api.publicapis.org/entries')" />
     </div>
   `,
 });

package/ui.loader-top/services/loaderTop.service.js

@@ -30,34 +30,14 @@ export const queue = (() => {
   };
 })();
 
-export function loaderTopOn() {
-  window.dispatchEvent(new Event("setLoadingOn"));
-}
+export function loaderTopOn(resource) {
+  const loaderTopOnEvent = new CustomEvent("setLoadingOn", { detail: { resource } });
 
-export function loaderTopOff() {
-  window.dispatchEvent(new Event("setLoadingOff"));
+  window.dispatchEvent(loaderTopOnEvent);
 }
 
-export function addLoadingTopRequestUrl(url) {
-  const addRequestUrlEvent = new CustomEvent("setLoadingOff", { detail: { url } });
-
-  window.dispatchEvent(addRequestUrlEvent);
-}
-
-export function removeLoadingTopRequestUrl(url) {
-  const removeRequestUrlEvent = new CustomEvent("removeRequestUrl", { detail: { url } });
-
-  window.dispatchEvent(removeRequestUrlEvent);
-}
-
-export function setLoadingTopComponentRequestQueue(requests) {
-  const setComponentRequestQueueEvent = new CustomEvent("setComponentRequestQueue", {
-    detail: { requests },
-  });
-
-  window.dispatchEvent(setComponentRequestQueueEvent);
-}
+export function loaderTopOff(resource) {
+  const loaderTopOfEvent = new CustomEvent("setLoadingOff", { detail: { resource } });
 
-export function removeLoadingTopComponentRequestQueue() {
-  window.dispatchEvent("removeComponentRequestQueue");
+  window.dispatchEvent(loaderTopOfEvent);
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/gen.web-types/index.js

@@ -1,17 +0,0 @@
-#!/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/gen.web-types/lib/build.js

@@ -1,254 +0,0 @@
-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;
-  });
-
-  const componentPath = ensureRelative(path.relative(config.cwd, absolutePath));
-
-  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: config.isVuelessEnv ? componentPath.replace("./src", "vueless") : componentPath,
-          symbol: doc.exportName,
-        },
-      },
-    ],
-  };
-}

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

@@ -1,32 +0,0 @@
-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 || "src/**/*.vue",
-    outFile: outFileFromCmd || packageJson["web-types"] || "./web-types.json",
-    packageName: packageJson["name"],
-    packageVersion: packageJson["version"],
-    typesSyntax: "typescript",
-    descriptionMarkup: "markdown",
-    ...additionalConfig.default,
-  };
-}