Pular para o conteúdo principal
Versão: v2.8.0

SvelteKit

Este guia será para:

  1. Passos de instalação do Miminal - Os passos necessários para obter uma instalação mínima de Wails funcionando para o SvelteKit.
  2. Script de Instalação - Bash script para cumprir os passos de Instalação Mínima com a marca opcional de Wails.
  3. Notas importantes - Problemas que podem ser encontrados ao usar o SvelteKit + Wails e correções.

1. Passos mínimos de instalação​

Instalar Wails para Svelte.​
  • wails init -n myapp -t svelte
Exclua o front-end do Svelte.​
  • Navegue até a pasta myapp recém-criada.
  • Excluir a pasta chamada "frontend"
Enquanto estiver na raiz do projeto Wails. Use o seu gerenciador de pacotes favorito e instale o SvelteKit como o novo frontend. Siga as instruções.​
  • npm create svelte@latest frontend
Modificar o wails.json.​
  • Add "wailsjsdir": "./frontend/src/lib", Observe que é aqui que suas funções Go e runtime aparecerão.
  • Mude o frontend do seu gerenciador de pacotes se não estiver usando npm.
Modificar o main.go.​
  • O primeiro comentário //go:embed all:frontend/dist precisa ser alterado para //go:embed all:frontend/build
Instalar/remover dependências usando seu gerenciador de pacote favorito.​
  • Entre na sua pasta "frontend".
  • npm i
  • npm uninstall @sveltejs/adapter-auto
  • npm i -D @sveltejs/adapter-static
Alterar adaptador em svelte.config.js​
  • A primeira linha de arquivo altera import adapter from '@sveltejs/adapter-auto'; to import adapter from '@sveltejs/adapter-static';
Coloque o SvelteKit no modo SPA com pré-renderização.​
  • Crie um arquivo sob myapp/frontend/src/routes/ chamado +layout.ts/+layout.js.
  • Adicione duas linhas ao recém-criado arquivo export const prerender = true e export const ssr = false
Testar instalação.​
  • Navegue de volta à raiz do projeto Wails (um diretório para cima).
  • execute wails dev
  • Se a aplicação não executar, por favor verifique os passos anteriores.

2. Script de Instalação​

Este Script do Bash faz as etapas listadas acima. Certifique-se de ler o script e de entender o que o script está fazendo no seu computador.​
  • Criar um arquivo sveltekit-wails.sh
  • Copie o código abaixo para o novo arquivo e o salve.
  • Torná-lo executável com chmod +x sveltekit-wails.sh
  • A marca é um parâmetro opcional abaixo que adiciona de volta na marca de fregueses. Deixe o terceiro parâmetro em branco para não inserir a marca das Wails.
  • Exemplo de uso: ./sveltekit-wails.sh pnpm newapp brand
sveltekit-wails.sh:​
manager=$1
project=$2
brand=$3
wails init -n $project -t svelte
cd $project
sed -i "s|npm|$manager|g" wails.json
sed -i 's|"auto",|"auto",\n  "wailsjsdir": "./frontend/src/lib",|' wails.json
sed -i "s|all:frontend/dist|all:frontend/build|" main.go
if [[ -n $brand ]]; then
    mv frontend/src/App.svelte +page.svelte
    sed -i "s|'./assets|'\$lib/assets|" +page.svelte
    sed -i "s|'../wails|'\$lib/wails|" +page.svelte
    mv frontend/src/assets .
fi
rm -r frontend
$manager create svelte@latest frontend
if [[ -n $brand ]]; then
    mv +page.svelte frontend/src/routes/+page.svelte
    mkdir frontend/src/lib
    mv assets frontend/src/lib/
fi
cd frontend
$manager i
$manager uninstall @sveltejs/adapter-auto
$manager i -D @sveltejs/adapter-static
echo -e "export const prerender = true\nexport const ssr = false" > src/routes/+layout.ts
sed -i "s|-auto';|-static';|" svelte.config.js
cd ..
wails dev

3. Notas importantes​

Os arquivos do servidor causarão falhas de construção.​
  • +layout.server.ts, +page.server.ts, +server.ts ou qualquer arquivo com "server" em nome falhará na construção enquanto todas as rotas forem pré-renderizadas.
O tempo de execução do Wails descarrega com navegações de página inteira!​
  • Tudo que causa navegações de página completa: window.location.href = '/<some>/<page>' ou recarga do menu de contexto ao usar wails dev. Isso significa que você pode acabar perdendo a capacidade de chamar qualquer falha no aplicativo em tempo de execução. Há duas formas de trabalhar em torno desta questão.
  • Use import { goto } from '$app/navigation' e então chame goto('/<some>/<page>') em sua + page.svelte. Isso impedirá uma navegação de página completa.
  • Se a navegação por página inteira não puder ser impedido que o tempo de execução do Wails seja adicionado a todas as páginas, adicionando o abaixo ao <head> de myapp/frontend/src/app. Mt
<head>
...
    <meta name="wails-options" content="noautoinject" />
    <script src="/wails/ipc.js"></script>
    <script src="/wails/runtime.js"></script>
...
</head>

Veja https://wails.io/docs/guides/frontend para mais informações.

Os dados de e-mail podem ser carregados e atualizados a partir de +page.ts/+page.js para +page.svelte.​
Tratamento de erros​
  • Erros esperados usando o erro Throw funcionam em +page.ts/+page.js com uma página +error.svelte. https://kit.svelte.dev/docs/errors#expected-errors
  • Erros inesperados farão com que o aplicativo se torne inutilizável. Somente a opção de recuperação (conhecida até agora) de erros inesperados é recarregar o aplicativo. Para fazer isso, crie um arquivo myapp/frontend/src/hooks.client.ts e adicione o código abaixo ao arquivo.
import { WindowReloadApp } from '$lib/wailsjs/runtime/runtime' 
export async function handleError() {
    WindowReloadApp()
}
Usando formas e funções de manipulação​
  • A maneira mais simples é chamar uma função do formulário é o padrão, vincular:valor suas variáveis e evitar submissão <form method="POST" on:submit|preventDefault={handle}>
  • A maneira mais avançada é use:enhance (aprimoramento progressivo) que permitirá acesso conveniente a formData, formElemento, emissor. A nota importante é sempre cancel() o formulário que impede o comportamento do lado do servidor. https://kit.svelte.dev/docs/form-actions#progressive-enhancement Exemplo:
<form method="POST" use:enhance={({cancel, formData, formElement, submitter}) => {
    cancel()
    console.log(Object.fromEntries(formData))
    console.log(formElement)
    console.log(submitter)
    handle()
}}>