|
1 | | -# WebXDC Vite Template [](https://github.com/webxdc/webxdc-vite/actions/workflows/ci.yml) [](https://github.com/prettier/prettier) |
| 1 | +# Webxdc Vite Template |
2 | 2 |
|
3 | | -A minimalist Vite project template for [WebXDC](https://webxdc.org) development. |
| 3 | +[](https://npmjs.com/package/@webxdc/create-vite-plugins) |
| 4 | +[](https://github.com/webxdc/create-vite-plugins/actions/workflows/ci.yml) |
| 5 | +[](https://github.com/prettier/prettier) |
4 | 6 |
|
5 | | -## Features |
| 7 | +Vite project template scaffolding for [Webxdc](https://webxdc.org) development. |
6 | 8 |
|
7 | | -- ⚡️ Fast development with [Vite](https://github.com/vitejs/vite) and [pnpm](https://pnpm.js.org/) |
| 9 | +## Scaffolding Your First Vite Project |
8 | 10 |
|
9 | | -- 📱 Integrated [WebXDC emulator](https://github.com/webxdc/webxdc-dev) to test your WebXDC right on the browser while developing, |
10 | | - and [Eruda](https://github.com/liriliri/eruda) to debug inside Delta Chat. |
| 11 | +With NPM: |
11 | 12 |
|
12 | | -- 📝 Code formatting with [Prettier](https://github.com/prettier/prettier) |
13 | | - |
14 | | -- 📦 Automatically minify, build and release your `.xdc` file |
15 | | - |
16 | | -- 🦕 Automatically support legacy/old browsers |
17 | | - |
18 | | -## Usage |
19 | | - |
20 | | -### Installing Dependencies |
21 | | - |
22 | | -After cloning this repo, install dependecies: |
23 | | - |
24 | | -``` |
25 | | -pnpm i |
| 13 | +```bash |
| 14 | +$ npm create @webxdc/vite-plugins@latest |
26 | 15 | ``` |
27 | 16 |
|
28 | | -### Checking code format |
| 17 | +With PNPM: |
29 | 18 |
|
| 19 | +```bash |
| 20 | +$ pnpm create @webxdc/vite-plugins |
30 | 21 | ``` |
31 | | -pnpm check |
32 | | -``` |
33 | | - |
34 | | -### Testing the app in the browser |
35 | 22 |
|
36 | | -To test your work in your browser (with hot reloading!) while developing: |
| 23 | +With Yarn: |
37 | 24 |
|
38 | | -``` |
39 | | -pnpm start |
40 | | -# Alternatively to test in a more advanced WebXDC emulator: |
41 | | -pnpm emulator |
| 25 | +```bash |
| 26 | +$ yarn create @webxdc/vite-plugins |
42 | 27 | ``` |
43 | 28 |
|
44 | | -### Building |
| 29 | +Then follow the prompts! |
45 | 30 |
|
46 | | -To package the WebXDC file: |
| 31 | +You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Webxdc + TypeScript project, run: |
47 | 32 |
|
48 | | -``` |
49 | | -pnpm build |
50 | | -``` |
| 33 | +```bash |
| 34 | +# npm 7+, extra double-dash is needed: |
| 35 | +npm create @webxdc/vite-plugins@latest my-app -- --template vanilla-ts |
51 | 36 |
|
52 | | -To package the WebXDC with developer tools inside to debug in Delta Chat, set the `NODE_ENV` |
53 | | -environment variable to "debug": |
| 37 | +# pnpm |
| 38 | +pnpm create @webxdc/vite-plugins my-app --template vanilla-ts |
54 | 39 |
|
| 40 | +# yarn |
| 41 | +yarn create @webxdc/vite-plugins my-app --template vanilla-ts |
55 | 42 | ``` |
56 | | -NODE_ENV=debug pnpm build |
57 | | -``` |
58 | | - |
59 | | -The resulting optimized `.xdc` file is saved in `dist-xdc/` folder. |
60 | 43 |
|
61 | | -### Releasing |
62 | | - |
63 | | -To automatically build and create a new GitHub release with the `.xdc` file: |
64 | | - |
65 | | -``` |
66 | | -git tag -a v1.0.1 |
67 | | -git push origin v1.0.1 |
68 | | -``` |
| 44 | +Currently supported template presets include: |
69 | 45 |
|
70 | | -## Try it now! |
| 46 | +- `vanilla` |
| 47 | +- `vanilla-ts` |
71 | 48 |
|
72 | | -[**Create a repo from this template on GitHub**](https://github.com/webxdc/webxdc-vite/generate). |
| 49 | +You can use `.` for the project name to scaffold in the current directory. |
0 commit comments