-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8d7d5b7
commit 5c58fdb
Showing
41 changed files
with
4,543 additions
and
1,062 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
on: | ||
push: | ||
branches: [main] | ||
concurrency: | ||
group: ${{ github.workflow }} | ||
env: | ||
TERM: xterm-256color | ||
FORCE_COLOR: 1 | ||
NPM_TOKEN: ${{secrets.NPM_TOKEN}} | ||
jobs: | ||
build: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v4 | ||
with: { fetch-depth: 0 } | ||
- run: corepack enable | ||
- uses: actions/setup-node@v4 | ||
with: { node-version: lts/* } | ||
- run: pnpm npm config --location=project set //registry.npmjs.org/:_authToken '${NPM_TOKEN}' | ||
- run: pnpm install --frozen-lockfile | ||
- run: pnpm build | ||
- run: pnpm test | ||
- run: pnpm release --yes |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
.vscode/ | ||
.terraform/ | ||
.nx/ | ||
node_modules/ | ||
lib/ | ||
dist/ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,24 @@ | ||
Copyright 2024 Chris Ackerman | ||
|
||
Permission to use, copy, modify, and/or distribute this software for any | ||
purpose with or without fee is hereby granted, provided that the above | ||
copyright notice and this permission notice appear in all copies. | ||
|
||
THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND | ||
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
PERFORMANCE OF THIS SOFTWARE. | ||
This is free and unencumbered software released into the public domain. | ||
|
||
Anyone is free to copy, modify, publish, use, compile, sell, or | ||
distribute this software, either in source code form or as a compiled | ||
binary, for any purpose, commercial or non-commercial, and by any | ||
means. | ||
|
||
In jurisdictions that recognize copyright laws, the author or authors | ||
of this software dedicate any and all copyright interest in the | ||
software to the public domain. We make this dedication for the benefit | ||
of the public at large and to the detriment of our heirs and | ||
successors. We intend this dedication to be an overt act of | ||
relinquishment in perpetuity of all present and future rights to this | ||
software under copyright law. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | ||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF | ||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. | ||
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR | ||
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, | ||
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | ||
OTHER DEALINGS IN THE SOFTWARE. | ||
|
||
For more information, please refer to <https://unlicense.org> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,159 +1 @@ | ||
# Vite Live Preview | ||
|
||
Vite build with preview. | ||
|
||
- [Getting Started](#getting-started) | ||
- [Plugin](#plugin) | ||
- [Option `reload: boolean`](#option-reload-boolean) | ||
- [Option `config: LivePreviewConfig`](#option-config-livepreviewconfig) | ||
- [Option `plugins: PluginOption[]`](#option-plugins-pluginoption) | ||
- [CLI](#cli) | ||
- [Option `--reload [boolean]`](#option---reload-boolean) | ||
- [Vite Preview Options](#vite-preview-options) | ||
- [JavaScript API Limitations](#javascript-api-limitations) | ||
- [Debugging](#debugging) | ||
- [The Problem](#the-problem) | ||
- [Related Github Issues](#related-github-issues) | ||
|
||
|
||
## Getting Started | ||
|
||
First, please understand that live preview _does not support HMR._ If you want to use HMR, you'll need to stick to the Vite dev server. This plugin starts a preview server when building the project with file watching. The preview server is augmented to reload the browser on rebuild. | ||
|
||
Install this package (and its Vite peer dependency) in your project. | ||
|
||
```sh | ||
npm install --save-dev vite vite-live-preview | ||
``` | ||
|
||
Once installed, you can either use the [plugin](#plugin) or the [CLI](#cli). | ||
|
||
## Plugin | ||
|
||
Add the plugin to your Vite configuration. | ||
|
||
```ts | ||
import { defineConfig } from 'vite' | ||
import livePreview from 'vite-live-preview' | ||
|
||
export default defineConfig({ | ||
plugins: [livePreview({ /* (optional) plugin config */ })], | ||
preview: { /* (optional) preview server config */ }, | ||
}) | ||
``` | ||
|
||
Start a build with file watching. | ||
|
||
```sh | ||
npx vite build --watch | ||
``` | ||
|
||
Any build with file watching enabled will start a preview server. | ||
|
||
To only start the preview server when building for development, use the following configuration. | ||
|
||
```ts | ||
export default defineConfig((env) => { | ||
return { | ||
plugins: [ | ||
env.mode === 'development' && livePreview(), | ||
], | ||
}, | ||
}); | ||
``` | ||
|
||
Now, you would need to add the `--mode=development` option to the build command for the preview server to start. | ||
|
||
```sh | ||
npx vite build --watch --mode=development | ||
``` | ||
|
||
> **(Deprecated)** You can also use the `--mode=preview` option instead of `--watch`. Any mode that starts with `preview` will work. This is legacy behavior, and it will stop working in a future release. Building with `--watch` is the recommended way to use this plugin. | ||
### Option `reload: boolean` | ||
|
||
Allow or disable automatic browser reloading on rebuild. Set it to false to require manual browser reloading. The default is true. | ||
|
||
### Option `config: LivePreviewConfig` | ||
|
||
Provide configuration overrides that will be deeply merged when live preview is enabled. This can be used to set options like `build.mode`, `build.sourcemap`, or `outDir` for the preview build. | ||
|
||
```ts | ||
livePreview({ | ||
config: { | ||
build: { | ||
mode: 'development', | ||
sourcemap: true, | ||
outDir: 'dist-preview', | ||
}, | ||
}, | ||
}) | ||
``` | ||
|
||
### Option `plugins: PluginOption[]` | ||
|
||
Provide plugins that will only be added to the preview server configuration. Only plugins which affect the Vite preview server make sense here. | ||
|
||
Plugins in your main (build) configuration are not inherited by the preview server. See also the [JavaScript API Limitations](#javascript-api-limitations) section. | ||
|
||
## CLI | ||
|
||
Start the live preview. | ||
|
||
```sh | ||
npx vite-live-preview | ||
``` | ||
|
||
### Option `--reload [boolean]` | ||
|
||
Allow or disable automatic browser reloading on rebuild. The default is true. | ||
|
||
Use `--reload false` to disable automatic reloading. Manually reloading the page after a rebuild will still show the updated content. | ||
|
||
### Vite Preview Options | ||
|
||
All Vite [preview command options](https://vitejs.dev/guide/cli#vite-preview) are also supported. | ||
|
||
## JavaScript API Limitations | ||
|
||
If you use the JavaScript API `build()` command, the preview server will not inherit any plugins that are added "inline". | ||
|
||
```ts | ||
await build({ | ||
plugins: [ | ||
// Plugins included in this array are "inline" (not loaded from a | ||
// config file), and will not be inherited by the preview server. | ||
livePreview({ | ||
plugins: [ | ||
// You can re-add the plugins here if needed, as well as any | ||
// additional preview server specific plugins. | ||
], | ||
}), | ||
], | ||
}) | ||
``` | ||
|
||
The common convention for plugins is to provide a "factory" function which returns the plugin instance. This allows plugins to accept options, but also provides a closure where a plugin instance can share state between individual hook methods. This is commonly used to save parts of the resolved configuration for use in later hooks, but it can be used for any plugin state. | ||
|
||
Unfortunately, the factory return value is added to the plugins array, not the plugin factory functions themselves. So, there is no way to create new instances of the plugins with independent state before passing them to the preview command. Passing the build command's plugin instances to the preview command would result in plugin hooks being called out of order or more times than expected, and any shared state would be shared between the two commands. | ||
|
||
## Debugging | ||
|
||
The vite `-d, --debug [feat]` option is supported, and the following feature names are available for this tool. | ||
|
||
- `live-preview`: General debugging information. | ||
- `live-preview-request`: Log preview server requests. | ||
|
||
## The Problem | ||
|
||
There are cases where the Vite dev server is not adequate. It does not bundle the project, and it relies on the browser to load ES modules directly. This can be slow (especially with "barrel" files), and does not accurately represent the final build. | ||
|
||
The Vite `preview` command is a good alternative, but it does not do an initial build or automatically rebuild on file changes. | ||
|
||
This tool is roughly equivalent to running `vite build --watch & vite preview` to start a build (with file watching), and a preview server in parallel. Additionally, browser page reloads will also be triggered after each rebuild. | ||
|
||
### Related Github Issues | ||
|
||
- [Vite Preview Watch Mode #5196](https://github.com/vitejs/vite/issues/5196) | ||
- [Consider treeshaking module for serving files in dev mode #8237](https://github.com/vitejs/vite/issues/8237) | ||
- [vite preview can't use --mode option #17410](https://github.com/vitejs/vite/issues/17410) | ||
Jump to the [package](packages/vite-live-preview/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,9 @@ | ||
import { defaultRelaxedFiles, rational } from 'eslint-config-rational'; | ||
import rational, { flatConfigBuilder } from 'eslint-config-rational'; | ||
|
||
export default rational({ | ||
enableJsdoc: false, | ||
relaxedFiles: [...defaultRelaxedFiles, '**/*.js'], | ||
}); | ||
/** | ||
* @type {Linter.FlatConfig[]} | ||
*/ | ||
export default flatConfigBuilder() | ||
.use(rational) | ||
.ignore('**/{lib,dist,out,coverage}') | ||
.build(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{ | ||
"$schema": "node_modules/lerna/schemas/lerna-schema.json", | ||
"version": "independent", | ||
"npmClient": "pnpm", | ||
"loglevel": "warn", | ||
"command": { | ||
"run": { | ||
"stream": true | ||
}, | ||
"version": { | ||
"conventionalCommits": true, | ||
"gitTagVersion": false, | ||
"push": false | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"targetDefaults": { | ||
"build": { | ||
"dependsOn": ["^build"], | ||
"cache": true | ||
} | ||
} | ||
} |
Oops, something went wrong.