vite-plugin-components - npm Package Compare versions

Comparing version 0.12.2 to 0.13.0

dist/index.d.ts

@@ -9,4 +9,5 @@ import { Plugin } from 'vite';
 }
+declare type SideEffectsInfo = (ImportInfo | string)[] | ImportInfo | string | undefined;
 interface ComponentInfo extends ImportInfo {
-    sideEffects?: (ImportInfo | string)[] | ImportInfo | string;
+    sideEffects?: SideEffectsInfo;
 }
@@ -114,18 +115,6 @@ declare type ComponentResolveResult = string | ComponentInfo;
      *
-     * @default true
+     * @default 'css'
      */
-    importStyle?: boolean;
+    importStyle?: boolean | 'css' | 'less';
     /**
-     * import css along with components
-     *
-     * @default true
-     */
-    importCss?: boolean;
-    /**
-     * import less along with components
-     *
-     * @default false
-     */
-    importLess?: boolean;
-    /**
      * resolve `ant-design-vue' icons
@@ -138,4 +127,22 @@ *
     resolveIcons?: boolean;
+    /**
+     * @deprecated use `importStyle: 'css'` instead
+     */
+    importCss?: boolean;
+    /**
+     * @deprecated use `importStyle: 'less'` instead
+     */
+    importLess?: boolean;
 }
-declare const AntDesignVueResolver: (options?: AntDesignVueResolverOptions) => ComponentResolver;
+/**
+ * Resolver for Ant Design Vue
+ *
+ * Requires ant-design-vue@v2.2.0-beta.6 or later
+ *
+ * See https://github.com/antfu/vite-plugin-components/issues/26#issuecomment-789767941 for more details
+ *
+ * @author @yangss3
+ * @link https://antdv.com/
+ */
+declare function AntDesignVueResolver(options?: AntDesignVueResolverOptions): ComponentResolver;
 
@@ -158,5 +165,21 @@ interface ElementPlusResolverOptions {
  */
-declare const ElementPlusResolver: (options?: ElementPlusResolverOptions) => ComponentResolver;
+declare function ElementPlusResolver(options?: ElementPlusResolverOptions): ComponentResolver;
 
+interface ElementUiResolverOptions {
+    /**
+     * import style css or sass with components
+     *
+     * @default 'css'
+     */
+    importStyle?: boolean | 'css' | 'sass';
+}
 /**
+ * Resolver for Element-UI
+ * @link https://element.eleme.cn/#/zh-CN
+ * @version @element-ui ^2.15.3, @vue ^2.6.14
+ * @author @nabaonan
+ */
+declare function ElementUiResolver(options?: ElementUiResolverOptions): ComponentResolver;
+
+/**
  * Resolver for headlessui
@@ -166,5 +189,13 @@ *
  */
-declare const HeadlessUiResolver: () => ComponentResolver;
+declare function HeadlessUiResolver(): ComponentResolver;
 
-interface VantResolverOptions {
+/**
+ * Resolver for Naive UI
+ *
+ * @author @antfu
+ * @link https://www.naiveui.com/
+ */
+declare function NaiveUiResolver(): ComponentResolver;
+
+interface PrimeVueResolverOptions {
     /**
@@ -176,43 +207,52 @@ * import style along with components
     importStyle?: boolean;
+    /**
+     * import `primeicons' icons
+     *
+     * requires package `primeicons`
+     *
+     * @default true
+     */
+    importIcons?: boolean;
+    /**
+     * imports a free theme - set theme name here (e.g. saga-blue)
+     *
+     * @default ''
+     */
+    importTheme?: string;
 }
 /**
- * Resolver for Vant
+ * Resolver for PrimeVue - If you're using a component with the same tag as an native HTML element (e.g. button) the component must be in uppercase
  *
- * @link https://github.com/youzan/vant
+ * @link https://github.com/primefaces/primevue
  */
-declare const VantResolver: (options?: VantResolverOptions) => ComponentResolver;
+declare function PrimeVueResolver(options?: PrimeVueResolverOptions): ComponentResolver;
 
+interface VantResolverOptions {
+    /**
+     * import style along with components
+     *
+     * @default true
+     */
+    importStyle?: boolean;
+}
 /**
- * Resolver for Vuetify
+ * Resolver for Vant
  *
- * @link https://github.com/vuetifyjs/vuetify
+ * @link https://github.com/youzan/vant
  */
-declare const VuetifyResolver: () => ComponentResolver;
+declare function VantResolver(options?: VantResolverOptions): ComponentResolver;
 
-/**
- * Resolver for VueUse
- *
- * @link https://github.com/vueuse/vueuse
- */
-declare const VueUseComponentsResolver: () => ComponentResolver;
-
-/**
- * Resolver for Naive UI
- *
- * @author @antfu
- * @link https://www.naiveui.com/
- */
-declare const NaiveUiResolver: () => ComponentResolver;
-
 interface VarletUIResolverOptions {
     /**
-     * import css along with components
+     * import style along with components
      *
-     * @default true
+     * @default 'css'
      */
+    importStyle?: boolean | 'css' | 'less';
+    /**
+     * @deprecated use `importStyle: 'css'` instead
+     */
     importCss?: boolean;
     /**
-     * import less along with components
-     *
-     * @default false
+     * @deprecated use `importStyle: 'less'` instead
      */
@@ -226,4 +266,29 @@ importLess?: boolean;
  */
-declare const VarletUIResolver: (options?: VarletUIResolverOptions) => ComponentResolver;
+declare function VarletUIResolver(options?: VarletUIResolverOptions): ComponentResolver;
 
+/**
+ * Resolver for View UI
+ * @requires @originjs/vite-plugin-commonjs
+ * @author @nabaonan
+ * @link https://www.iviewui.com/
+ * @description has known problems list below
+ * - select component render error PR: https://github.com/view-design/ViewUI/pull/944,  choose can't display value,because click option trigger twice,at second time,select value turn into undefined.
+ * - scroll component has a template syntax called lang='html',it is require html-loader,but vite plugin not support yet,remove it can run.
+ */
+declare function ViewUiResolver(): ComponentResolver;
+
+/**
+ * Resolver for Vuetify
+ *
+ * @link https://github.com/vuetifyjs/vuetify
+ */
+declare function VuetifyResolver(): ComponentResolver;
+
+/**
+ * Resolver for VueUse
+ *
+ * @link https://github.com/vueuse/vueuse
+ */
+declare function VueUseComponentsResolver(): ComponentResolver;
+
 declare function pascalCase(str: string): string;
@@ -236,2 +301,2 @@ declare function camelCase(str: string): string;
 export default VitePluginComponents;
-export { AntDesignVueResolver, AntDesignVueResolverOptions, ComponentInfo, ComponentResolveResult, ComponentResolver, ComponentsImportMap, ElementPlusResolver, ElementPlusResolverOptions, HeadlessUiResolver, ImportInfo, LibraryResolver, Matcher, NaiveUiResolver, Options, ResolvedOptions, Transformer, UILibraryOptions, VantResolver, VantResolverOptions, VarletUIResolver, VarletUIResolverOptions, VueUseComponentsResolver, VuetifyResolver, camelCase, kebabCase, pascalCase, tryLoadVeturTags };
+export { AntDesignVueResolver, AntDesignVueResolverOptions, ComponentInfo, ComponentResolveResult, ComponentResolver, ComponentsImportMap, ElementPlusResolver, ElementPlusResolverOptions, ElementUiResolver, ElementUiResolverOptions, HeadlessUiResolver, ImportInfo, LibraryResolver, Matcher, NaiveUiResolver, Options, PrimeVueResolver, PrimeVueResolverOptions, ResolvedOptions, SideEffectsInfo, Transformer, UILibraryOptions, VantResolver, VantResolverOptions, VarletUIResolver, VarletUIResolverOptions, ViewUiResolver, VueUseComponentsResolver, VuetifyResolver, camelCase, kebabCase, pascalCase, tryLoadVeturTags };

dist/index.js

@@ -977,3 +977,3 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var __create = Object.create;
 ];
-var getStyleDir = (compName) => {
+function getStyleDir(compName) {
   let styleDir;
@@ -991,43 +991,80 @@ const total = matchComponents.length;
   return styleDir;
-};
-var getSideEffects = (compName, opts) => {
-  const { importStyle = true, importCss = true, importLess = false } = opts;
-  if (importStyle) {
-    if (importLess) {
-      const styleDir = getStyleDir(compName);
-      return `ant-design-vue/es/${styleDir}/style`;
-    } else if (importCss) {
-      const styleDir = getStyleDir(compName);
-      return `ant-design-vue/es/${styleDir}/style/css`;
+}
+function getSideEffects(compName, options) {
+  const {
+    importStyle = true,
+    importLess = false
+  } = options;
+  if (!importStyle)
+    return;
+  if (importStyle === "less" || importLess) {
+    const styleDir = getStyleDir(compName);
+    return `ant-design-vue/es/${styleDir}/style`;
+  } else {
+    const styleDir = getStyleDir(compName);
+    return `ant-design-vue/es/${styleDir}/style/css`;
+  }
+}
+function AntDesignVueResolver(options = {}) {
+  return (name) => {
+    if (options.resolveIcons && name.match(/(Outlined|Filled|TwoTone)$/)) {
+      return {
+        importName: name,
+        path: "@ant-design/icons-vue"
+      };
     }
-  }
-};
-var AntDesignVueResolver = (options = {}) => (name) => {
-  if (options.resolveIcons && name.match(/(Outlined|Filled|TwoTone)$/)) {
-    return {
-      importName: name,
-      path: "@ant-design/icons-vue"
-    };
-  }
-  if (name.match(/^A[A-Z]/)) {
-    const importName = name.slice(1);
-    return {
-      importName,
-      path: "ant-design-vue/es",
-      sideEffects: getSideEffects(importName, options)
-    };
-  }
-};
+    if (name.match(/^A[A-Z]/)) {
+      const importName = name.slice(1);
+      return {
+        importName,
+        path: "ant-design-vue/es",
+        sideEffects: getSideEffects(importName, options)
+      };
+    }
+  };
+}
 
 // src/resolvers/element-plus.ts
-var ElementPlusResolver = (options = {}) => (name) => {
-  const { importStyle = true } = options;
-  if (name.startsWith("El")) {
-    const partialName = name[2].toLowerCase() + name.substring(3).replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
-    return {
-      path: `element-plus/es/el-${partialName}`,
-      sideEffects: importStyle ? `element-plus/packages/theme-chalk/src/${partialName}.scss` : void 0
-    };
+function ElementPlusResolver(options = {}) {
+  return (name) => {
+    const { importStyle = true } = options;
+    if (name.startsWith("El")) {
+      const partialName = name[2].toLowerCase() + name.substring(3).replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
+      return {
+        path: `element-plus/es/el-${partialName}`,
+        sideEffects: importStyle ? `element-plus/packages/theme-chalk/src/${partialName}.scss` : void 0
+      };
+    }
+  };
+}
+
+// src/resolvers/element-ui.ts
+function getSideEffects2(partialName, options) {
+  const { importStyle = "css" } = options;
+  if (!importStyle)
+    return;
+  if (importStyle === "sass") {
+    return [
+      "element-ui/packages/theme-chalk/src/base.scss",
+      `element-ui/packages/theme-chalk/src/${partialName}.scss`
+    ];
+  } else {
+    return [
+      "element-ui/lib/theme-chalk/base.css",
+      `element-ui/lib/theme-chalk/${partialName}.css`
+    ];
   }
-};
+}
+function ElementUiResolver(options = {}) {
+  return (name) => {
+    if (name.startsWith("El")) {
+      const compName = name.slice(2);
+      const partialName = kebabCase(compName);
+      return {
+        path: `element-ui/lib/${partialName}`,
+        sideEffects: getSideEffects2(partialName, options)
+      };
+    }
+  };
+}
 
@@ -1071,66 +1108,234 @@ // src/resolvers/headless-ui.ts
 ];
-var HeadlessUiResolver = () => (name) => {
-  if (components.includes(name))
-    return { importName: name, path: "@headlessui/vue" };
-};
+function HeadlessUiResolver() {
+  return (name) => {
+    if (components.includes(name))
+      return { importName: name, path: "@headlessui/vue" };
+  };
+}
 
+// src/resolvers/naive-ui.ts
+function NaiveUiResolver() {
+  return (name) => {
+    if (name.match(/^N[A-Z]/))
+      return { importName: name, path: "naive-ui" };
+  };
+}
+
+// src/resolvers/prime-vue.ts
+var components2 = [
+  "AutoComplete",
+  "Calendar",
+  "CascadeSelect",
+  "Checkbox",
+  "Chips",
+  "ColorPicker",
+  "Dropdown",
+  "Editor",
+  "InputMask",
+  "InputNumber",
+  "InputSwitch",
+  "InputText",
+  "Knob",
+  "Listbox",
+  "MultiSelect",
+  "Password",
+  "RadioButton",
+  "Rating",
+  "SelectButton",
+  "Slider",
+  "Textarea",
+  "ToggleButton",
+  "TreeSelect",
+  "TriStateCheckbox",
+  "Button",
+  "SplitButton",
+  "DataTable",
+  "Column",
+  "ColumnGroup",
+  "DataView",
+  "FullCalendar",
+  "OrderList",
+  "OrganizationChart",
+  "Paginator",
+  "PickList",
+  "Timelist",
+  "Tree",
+  "TreeTable",
+  "Accordion",
+  "AccordionTab",
+  "Card",
+  "DeferredContent",
+  "Divider",
+  "Fieldset",
+  "Panel",
+  "Splitter",
+  "SplitterPanel",
+  "ScrollPanel",
+  "TabView",
+  "TabPanel",
+  "Toolbar",
+  "ConfirmDialog",
+  "ConfirmPopup",
+  "Dialog",
+  "OverlayPanel",
+  "Sidebar",
+  "Tooltip",
+  "FileUpload",
+  "Breadcrumb",
+  "ContextMenu",
+  "MegaMenu",
+  "Menu",
+  "Menubar",
+  "PanelMenu",
+  "Steps",
+  "TabMenu",
+  "TieredMenu",
+  "Chart",
+  "Message",
+  "Toast",
+  "Carousel",
+  "Galleria",
+  "Avatar",
+  "AvatarGroup",
+  "Badge",
+  "Chip",
+  "BlockUI",
+  "Inplace",
+  "ScrollTop",
+  "Skeleton",
+  "ProgressBar",
+  "ProgressSpiner",
+  "Tag",
+  "Terminal",
+  "TerminalService"
+];
+function PrimeVueResolver(options = {}) {
+  return (name) => {
+    const sideEffects = [];
+    if (options.importStyle)
+      sideEffects.push("primevue/resources/primevue.min.css");
+    if (options.importIcons)
+      sideEffects.push("primeicons/primeicons.css");
+    if (options.importTheme) {
+      sideEffects.push(`primevue/resources/themes/${options.importTheme}/theme.css`);
+    }
+    if (components2.includes(name)) {
+      return {
+        path: `primevue/${name}/${name}.vue`,
+        sideEffects
+      };
+    }
+  };
+}
+
 // src/resolvers/vant.ts
-var VantResolver = (options = {}) => (name) => {
-  const { importStyle = true } = options;
-  if (name.startsWith("Van")) {
-    const partialName = name.slice(3);
-    return {
-      importName: partialName,
-      path: "vant/es",
-      sideEffects: importStyle ? `vant/es/${kebabCase(partialName)}/style` : void 0
-    };
+function VantResolver(options = {}) {
+  return (name) => {
+    const { importStyle = true } = options;
+    if (name.startsWith("Van")) {
+      const partialName = name.slice(3);
+      return {
+        importName: partialName,
+        path: "vant/es",
+        sideEffects: importStyle ? `vant/es/${kebabCase(partialName)}/style` : void 0
+      };
+    }
+  };
+}
+
+// src/resolvers/varlet-ui.ts
+function VarletUIResolver(options = {}) {
+  return (name) => {
+    const {
+      importStyle = "css",
+      importCss = true,
+      importLess
+    } = options;
+    if (name.startsWith("Var")) {
+      const partialName = name.slice(3);
+      const sideEffects = [];
+      if (importStyle || importCss) {
+        if (importStyle === "less" || importLess)
+          sideEffects.push(`@varlet/ui/es/${kebabCase(partialName)}/style/less.js`);
+        else
+          sideEffects.push(`@varlet/ui/es/${kebabCase(partialName)}/style`);
+      }
+      return {
+        importName: `_${partialName}Component`,
+        path: "@varlet/ui",
+        sideEffects
+      };
+    }
+  };
+}
+
+// src/resolvers/view-ui.ts
+function getSideEffects3(componentName) {
+  const sideEffects = [
+    "view-design/dist/styles/iview.css",
+    "popper.js/dist/umd/popper.js"
+  ];
+  if (/^Table/.test(componentName))
+    sideEffects.push("element-resize-detector");
+  if (/^Date/.test(componentName))
+    sideEffects.push("js-calendar");
+  return sideEffects;
+}
+var matchComponents2 = [
+  {
+    pattern: /^List/,
+    compDir: "list"
   }
-};
+];
+function getCompDir(compName) {
+  let compPath;
+  const total = matchComponents2.length;
+  for (let i = 0; i < total; i++) {
+    const matcher = matchComponents2[i];
+    if (compName.match(matcher.pattern)) {
+      compPath = `${matcher.compDir}/${kebabCase(compName)}.vue`;
+      break;
+    }
+  }
+  if (!compPath)
+    compPath = kebabCase(compName);
+  return compPath;
+}
+function ViewUiResolver() {
+  return (name) => {
+    if (name.match(/^I[A-Z]/)) {
+      const compName = name.slice(1);
+      return {
+        path: `view-design/src/components/${getCompDir(compName)}`,
+        sideEffects: getSideEffects3(compName)
+      };
+    }
+  };
+}
 
 // src/resolvers/vuetify.ts
-var VuetifyResolver = () => (name) => {
-  if (name.match(/^V[A-Z]/))
-    return { importName: name, path: "vuetify/lib" };
-};
+function VuetifyResolver() {
+  return (name) => {
+    if (name.match(/^V[A-Z]/))
+      return { importName: name, path: "vuetify/lib" };
+  };
+}
 
 // src/resolvers/vueuse.ts
-var components2;
-var VueUseComponentsResolver = () => (name) => {
-  if (!components2) {
-    try {
-      const indexesJson = __require("@vueuse/core/indexes.json");
-      components2 = indexesJson.functions.filter((i) => i.component && i.name).map(({ name: name2 }) => name2[0].toUpperCase() + name2.slice(1));
-    } catch (error) {
-      components2 = [];
+var components3;
+function VueUseComponentsResolver() {
+  return (name) => {
+    if (!components3) {
+      try {
+        const indexesJson = __require("@vueuse/core/indexes.json");
+        components3 = indexesJson.functions.filter((i) => i.component && i.name).map(({ name: name2 }) => name2[0].toUpperCase() + name2.slice(1));
+      } catch (error) {
+        components3 = [];
+      }
     }
-  }
-  if (components2 && components2.includes(name))
-    return { importName: name, path: "@vueuse/components" };
-};
+    if (components3 && components3.includes(name))
+      return { importName: name, path: "@vueuse/components" };
+  };
+}
 
-// src/resolvers/naive-ui.ts
-var NaiveUiResolver = () => (name) => {
-  if (name.match(/^N[A-Z]/))
-    return { importName: name, path: "naive-ui" };
-};
-
-// src/resolvers/varlet-ui.ts
-var VarletUIResolver = (options = {}) => (name) => {
-  const {
-    importCss = true,
-    importLess
-  } = options;
-  if (name.startsWith("Var")) {
-    const partialName = name.slice(3);
-    const sideEffects = [];
-    importCss && sideEffects.push(`@varlet/ui/es/${kebabCase(partialName)}/style`);
-    importLess && sideEffects.push(`@varlet/ui/es/${kebabCase(partialName)}/style/less.js`);
-    return {
-      importName: `_${partialName}Component`,
-      path: "@varlet/ui",
-      sideEffects
-    };
-  }
-};
-
 // src/index.ts
@@ -1180,2 +1385,5 @@ function VitePluginComponents(options = {}) {
 
-exports.AntDesignVueResolver = AntDesignVueResolver; exports.ElementPlusResolver = ElementPlusResolver; exports.HeadlessUiResolver = HeadlessUiResolver; exports.LibraryResolver = LibraryResolver; exports.NaiveUiResolver = NaiveUiResolver; exports.VantResolver = VantResolver; exports.VarletUIResolver = VarletUIResolver; exports.VueUseComponentsResolver = VueUseComponentsResolver; exports.VuetifyResolver = VuetifyResolver; exports.camelCase = camelCase; exports.default = src_default; exports.kebabCase = kebabCase; exports.pascalCase = pascalCase; exports.tryLoadVeturTags = tryLoadVeturTags;
+
+
+
+exports.AntDesignVueResolver = AntDesignVueResolver; exports.ElementPlusResolver = ElementPlusResolver; exports.ElementUiResolver = ElementUiResolver; exports.HeadlessUiResolver = HeadlessUiResolver; exports.LibraryResolver = LibraryResolver; exports.NaiveUiResolver = NaiveUiResolver; exports.PrimeVueResolver = PrimeVueResolver; exports.VantResolver = VantResolver; exports.VarletUIResolver = VarletUIResolver; exports.ViewUiResolver = ViewUiResolver; exports.VueUseComponentsResolver = VueUseComponentsResolver; exports.VuetifyResolver = VuetifyResolver; exports.camelCase = camelCase; exports.default = src_default; exports.kebabCase = kebabCase; exports.pascalCase = pascalCase; exports.tryLoadVeturTags = tryLoadVeturTags;

package.json

 {
   "name": "vite-plugin-components",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "description": "Components auto importing for Vite",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/antfu/vite-plugin-components",

README.md

@@ -48,3 +48,3 @@ <h2 align='center'><samp>vite-plugin-components</samp></h2>
 
-Use components in templates as you would usually do but NO `import` and `component registration` required anymore! It will import components on demand, code splitting is also possible.
+Use components in templates as you would usually do, it will import components on demand and there is no `import` and `component registration` required anymore! If you register the parent component asynchronously (or lazy route), the auto-imported components will be code-split along with their parent.
 
@@ -137,2 +137,3 @@ Basically, it will automatically turn this
 - [Naive UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/naive-ui.ts)
+- [Prime Vue](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/prime-vue.ts)
 - [Vant](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/vant.ts)
@@ -139,0 +140,0 @@ - [Varlet UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/varlet-ui.ts)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96962

increased by12.46%

Lines of code

2975

increased by18.76%

Number of lines in readme file

226

increased by0.44%

No dependency changes