Skip to content
This repository has been archived by the owner on Dec 3, 2021. It is now read-only.

Use Vite as our build service #8

Merged
merged 21 commits into from
May 21, 2021
Merged

Use Vite as our build service #8

merged 21 commits into from
May 21, 2021

Conversation

padarom
Copy link

@padarom padarom commented Mar 31, 2021

This PR migrates away from Nuxt and directly to a Vite-powered Vue service. There's multiple additional improvements under the hood:

@awtrix/dev

We got rid of the @awtrix/dev package in order to provide a centralized awtrix binary, rather than also adding awtrix-dev. The awtrix binary now includes commands to pack, init and run custom apps.

This however means that we have to move dev dependencies to regular dependencies as they are necessary for building custom apps. This increases bundle size and install time for non-developers, that just want to run awtrix start, but I think this is worth it for a more streamlined development experience; especially given that you only really have to install Awtrix once on your Raspberry, so an additional minute and maybe 50MB shouldn't matter too much.

Switch from Oclif to yargs

Oclif comes with a lot of overhead as it does its own parsing of the project structure to determine command availability. This has annoyed me multiple times so far, as the entirety of its error handling is silent and I constantly had to debug why a command was suddenly not available anymore. Also, this seems to have made constant trouble with TS/JS interoperability.

yargs is a bit more verbose to use and doesn't come with as great typing as Oclif, but works just as well for our purposes.

Nuxt -> Vite

A switch from Nuxt was necessary for using Vite, since Vite only supports Vue 3, while Nuxt doesn't yet. Since we essentially only have a single page (ignoring a desktop configuration option) we don't get much benefit from using Nuxt anyways, therefore this is also removing a bit of complexity. It does mean however that have more power over how exactly our Vue app is initialized.

The switch to Vite also allows us to use the Typescript-compatible Vite features programatically, such as spawning a development server, building awtrix itself for production, or building only a specific Awtrix HD app (potentially also with HMR functionality).

esbuild

I'm also migrating from tsc to esbuild, which drastically improves Typescript build time. It's what Vite uses under the hood and one of the main reasons it's so much faster than a Nuxt compile.

A caveat is that esbuild simply transpiles and doesn't perform any type checking, so we still have to run tsc --noEmit in parallel to provide type safety, while using esbuild to generate a JS bundle.

Todo

  • Fix types for the FrontendApp and createFrontend function in @awtrix/common
  • Invoke Vite build programmatically to implement awtrix pack
  • Add awtrix pack support for TS backends, assets and translations
  • Add a Vite build watch mode for awtrix dev
  • Figure out a way to run tsc --noEmit in parallel
  • Figure out HMR/ restarting (via nodaemon?) for the backend
  • Fix Vue (Awtrix app) component mounting for Vue 3 compatibility
  • Determine if we can redo enable hot reload #2 by using the Vite dev server for awtrix dev instead of a watching build mode
  • Verify npm run ... (dev) and awtrix ... (production) functionality

@padarom padarom force-pushed the vite branch 2 times, most recently from 149b957 to 74b7375 Compare April 8, 2021 21:58
@padarom padarom force-pushed the vite branch 3 times, most recently from 5606894 to c44d2fc Compare April 9, 2021 22:22
Added the Vite build function for our `awtrix pack` command.
At the moment it only packs the `frontend.vue` file.

Vue 3 SFCs are simpler than in Vue 2, so some logic on
rendering FrontendApps generator functions has been adjusted
as well.
@padarom padarom force-pushed the vite branch 2 times, most recently from c5b1def to 4b370a4 Compare April 14, 2021 14:06
@padarom padarom requested a review from Blueforcer April 15, 2021 15:47
Copy link
Member

@Blueforcer Blueforcer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me so far :)

@padarom padarom marked this pull request as ready for review May 21, 2021 13:11
@padarom padarom merged commit a03917b into master May 21, 2021
@padarom padarom deleted the vite branch May 21, 2021 19:33
@padarom padarom restored the vite branch May 21, 2021 21:57
padarom pushed a commit that referenced this pull request May 21, 2021
@padarom padarom deleted the vite branch May 23, 2021 18:14
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants