From 4cec1256a44d160fa019471b751aa9a829ee6c9f Mon Sep 17 00:00:00 2001 From: Drew Powers <1369770+drwpow@users.noreply.github.com> Date: Tue, 23 Nov 2021 09:45:24 -0700 Subject: [PATCH] Add default TypeScript, Sass support to Svelte (#1982) --- .changeset/rare-bulldogs-tie.md | 5 ++ packages/astro/test/0-css.test.js | 6 +- .../test/fixtures/0-css/src/pages/index.astro | 8 +-- .../src/components/TypeScript.svelte | 5 ++ .../src/pages/typescript.astro | 25 +++++++ packages/astro/test/svelte-component.test.js | 22 ++++++ packages/renderers/renderer-svelte/index.js | 14 +++- .../renderers/renderer-svelte/package.json | 3 +- yarn.lock | 68 +++++++++++++++++-- 9 files changed, 138 insertions(+), 18 deletions(-) create mode 100644 .changeset/rare-bulldogs-tie.md create mode 100644 packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte create mode 100644 packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro create mode 100644 packages/astro/test/svelte-component.test.js 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(' + + +
+ +
+ + 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==