svelte component template

Modelo de componente esbelto 3

Uma base altamente opinionada para a construção de componentes Silte Share 3

Índice

1. Características
2. Começando
3. Em desenvolvimento
4. Pré -processadores
5. Teste
6. Publicação para NPM
7. Perguntas frequentes

Características

• Pré -processamento
• Formação
• LING
• Livro de histórias
• Teste

Começando

1. Clone o modelo:

Opção #1: Clone -o com a opção "Use This Modelo" do Github:

Opção #2: Clone este repositório com degito:

npx degit YogliB/svelte-component-template ` my-new-component `

2. Digite a pasta:

 cd my-new-component

2. Iniciar Git:

git init

3. Instale dependências:

npm install

3. Configure package.json :

npm init

4. Comece a codificar:

code .

• O código -fonte do seu componente vive no src/lib/[MyComponent]/[MyComponent].svelte .

Em desenvolvimento

1. Inicie Sveltekit:

npm run dev

2. Edite um arquivo de componente no src/lib , salve -o e assista à magia acontecer.

3. Export seus componentes no src/lib/index.js .

4. Importe seus componentes em src/routes/index.svelte de `$ lib $, para que você possa visualizar e testá -lo.

5. Navegue até localhost: 3000 para ver seus componentes ao vivo.

Pré -processadores

Todo o pré-processamento é tratado com pré-processo. Configure -o em svelte.config.js .

Teste

Teste de interação

Este é um método simples e intuitivo que pode ser feito através do Storybook, com a ajuda do Cypress. E os scripts de teste de exemplo e pré-fabricado podem ser encontrados neste repositório, e mais informações podem ser encontradas nos documentos do Storybook.

Teste de instantâneo

Neste repositório, você encontrará um fluxo de trabalho básico que usa o Chomatic para testes de instantâneos.

Perguntas frequentes

Para que serve o arquivo index.js ?

É para ser capaz de importar vários componentes de uma única fonte.

Por exemplo, permite que o usuário faça:

 import { MyComponent , MyOtherComponent } from 'my-component-library' ;

Em vez de:

 import MyComponent from 'my-component-library/components/MyComponent.svelte' ;
import MyOtherComponent from 'my-component-library/components/MyOtherComponent' ;

Como incluo CSS de 3'rd Party em meus componentes?

Existem algumas opções para fazer isso:

1. Não inclua CSS de 3'rd e apenas diga aos seus usuários para fazer isso (provavelmente usando o PostCSS).
2. Inclua -o por meio de um CDN, como assim:

 @import url ( 'https://unpkg.com/@scope/package/main.min.css' );

Publicação para NPM

1. Prepare o pacote para publicar:

npm run package

2. Publique o pacote:

 cd package
npm run publish

• Criando e publicando pacotes públicos com escopo escopo
• Criando e publicando pacotes públicos não escondidos