Skip to content

Commit

Permalink
Merge branch 'main' into http-server
Browse files Browse the repository at this point in the history
Conflicts:
	docs/server.md
  • Loading branch information
lydell committed Jan 7, 2024
2 parents 1f0119a + 096f235 commit 3fee3f5
Show file tree
Hide file tree
Showing 19 changed files with 2,248 additions and 1,493 deletions.
9 changes: 7 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ module.exports = {
"object-shorthand": warn,
"prefer-arrow-callback": warn,
"prefer-const": warn,
"prefer-destructuring": [warn, { object: true, array: false }],
"prefer-exponentiation-operator": warn,
"prefer-numeric-literals": warn,
"prefer-object-spread": warn,
Expand Down Expand Up @@ -121,6 +120,7 @@ module.exports = {
"@typescript-eslint/no-base-to-string": error,
"@typescript-eslint/no-confusing-void-expression": error,
"@typescript-eslint/no-dupe-class-members": error,
"@typescript-eslint/no-duplicate-type-constituents": error,
"@typescript-eslint/no-empty-function": warn,
"@typescript-eslint/no-empty-interface": warn,
"@typescript-eslint/no-explicit-any": warn,
Expand Down Expand Up @@ -150,6 +150,7 @@ module.exports = {
"@typescript-eslint/no-unsafe-assignment": error,
"@typescript-eslint/no-unsafe-call": error,
"@typescript-eslint/no-unsafe-declaration-merging": error,
"@typescript-eslint/no-unsafe-enum-comparison": error,
"@typescript-eslint/no-unsafe-member-access": error,
"@typescript-eslint/no-unsafe-return": error,
"@typescript-eslint/no-unused-expressions": error,
Expand All @@ -160,6 +161,10 @@ module.exports = {
"@typescript-eslint/no-useless-empty-export": warn,
"@typescript-eslint/no-var-requires": error,
"@typescript-eslint/prefer-as-const": warn,
"@typescript-eslint/prefer-destructuring": [
warn,
{ object: true, array: false },
],
"@typescript-eslint/prefer-for-of": warn,
"@typescript-eslint/prefer-function-type": warn,
"@typescript-eslint/prefer-includes": warn,
Expand All @@ -176,7 +181,7 @@ module.exports = {
"@typescript-eslint/restrict-plus-operands": error,
"@typescript-eslint/restrict-template-expressions": error,
"@typescript-eslint/return-await": error,
"@typescript-eslint/sort-type-union-intersection-members": warn,
"@typescript-eslint/sort-type-constituents": warn,
"@typescript-eslint/strict-boolean-expressions": [
error,
{
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/check.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ jobs:
strategy:
matrix:
os: [ubuntu-latest]
node-version: [18]
node-version: [20]

steps:
- uses: actions/checkout@v3
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/example-minimal.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version: 18
node-version: 20

# Build elm-watch so we can use it in this example repo.
- name: Internal cache node_modules
id: internal-cache-node_modules
uses: actions/cache@v3
with:
path: node_modules
key: internal-node_modules-ubuntu-latest-18-${{ hashFiles('package.json', 'package-lock.json') }}
key: internal-node_modules-ubuntu-latest-20-${{ hashFiles('package.json', 'package-lock.json') }}
- name: Internal npm ci
if: steps.internal-cache-node_modules.outputs.cache-hit != 'true'
run: npm ci --no-audit
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/example.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version: 18
node-version: 20

# Build elm-watch so we can use it in this example repo.
- name: Internal cache node_modules
id: internal-cache-node_modules
uses: actions/cache@v3
with:
path: node_modules
key: internal-node_modules-ubuntu-latest-18-${{ hashFiles('package.json', 'package-lock.json') }}
key: internal-node_modules-ubuntu-latest-20-${{ hashFiles('package.json', 'package-lock.json') }}
- name: Internal npm ci
if: steps.internal-cache-node_modules.outputs.cache-hit != 'true'
run: npm ci --no-audit
Expand Down
7 changes: 1 addition & 6 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,7 @@ jobs:
fail-fast: false
matrix:
os: [ubuntu-latest, macOS-latest, windows-latest]
node-version: [14, 16, 18]
exclude:
# Some tests fail on Node.js 14 on Windows, both locally and in CI.
# I think it’s not worth it trying to fix that.
- os: windows-latest
node-version: 14
node-version: [16, 18, 20]

env:
ELM_HOME: "${{ github.workspace }}/elm-stuff/elm-home"
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ npm install --save-dev elm-watch

> ℹ️ You need to install Elm itself separately, in whatever way you prefer ([installer][elm-guide-install], [npm][elm-npm-package], [unofficial npm][unofficial-npm], [elm-tooling]).
> ℹ️ Node.js 14 or newer is required. On Windows, only Node.js 16 or later is officially supported.
> ℹ️ Node.js 16 or newer is required.
```
npx elm-watch --help
Expand Down
2 changes: 1 addition & 1 deletion docs/browser-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ Full examples:
- bash/zsh with VSCode: `export ELM_WATCH_OPEN_EDITOR='code --goto "$file:$line:$column"'`
- fish with Rider: `set -Ux ELM_WATCH_OPEN_EDITOR 'rider --line "$line" "$file"'`

Don’t forget quotes around the `file` variable, in case it contains spaces! (`line` and `column` only contains digits, but it doesn’t hurt to quote them too.)
Don’t forget quotes around the `file` variable, in case it contains spaces! (`line` and `column` only contain digits, but it doesn’t hurt to quote them too.)

-`"$file"`, `"%file%"`
-`$file`, `%file%`
Expand Down
2 changes: 1 addition & 1 deletion docs/elm-watch.json.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Example:

There isn’t much to say about `"targets"` really. You define what elm-watch should compile.

It’s an object. They keys can be whatever you want, basically. They’re displayed in the terminal UI. They’re passed to your [postprocess](../postprocess/) script. You can also filter by target substring: `elm-watch make app 🇸🇪` would build only targets containing “app” or “🇸🇪”.
It’s an object. The keys can be whatever you want, basically. They’re displayed in the terminal UI. They’re passed to your [postprocess](../postprocess/) script. You can also filter by target substring: `elm-watch make app 🇸🇪` would build only targets containing “app” or “🇸🇪”.

For each target, provide the following:

Expand Down
18 changes: 9 additions & 9 deletions docs/server.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ The file server is completely optional. It only serves files. So if you serve yo
## What does the simple static file server do?

- Serves files in a directory.
- Serves the closest [index.html](#indexhtml) file can the URL does not point to any file, for `Browser.application` programs.
- Hot reloads CSS – when `.css` files in the static files directory that is served changes, elm-watch reloads them in the browser.
- Serves the closest [index.html](#indexhtml) file if the URL does not point to any file, for `Browser.application` programs.
- Hot reloads CSS – when `.css` files in the static files directory that is served change, elm-watch reloads them in the browser.

## Why?

Expand All @@ -48,7 +48,7 @@ The file server is completely optional. It only serves files. So if you serve yo
Here are some more advanced dev server needs, that elm-watch simple HTTP server doesn’t do out of the box, but that you can set up yourself:

- Routing.
- Proxying API requests.
- Proxying API requests. TODO: Create example.
- HTML templating.
- On-the-fly compilation of CSS and TypeScript.
- HTTPS.
Expand All @@ -74,7 +74,7 @@ Those two things are closely related!

There’s an old convention in static file servers that when the URL points to a _directory,_ the server looks for an `index.html` file in that directory and serves that.

_Single page applications_ (which `Browser.applications` programs are) brings another convention: Serving the same HTML files for basically all URLs, letting the frontend app handle the URL.
_Single page applications_ (which `Browser.application` programs are) brings another convention: Serving the same HTML files for basically all URLs, letting the frontend app handle the URL.

elm-watch’s static file server combines both conventions: Whenever no file can be found for a URL, elm-watch looks for the closest `index.html` and serves it.

Expand All @@ -94,9 +94,9 @@ Here are some URLs and what is served:
| URL | File | Comment |
| --- | --- | --- |
| `/` | `public/index.html` | Directory, use `index.html` |
| `/blog/2023/elm-tips` | `public/index.html` | Not such file, use closest `index.html` |
| `/blog/2023/elm-tips` | `public/index.html` | No such file, use closest `index.html` |
| `/admin` | `public/admin/index.html` | Directory, use `index.html` |
| `/admin/blog/2023/elm-tips` | `public/admin/index.html` | Not such file, use closest `index.html` (`admin/index.html` is closer this time) |
| `/admin/blog/2023/elm-tips` | `public/admin/index.html` | No such file, use closest `index.html` (`admin/index.html` is closer this time) |
| `/main.js` | `public/main.js` | File exists, serve it |
| `/admin/admin.js` | `public/admin/admin.js` | File exists, serve it |
| `/mani.js` (typo) | `public/index.html` | (!) No such file, serve closest `index.html` |
Expand Down Expand Up @@ -133,13 +133,13 @@ Note that `index.html` files must be called exactly `index.html`. Not `index.htm

What would happen if you named `public/admin/index.html` just `public/admin.html` instead? There’s nothing stopping you from doing it. You would need to go to `/admin.html` to access it. Which would probably render a 404-style page in your `Browser.application` program, since you most likely have no route matching `/admin.html`. And if the `Browser.application` program ever changes the URL, refreshing the page won’t work. So stick to `index.html` files for `Browser.application` programs. Then you get the right page when you Elm app starts, and refreshing the page works.

I recommend always creating a `index.html` directly in your static files directory. elm-watch prints a link to the static file server on start up, and if you have a root `index.html` file, that link will take you somewhere useful from the get go.
I recommend always creating an `index.html` directly in your static files directory. elm-watch prints a link to the static file server on start up, and if you have a root `index.html` file, that link will take you somewhere useful from the get go.

## Browser.application

`Browser.application` programs can change the URL and has some things to note:
`Browser.application` programs can change the URL and have some things to note:

- It _requires_ an HTTP server. (The `file://` protocol is not supported by `Browser.application`, so you can’t just double-click the HTML file to open it in a browser. That’s why getting a simple static server from elm-watch is very convenient.)
- They _require_ an HTTP server. (The `file://` protocol is not supported by `Browser.application`, so you can’t just double-click the HTML file to open it in a browser. That’s why getting a simple static server from elm-watch is very convenient.)
- The HTTP server you use needs to be smart to handle page reloads. That’s why elm-watch has its [index.html](#indexhtml) conventions.

**Note:** elm-watch’s server is _not_ for production use. If you want to deploy your app somewhere, use any file server of choice. Make sure to set it up to handle serving your HTML file so that reloading the page works.
Expand Down
2 changes: 1 addition & 1 deletion docs/what-elm-watch-is.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ nav_order: 3

# What elm-watch _is_

Remember the first time you ran `elm make`? It’s super fast, and has beautiful output. And it’s really stable! If the majority of your code is Elm, why complicate things with extra layers where things can go wrong? elm-watch tries to stay as close as that ideal as possible.
Remember the first time you ran `elm make`? It’s super fast, and has beautiful output. And it’s really stable! If the majority of your code is Elm, why complicate things with extra layers where things can go wrong? elm-watch tries to stay as close to that ideal as possible.

- **Maximum speed.** elm-watch tries to do as little as possible besides running `elm make` for you. Doing less work is always faster!
- [**Hot reloading.**](../hot-reloading/) elm-watch tries to reimagine the level of quality of hot reloading. The goal is to never leave you wondering if it worked at all.
Expand Down
Loading

0 comments on commit 3fee3f5

Please sign in to comment.