Add default TypeScript, Sass support to Svelte (#1982)
This commit is contained in:
Drew Powers
GitHub
parent
3e1bdb1a3b
commit
4cec1256a4
9 changed files with 138 additions and 18 deletions
5
.changeset/rare-bulldogs-tie.md
Normal file
5
.changeset/rare-bulldogs-tie.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@astrojs/renderer-svelte': patch
|
||||
---
|
||||
|
||||
Add TypeScript, Sass support to Svelte
|
||||
|
|
@ -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(' ');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
5
packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte
vendored
Normal file
5
packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
export let message: string;
|
||||
</script>
|
||||
|
||||
<div id="svelte-ts">{ message }</div>
|
||||
25
packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro
vendored
Normal file
25
packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro
vendored
Normal file
|
|
@ -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>
|
||||
22
packages/astro/test/svelte-component.test.js
Normal file
22
packages/astro/test/svelte-component.test.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
@ -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,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
68
yarn.lock
68
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==
|
||||
|
|
|
|||
Loading…
Reference in a new issue