├── .commitlintrc.js
├── .github
└── workflows
│ └── release.yml
├── .gitignore
├── .lintstagedrc
├── .node-version
├── .npmrc
├── .vscode
├── extensions.json
└── settings.json
├── README.CN.md
├── README.md
├── eslint.config.js
├── example
├── react
│ ├── .gitignore
│ ├── README.md
│ ├── eslint.config.js
│ ├── index.html
│ ├── loading.html
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.tsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── index.css
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
└── vue
│ ├── .gitignore
│ ├── .vscode
│ └── extensions.json
│ ├── README.md
│ ├── index.html
│ ├── loading.html
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ ├── style.css
│ └── vite-env.d.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.app.tsbuildinfo
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ ├── tsconfig.node.tsbuildinfo
│ └── vite.config.ts
├── package.json
├── packages
└── vite-plugin-app-loading
│ ├── README.CN.md
│ ├── README.md
│ ├── client.d.ts
│ ├── loading.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ └── index.ts
│ └── tsup.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── tsconfig.json
/.commitlintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import('cz-git').UserConfig} */
2 | export default {
3 | rules: {
4 | // @see: https://commitlint.js.org/#/reference-rules
5 | },
6 | prompt: {
7 | alias: { fd: 'docs: fix typos' },
8 | messages: {
9 | type: '选择你要提交的类型 :',
10 | scope: '选择一个提交范围(可选):',
11 | customScope: '请输入自定义的提交范围 :',
12 | subject: '填写简短精炼的变更描述 :\n',
13 | body: '填写更加详细的变更描述(可选)。使用 "|" 换行 :\n',
14 | breaking: '列举非兼容性重大的变更(可选)。使用 "|" 换行 :\n',
15 | footerPrefixsSelect: '选择关联issue前缀(可选):',
16 | customFooterPrefixs: '输入自定义issue前缀 :',
17 | footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
18 | confirmCommit: '是否提交或修改commit ?',
19 | },
20 | types: [
21 | { value: 'feat', name: 'feat: ✨ 新增功能 | A new feature', emoji: ':sparkles:' },
22 | { value: 'fix', name: 'fix: 🐛 修复缺陷 | A bug fix', emoji: ':bug:' },
23 | { value: 'docs', name: 'docs: 📝 文档更新 | Documentation only changes', emoji: ':memo:' },
24 | { value: 'style', name: 'style: 💄 代码格式 | Changes that do not affect the meaning of the code', emoji: ':lipstick:' },
25 | { value: 'refactor', name: 'refactor: ♻️ 代码重构 | A code change that neither fixes a bug nor adds a feature', emoji: ':recycle:' },
26 | { value: 'perf', name: 'perf: ⚡️ 性能提升 | A code change that improves performance', emoji: ':zap:' },
27 | { value: 'test', name: 'test: ✅ 测试相关 | Adding missing tests or correcting existing tests', emoji: ':white_check_mark:' },
28 | { value: 'build', name: 'build: 📦️ 构建相关 | Changes that affect the build system or external dependencies', emoji: ':package:' },
29 | { value: 'ci', name: 'ci: 🎡 持续集成 | Changes to our CI configuration files and scripts', emoji: ':ferris_wheel:' },
30 | { value: 'revert', name: 'revert: ⏪️ 回退代码 | Revert to a commit', emoji: ':rewind:' },
31 | { value: 'chore', name: 'chore: 🔨 其他修改 | Other changes that do not modify src or test files', emoji: ':hammer:' },
32 | ],
33 | useEmoji: false,
34 | emojiAlign: 'center',
35 | themeColorCode: '',
36 | scopes: [],
37 | allowCustomScopes: true,
38 | allowEmptyScopes: true,
39 | customScopesAlign: 'bottom',
40 | customScopesAlias: 'custom',
41 | emptyScopesAlias: 'empty',
42 | upperCaseSubject: false,
43 | markBreakingChangeMode: true,
44 | allowBreakingChanges: ['feat', 'fix'],
45 | breaklineNumber: 100,
46 | breaklineChar: '|',
47 | skipQuestions: [],
48 | issuePrefixs: [
49 | // 如果使用 gitee 作为开发管理
50 | { value: 'link', name: 'link: 链接 ISSUES 进行中' },
51 | { value: 'closed', name: 'closed: 标记 ISSUES 已完成' },
52 | ],
53 | customIssuePrefixsAlign: 'top',
54 | emptyIssuePrefixsAlias: 'skip',
55 | customIssuePrefixsAlias: 'custom',
56 | allowCustomIssuePrefixs: true,
57 | allowEmptyIssuePrefixs: true,
58 | confirmColorize: true,
59 | maxHeaderLength: Number.POSITIVE_INFINITY,
60 | maxSubjectLength: Number.POSITIVE_INFINITY,
61 | minSubjectLength: 0,
62 | scopeOverrides: undefined,
63 | defaultBody: '',
64 | defaultIssues: '',
65 | defaultScope: '',
66 | defaultSubject: '',
67 | },
68 | }
69 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | tags:
6 | - 'v*'
7 |
8 | jobs:
9 | release:
10 | permissions:
11 | id-token: write
12 | contents: write
13 | runs-on: ubuntu-latest
14 | steps:
15 | - uses: actions/checkout@v4
16 | with:
17 | fetch-depth: 0
18 |
19 | - name: Install pnpm
20 | uses: pnpm/action-setup@v4
21 | with:
22 | version: 9
23 |
24 | - name: Set node
25 | uses: actions/setup-node@v4
26 | with:
27 | node-version: lts/*
28 | cache: pnpm
29 | registry-url: 'https://registry.npmjs.org'
30 |
31 | - run: npx changelogithub
32 | env:
33 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
34 |
35 | - name: Install Dependencies
36 | run: pnpm i
37 |
38 | - name: PNPM build
39 | run: pnpm run build
40 |
41 | - name: Publish to NPM
42 | run: pnpm -r publish --access public --no-git-checks
43 | env:
44 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
45 | NPM_CONFIG_PROVENANCE: true
46 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 |
5 | .eslintcache
--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 | "*.ts": "eslint --cache --fix",
3 | }
4 |
--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 20
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | strict-peer-dependencies=false
2 | auto-install-peers=true
3 | dedupe-peer-dependents=true
4 | link-workspace-packages=true
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": [
3 | "EditorConfig.EditorConfig",
4 | "mikestead.dotenv",
5 | "dbaeumer.vscode-eslint"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "eslint.useFlatConfig": true,
3 | "prettier.enable": false,
4 | "editor.formatOnSave": false,
5 | "editor.codeActionsOnSave": {
6 | "source.fixAll.eslint": "explicit",
7 | "source.organizeImports": "never"
8 | },
9 | "eslint.validate": [
10 | "javascript",
11 | "javascriptreact",
12 | "typescript",
13 | "typescriptreact",
14 | "vue",
15 | "html",
16 | "markdown",
17 | "json",
18 | "jsonc",
19 | "yaml"
20 | ],
21 | "typescript.tsdk": "node_modules/typescript/lib"
22 | }
23 |
--------------------------------------------------------------------------------
/README.CN.md:
--------------------------------------------------------------------------------
1 | # vite-plugin-app-loading
2 |
3 | [](https://www.npmjs.com/package/vite-plugin-app-loading)
4 |
5 | [English](./README.md) | **中文**
6 |
7 | 给网站添加一个加载动画
8 |
9 | 
10 |
11 | ## 安装
12 |
13 | ```bash
14 | npm i vite-plugin-app-loading -D
15 | ```
16 |
17 | ## 使用
18 |
19 | ```ts
20 | // vite.config.ts
21 | import AppLoading from 'vite-plugin-app-loading'
22 |
23 | export default defineConfig({
24 | plugins: [
25 | AppLoading(),
26 | ],
27 | })
28 | ```
29 |
30 | 在合适的时机隐藏加载动画:
31 |
32 | ```ts
33 | // src/main.ts
34 | import { loadingFadeOut } from 'virtual:app-loading'
35 | loadingFadeOut()
36 | ```
37 |
38 | ## 类型
39 |
40 | 有两种方法可以告诉 TypeScript 虚拟导入的类型:
41 |
42 | - 在你的 `global.d.ts` 文件添加下面这句:
43 |
44 | ```ts
45 | ///
46 | ```
47 |
48 | - 在你的 `tsconfig.json` 中,将以下内容添加到你的 `compilerOptions.types` 数组中:
49 |
50 | ```json
51 | {
52 | // ...
53 | "compilerOptions": {
54 | // ...
55 | "types": [
56 | "vite-plugin-app-loading/client"
57 | ]
58 | }
59 | }
60 | ```
61 |
62 | ## 自定义动画
63 |
64 | 在应用根目录创建 `loading.html` 文件:
65 |
66 | ```html
67 |
79 |
80 | ```
81 |
82 | ```ts
83 | // vite.config.ts
84 | import AppLoading from 'vite-plugin-app-loading'
85 |
86 | export default defineConfig({
87 | plugins: [
88 | AppLoading('loading.html'),
89 | ],
90 | })
91 | ```
92 |
93 | 
94 |
95 | > [!TIP]
96 | > 你可以从下列网站中找找灵感,它们都提供了纯 CSS 的加载动画,非常适合搭配本插件一起使用。
97 | >
98 | > - [CSS Loaders](https://css-loaders.com/)
99 | > - [CSS Loader Generator](https://10015.io/tools/css-loader-generator)
100 | > - [Loaders](https://cssloaders.github.io/)
101 |
102 | ## 范例
103 |
104 | [Fantastic-admin](https://github.com/fantastic-admin/basic)
105 |
106 | ## 致谢
107 |
108 | 感谢 [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin/tree/7bcb973d6595545e2cef6ad4006d781b3176f67b/internal/vite-config/src/plugins/inject-app-loading) 提供的灵感。
109 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vite-plugin-app-loading
2 |
3 | [](https://www.npmjs.com/package/vite-plugin-app-loading)
4 |
5 | **English** | [中文](./README.CN.md)
6 |
7 | Add a loading animation to your website
8 |
9 | 
10 |
11 | ## Installation
12 |
13 | ```bash
14 | npm i vite-plugin-app-loading -D
15 | ```
16 |
17 | ## Usage
18 |
19 | ```ts
20 | // vite.config.ts
21 | import AppLoading from 'vite-plugin-app-loading'
22 |
23 | export default defineConfig({
24 | plugins: [
25 | AppLoading(),
26 | ],
27 | })
28 | ```
29 |
30 | Hide the loading animation at the right time:
31 |
32 | ```ts
33 | // src/main.ts
34 | import { loadingFadeOut } from 'virtual:app-loading'
35 | loadingFadeOut()
36 | ```
37 |
38 | ## Types
39 |
40 | There are two ways of telling typescript about the types of the virtual import:
41 |
42 | - In your `global.d.ts` file add the following line:
43 |
44 | ```ts
45 | ///
46 | ```
47 |
48 | - In your `tsconfig.json` add the following to your compilerOptions.types array:
49 |
50 | ```json
51 | {
52 | // ...
53 | "compilerOptions": {
54 | // ...
55 | "types": [
56 | "vite-plugin-app-loading/client"
57 | ]
58 | }
59 | }
60 | ```
61 |
62 | ## Custom animations
63 |
64 | Create a `loading.html` file at the root directory:
65 |
66 | ```html
67 |
79 |
80 | ```
81 |
82 | ```ts
83 | // vite.config.ts
84 | import AppLoading from 'vite-plugin-app-loading'
85 |
86 | export default defineConfig({
87 | plugins: [
88 | AppLoading('loading.html'),
89 | ],
90 | })
91 | ```
92 |
93 | 
94 |
95 | > [!TIP]
96 | > You can find inspiration from the following websites, which all provide CSS-only loading animations that are perfect for use with this plugin.
97 | >
98 | > - [CSS Loaders](https://css-loaders.com/)
99 | > - [CSS Loader Generator](https://10015.io/tools/css-loader-generator)
100 | > - [Loaders](https://cssloaders.github.io/)
101 |
102 | ## Example
103 |
104 | [Fantastic-admin](https://github.com/fantastic-admin/basic)
105 |
106 | ## Thanks
107 |
108 | Thanks to [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin/tree/7bcb973d6595545e2cef6ad4006d781b3176f67b/internal/vite-config/src/plugins/inject-app-loading) for the inspiration.
109 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import antfu from '@antfu/eslint-config'
2 |
3 | export default antfu(
4 | {
5 | type: 'lib',
6 | typescript: true,
7 | ignores: ['dist'],
8 | },
9 | )
10 |
--------------------------------------------------------------------------------
/example/react/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/example/react/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 |
14 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | export default tseslint.config({
18 | languageOptions: {
19 | // other options...
20 | parserOptions: {
21 | project: ['./tsconfig.node.json', './tsconfig.app.json'],
22 | tsconfigRootDir: import.meta.dirname,
23 | },
24 | },
25 | })
26 | ```
27 |
28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29 | - Optionally add `...tseslint.configs.stylisticTypeChecked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31 |
32 | ```js
33 | // eslint.config.js
34 | import react from 'eslint-plugin-react'
35 |
36 | export default tseslint.config({
37 | // Set the react version
38 | settings: { react: { version: '18.3' } },
39 | plugins: {
40 | // Add the react plugin
41 | react,
42 | },
43 | rules: {
44 | // other rules...
45 | // Enable its recommended rules
46 | ...react.configs.recommended.rules,
47 | ...react.configs['jsx-runtime'].rules,
48 | },
49 | })
50 | ```
51 |
--------------------------------------------------------------------------------
/example/react/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import reactHooks from 'eslint-plugin-react-hooks'
3 | import reactRefresh from 'eslint-plugin-react-refresh'
4 | import globals from 'globals'
5 | import tseslint from 'typescript-eslint'
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | 'react-refresh/only-export-components': [
23 | 'warn',
24 | { allowConstantExport: true },
25 | ],
26 | },
27 | },
28 | )
29 |
--------------------------------------------------------------------------------
/example/react/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/example/react/loading.html:
--------------------------------------------------------------------------------
1 |
13 |
14 |
--------------------------------------------------------------------------------
/example/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react",
3 | "type": "module",
4 | "version": "0.4.0",
5 | "private": true,
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.3.1",
14 | "react-dom": "^18.3.1"
15 | },
16 | "devDependencies": {
17 | "@eslint/js": "^9.28.0",
18 | "@types/react": "^19.1.6",
19 | "@types/react-dom": "^19.1.5",
20 | "@vitejs/plugin-react": "^4.5.1",
21 | "eslint": "^9.28.0",
22 | "eslint-plugin-react-hooks": "^5.2.0",
23 | "eslint-plugin-react-refresh": "^0.4.20",
24 | "globals": "^15.15.0",
25 | "typescript": "^5.8.3",
26 | "typescript-eslint": "^8.33.1",
27 | "vite": "^6.3.5",
28 | "vite-plugin-app-loading": "workspace:*"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/example/react/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/example/react/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/example/react/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import reactLogo from './assets/react.svg'
3 | import './App.css'
4 | import viteLogo from '/vite.svg'
5 |
6 | function App() {
7 | const [count, setCount] = useState(0)
8 |
9 | return (
10 | <>
11 |
19 | Vite + React
20 |
21 |
26 |
27 | Edit
28 | {' '}
29 | src/App.tsx
30 | {' '}
31 | and save to test HMR
32 |
33 |
34 |
35 | Click on the Vite and React logos to learn more
36 |
37 | >
38 | )
39 | }
40 |
41 | export default App
42 |
--------------------------------------------------------------------------------
/example/react/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/example/react/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | @media (prefers-color-scheme: light) {
58 | :root {
59 | color: #213547;
60 | background-color: #ffffff;
61 | }
62 | a:hover {
63 | color: #747bff;
64 | }
65 | button {
66 | background-color: #f9f9f9;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/example/react/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import { loadingFadeOut } from 'virtual:app-loading'
4 | import App from './App.tsx'
5 |
6 | import './index.css'
7 |
8 | loadingFadeOut()
9 |
10 | createRoot(document.getElementById('root')!).render(
11 |
12 |
13 | ,
14 | )
15 |
--------------------------------------------------------------------------------
/example/react/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/example/react/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "jsx": "react-jsx",
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "moduleDetection": "force",
7 | "useDefineForClassFields": true,
8 | "module": "ESNext",
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "types": [
13 | "vite-plugin-app-loading/client"
14 | ],
15 | "allowImportingTsExtensions": true,
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noFallthroughCasesInSwitch": true,
20 | "noUnusedLocals": true,
21 | "noEmit": true,
22 | "isolatedModules": true,
23 | "skipLibCheck": true,
24 | "noUnusedParameters": true
25 | },
26 | "include": ["src"]
27 | }
28 |
--------------------------------------------------------------------------------
/example/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "references": [
3 | { "path": "./tsconfig.app.json" },
4 | { "path": "./tsconfig.node.json" }
5 | ],
6 | "files": []
7 | }
8 |
--------------------------------------------------------------------------------
/example/react/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2022",
4 | "lib": ["ES2023"],
5 | "moduleDetection": "force",
6 | "module": "ESNext",
7 |
8 | /* Bundler mode */
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 |
12 | /* Linting */
13 | "strict": true,
14 | "noFallthroughCasesInSwitch": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "noEmit": true,
18 | "isolatedModules": true,
19 | "skipLibCheck": true
20 | },
21 | "include": ["vite.config.ts"]
22 | }
23 |
--------------------------------------------------------------------------------
/example/react/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react'
2 | import { defineConfig } from 'vite'
3 | import appLoading from 'vite-plugin-app-loading'
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [react(), appLoading('loading.html')],
8 | })
9 |
--------------------------------------------------------------------------------
/example/vue/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/example/vue/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar"]
3 | }
4 |
--------------------------------------------------------------------------------
/example/vue/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + TypeScript + Vite
2 |
3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
12 |