Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support additional queries #513

Merged
merged 17 commits into from
Dec 2, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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