Add SvelteKit web framework support

[austincrim]

Description

In conjunction with FirebaseExtended/firebase-framework-tools#56, this PR adds SvelteKit support to Firebase web frameworks.

A temp change was made in frameworks/index.ts to support ESM, but another PR (#5540) is open that should fix this.

• merge main
• remove temp ESM fix
• pin FIREBASE_FRAMEWORKS_VERSION to new minor version

Scenarios Tested

Tested with the SvelteKit demo app, including static site generation, server-side rendering, and API routes.

[codecov-commenter]

Codecov Report

Patch coverage: 29.16% and project coverage change: -0.06 ⚠️

Comparison is base (8976456) 55.97% compared to head (0d0754a) 55.92%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5525      +/-   ##
==========================================
- Coverage   55.97%   55.92%   -0.06%     
==========================================
  Files         321      322       +1     
  Lines       21663    21706      +43     
  Branches     4419     4427       +8     
==========================================
+ Hits        12125    12138      +13     
- Misses       8472     8502      +30     
  Partials     1066     1066              

Impacted Files	Coverage Δ
src/frameworks/utils.ts	38.46% <0.00%> (ø)
src/frameworks/vite/index.ts	32.25% <0.00%> (-4.11%)	⬇️
src/frameworks/sveltekit/index.ts	36.11% <36.11%> (ø)
src/frameworks/index.ts	15.61% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[jamesdaniels]

LGTM, @austincrim to test against his sample & we'll add the changelog. Merge after this CLI release is cut.

[simpros]

Hi @austincrim , great job 👍
Only thing I miss is how to use it, I am trying around with firebase init deploy and firebase deploy but I didn't have any luck so far. Maybe you can help me out? :)

[austincrim]

Hey, @simpros, thanks for checking it out!

Can you try firebase init hosting? I never tested firebase init deploy, I'm not sure what it does.

[ideodora]

firebase init hosting then firebase deploy worked. firebase serve failed with error not found vite executable

[simpros]

Oh sorry, I meant that I've used firebase init hosting 🤔
Which adapter do you use? @sveltejs/adapter-node?

I am using @sveltejs/adapter-node and the firebase deploy command is erroring with:

[debug] [2023-04-15T06:19:20.724Z] Customer code is not Node
[debug] [2023-04-15T06:19:20.725Z] Customer code is not Python code.
[error] 
[error] Error: Could not detect language for functions at /workspaces/DCOS/build

Maybe a sample svelte.config.js file would help? 🙂

[austincrim]

@simpros I would try leaving the adapter as @sveltejs/adapter-auto or removing altogether. An adapter is not technically required. The following config works for me when using firebase deploy:

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

@ideodora firebase serve works for me without issue. I would try removing node_modules, resinstalling dependencies, and trying again.

[simpros]

@austincrim sorry to bother you again. The adapter-auto seems to work, my application gets deployed but the cloud function is erroring with this message

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/workspace/node_modules/firebase-frameworks/dist/sveltekit/firebase-aware.js' imported from /workspace/node_modules/firebase-frameworks/dist/index.js

at .NodeError ( [node:internal/errors:399](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Ferrors&line=399&authuser=0&hl=en&project=dcos-4a45f) )
at .finalizeResolution ( [node:internal/modules/esm/resolve:326](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Fresolve&line=326&authuser=0&hl=en&project=dcos-4a45f) )
at .moduleResolve ( [node:internal/modules/esm/resolve:945](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Fresolve&line=945&authuser=0&hl=en&project=dcos-4a45f) )
at .defaultResolve ( [node:internal/modules/esm/resolve:1153](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Fresolve&line=1153&authuser=0&hl=en&project=dcos-4a45f) )
at .nextResolve ( [node:internal/modules/esm/loader:163](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=163&authuser=0&hl=en&project=dcos-4a45f) )
at .ESMLoader.resolve ( [node:internal/modules/esm/loader:838](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=838&authuser=0&hl=en&project=dcos-4a45f) )
at .ESMLoader.getModuleJob ( [node:internal/modules/esm/loader:424](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=424&authuser=0&hl=en&project=dcos-4a45f) )
at .ESMLoader.import ( [node:internal/modules/esm/loader:525](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Floader&line=525&authuser=0&hl=en&project=dcos-4a45f) )
at .importModuleDynamically ( [node:internal/modules/esm/translators:110](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fmodules%2Fesm%2Ftranslators&line=110&authuser=0&hl=en&project=dcos-4a45f) )
at .importModuleDynamicallyCallback ( [node:internal/process/esm_loader:35](https://console.cloud.google.com/debug?referrer=fromlog&file=node:internal%2Fprocess%2Fesm_loader&line=35&authuser=0&hl=en&project=dcos-4a45f) )

Did I miss to update an dependency? 🤔

[ideodora]

@austincrim I think firebase serve with sveltekit run through the code bellow.

firebase-tools/src/frameworks/index.ts

Line 237 in b80de64

const npmBin = spawnSync("npm", ["bin"], { cwd }).stdout?.toString().trim();

It seems to use 'npm bin` which removed since npm v.9
https://github.blog/changelog/2022-10-24-npm-v9-0-0-released/#%E2%9A%A0%EF%B8%8F-notable-breaking-changes
npm bin has been removed (use npx or npm exec to execute binaries)

Would you mind to tell me your working environments?

mine:
os: debian bullseye
node: v18.15.0
npm: 9.5.0
firebase-tools: 11.27.0
sveltekit: @sveltejs/kit@1.15.7

UPDATE:
Downgraded the npm from 9 to 8, firebase serve works as expected.

related:
#5705

[symbolicsorcerer]

I'm seeing this. Have tried node@16 and node@18, and npm@8 and npm@9. Both firebase serve and firebase emulators:start give me the "can't find vite" error.

talltavern-web/frontend on  main [!?] via  v18.16.1
❯ n
     copying : node/16.20.1
   installed : v16.20.1 (with npm 8.19.4)

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ npm bin
/home/ss/src/talltavern-web/frontend/node_modules/.bin

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ npm bin .
/home/ss/src/talltavern-web/frontend/node_modules/.bin

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ ls $(npm bin .)
acorn         esvalidate   loose-envify           pbjs                    rimraf        tailwind
atob          fxparser     metro                  pbts                    rollup        tailwindcss
autoprefixer  image-size   metro-inspector-proxy  playwright              sass          terser
browserslist  jiti         metro-symbolicate      playwright-core         semver        tsc
cssesc        js-yaml      mime                   prettier                sorcery       tsserver
envinfo       jscodeshift  mkdirp                 proto-loader-gen-types  sucrase       uglifyjs
esbuild       jsesc        nanoid                 react-native            sucrase-node  update-browserslist-db
eslint        json5        node-which             regjsparser             svelte-check  vite
esparse       logkitty     parser                 resolve                 svelte-kit

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ ls $(npm bin .) | grep vite
vite

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ npm -v
8.19.4

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ ls -lah $(npm bin .) | grep vite
lrwxrwxrwx   1 ss ss   19 Jul 17 21:27 vite -> ../vite/bin/vite.js

talltavern-web/frontend on  main [!?] via  v16.20.1
❯ vite


  VITE v4.4.4  ready in 508 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

talltavern-web/frontend on  main [!?] via  v16.20.1 took 2s
❯ export GOOGLE_APPLICATION_CREDENTIALS="/home/ss/talltavern-key.json"
firebase emulators:start
i  emulators: Starting emulators: functions, firestore, hosting, storage

 (x2)
 (x3)

   Thank you for trying our experimental support for Svelte on Firebase Hosting.
   While this integration is maintained by Googlers it is not a supported Firebase product.
   Issues filed on GitHub will be addressed on a best-effort basis by maintainers and other community members.

   Documentation: https://firebase.google.com/docs/hosting/frameworks/frameworks-overview
   File a bug: https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md
   Submit a feature request: https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md

   We'd love to learn from you. Express your interest in helping us shape the future of Firebase Hosting: https://goo.gle/41enW5X

i  emulators: Shutting down emulators.
i  hub: Stopping emulator hub

Error: Could not find the vite executable.

Having trouble? Try firebase [command] --help