被称为“三大框架”替代方案，Svelte 如何简化 Web 开发工作（下）

// 在stores.js内import {writable} from 'svelte/store'; // 初始值是空数组。export const dogStore = writable([]);

// 在stores.js内import {writable} from 'svelte/store'; export const dogStore = writable(initialValue, async set => {  // 订阅计数由0到1时调用。  // 计算初始值并传递给set函数。  const res = await fetch('/dogs');  const dogs = await res.json();  set(dogs);   return () => {    // 订阅计数归零时调用。  };});

<input bind:value={$someStore} />

import {readable} from 'svelte/store'; export const dogStore = readable(  [], // 初始值。  set => {    const res = await fetch('/dogs');    const dogs = await res.json();    set(dogs);    // 这里可以返回一个清理函数。  });

<script>  import {onDestroy} from 'svelte';  import {dogStore} from './stores.js';  let dogs;  const unsubscribe = dogStore.subscribe(value => (dogs = value));  onDestroy(unsubscribe);</script> <!-- 在HTML中使用dogs。 -->

<script>  import {dogStore} from './stores.js';</script> <!-- 在HTML中使用 $dogStore。 -->

<script>  import {dogStore} from './stores.js';  import Child from './Child.svelte';   const dog = $dogStore;   function changeDog() {    // 方法 #1 - 创建新对象    //dogStore.set({age: 2, breed: 'GSP', name: 'Oscar'});     // 方法 #2 - 调整并复用对象    dog.age = 2;    dog.breed = 'GSP';    dog.name = 'Oscar';    dogStore.set(dog);  }</script> <h1>Store Demo</h1><Child /><button on:click={changeDog}>Change Dog</button>

<script>  import {dogStore} from './stores.js';</script> <div>  {$dogStore.name} is a {$dogStore.breed} that is {$dogStore.age} years old.</div>

<script>  import {dogStore} from './stores.js';   // 这里需要Parens才能知道开放的大括号不是块的开头。  $: ({age, breed, name} = $dogStore);</script><div>{name} is a {breed} that is {age} years old.</div>

<script context="module">  ...</script>

<script>  import {tick} from 'svelte';  ...  // 做一些状态更改。   // 下面的内容预防tick调用后的批量更新。 await tick();   // DOM更新后做更多状态更改。  ...</script>

<script>  import {fade} from 'svelte/transition';</script> <li transition:fade>  <!-- 一些内容 --></li>

<svelte:component this = {expression} optionalProps>

<svelte:self props>

<svelte:window on:eventName={handler}>

<svelte:window bind:propertyName={variable}>

<svelte:body on:eventName={handler}>

<svelte:head>elements</svelte:head>

<svelte:options option={value} />

immutable

accessors

namespace="value"

tag="value"

{@debug var1, var2, var3}

{@debug}

{  "env": {    "browser": true,    "es6": true,    "jest": true  },  "extends": ["eslint:recommended", "plugin:import/recommended"],  "globals": {    "cy": "readonly"  },  "overrides": [    {      "files": ["**/*.svelte"],      "processor": ["svelte3/svelte3"]    }  ],  "parserOptions": {    "ecmaVersion": 2019,    "sourceType": "module"  },  "plugins": ["svelte3"],  "rules": {    "no-console": "off"   }}

"lint": "eslint --fix --quiet src --ext .js,.svelte",

"format": "prettier --write '{public,src}/**/*.{css,html,js,svelte}'",

import TodoList from './TodoList.svelte'; const app = new TodoList({target: document.body}); export default app;

<script>  import {createEventDispatcher} from 'svelte';  const dispatch = createEventDispatcher();  export let todo; // 唯一的prop</script> <style>  /* 在todo的文本上画一条线标记其完成状态。 */  .done-true {    color: gray;    text-decoration: line-through;  }  li {    margin-top: 5px;  }</style> <li>  <input    type="checkbox"    checked={todo.done}    on:change={() => dispatch('toggleDone')}  />  <span class={'done-' + todo.done}>{todo.text}</span>  <button on:click={() => dispatch('delete')}>Delete</button></li>

<script>  import Todo from './Todo.svelte';   let lastId = 0;   // 创建一个todo对象。  const createTodo = (text, done = false) => ({id: ++lastId, text, done});   let todoText = '';   // 应用程序初始有两个todo项目。  let todos = [    createTodo('learn Svelte', true),    createTodo('build a Svelte app')  ];   let uncompletedCount = 0;   // 这是"响应式声明"。  // 它保证未完成的代码在todo数组修改时被更新。  $: uncompletedCount = todos.filter(t => !t.done).length;   // 这是另一个"响应式声明"。  // 保证当uncompletedCount或todo数组更改时状态随时更新  $: status = `${uncompletedCount} of ${todos.length} remaining`;   // 创建并添加一个新的todo.  function addTodo() {    // 回想这里为何必须使用concat代替push。    todos = todos.concat(createTodo(todoText));    todoText = ''; // 清空input  }   // 删除全部标记为完成的todo。  const archiveCompleted = () => (todos = todos.filter(t => !t.done));   // 删除特定todo。  const deleteTodo = todoId => (todos = todos.filter(t => t.id !== todoId));   // 改变给定todo的状态。  function toggleDone(todo) {    const {id} = todo;    todos = todos.map(t => (t.id === id ? {...t, done: !t.done} : t));  }</script> <style>  button {    margin-left: 10px;  }   /* 从加点（·）列表中移除点。 */  ul.unstyled {    list-style: none;    margin-left: 0;    padding-left: 0;  }</style> <div>  <h2>To Do List</h2>  <div>    {status}    <button on:click={archiveCompleted}>Archive Completed</button>  </div>  <br />  <!-- 我们不想真的提交表单。       使用表单使得按下enter键时触发"Add"按钮。 -->  <form on:submit|preventDefault>    <input      type="text"      size="30"      autofocus      placeholder="enter new todo here"      bind:value={todoText}    />    <button disabled={!todoText} on:click={addTodo}>      Add    </button>  </form>  <ul class="unstyled">    {#each todos as todo}      <Todo        todo={todo}        on:delete={() => deleteTodo(todo.id)}        on:toggleDone={() => toggleDone(todo)}      />    {/each}  </ul></div>

module.exports = {  presets: [    [      '@babel/preset-env',      {        targets: {          node: 'current'        }      }    ]  ]};

module.exports = {  transform: {    '^.+  .js$': 'babel-jest',    '^.+  .svelte$': 'jest-transform-svelte'  },  moduleFileExtensions: ['js', 'svelte'],  bail: false,  verbose: true};

"test": "jest --watch src",

import {cleanup, render} from '@testing-library/svelte'; import Todo from './Todo.svelte'; describe('Todo', () => {  const text = 'buy milk';  const todo = {text};   // 卸载之前测试中挂载的所有组件。  afterEach(cleanup);   test('should render', () => {    const {getByText} = render(Todo, {props: {todo}});    const checkbox = document.querySelector('input[type="checkbox"]');    expect(checkbox).not.toBeNull(); // 找到复选框    expect(getByText(text)); // 找到todo文本    expect(getByText('Delete')); // 找到Delete按钮  });   // 测试事件在checkbox状态更改或"Delete"按钮按下时是否fired没有捷径。    // 它们由TodoList.spec.js的测试覆盖。});

import {tick} from 'svelte';import {cleanup, fireEvent, render, wait} from '@testing-library/svelte'; import TodoList from './TodoList.svelte'; describe('TodoList', () => {  const PREDEFINED_TODOS = 2;   afterEach(cleanup);   // 它被下面的很多测试函数使用。  function expectTodoCount(count) {    return wait(() => {      // 每个todo有一个<li>根元素。      const lis = document.querySelectorAll('li');      expect(lis.length).toBe(count);    });  }   test('should render', async () => {    const {getByText} = render(TodoList);    expect(getByText('To Do List'));    expect(getByText('1 of 2 remaining'));    expect(getByText('Archive Completed')); // 按钮    await expectTodoCount(PREDEFINED_TODOS);  });   test('should add a todo', async () => {    const {getByTestId, getByText} = render(TodoList);     const input = getByTestId('todo-input');    const value = 'buy milk';    fireEvent.input(input, {target: {value}});    fireEvent.click(getByText('Add'));     await expectTodoCount(PREDEFINED_TODOS + 1);    expect(getByText(value));  });   test('should archive completed', async () => {    const {getByText} = render(TodoList);    fireEvent.click(getByText('Archive Completed'));    await expectTodoCount(PREDEFINED_TODOS - 1);    expect(getByText('1 of 1 remaining'));  });   test('should delete a todo', async () => {    const {getAllByText, getByText} = render(TodoList);    const text = 'learn Svelte'; // 第一个todo    expect(getByText(text));     const deleteBtns = getAllByText('Delete');    fireEvent.click(deleteBtns[0]); // 删除第一个todo    await expectTodoCount(PREDEFINED_TODOS - 1);  });   test('should toggle a todo', async () => {    const {container, getByText} = render(TodoList);    const checkboxes = container.querySelectorAll('input[type="checkbox"]');     fireEvent.click(checkboxes[1]); // 第二个todo    await tick();    expect(getByText('0 of 2 remaining'));     fireEvent.click(checkboxes[0]); // 第一个todo    await tick();    expect(getByText('1 of 2 remaining'));  });});

"cy:open": "cypress open","cy:run": "cypress run",

fixtures

integration

plugins

screenshots

support

const baseUrl = 'http://localhost:5000/'; describe('Todo app', () => {  it('should add todo', () => {    cy.visit(baseUrl);    cy.contains('1 of 2 remaining');    // "Add"按钮应被禁用，直到文本输入后才解除。    cy.contains('Add')      .as('addBtn')      .should('be.disabled');     // 输入todo文本。    const todoText = 'buy milk';    cy.get('[data-testid=todo-input]')      .as('todoInput')      .type(todoText);     cy.get('@addBtn').should('not.be.disabled');    cy.get('@addBtn').click();     cy.get('@todoInput').should('have.value', '');    cy.get('@addBtn').should('be.disabled');    cy.contains(todoText);    cy.contains('2 of 3 remaining');  });   it('should toggle done', () => {    cy.visit(baseUrl);    cy.contains('1 of 2 remaining');     // 找到第一个checkbox并打勾。    cy.get('input[type=checkbox]')      .first()      .as('cb1')      .click();    cy.contains('2 of 2 remaining');     // 转换同一个checkbox。    cy.get('@cb1').check();    cy.contains('1 of 2 remaining');  });   it('should delete todo', () => {    cy.visit(baseUrl);    cy.contains('1 of 2 remaining');     const todoText = 'learn Svelte'; // 第一个todo    cy.contains('ul', todoText);     // 点击第一个"Delete"按钮。    cy.contains('Delete').click();    cy.contains('ul', todoText).should('not.exist');    cy.contains('1 of 1 remaining');  });   it('should archive completed', () => {    cy.visit(baseUrl);     const todoText = 'learn Svelte'; // 第一个todo    cy.contains('ul', todoText);     // 点击"Archive Completed"按钮。    cy.contains('Archive Completed').click();    cy.contains('ul', todoText).should('not.exist');    cy.contains('1 of 1 remaining');  });});