vite-plugin-fast-external - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

package.json

 {
   "name": "vite-plugin-fast-external",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "High performance, Built in Vue, React, Antd, Element and others",
@@ -5,0 +5,0 @@ "main": "index.js",

presets/index.d.ts

@@ -7,3 +7,3 @@
 
-export declare function libMeta2external(libMeta: LibMeta): () => string
+export declare function lib2external(name: string, members: string[]): () => string
 
@@ -15,2 +15,3 @@ export declare const antd_vue_v1: () => string
 export declare const element_ui: () => string
+export declare const pinia_v2: () => string
 export declare const react_dom_v17: () => string
@@ -21,3 +22,4 @@ export declare const react_dom_v18: () => string
 export declare const vue_composition_api: () => string
+export declare const vue_router_v4: () => string
 export declare const vue_v2: () => string
 export declare const vue_v3: () => string

presets/index.js

@@ -6,2 +6,3 @@ const antd_vue_v1 = require('./ant-design-vue-v1');
 const element_ui = require('./element-ui');
+const pinia_v2 = require('./pinia-v2');
 const react_dom_v17 = require('./react-dom-v17');
@@ -12,2 +13,3 @@ const react_dom_v18 = require('./react-dom-v18');
 const vue_composition_api = require('./vue-composition-api');
+const vue_router_v4 = require('./vue-router-v4');
 const vue_v2 = require('./vue-v2');
@@ -17,5 +19,5 @@ const vue_v3 = require('./vue-v3');
 /**
- * @type {(libMeta: import('.').LibMeta) => (() => string)} 
+ * @type {typeof import('.')['lib2external']} 
  */
-exports.libMeta2external = function libMeta2external(libMeta) {
+exports.lib2external = function (name, members) {
   const keywords = [
@@ -69,3 +71,3 @@ 'await',
   ];
-  const exportMembers = libMeta.members
+  const exportMembers = members
     .filter(e => !keywords.includes(e))
@@ -75,3 +77,3 @@ .map(e => `export const ${e} = _M_.${e};`)
   const externalTpl = `
-const _M_ = window['${libMeta.name}'];
+const _M_ = window['${name}'];
 const _D_ = _M_.default || _M_;
@@ -86,13 +88,57 @@
 
-exports.antd_vue_v1 = this.libMeta2external(antd_vue_v1);
-exports.antd_vue_v3 = this.libMeta2external(antd_vue_v3);
-exports.antd_v4 = this.libMeta2external(antd_v4);
-exports.element_plus = this.libMeta2external(element_plus);
-exports.element_ui = this.libMeta2external(element_ui);
-exports.react_dom_v17 = this.libMeta2external(react_dom_v17);
-exports.react_dom_v18 = this.libMeta2external(react_dom_v18);
-exports.react_v17 = this.libMeta2external(react_v17);
-exports.react_v18 = this.libMeta2external(react_v18);
-exports.vue_composition_api = this.libMeta2external(vue_composition_api);
-exports.vue_v2 = this.libMeta2external(vue_v2);
-exports.vue_v3 = this.libMeta2external(vue_v3);
+exports.antd_vue_v1 = this.lib2external(
+  antd_vue_v1.name,
+  antd_vue_v1.members,
+);
+exports.antd_vue_v3 = this.lib2external(
+  antd_vue_v3.name,
+  antd_vue_v3.members,
+);
+exports.antd_v4 = this.lib2external(
+  antd_v4.name,
+  antd_v4.members,
+);
+exports.element_plus = this.lib2external(
+  element_plus.name,
+  element_plus.members,
+);
+exports.element_ui = this.lib2external(
+  element_ui.name,
+  element_ui.members,
+);
+exports.pinia_v2 = this.lib2external(
+  pinia_v2.name,
+  pinia_v2.members,
+);
+exports.react_dom_v17 = this.lib2external(
+  react_dom_v17.name,
+  react_dom_v17.members,
+);
+exports.react_dom_v18 = this.lib2external(
+  react_dom_v18.name,
+  react_dom_v18.members,
+);
+exports.react_v17 = this.lib2external(
+  react_v17.name,
+  react_v17.members,
+);
+exports.react_v18 = this.lib2external(
+  react_v18.name,
+  react_v18.members,
+);
+exports.vue_composition_api = this.lib2external(
+  vue_composition_api.name,
+  vue_composition_api.members,
+);
+exports.vue_router_v4 = this.lib2external(
+  vue_router_v4.name,
+  vue_router_v4.members,
+);
+exports.vue_v2 = this.lib2external(
+  vue_v2.name,
+  vue_v2.members,
+);
+exports.vue_v3 = this.lib2external(
+  vue_v3.name,
+  vue_v3.members,
+);

README.md

@@ -6,14 +6,9 @@ # vite-plugin-fast-external
 
+**English | [简体中文](https://github.com/caoxiemeihao/vite-plugins/blob/main/packages/fast-external/README.zh-CN.md)**
+
 🚀 **High performance** without lexical transform  
+📦 Built in Vue, React, Antd, Element and others, Out of the box  
 🌱 Support custom external code  
-📦 Built in Vue, React, Antd, Element and others, Out of the box  
+✅ Browser, Node.js, Electron  
 
-**English | [简体中文](https://github.com/caoxiemeihao/vite-plugins/blob/main/packages/fast-external/README.zh-CN.md)**
-
-- Like Webpack externals, support browser, Node.js and Electron
-
-- With out ast analyze, load virtual files by resolveId-hooks -- Real efficient
-
-- Support customize the code snippets by return string from function -- Real flexible 🎉  
-
 ## Install
@@ -27,18 +22,4 @@
 
-```js
-import external from 'vite-plugin-fast-external'
+You can easily use builtin modules
 
-export default {
-  plugins: [
-    external({
-      vue: 'Vue',
-    }),
-  ],
-}
-```
-
-#### Builtins
-
-You can easily use some builtin modules
-
 ```js
@@ -52,2 +33,3 @@ import external from 'vite-plugin-fast-external'
   element_ui,
+  pinia_v2,
   react_dom_v17,
@@ -58,2 +40,3 @@ react_dom_v18,
   vue_composition_api,
+  vue_router_v4,
   vue_v2,
@@ -66,10 +49,4 @@ vue_v3,
     external({
-      'ant-design-vue': antd_vue_v3,
-      antd: antd_v4,
-      'element-plus': element_plus,
-      'element-ui': element_ui,
-      'react-dom/client': react_dom_v18,
-      react: react_v18,
-      '@vue/composition-api': vue_composition_api,
       vue: vue_v3,
+      // ...others
     }),
@@ -85,10 +62,3 @@ ],
 import { ref, reactive, watch } from 'vue'
-// Vue v2
-import { ref, reactive, watch } from '@vue/composition-api'
-// React v18
-import { useState, useEffect, useMemo } from 'react'
-// ReactDOM v18
-import { createRoot } from 'react-dom/client'
-// Antd v4
-import { Button, Table } from 'antd'
+// ...others
 ```
@@ -98,12 +68,13 @@
 
-```js
-import { libMeta2external } from 'vite-plugin-fast-external/presets'
+```ts
+import { lib2external } from 'vite-plugin-fast-external/presets'
 import vue_v2 from 'vite-plugin-fast-external/presets/vue-v2'
 
-// interface Vue_v2 extends LibMeta {
-//   name: string
-//   members: string[]
-// }
+interface Vue_v2 extends LibMeta {
+  name: string
+  members: string[]
+}
+
 vue_v2.name = 'ExtendVue'
-vue_v2.members = vue_v2.members.push('ExtendAPI')
+vue_v2.members.push('ExtendAPI')
 
@@ -113,3 +84,4 @@ export default {
     external({
-      vue: libMeta2external(vue_v2),
+      vue: lib2external(vue_v2.name, vue_v2.members),
+      // ...others
     }),
@@ -122,12 +94,25 @@ ],
 
-Support custom external code by function
+Use `lib2external`
 
 ```js
+import { lib2external } from 'vite-plugin-fast-external/presets'
+
 external({
+  module: lib2external('Module', [
+    'member1',
+    // ...others
+  ]),
+})
+```
+
+Be equivalent to
+
+```js
+external({
   module: () => `
     const M = window.Module;
     const D = M.default || M;
-    export { D as default };
+    export { D as default }
     export const member1 = M.member1;
-    // other members...
+    // ...others
   `,
@@ -137,9 +122,9 @@ })
 
-#### Load a file
+Load a file. Support nested module id and support return Promise
 
-Support nested module id, support return Promise
+```js
+import fs from 'fs'
 
-```ts
-resolve({
-  'path/filename': () => require('fs/promises').readFile('path', 'utf-8'),
+external({
+  'path/filename': () => fs.promise.readFile('path/filename', 'utf8'),
 })
@@ -150,3 +135,3 @@ ```
 
-external(entries)
+`external(entries)`
 
@@ -159,2 +144,10 @@ ```ts
 
+```js
+external({
+  vue: 'Vue',
+  // Be equivalent to
+  // vue: () => `const M = window['Vue']; export { M as default }`,
+})
+```
+
 In fact, the plugin will intercept your module import and return the specified code snippet  
@@ -161,0 +154,0 @@ Let's use `external({ vue: 'Vue' })` as an example, this will get the below code

README.zh-CN.md

@@ -6,14 +6,9 @@ # vite-plugin-fast-external
 
-🚀 **高性能** 不需要语法转换  
-🌱 支持自定义 external 代码段
-📦 内置 Vue, React, Antd, Element 等等, 开箱即用
-
 **[English](https://github.com/caoxiemeihao/vite-plugins/tree/main/packages/fast-external#readme) | 简体中文**
 
-- 类似 Webpack 的 externals，支持浏览器、Node.js、Electron 等多环境
+🚀 **高性能** 不需要语法转换  
+📦 内置 Vue, React, Antd, Element 等等, 开箱即用  
+🌱 支持自定义 external 代码段  
+✅ Browser, Node.js, Electron  
 
-- 没有使用语法分析，只是通过 resolveId 钩子拦截实现的模块重定向加载，十分高效
-
-- 支持通过函数返回字符串的形式任意定制代码段 -- 十分灵活！🎉
-
 ## 安装
@@ -27,20 +22,6 @@
 
-```js
-import external from 'vite-plugin-fast-external';
+内置的一些常用的模块
 
-export default defineConfig({
-  plugins: [
-    external({
-      vue: 'Vue',
-    }),
-  ],
-})
-```
-
-#### 内置模块
-
-已经内置的一些常用的模块
-
 ```js
-import external from 'vite-plugin-fast-external';
+import external from 'vite-plugin-fast-external'
 import {
@@ -52,2 +33,3 @@ antd_vue_v1,
   element_ui,
+  pinia_v2,
   react_dom_v17,
@@ -58,5 +40,6 @@ react_dom_v18,
   vue_composition_api,
+  vue_router_v4,
   vue_v2,
   vue_v3,
-} from 'vite-plugin-fast-external/presets';
+} from 'vite-plugin-fast-external/presets'
 
@@ -66,10 +49,4 @@ export default {
     external({
-      'ant-design-vue': antd_vue_v3,
-      antd: antd_v4,
-      'element-plus': element_plus,
-      'element-ui': element_ui,
-      'react-dom/client': react_dom_v18,
-      react: react_v18,
-      '@vue/composition-api': vue_composition_api,
       vue: vue_v3,
+      // ...其他模块
     }),
@@ -85,10 +62,3 @@ ],
 import { ref, reactive, watch } from 'vue'
-// Vue v2
-import { ref, reactive, watch } from '@vue/composition-api'
-// React v18
-import { useState, useEffect, useMemo } from 'react'
-// ReactDOM v18
-import { createRoot } from 'react-dom/client'
-// Antd v4
-import { Button, Table } from 'antd'
+// ...其他模块
 ```
@@ -98,12 +68,13 @@
 
-```js
-import { libMeta2external } from 'vite-plugin-fast-external/presets'
+```ts
+import { lib2external } from 'vite-plugin-fast-external/presets'
 import vue_v2 from 'vite-plugin-fast-external/presets/vue-v2'
 
-// interface Vue_v2 extends LibMeta {
-//   name: string
-//   members: string[]
-// }
+interface Vue_v2 extends LibMeta {
+  name: string
+  members: string[]
+}
+
 vue_v2.name = 'ExtendVue'
-vue_v2.members = vue_v2.members.push('ExtendAPI')
+vue_v2.members.push('ExtendAPI')
 
@@ -113,3 +84,4 @@ export default {
     external({
-      vue: libMeta2external(vue_v2),
+      vue: lib2external(vue_v2.name, vue_v2.members),
+      // ...其他模块
     }),
@@ -122,12 +94,25 @@ ],
 
-支持通过 function 返回自定义 external 代码
+使用 `lib2external`
 
 ```js
+import { lib2external } from 'vite-plugin-fast-external/presets'
+
 external({
+  module: lib2external('Module', [
+    'member1',
+    // ...其他成员
+  ]),
+})
+```
+
+这相当于
+
+```js
+external({
   module: () => `
     const M = window.Module;
     const D = M.default || M;
-    export { D as default };
+    export { D as default }
     export const member1 = M.member1;
-    // 其他成员...
+    // ...其他成员
   `,
@@ -137,9 +122,9 @@ })
 
-#### 加载文件
+加载文件。支持嵌套模块命名，支持返回 Promise
 
-支持嵌套模块命名，支持返回 Promise
+```js
+import fs from 'fs'
 
-```ts
-resolve({
-  'path/filename': () => require('fs/promises').readFile('path', 'utf-8'),
+external({
+  'path/filename': () => fs.promise.readFile('path/filename', 'utf8'),
 })
@@ -150,3 +135,3 @@ ```
 
-external(entries)
+`external(entries)`
 
@@ -159,4 +144,12 @@ ```ts
 
+```js
+external({
+  vue: 'Vue',
+  // 这相当于
+  // vue: () => `const M = window['Vue']; export { M as default }`,
+})
+```
+
 实际中，该插件会拦截你的 import 导入，并返回指定的代码段
-Let's use `external({ vue: 'Vue' })` as an example, this will get the code snippet  
+让我们用 `external({ vue: 'Vue' })` 举个 🌰，实际上会生成如下代码
 
@@ -163,0 +156,0 @@ ```js

No alert changes

Improved metrics

Total package byte prevSize

37803

increased by1.67%

Number of package files

21

increased by10.53%

Lines of code

1565

increased by6.75%

Worsened metrics

Number of lines in readme file

147

decreased by-4.55%

No dependency changes