summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.changeset/rare-bulldogs-tie.md5
-rw-r--r--packages/astro/test/0-css.test.js6
-rw-r--r--packages/astro/test/fixtures/0-css/src/pages/index.astro8
-rw-r--r--packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte5
-rw-r--r--packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro25
-rw-r--r--packages/astro/test/svelte-component.test.js22
-rw-r--r--packages/renderers/renderer-svelte/index.js14
-rw-r--r--packages/renderers/renderer-svelte/package.json3
-rw-r--r--yarn.lock68
9 files changed, 138 insertions, 18 deletions
diff --git a/.changeset/rare-bulldogs-tie.md b/.changeset/rare-bulldogs-tie.md
new file mode 100644
index 000000000..f1ed0d055
--- /dev/null
+++ b/.changeset/rare-bulldogs-tie.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-svelte': patch
+---
+
+Add TypeScript, Sass support to Svelte
diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js
index 734e16445..06b9c0d14 100644
--- a/packages/astro/test/0-css.test.js
+++ b/packages/astro/test/0-css.test.js
@@ -238,8 +238,7 @@ describe('Styles SSR', function () {
expect(bundledCSS).to.match(new RegExp(`.svelte-css.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
});
- // TODO: fix Sass in Svelte
- it.skip('<style lang="sass">', async () => {
+ it('<style lang="sass">', async () => {
const $ = index$;
const el = $('#svelte-sass');
const classes = el.attr('class').split(' ');
@@ -252,8 +251,7 @@ describe('Styles SSR', function () {
expect(bundledCSS).to.match(new RegExp(`.svelte-sass.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
});
- // TODO: fix Sass in Svelte
- it.skip('<style lang="scss">', async () => {
+ it('<style lang="scss">', async () => {
const $ = index$;
const el = $('#svelte-scss');
const classes = el.attr('class').split(' ');
diff --git a/packages/astro/test/fixtures/0-css/src/pages/index.astro b/packages/astro/test/fixtures/0-css/src/pages/index.astro
index 599632065..85269eb21 100644
--- a/packages/astro/test/fixtures/0-css/src/pages/index.astro
+++ b/packages/astro/test/fixtures/0-css/src/pages/index.astro
@@ -15,8 +15,8 @@ import VueSass from '../components/VueSass.vue';
import VueScoped from '../components/VueScoped.vue';
import VueScss from '../components/VueScss.vue';
import SvelteCSS from '../components/SvelteCSS.svelte';
-// import SvelteSass from '../components/SvelteSass.svelte';
-// import SvelteScss from '../components/SvelteScss.svelte';
+import SvelteSass from '../components/SvelteSass.svelte';
+import SvelteScss from '../components/SvelteScss.svelte';
import ReactDynamic from '../components/ReactDynamic.jsx';
---
@@ -55,8 +55,8 @@ import ReactDynamic from '../components/ReactDynamic.jsx';
<VueScoped />
<VueScss />
<SvelteCSS />
- <!-- <SvelteSass />
- <SvelteScss /> -->
+ <SvelteSass />
+ <SvelteScss />
<ReactDynamic client:load />
</div>
</body>
diff --git a/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte b/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte
new file mode 100644
index 000000000..d74ae47ec
--- /dev/null
+++ b/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+ export let message: string;
+</script>
+
+<div id="svelte-ts">{ message }</div>
diff --git a/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro b/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro
new file mode 100644
index 000000000..229ec763b
--- /dev/null
+++ b/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro
@@ -0,0 +1,25 @@
+---
+import TypeScript from '../components/TypeScript.svelte'
+---
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width" />
+ <title>Svelte TypeScript</title>
+ <style>
+ html,
+ body {
+ font-family: system-ui;
+ margin: 0;
+ }
+ body {
+ padding: 2rem;
+ }
+ </style>
+ </head>
+ <body>
+ <main>
+ <TypeScript message="Hello, TypeScript" />
+ </main>
+ </body>
+</html>
diff --git a/packages/astro/test/svelte-component.test.js b/packages/astro/test/svelte-component.test.js
new file mode 100644
index 000000000..0d79be3de
--- /dev/null
+++ b/packages/astro/test/svelte-component.test.js
@@ -0,0 +1,22 @@
+import { expect } from 'chai';
+import cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Svelte component', () => {
+ let fixture;
+
+ before(async () => {
+ fixture = await loadFixture({
+ projectRoot: './fixtures/svelte-component/',
+ renderers: ['@astrojs/renderer-svelte'],
+ });
+ await fixture.build();
+ });
+
+ it('Works with TypeScript', async () => {
+ const html = await fixture.readFile('/typescript/index.html');
+ const $ = cheerio.load(html);
+
+ expect($('#svelte-ts').text()).to.equal('Hello, TypeScript');
+ });
+});
diff --git a/packages/renderers/renderer-svelte/index.js b/packages/renderers/renderer-svelte/index.js
index 502ba6bfa..93ecfcdfc 100644
--- a/packages/renderers/renderer-svelte/index.js
+++ b/packages/renderers/renderer-svelte/index.js
@@ -1,10 +1,11 @@
import { svelte } from '@sveltejs/vite-plugin-svelte';
+import preprocess from 'svelte-preprocess';
export default {
name: '@astrojs/renderer-svelte',
client: './client.js',
server: './server.js',
- viteConfig() {
+ viteConfig({ mode }) {
return {
optimizeDeps: {
include: ['@astrojs/renderer-svelte/client.js', 'svelte', 'svelte/internal'],
@@ -13,7 +14,16 @@ export default {
plugins: [
svelte({
emitCss: true,
- compilerOptions: { hydratable: true },
+ compilerOptions: { dev: mode === 'development', hydratable: true },
+ preprocess: [
+ preprocess({
+ less: true,
+ sass: { renderSync: true },
+ scss: { renderSync: true },
+ stylus: true,
+ typescript: true,
+ }),
+ ],
}),
],
};
diff --git a/packages/renderers/renderer-svelte/package.json b/packages/renderers/renderer-svelte/package.json
index b4e51374b..2b676577c 100644
--- a/packages/renderers/renderer-svelte/package.json
+++ b/packages/renderers/renderer-svelte/package.json
@@ -11,7 +11,8 @@
},
"dependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
- "svelte": "^3.44.1"
+ "svelte": "^3.44.2",
+ "svelte-preprocess": "^4.9.8"
},
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
diff --git a/yarn.lock b/yarn.lock
index 36138a406..0663ccd9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -271,7 +271,7 @@
"@babel/template" "^7.16.0"
"@babel/types" "^7.16.0"
-"@babel/helper-get-function-arity@^7.16.0":
+"@babel/helper-get-function-arity@^7.15.4", "@babel/helper-get-function-arity@^7.16.0":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz#0088c7486b29a9cb5d948b1a1de46db66e089cfa"
integrity sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==
@@ -386,7 +386,7 @@
dependencies:
"@babel/types" "^7.16.0"
-"@babel/helper-validator-identifier@^7.15.7":
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
version "7.15.7"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
@@ -1056,7 +1056,7 @@
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/template@^7.16.0":
+"@babel/template@^7.15.4", "@babel/template@^7.16.0":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
integrity sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==
@@ -2683,6 +2683,11 @@
dependencies:
"@types/node" "*"
+"@types/pug@^2.0.4":
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.5.tgz#69bc700934dd473c7ab97270bd2dbacefe562231"
+ integrity sha512-LOnASQoeNZMkzexRuyqcBBDZ6rS+rQxUMkmj5A0PkhhiSZivLIuz6Hxyr1mkGoEZEkk66faROmpMi4fFkrKsBA==
+
"@types/resolve@1.17.1":
version "1.17.1"
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2703,6 +2708,13 @@
"@types/glob" "*"
"@types/node" "*"
+"@types/sass@^1.16.0":
+ version "1.43.0"
+ resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.43.0.tgz#b4cebe057d887ed66dc6813fd6cbef22043057bb"
+ integrity sha512-DPSXNJ1rYLo88GyF9tuB4bsYGfpKI1a4+wOQmc+LI1SUoocm9QLRSpz0GxxuyjmJsYFIQo/dDlRSSpIXngff+w==
+ dependencies:
+ "@types/node" "*"
+
"@types/semver@^6.0.0":
version "6.2.3"
resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.3.tgz#5798ecf1bec94eaa64db39ee52808ec0693315aa"
@@ -3485,6 +3497,11 @@ browserslist@^4.17.6:
node-releases "^2.0.1"
picocolors "^1.0.0"
+buffer-crc32@^0.2.5:
+ version "0.2.13"
+ resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+ integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
buffer-from@^1.0.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -4752,6 +4769,11 @@ es6-object-assign@^1.1.0:
resolved "https://registry.yarnpkg.com/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
integrity sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=
+es6-promise@^3.1.2:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+ integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=
+
esbuild-android-arm64@0.13.15:
version "0.13.15"
resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
@@ -5795,7 +5817,7 @@ globrex@^0.1.2:
resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3, graceful-fs@^4.2.4:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3, graceful-fs@^4.2.4:
version "4.2.8"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
@@ -9868,7 +9890,7 @@ rgba-regex@^1.0.0:
resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-rimraf@^2.6.3:
+rimraf@^2.5.2, rimraf@^2.6.3:
version "2.7.1"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -9970,6 +9992,16 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@^5.2.1,
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+sander@^0.5.0:
+ version "0.5.1"
+ resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad"
+ integrity sha1-dB4kXiMfB8r7b98PEzrfohalAq0=
+ dependencies:
+ es6-promise "^3.1.2"
+ graceful-fs "^4.1.3"
+ mkdirp "^0.5.1"
+ rimraf "^2.5.2"
+
sass@^1.43.4:
version "1.43.4"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.43.4.tgz#68c7d6a1b004bef49af0d9caf750e9b252105d1f"
@@ -10206,6 +10238,16 @@ solid-js@^1.2.3:
resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.2.5.tgz#26175228ae562c95e92f476c73db744b6b36fc2c"
integrity sha512-XcPEULgqd/XbBu8LwtGWs5RGowvIpq88/ZNI/xgJ9PaxRJWwbVlSNsS+ywUWncxRdKsPoVe8vdcIsH4gBJjh3Q==
+sorcery@^0.10.0:
+ version "0.10.0"
+ resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7"
+ integrity sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=
+ dependencies:
+ buffer-crc32 "^0.2.5"
+ minimist "^1.2.0"
+ sander "^0.5.0"
+ sourcemap-codec "^1.3.0"
+
sort-keys@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
@@ -10260,7 +10302,7 @@ source-map@^0.8.0-beta.0:
dependencies:
whatwg-url "^7.0.0"
-sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
+sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
version "1.4.8"
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
@@ -10675,7 +10717,19 @@ svelte-hmr@^0.14.7:
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.7.tgz#7fa8261c7b225d9409f0a86f3b9ea5c3ca6f6607"
integrity sha512-pDrzgcWSoMaK6AJkBWkmgIsecW0GChxYZSZieIYfCP0v2oPyx2CYU/zm7TBIcjLVUPP714WxmViE9Thht4etog==
-svelte@^3.44.1:
+svelte-preprocess@^4.9.8:
+ version "4.9.8"
+ resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz#fd40afebfb352f469beab289667485ebf0d811da"
+ integrity sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==
+ dependencies:
+ "@types/pug" "^2.0.4"
+ "@types/sass" "^1.16.0"
+ detect-indent "^6.0.0"
+ magic-string "^0.25.7"
+ sorcery "^0.10.0"
+ strip-indent "^3.0.0"
+
+svelte@^3.44.2:
version "3.44.2"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.44.2.tgz#3e69be2598308dfc8354ba584cec54e648a50f7f"
integrity sha512-jrZhZtmH3ZMweXg1Q15onb8QlWD+a5T5Oca4C1jYvSURp2oD35h4A5TV6t6MEa93K4LlX6BkafZPdQoFjw/ylA==
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-08 13:34:52 +0000