CHANGELOG.md

@@ -1,5 +1,14 @@
 ## Changelog
 
+[1.0.1]
+- Fix: auto expose type
+
+[1.0.0]
+- Feat: support auto expose(by [@so11y](https://github.com/so11y))
+
+[0.4.9]
+- Fix: webpack transformInclude reg
+
 [0.4.8]
 - Fix: script tag
 

README.md

@@ -6,27 +6,16 @@ Make the vue script setup syntax support the name attribute
 
 ## CHANGELOG
 
-[0.4.8]
-- Fix: script tag
+[1.0.1]
+- Fix: auto expose type
 
-[0.4.7]
-- Fix: webpack conversion script parsing lost
-
-[0.4.6]
-- Fix: webpack parsing failed resulting in process termination[#12](https://github.com/chenxch/unplugin-vue-setup-extend-plus/issues/12)
-
-[0.4.5]
-- Fix: commonjs
-
-[0.4.4]
-- Fix: types
-
-[0.4.1]
-- Feature: suppot vite@4
+[1.0.0]
+- Feat: support auto expose(by [@so11y](https://github.com/so11y))
 
 
 ## Feature 
 
+- 🌟support auto expose
 - support name
 - support inheritAttrs
 - precise breakpoints
@@ -57,22 +46,82 @@ vueSetupExtend({
   mode?: 'none' | 'relativeName' | Function
   // none: Cancel the setting of name.
   //       e.g.
-  //       <script setup name="CustomName"> 'CustomName' will be ignored
-  // relativeName: Automatically read relative path names
-  //       e.g.
-  //       /user/demo/src/user/login.vue  => UserLogin
-  // Function: support a custom function
-  // (fileId: string) => {
-  //    let name = ''
-  //    ...
-  //    return name
-  // }
-  //  fileId e.g. /user/demo/src/user/login.vue
+  //       <script setup name="CustomName"> 'CustomName' 
+  // support auto expose
+  enableAutoExpose?: boolean
 })
 
 ```
 
-## extendIgnore
+## enableAutoExpose
+
+First of all thanks to [@so11y](https://github.com/so11y) for his contribution to this feature.
+
+After using the script setup syntax, the export needs to be processed manually. When you need to export the full amount by default, just enable this property. The usage is as follows:
+
+main.ts
+```ts
+import { createApp } from 'vue'
+import autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index'
+import App from './App.vue'
+
+createApp(App).use(autoExpose).mount('#app')
+```
+
+Comp.vue
+```vue
+<script setup>
+import { ref } from 'vue'
+const numb = ref(50)
+</script>
+```
+App.vue
+```vue
+<script setup>
+import { onMounted, ref } from 'vue'
+const el = ref()
+onMounted(() => { console.log(el.value.num) }) // 50
+</script>
+
+<template>
+  <Comp ref="el" />
+</template>
+```
+## Script Tag Attributes
+
+### name
+
+`Set a name for the component, similar to the name attribute in the option API notation.`
+
+[name docs](https://vuejs.org/api/options-misc.html#name)
+
+```html
+<template>
+  <div>hello world {{ a }}</div>
+</template>
+
+<script lang="ts" setup name="App">
+  const a = 1
+</script>
+```
+
+### inheritAttrs
+
+`If you do not want a component to automatically inherit attributes, you can set inheritAttrs: false in the component's options.`
+
+[inheritAttrs docs](https://vuejs.org/api/options-misc.html#inheritattrs)
+
+```html
+<template>
+  <div>hello world {{ a }}</div>
+</template>
+
+<script lang="ts" setup name="App" inheritAttrs="false">
+  const a = 1
+</script>
+```
+
+### extendIgnore
 
 `Since the user may define the name attribute of the component in the script tag, this conflicts with the default name set by this plugin. So you need to add a switch attribute to the script setup.`
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unplugin-vue-setup-extend-plus",
   "type": "module",
-  "version": "0.4.8",
+  "version": "1.0.1",
   "packageManager": "pnpm@7.1.1",
   "description": "Extending the vue script setup syntactic sugar",
   "author": "chenxch <124118265@qq.com>",
@@ -57,6 +57,11 @@
       "require": "./dist/types.cjs",
       "import": "./dist/types.js"
     },
+    "./dist/client/index": {
+      "types": "./dist/client/index.d.ts",
+      "require": "./dist/client/index.cjs",
+      "import": "./dist/client/index.js"
+    },
     "./*": "./*"
   },
   "typesVersions": {
@@ -84,7 +89,7 @@
   "dependencies": {
     "@vue/compiler-sfc": "^3.2.37",
     "magic-string": "^0.26.2",
-    "unplugin": "^1.0.1"
+    "unplugin": "^1.3.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.23.1",
@@ -98,7 +103,7 @@
     "rollup": "^2.74.0",
     "tsup": "^6.5.0",
     "typescript": "^4.6.4",
-    "vite": "^2.9.9",
+    "vite": "^2.9.15",
     "vitest": "^0.12.6",
     "webpack": "^5.72.1"
   }

playground/index.html

@@ -12,7 +12,7 @@
   <a href="/__inspect/module?id=./main.ts&index=2" target="_blank"
     style="text-decoration: none; margin-top:10px; display: block;">visit /__inspect/ to inspect the intermediate
     state</a>
-  <script type="module" src="./main.ts"></script>
+  <script type="module" src="./src/main.ts"></script>
 </body>
 
 </html>

playground/package.json

@@ -5,9 +5,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
-    "typescript": "^4.6.4",
+    "typescript": "^4.9.3",
     "unplugin-vue-setup-extend-plus": "workspace:^0.4.6",
-    "vite": "^4.0.0",
+    "vite": "^4.2.1",
     "vite-plugin-inspect": "^0.5.0"
   },
   "dependencies": {

playground/src/App.vue

@@ -0,0 +1,21 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import com from './index.vue'
+
+const el = ref()
+
+const at = ref('99')
+
+onMounted(() => {
+  el.value.num = 50
+  console.log(el.value.num)
+  console.log(el.value, '---refs')
+  console.log(el.value.attrs, '---attrs')
+})
+</script>
+
+<template>
+  <com ref="el" :tt="at" style="height:80px" />
+  {{ el?.num }}
+</template>

playground/src/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" inheritAttrs="false" name="Count" >
 import { ref } from 'vue'
-const num = ref(0)
+const num = ref(10)
 </script>
 
 <template>

playground/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import autoExpose from 'unplugin-vue-setup-extend-plus/src/client/index'
+import App from './App.vue'
+
+createApp(App).use(autoExpose).mount('#app')

playground/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

playground/tsconfig.json

@@ -6,12 +6,12 @@
     "moduleResolution": "Node",
     "strict": true,
     "jsx": "preserve",
-    "sourceMap": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "noEmit": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

playground/vite.config.ts

@@ -2,13 +2,16 @@ import { defineConfig } from 'vite'
 // import Inspect from 'vite-plugin-inspect'
 import vue from '@vitejs/plugin-vue'
 import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
-import Unplugin from '../src/vite'
+// import Unplugin from '../src/vite'
+import type { Plugin } from 'vite'
 
 export default defineConfig({
   plugins: [
     vue(),
     // Inspect(),
-    Unplugin({}),
-    vueSetupExtend({ /* options */ }),
+    // Unplugin({}),
+    vueSetupExtend({
+      enableAutoExpose: true,
+    }) as unknown as Plugin,
   ],
 })