zhixiaoqiang/sfc-playground-vant

Try Vant in the Playground. Currently only Vant 3+ is supported

SFC Playground with Vant

This is an Vant SFC Playground. Click the vercel.app Or zhixiaoqiang.github.io link to view.

NOTE! The reason why this is designed to manually import { injectVant } is to be more universally compatible with any component library, Not only Vant.

What's inside?

Try Vant in the Playground. Currently only Vant 3+ is supported

Features

• ⚡️ Vant 3+
• ⚡️ PreLoad ImportsFile,Instantly display content(e0d5c6)
• 🤙🏻 Free switch Vant/Vue version, and more
• 🛠️ Rich Features
• ☁️ Deploy on Netlify/vercel/GitHub Pages, zero-config
• 💡 Support the Typescript
• 😃 Easy to create your own
• 🤩 Download project support generated package.json by user input (13ee3f)
• 🛠️ Smarter and more efficient npm scripts

Future Features

coming soon

• 🛠️ Support Vant dark mode
• 🛠️ Support on-demand introduction
• 🛠️ CLI
• 🔑 Fully Typed API
• 😃 Switch CDN

Utilities

This SFC Playground has some additional tools already setup for you:

• pnpm as a packages manager
• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• Vant a Lightweight Mobile UI Components built on Vue
• @vue/repl for Vue SFC REPL as a Vue 3 component

Get Started

1. Click Use this template, and clone your repo degit https://github.com/zhixiaoqiang/sfc-playground-vant#main or git clone https://github.com/zhixiaoqiang/sfc-playground-vant --depth 1. degit
2. Adjust the following files.

src
├── components
│   └── npm-version-switch
│       ├── helps.ts # add version switch feature
├── config.ts # config welcome code、CDN、additionalFiles...
├── store.ts # includes base functions...

then it'll be your repository totally.

Build

To build the playground, run the following command:

pnpm build

Develop

To develop the playground, run the following command:

pnpm dev

Create Changelog

1. Execute pnpm changeset to add a changeset.
2. Execute pnpm changeset version to change CHANGELOG.md.
3. Execute pnpm changeset publish to publish npm library. [can skip]
4. Execute git commit, this command will trigger lint-staged and commitzen.
5. Execute git push to trigger Github Actions or vercel Deploy

CHANGELOG

Please refer to CHANGELOG for details.

Inspired by Evan You's Vue SFC Playground

License

MIT

sfc-playground-vant's Issues

[Bug]: test

Version

test

Details

test

Reproduce link

test

Reproduce Steps

test

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

Renovate tried to run on this repository, but found these problems.

• WARN: Using package.json for Renovate config is deprecated - please use a dedicated configuration file instead

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency zx to v8
• chore(deps): update renovatebot/github-action action to v40
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency @vue/repl to v4
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency eslint-plugin-node with eslint-plugin-n 14.0.0
• chore(deps): update all non-major dependencies (@changesets/cli, @commitlint/cli, @commitlint/config-conventional, @types/file-saver, @types/node, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vant/use, @vitejs/plugin-vue, @vue/compiler-sfc, @vue/repl, JamesIves/github-pages-deploy-action, actions/first-interaction, eslint, eslint-module-utils, eslint-plugin-import, eslint-plugin-promise, eslint-plugin-vue, fflate, lint-staged, markdownlint-cli2, sort-package-json, vant, vite, vue, vue-eslint-parser, wireit, zx)
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-plugin-n to v17
• chore(deps): update dependency execa to v9
• chore(deps): update dependency vite to v5
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/github-script action to v7
• chore(deps): update actions/setup-node action to v4
• chore(deps): update actions/stale action to v9
• chore(deps): update dependency @vitejs/plugin-vue to v5
• chore(deps): update dependency consola to v3
• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency ora to v8
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency typescript to v5
• chore(deps): update github/codeql-action action to v3

Detected dependencies

github-actions

.github/workflows/changeset.yml

• actions/checkout v3
• actions/setup-node v3

.github/workflows/close_stale_issues_and_prs.yml

• actions/stale v8

.github/workflows/codeql-analysis.yml

• actions/checkout v3
• github/codeql-action v2
• github/codeql-action v2
• github/codeql-action v2

.github/workflows/deploy-sfc-playground.yaml

• actions/checkout v3
• actions/setup-node v3
• JamesIves/github-pages-deploy-action v4.4.2

.github/workflows/devtools_check_repro.yml

• actions/github-script v6

.github/workflows/greetings.yml

• actions/first-interaction v1.1.1

.github/workflows/lint.yml

• actions/checkout v3
• actions/setup-node v3

.github/workflows/release.yaml

.github/workflows/renovate.yml

• actions/checkout v3
• renovatebot/github-action v36.1.1

npm

package.json

• @vue/repl ^1.4.1
• fflate ^0.8.0
• file-saver ^2.0.5
• jszip ^3.10.1
• vue 3.3.4
• @changesets/cli 2.26.1
• @commitlint/cli 17.6.5
• @commitlint/config-conventional 17.6.5
• @types/file-saver 2.0.5
• @types/node 18.16.16
• @typescript-eslint/eslint-plugin 5.59.9
• @typescript-eslint/parser 5.59.9
• @vitejs/plugin-vue 4.2.3
• consola 2.15.3
• eslint 8.42.0
• eslint-config-standard 17.1.0
• eslint-module-utils 2.8.0
• eslint-plugin-import 2.27.5
• eslint-plugin-n 15.7.0
• eslint-plugin-node 11.1.0
• eslint-plugin-promise 6.1.1
• eslint-plugin-vue 9.14.1
• execa 6.1.0
• husky 8.0.3
• lint-staged 13.2.2
• markdownlint-cli2 0.7.1
• ora 6.3.1
• prettier 2.8.8
• sort-package-json 2.4.1
• typescript 4.9.5
• vite 4.3.9
• vite-plugin-style-import 2.0.0
• vue-eslint-parser 9.3.0
• wireit 0.9.5
• zx 7.2.2

src/download/template/package.json

• @vant/popperjs 1.3.0
• @vant/touch-emulator 1.4.0
• @vant/use 1.5.1
• vant 4.4.1
• vue 3.3.4
• @vitejs/plugin-vue 4.2.3
• @vue/compiler-sfc 3.3.4
• vite 4.3.9
• vite-plugin-style-import 2.0.0

[Bug]: Failed to resolve module specifier "@vue/shared".

Version

No response

Details

默认的示例项目报错，如上图

Reproduce link

https://sfc-playground-vant.vercel.app/

Reproduce Steps

No response

@vue/repl v1.0.0 will trigger doneAddFile multiple times

github、preview

@vue/repl issue vuejs/repl#29

[RFC]: test

What problem does this feature solve?

add

[Bug]: can't use tabs component in playground

Version

No response

Details

Reproduce link

https://sfc-playground-vant.vercel.app/#eNp9VMtu2zAQ/BVCFymoJRVtenHjNEXQQ28FWvSkiyytbSYUSZCU48Dwv3eWihXFdXwRRM7scLgP7pPv1hbbnpJ5cuMbJ20QnkJvhar1epEGn95WWnbWuCD2wtFKHMTKmU6kCEon0J966Wf8fSXUOqRfKz0hSf1ATfgLYGQVJfPyAcmt6tdSFw8e0ogb6dlVpRujfRB1I7ckFmwl+4jdm3KwDZtYBOqsqgNhJcQNlPMAX2Kbd6YlNa+bgOhFlQw/VRJ5r0wQV8YBl7qlHeyK6yoR8yCD4qgUlFR8wD7QMVgIOAuEO5mVYJE9X5TjD4cXeb4j67PJMK784LmcmE5myZCsvKst0mA0CrNnFXiKgK+SuYg7vIci8LpKNiFYPy/LXtvHddGYrrwDVrpeB9lR3pru7nPxqbj+UrbSh+l+Qb7Ll848eXI4sUpmozgS/546Y6WSy/gDibeRdxHu/QVzL4RvKEyvwDuJtcZacix6SeDIek8lmL7Z5NT1SK9xl7VOuayE+h1QkrMdisKMfb2mcN87hx74iR6tdUMnYzLOQOz9yXyMQHrORYykXSSseo2mNXoyRNnV0AnDZMjj0YszfniAxEgpamvvuWl3gX8LFCJjQZBw5f+PBId0+zs8KwgNZzq8Ek4LTU/iF64joZA58kZtaQaQLV6Jxe2xVQeLSupH2GtN03cwVzSO0Pc/FPEqSxlOo1ERqYUjBXrq+WC/IeJ8jeCGXyOgF5ozjmHReH5Oxjijlanb+IREu28gcs64iPENBmi0uzTtM+cLubjfSNVmHBT9Ho6Zq59qiUdqmi9M9eEf6nngoA==

Reproduce Steps

No response

[Bug]: binding Function will not take effect after saving

Version

No response

Details

if bind some events or use some dom-mount component, then saving file, it`s won't work as expected

e.g.:

<script setup lang='ts'>
import { Toast } from 'vant';

Toast('2131231')
</script>

Reproduce link

link

Reproduce Steps

No response