@hybridly/vite 0.5.5 → 0.5.7

package/dist/index.cjs

@@ -8,6 +8,7 @@ const fs = require('node:fs');
 const makeDebugger = require('debug');
 const localPkg = require('local-pkg');
 const node_child_process = require('node:child_process');
+const MagicString = require('magic-string');
 const run = require('vite-plugin-run');
 const utils = require('@hybridly/utils');
 const autoimport = require('unplugin-auto-import/vite');
@@ -24,6 +25,7 @@ const laravel__default = /*#__PURE__*/_interopDefaultCompat(laravel);
 const path__default = /*#__PURE__*/_interopDefaultCompat(path);
 const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 const makeDebugger__default = /*#__PURE__*/_interopDefaultCompat(makeDebugger);
+const MagicString__default = /*#__PURE__*/_interopDefaultCompat(MagicString);
 const run__default = /*#__PURE__*/_interopDefaultCompat(run);
 const autoimport__default = /*#__PURE__*/_interopDefaultCompat(autoimport);
 const vueComponents__default = /*#__PURE__*/_interopDefaultCompat(vueComponents);
@@ -43,6 +45,14 @@ const debug = {
 function isPackageInstalled(name, paths = [process.cwd()]) {
   return localPkg.isPackageExists(name, { paths });
 }
+function importPackage(name, paths = [process.cwd()]) {
+  const mod = localPkg.resolveModule(name, { paths });
+  if (!mod) {
+    console.warn(`Could not resolve package [${name}]`);
+    return;
+  }
+  return localPkg.importModule(mod);
+}
 function toKebabCase(key) {
   const result = key.replace(/([A-Z])/g, " $1").trim();
   return result.split(" ").join("-").toLowerCase();
@@ -284,7 +294,8 @@ const layout = (options, config) => {
       if (!templateRegExp.test(code)) {
         return;
       }
-      return code.replace(templateRegExp, (_, layoutName) => {
+      const source = new MagicString__default(code);
+      const updatedCode = source.replace(templateRegExp, (_, layoutName) => {
         const isTypeScript = TYPESCRIPT_REGEX.test(code);
         const layouts = layoutName?.toString()?.replaceAll(" ", "").split(",") ?? [defaultLayoutName];
         const importName = (i) => `__hybridly_layout_${i}`;
@@ -306,6 +317,10 @@ const layout = (options, config) => {
 					<template>
 				`;
       });
+      return {
+        map: updatedCode.generateMap(),
+        code: updatedCode.toString()
+      };
     }
   };
 };
@@ -364,7 +379,8 @@ const HybridlyImports = {
     "defineLayout",
     "defineLayoutProperties",
     "registerHook",
-    "useRoute"
+    "useRoute",
+    "useQueryParameters"
   ],
   "hybridly": [
     "router",
@@ -376,7 +392,7 @@ function getAutoImportsOptions(options, config) {
   if (options.autoImports === false) {
     return;
   }
-  const presets = ["@vueuse/core", "@vueuse/head", "vue-i18n"];
+  const presets = ["@vueuse/core", "vue-i18n"];
   const custom = {
     "@unhead/vue": [
       "useHead",
@@ -411,21 +427,7 @@ function getAutoImportsOptions(options, config) {
   );
 }
 
-function HybridlyResolver(linkName = "RouterLink") {
-  return {
-    type: "component",
-    resolve: (name) => {
-      if (name === linkName) {
-        return {
-          from: "hybridly/vue",
-          name: "RouterLink",
-          as: linkName
-        };
-      }
-    }
-  };
-}
-function getVueComponentsOptions(options, config) {
+async function getVueComponentsOptions(options, config) {
   if (options.vueComponents === false) {
     return {};
   }
@@ -433,6 +435,7 @@ function getVueComponentsOptions(options, config) {
   const customCollections = Array.isArray(options.customIcons) ? options.customIcons : options.customIcons?.collections ?? [];
   const overrideResolvers = options.overrideResolvers ? Array.isArray(options.overrideResolvers) ? options.overrideResolvers : [options.overrideResolvers] : false;
   const hasHeadlessUI = isPackageInstalled("@headlessui/vue");
+  const hasRadix = isPackageInstalled("radix-vue");
   return utils.merge(
     {
       dirs: [
@@ -443,6 +446,7 @@ function getVueComponentsOptions(options, config) {
       resolvers: overrideResolvers || [
         ...hasIcons ? [iconsResolver__default({ customCollections })] : [],
         ...hasHeadlessUI ? [resolvers.HeadlessUiResolver({ prefix: options?.vueComponents?.headlessUiPrefix ?? "Headless" })] : [],
+        ...hasRadix ? [await RadixResolver(options?.vueComponents?.radixPrefix)] : [],
         ProvidedComponentListResolver(config),
         HybridlyResolver(options.vueComponents?.linkName)
       ]
@@ -451,6 +455,24 @@ function getVueComponentsOptions(options, config) {
     { overwriteArray: false }
   );
 }
+async function RadixResolver(prefix = "Radix") {
+  const radix = await importPackage("radix-vue/resolver");
+  return radix.default({ prefix });
+}
+function HybridlyResolver(linkName = "RouterLink") {
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (name === linkName) {
+        return {
+          from: "hybridly/vue",
+          name: "RouterLink",
+          as: linkName
+        };
+      }
+    }
+  };
+}
 function ProvidedComponentListResolver(config) {
   function resolveComponentPath(name) {
     const kebabName = toKebabCase(name);
@@ -547,7 +569,7 @@ async function plugin(options = {}) {
     layout(options, config),
     options.laravel !== false && laravel__default(getLaravelOptions(options, config)),
     options.run !== false && run__default(getRunOptions(options)),
-    options.vueComponents !== false && vueComponents__default(getVueComponentsOptions(options, config)),
+    options.vueComponents !== false && vueComponents__default(await getVueComponentsOptions(options, config)),
     options.autoImports !== false && autoimport__default(getAutoImportsOptions(options, config)),
     options.icons !== false && icons__default(getIconsOptions(options, config)),
     options.vue !== false && vue__default(getVueOptions(options)),

package/dist/index.d.cts

@@ -31,6 +31,8 @@ type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
     linkName?: string;
     /** Custom prefix for Headless UI components. */
     headlessUiPrefix?: string;
+    /** Custom prefix for Radix components. */
+    radixPrefix?: string;
 };
 type CustomResolvers = ComponentResolver | ComponentResolver[];
 type CustomComponentsOptions = VueComponentsOptions;

package/dist/index.d.mts

@@ -31,6 +31,8 @@ type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
     linkName?: string;
     /** Custom prefix for Headless UI components. */
     headlessUiPrefix?: string;
+    /** Custom prefix for Radix components. */
+    radixPrefix?: string;
 };
 type CustomResolvers = ComponentResolver | ComponentResolver[];
 type CustomComponentsOptions = VueComponentsOptions;

package/dist/index.d.ts

@@ -31,6 +31,8 @@ type VueComponentsOptions = Parameters<typeof vueComponents>[0] & {
     linkName?: string;
     /** Custom prefix for Headless UI components. */
     headlessUiPrefix?: string;
+    /** Custom prefix for Radix components. */
+    radixPrefix?: string;
 };
 type CustomResolvers = ComponentResolver | ComponentResolver[];
 type CustomComponentsOptions = VueComponentsOptions;

package/dist/index.mjs

@@ -2,8 +2,9 @@ import laravel from 'laravel-vite-plugin';
 import path from 'node:path';
 import fs from 'node:fs';
 import makeDebugger from 'debug';
-import { isPackageExists } from 'local-pkg';
+import { isPackageExists, resolveModule, importModule } from 'local-pkg';
 import { execSync } from 'node:child_process';
+import MagicString from 'magic-string';
 import run from 'vite-plugin-run';
 import { merge } from '@hybridly/utils';
 import autoimport from 'unplugin-auto-import/vite';
@@ -26,6 +27,14 @@ const debug = {
 function isPackageInstalled(name, paths = [process.cwd()]) {
   return isPackageExists(name, { paths });
 }
+function importPackage(name, paths = [process.cwd()]) {
+  const mod = resolveModule(name, { paths });
+  if (!mod) {
+    console.warn(`Could not resolve package [${name}]`);
+    return;
+  }
+  return importModule(mod);
+}
 function toKebabCase(key) {
   const result = key.replace(/([A-Z])/g, " $1").trim();
   return result.split(" ").join("-").toLowerCase();
@@ -267,7 +276,8 @@ const layout = (options, config) => {
       if (!templateRegExp.test(code)) {
         return;
       }
-      return code.replace(templateRegExp, (_, layoutName) => {
+      const source = new MagicString(code);
+      const updatedCode = source.replace(templateRegExp, (_, layoutName) => {
         const isTypeScript = TYPESCRIPT_REGEX.test(code);
         const layouts = layoutName?.toString()?.replaceAll(" ", "").split(",") ?? [defaultLayoutName];
         const importName = (i) => `__hybridly_layout_${i}`;
@@ -289,6 +299,10 @@ const layout = (options, config) => {
 					<template>
 				`;
       });
+      return {
+        map: updatedCode.generateMap(),
+        code: updatedCode.toString()
+      };
     }
   };
 };
@@ -347,7 +361,8 @@ const HybridlyImports = {
     "defineLayout",
     "defineLayoutProperties",
     "registerHook",
-    "useRoute"
+    "useRoute",
+    "useQueryParameters"
   ],
   "hybridly": [
     "router",
@@ -359,7 +374,7 @@ function getAutoImportsOptions(options, config) {
   if (options.autoImports === false) {
     return;
   }
-  const presets = ["@vueuse/core", "@vueuse/head", "vue-i18n"];
+  const presets = ["@vueuse/core", "vue-i18n"];
   const custom = {
     "@unhead/vue": [
       "useHead",
@@ -394,21 +409,7 @@ function getAutoImportsOptions(options, config) {
   );
 }
 
-function HybridlyResolver(linkName = "RouterLink") {
-  return {
-    type: "component",
-    resolve: (name) => {
-      if (name === linkName) {
-        return {
-          from: "hybridly/vue",
-          name: "RouterLink",
-          as: linkName
-        };
-      }
-    }
-  };
-}
-function getVueComponentsOptions(options, config) {
+async function getVueComponentsOptions(options, config) {
   if (options.vueComponents === false) {
     return {};
   }
@@ -416,6 +417,7 @@ function getVueComponentsOptions(options, config) {
   const customCollections = Array.isArray(options.customIcons) ? options.customIcons : options.customIcons?.collections ?? [];
   const overrideResolvers = options.overrideResolvers ? Array.isArray(options.overrideResolvers) ? options.overrideResolvers : [options.overrideResolvers] : false;
   const hasHeadlessUI = isPackageInstalled("@headlessui/vue");
+  const hasRadix = isPackageInstalled("radix-vue");
   return merge(
     {
       dirs: [
@@ -426,6 +428,7 @@ function getVueComponentsOptions(options, config) {
       resolvers: overrideResolvers || [
         ...hasIcons ? [iconsResolver({ customCollections })] : [],
         ...hasHeadlessUI ? [HeadlessUiResolver({ prefix: options?.vueComponents?.headlessUiPrefix ?? "Headless" })] : [],
+        ...hasRadix ? [await RadixResolver(options?.vueComponents?.radixPrefix)] : [],
         ProvidedComponentListResolver(config),
         HybridlyResolver(options.vueComponents?.linkName)
       ]
@@ -434,6 +437,24 @@ function getVueComponentsOptions(options, config) {
     { overwriteArray: false }
   );
 }
+async function RadixResolver(prefix = "Radix") {
+  const radix = await importPackage("radix-vue/resolver");
+  return radix.default({ prefix });
+}
+function HybridlyResolver(linkName = "RouterLink") {
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (name === linkName) {
+        return {
+          from: "hybridly/vue",
+          name: "RouterLink",
+          as: linkName
+        };
+      }
+    }
+  };
+}
 function ProvidedComponentListResolver(config) {
   function resolveComponentPath(name) {
     const kebabName = toKebabCase(name);
@@ -530,7 +551,7 @@ async function plugin(options = {}) {
     layout(options, config),
     options.laravel !== false && laravel(getLaravelOptions(options, config)),
     options.run !== false && run(getRunOptions(options)),
-    options.vueComponents !== false && vueComponents(getVueComponentsOptions(options, config)),
+    options.vueComponents !== false && vueComponents(await getVueComponentsOptions(options, config)),
     options.autoImports !== false && autoimport(getAutoImportsOptions(options, config)),
     options.icons !== false && icons(getIconsOptions(options, config)),
     options.vue !== false && vue(getVueOptions(options)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vite",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Vite plugin for Hybridly",
   "keywords": [
     "hybridly",
@@ -40,22 +40,23 @@
     "vue": "^3.2.45"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue": "^4.4.0",
     "fast-glob": "^3.3.1",
     "laravel-vite-plugin": "^0.8.1",
     "local-pkg": "^0.4.3",
+    "magic-string": "^0.30.5",
     "throttle-debounce": "^5.0.0",
     "unplugin-auto-import": "^0.16.6",
-    "unplugin-icons": "^0.17.0",
+    "unplugin-icons": "^0.17.1",
     "unplugin-vue-components": "^0.25.2",
     "vite-plugin-run": "^0.5.1",
-    "@hybridly/core": "0.5.5"
+    "@hybridly/core": "0.5.7"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.120",
-    "rollup": "^3.29.3",
-    "vite": "^4.4.9",
-    "vue": "^3.3.4"
+    "@iconify/json": "^2.2.133",
+    "rollup": "^3.29.4",
+    "vite": "^4.5.0",
+    "vue": "^3.3.7"
   },
   "scripts": {
     "build": "unbuild",