setupin 3.0.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +95 -16
  2. package/README.zh-CN.md +98 -16
  3. package/dist/main.js +162 -142
  4. package/dist/main.prod.js +100 -103
  5. package/package.json +3 -6
  6. package/dist/main.d.mts +0 -954
  7. package/dist/main.d.ts +0 -954
package/README.md CHANGED
@@ -10,32 +10,111 @@
10
10
  <a href="https://bundlephobia.com/package/setupin"><img src="https://img.shields.io/bundlephobia/minzip/setupin"></a>
11
11
  </p>
12
12
 
13
- ## 😏 Why setupin
13
+ ## 😏 What is a setupin?
14
14
 
15
- **setupin** allows you to write Vue's [\<script **setup**\>](https://vuejs.org/api/sfc-script-setup.html)**in** HTML.
15
+ **setupin** allows you to write Vue's [\<script **setup**>](https://vuejs.org/api/sfc-script-setup.html)**in** HTML.
16
16
 
17
- 1. **Easy to learn**
18
- > Offer a friendly environment for beginners to easily grasp the core usage of Vue.
19
- 2. **Simple development**
20
- > Provide a convenient way to rapidly develop small webpage without complex configurations.
21
- 3. **Quick experience**
22
- > Allow users to quickly experiment with Vue's new features in HTML and feel its charm.
17
+ Using the [vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme), which compiled at runtime for esm vue code format, and dynamic execution.
23
18
 
24
- ## 🤯 setupin.html _vs_ setup.vue
19
+ ## 🤯 Code comparison
25
20
 
26
- <p align="center">
27
- <img src="./public/setup.vue.svg" width="49%">
28
- <img src="./public/setupin.html.svg" width="49%">
29
- </p>
21
+ <h4 align=center>esm.html</h4>
22
+ It's a little more complicated
23
+
24
+ ```html
25
+ <!DOCTYPE html>
26
+ <html lang="en">
27
+ <head>
28
+ <meta charset="UTF-8">
29
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
30
+ <title>esm</title>
31
+ <style>
32
+ button {
33
+ font-size: larger;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div id="app">
39
+ <button @click="count++">{{ count }}</button>
40
+ </div>
41
+
42
+ <script type="module">
43
+ import { createApp, defineComponent, ref } from 'https://unpkg.com/vue/dist/vue.esm-browser.js';
44
+ const App = defineComponent(() => {
45
+ const count = ref(0);
46
+ return {
47
+ count
48
+ };
49
+ });
50
+ createApp(App).mount('#app')
51
+ </script>
52
+ </body>
53
+ </html>
54
+ ```
55
+
56
+ <h4 align=center>setup.vue</h4>
57
+ Cannot run directly in the browser
58
+
59
+ ```html
60
+ <script setup>
61
+ import { ref } from 'vue'
62
+ const count = ref(0)
63
+ </script>
64
+
65
+ <template>
66
+ <button @click="count++">{{ count }}</button>
67
+ </template>
68
+
69
+ <style>
70
+ button {
71
+ font-size: larger;
72
+ }
73
+ </style>
74
+ ```
75
+
76
+ <h4 align=center>setupin.html</h4>
77
+ unit as one
30
78
 
31
- How about that? Aren't they similar
79
+ ```html
80
+ <head>
81
+ <meta charset="UTF-8">
82
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
83
+ <title>setupin</title>
84
+ <script src="https://unpkg.com/setupin"></script>
85
+ </head>
86
+
87
+ <script setup>
88
+ import { ref } from 'vue'
89
+ const count = ref(0)
90
+ </script>
91
+
92
+ <template>
93
+ <button @click="count++">{{ count }}</button>
94
+ </template>
95
+
96
+ <style>
97
+ button {
98
+ font-size: larger;
99
+ }
100
+ </style>
101
+ ```
32
102
 
103
+ It's exactly the same as [\<script setup>](https://vuejs.org/api/sfc-script-setup.html) except for the \<head>
33
104
  ## 🤓 Characteristics
34
105
 
35
- - [x] supports esm import syntax
36
106
  - [x] [top-level await](https://vuejs.org/api/sfc-script-setup.html#top-level-await)
37
107
  - [x] [sfc css features](https://vuejs.org/api/sfc-css-features.html)
38
- - [x] vue3 macro functions
108
+ - [ ] Split [component](https://vuejs.org/guide/essentials/component-basics.html)
109
+
110
+ ## 🤔 Why setupin
111
+
112
+ 1. **Easy to learn**
113
+ Offer a friendly environment for beginners to easily grasp the core usage of Vue.
114
+ 2. **Simple development**
115
+ Provide a convenient way to rapidly develop small webpage without complex configurations.
116
+ 3. **Quick experience**
117
+ Allow users to quickly experiment with Vue's new features in HTML and feel its charm.
39
118
 
40
119
  ## 😝 Playground
41
120
 
package/README.zh-CN.md CHANGED
@@ -10,32 +10,114 @@
10
10
  <a href="https://bundlephobia.com/package/setupin"><img src="https://img.shields.io/bundlephobia/minzip/setupin"></a>
11
11
  </p>
12
12
 
13
- ## 😏 为什么选择 setupin
13
+ ## 😏 setupin 是什么？
14
14
 
15
- **setupin** 允许你在 HTML 中编写 Vue 的 [\<script setup\>](https://vuejs.org/api/sfc-script-setup.html)。
15
+ **setupin** 允许你在 HTML 中编写 Vue 的 [\<script setup>](https://cn.vuejs.org/api/sfc-script-setup.html)语法。
16
16
 
17
- 1. **便于学习**
18
- > 为初学者提供一个友好的环境，帮助他们轻松上手 Vue 的核心用法。
19
- 2. **简易开发**
20
- > 提供便捷的方式，助力快速开发小网页，无需繁琐的配置。
21
- 3. **快速体验**
22
- > 让用户可以快速在 HTML 中尝试 Vue 的新特性，感受其魅力。
17
+ 利用[vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme)，在运行时编译为esm格式的vue代码，并动态执行。
23
18
 
24
- ## 🤯 setupin.html _vs_ setup.vue
19
+ ## 🤯 代码对比
25
20
 
26
- <p align="center">
27
- <img src="./public/setup.vue.svg" width="49%">
28
- <img src="./public/setupin.html.svg" width="49%">
29
- </p>
21
+ <h4 align=center>esm.html</h4>
22
+ 写法略微复杂
23
+
24
+ ```html
25
+ <!DOCTYPE html>
26
+ <html lang="en">
27
+ <head>
28
+ <meta charset="UTF-8">
29
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
30
+ <title>esm</title>
31
+ <style>
32
+ button {
33
+ font-size: larger;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div id="app">
39
+ <button @click="count++">{{ count }}</button>
40
+ </div>
41
+
42
+ <script type="module">
43
+ import { createApp, defineComponent, ref } from 'https://unpkg.com/vue/dist/vue.esm-browser.js';
44
+ const App = defineComponent(() => {
45
+ const count = ref(0);
46
+ return {
47
+ count
48
+ };
49
+ });
50
+ createApp(App).mount('#app')
51
+ </script>
52
+ </body>
53
+ </html>
54
+ ```
55
+
56
+ <h4 align=center>setup.vue</h4>
57
+ 无法直接在浏览器运行
58
+
59
+ ```html
60
+ <script setup>
61
+ import { ref } from 'vue'
62
+ const count = ref(0)
63
+ </script>
64
+
65
+ <template>
66
+ <button @click="count++">{{ count }}</button>
67
+ </template>
68
+
69
+ <style>
70
+ button {
71
+ font-size: larger;
72
+ }
73
+ </style>
74
+ ```
30
75
 
31
- 怎么样, 它们很像吧。
76
+ <h4 align=center>setupin.html</h4>
77
+ 合二为一
78
+
79
+ ```html
80
+ <head>
81
+ <meta charset="UTF-8">
82
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
83
+ <title>setupin</title>
84
+ <script src="https://unpkg.com/setupin"></script>
85
+ </head>
86
+
87
+ <script setup>
88
+ import { ref } from 'vue'
89
+ const count = ref(0)
90
+ </script>
91
+
92
+ <template>
93
+ <button @click="count++">{{ count }}</button>
94
+ </template>
95
+
96
+ <style>
97
+ button {
98
+ font-size: larger;
99
+ }
100
+ </style>
101
+ ```
102
+
103
+ 除了\<head>之外和[\<script setup>](https://cn.vuejs.org/api/sfc-script-setup.html)写法完全一致
32
104
 
33
105
  ## 🤓 特性
34
106
 
35
- - [x] 支持 esm import 语法
36
107
  - [x] [顶层 await](https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await)
37
108
  - [x] [CSS 功能](https://cn.vuejs.org/api/sfc-css-features)
38
- - [x] vue3 宏函数
109
+ - [ ] 拆分 [组件](https://cn.vuejs.org/guide/essentials/component-basics.html)
110
+
111
+ ## 🤔 为什么选择 setupin
112
+
113
+ 1. **便于学习**
114
+ 为初学者提供一个友好的环境，帮助他们轻松上手 Vue 的核心用法。
115
+
116
+ 2. **简易开发**
117
+ 提供便捷的方式，助力快速开发小网页，无需繁琐的配置。
118
+
119
+ 3. **快速体验**
120
+ 让用户可以快速在 HTML 中尝试 Vue 的新特性，感受其魅力。
39
121
 
40
122
  ## 😝 演练场
41
123