use single import entry; add iife output

Author: Fan-iX

README.md

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { VVPlot, VVGeomPoint } from 'vvplot/components'
+import { VVPlot, VVGeomPoint } from 'vvplot'
 
 const data = [{ x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }]
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vvplot",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "license": "MIT",
   "files": [
     "dist"
@@ -10,18 +10,16 @@
     "dev": "vite dev"
   },
   "type": "module",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "module": "./dist/vvplot.esm.js",
+  "types": "./dist/vvplot.d.ts",
   "imports": {
     "#base/*": "./src/*"
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./components": "./dist/components.js",
-    "./scale": "./dist/scale.js",
-    "./break": "./dist/break.js",
-    "./theme": "./dist/theme.js",
-    "./label": "./dist/label.js",
+    ".": {
+      "import": "./dist/vvplot.esm.js",
+      "types": "./dist/vvplot.d.ts"
+    },
     "./style.css": "./dist/style.css"
   },
   "homepage": "https://fan-ix.github.io/vvplot/",

src/index.ts

@@ -1,2 +1,9 @@
 import './style.css'
 export * from './components'
+export * as components from './components'
+export { default as vvtheme } from './js/theme.js'
+export { default as vvbreak } from './js/break.js'
+export { default as vvlabel } from './js/label.js'
+export { default as vvscale } from './js/scale.js'
+export * from './js/scale.js'
+export * from './js/label.js'

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "allowJs": true,
+    "checkJs": false,
     "target": "esnext",
     "useDefineForClassFields": true,
     "module": "esnext",
@@ -19,5 +21,5 @@
       "vite/client"
     ]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/index.js"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.js"]
 }

vite.config.js

@@ -1,12 +1,22 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, transformWithEsbuild } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 import tailwindcss from '@tailwindcss/vite'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
+const esbuildMinify = {
+  name: 'minify-plugin',
+  renderChunk(code) {
+    return transformWithEsbuild(code, 'index.js', {
+      minify: true,
+      treeShaking: true,
+    })
+  }
+}
+
 export default defineConfig({
   define: {
     'process.env.NODE_ENV': JSON.stringify('production')
@@ -31,27 +41,39 @@ export default defineConfig({
   build: {
     minify: false,
     lib: {
-      entry: {
-        index: resolve(__dirname, 'src/index.ts'),
-        components: resolve(__dirname, 'src/components/index.ts'),
-        scale: resolve(__dirname, 'src/js/scale.js'),
-        break: resolve(__dirname, 'src/js/break.js'),
-        label: resolve(__dirname, 'src/js/label.js'),
-        theme: resolve(__dirname, 'src/js/theme.js'),
-      },
+      entry: resolve(__dirname, 'src/index.ts'),
       name: 'VVPlot',
-      formats: ['es'],
+      fileName: 'vvplot',
       cssFileName: "style"
     },
     rollupOptions: {
       external: ['vue'],
-      output: {
-        chunkFileNames: '[name].js',
-        minifyInternalExports: false,
-        globals: {
-          vue: 'Vue',
+      output: [
+        {
+          format: 'es',
+          entryFileNames: 'vvplot.esm.js',
+          minifyInternalExports: false,
+        },
+        {
+          format: 'es',
+          entryFileNames: 'vvplot.esm.min.js',
+          plugins: [esbuildMinify]
+        },
+        {
+          format: 'iife',
+          name: 'VVPlot',
+          entryFileNames: 'vvplot.global.js',
+          minifyInternalExports: false,
+          globals: { vue: 'Vue' },
+        },
+        {
+          format: 'iife',
+          name: 'VVPlot',
+          entryFileNames: 'vvplot.global.min.js',
+          globals: { vue: 'Vue' },
+          plugins: [esbuildMinify]
         },
-      },
+      ],
     },
   },
 })

web-docs/docs/quick-start.vue

@@ -244,9 +244,9 @@ const render = ref('canvas')
                 Like <code>ggplot2</code>, VVPlot comes with several built-in themes.
             </p>
             <p>
-                To use a built-in theme, you need to import it from the <code>vvplot/theme</code> module.
+                To use a built-in theme, you need to import it from the <code>vvtheme</code> module.
             </p>
-            <pre-highlight lang="javascript">import vvtheme from 'vvplot/theme'</pre-highlight>
+            <pre-highlight lang="javascript">import { vvtheme } from 'vvplot'</pre-highlight>
             <p>
                 You can provide a single theme object or an array of theme objects to the <code>theme</code> property of
                 <code>&lt;VVPlot&gt;</code>:

web-docs/docs/scale.vue

@@ -22,10 +22,10 @@ const size_limits_max = ref(600)
             </p>
             <p>
                 VVPlot provides several built-in scale function wrappers for different aesthetics
-                in the <code>vvplot/scale</code> module.
+                in the <code>vvscale</code> module.
                 They can be imported directly from the module:
             </p>
-            <pre-highlight lang="javascript">import vvscale from 'vvplot/scale'</pre-highlight>
+            <pre-highlight lang="javascript">import { vvscale } from 'vvplot'</pre-highlight>
             <h3><code>identity</code> scale: keep values unchanged</h3>
             <p>
                 The identity scale (<code>vvscale.*.identity()</code>) maps data values to aesthetic attributes directly
@@ -114,9 +114,9 @@ const size_limits_max = ref(600)
             </p>
             <p>
                 The <code>oob</code> argument property controls how out-of-boundary values will be handled.
-                VVPlot provides several built-in oob functions in the <code>vvplot/scale</code> module:
+                VVPlot provides several built-in oob functions:
             </p>
-            <pre-highlight lang="javascript">import { oob } from 'vvplot/scale'</pre-highlight>
+            <pre-highlight lang="javascript">import { oob } from 'vvplot'</pre-highlight>
             <p>
                 The following oob functions are available:
             </p>