Skip to content

Commit

Permalink
feat: support additional queries (#513)
Browse files Browse the repository at this point in the history
* feat: support direct and raw query parameters for svelte requests

* wip: add option to pass compileOptions for raw scripts, fix issues with output as default export, add tests

* wip: move handling of raw and direct to load hook, change tests to use external snapshot and add more tests

* wip: add sourcemap query and inline sourcemaps to direct requests. improve error handling

* wip: clean up implementation; add documentation

* fix: make sure to return all affected modules from handleHotUpdate instead of just looking at js and css. This updates ?raw imports correctly during dev

* feat: add new type 'all' that returns source and complete result with preprocessed, js, css, dependencies and ast

* fix: heal pnpm-lock

* fix: improve snapshot normalization, sourcemap output included absolute path to testDir, which differs between serve and build tests

* fix: avoid absolute paths in sourcemap sources

* fix: windows

* fix: pass normalizedFilename to svelte compiler so windows compile does not add full absolute path to generated by comment

* fix: update snapshots

* docs: mark raw&svelte and direct&svelte as experimental

* fix: vite ?raw is string by default, so export code string as default and others as named exports

* fix: sort exports and don't run mixed tests during build
  • Loading branch information
dominikg authored Dec 2, 2022
1 parent 0971449 commit 1c780ce
Show file tree
Hide file tree
Showing 23 changed files with 1,861 additions and 79 deletions.
5 changes: 5 additions & 0 deletions .changeset/fresh-papayas-change.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/vite-plugin-svelte': patch
---

ensure sources paths in sourcemaps are not absolute file paths
5 changes: 5 additions & 0 deletions .changeset/giant-tools-hunt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/vite-plugin-svelte': minor
---

support `&direct` and `&raw` query parameters for svelte requests
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto eol=lf
125 changes: 125 additions & 0 deletions docs/advanced-usage.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
# Advanced usage

> **HERE BE DRAGONS**
>
> The features described here are not meant to be used in regular libraries or end-user applications.
> They can be useful for frameworks, documentation sites or in special situations, but you are responsible for applying them correctly.
>
> **Proceed with caution!**
## custom queries

Vite supports using query parameters to request different outcomes for the same file.

The following schemes are supported by vite-plugin-svelte:

### raw

```js
//get .svelte file content as a string
import content from 'File.svelte?raw';
```

### experimental

In addition to the plain .svelte source content, you can use special svelte queries.

> These svelte subqueries are experimental, availability, syntax and output format may change
#### raw&svelte

```js
//get output of svelte.preprocess code as string
import preprocessed from 'File.svelte?raw&svelte&type=preprocessed';
```

```js
//get output of svelte.compile js.code as string
import script from 'File.svelte?raw&svelte&type=script';
```

```js
//get output of svelte.compile css.code as string
import style from 'File.svelte?raw&svelte&type=style';
```

##### detail exports

raw&svelte exports code string as default export, but also offers named exports if you need details

```js
//get output of svelte.preprocess
import { code, map, dependencies } from 'File.svelte?raw&svelte&type=preprocessed';
```

```js
//get output of svelte.compile js
import { code, map, dependencies } from 'File.svelte?raw&svelte&type=script';
```

```js
//get output of svelte.compile css
import { code, map, dependencies } from 'File.svelte?raw&svelte&type=style';
```

```js
//get everything in one go
import * as all from 'File.svelte?raw&svelte&type=all';
import {
source,
preprocessed,
dependencies,
js,
css,
ast,
normalizedFilename,
ssr,
lang,
warnings,
stats
} from 'File.svelte?raw&svelte&type=all';
```

#### direct&svelte

```html
<!-- load and execute component script -->
<script type="application/javascript" src="File.svelte?direct&svelte&type=script&lang.js" />
<!-- embed component style as css -->
<link rel="stylesheet" type="text/css" href="File.svelte?direct&svelte&type=style&lang.css" />
```
#### sourcemap
add `&sourcemap` to `?(raw|direct)&svelte&type=(script|style|all)` queries to include sourcemaps (inline for direct)
#### compilerOptions
?raw and ?direct use default compilerOptions, even if you have different values in your svelte.config.js:
```js
const compilerOptions = {
dev: false,
generate: 'dom',
css: false,
hydratable: false,
enableSourcemap: false // or {js: true} or {css:true} if sourcemap query is set
};
```
to get output with different compilerOptions, append them as json like this:
```js
//get ssr output of svelte.compile js as {code, map, dependencies}
import script from 'File.svelte?raw&svelte&type=script&compilerOptions={generate:"ssr"}';
```
only a subset of compilerOptions is supported
- generate
- dev
- css
- hydratable
- customElement
- immutable
- enableSourcemap
Loading

0 comments on commit 1c780ce

Please sign in to comment.