svelte

• sveltejs/svelteGitHubsveltejs/sveltesveltejs/svelte · 响应式、非 VDOM · 有点像 React+Vue 的结合体 · 无 Runtime - 无依赖 · bundle 后 11k - 已包含基础 svelte 组件 · min 后 3k · svelte/internal 可以作为外部依赖 - bundle - 9k, min -2k笔记：svelte
  • 响应式、非 VDOM
  • 有点像 React+Vue 的结合体
  • 无 Runtime - 无依赖
    • bundle 后 11k - 已包含基础 svelte 组件
    • min 后 3k
    • svelte/internal 可以作为外部依赖 - bundle - 9k, min -2k
  • 类 Vue
    • 单文件模式
    • 事件属性绑定方式
  • 类 React
    • 状态处理
    • 类 JSX 语法
  • compiler 能力非常强 - 大部分 svelte 的能力是编译器底层支持的
    • 实际代码顺序不一定是执行的代码顺序
    • 语法直观
  • 内置状态管理
  • 内置 motion 处理 - tweend, spring
  • 内置转换处理 - fade, fly, slide, crossfade
  • 内置动画 - flip
  • CSS 样式集成度很高
  • $: label 会 watch 该语句用到的变量 - 变化会从新执行 - reactive - 核心特性
  • 支持 context 概念 - setContext(key,{}), getContext(key)
    • 非 reactive - 可以包含 store 来实现
  • 通过 export let prop 暴露组件属性
• 参考
  • sveltejs/kitGitHubsveltejs/kit
    • 类似 NextJS 之于 React
    • 底层基于 Vite
  • matyunya/smelteGitHubmatyunya/smelte
    • material components + Tailwind CSS
• 集成
  • webstorm 有 svelte 插件

<script>
  $: name = 'world';
</script>

<input bind:value="{name}" />
<h1>Hello {name}!</h1>

import App from './index.svelte';

// 挂载到 Dom
new App({
  target: document.body,
  props: {
    name: 'Wener',
  },
});

# typescript check
npx svelte-check

Rollup

yarn add -D svelte rollup-plugin-svelte svelte-preprocess rollup rollup-plugin-terser @rollup/plugin-{typescript,node-resolve,commonjs}

Packagessveltenpm PackagesvelteNPMrollup-plugin-sveltenpm Packagerollup-plugin-svelteNPMsvelte-preprocessnpm Packagesvelte-preprocessNPMrollupnpm PackagerollupNPMrollup-plugin-tersernpm Packagerollup-plugin-terserNPM@rollup/plugin-{typescript,node-resolve,commonjs}npm Package@rollup/plugin-{typescript,node-resolve,commonjs}NPM

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import sveltePreprocess from 'svelte-preprocess';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.ts',
  output: [
    {
      file: 'public/build/bundle.js',
      format: 'iife',
      name: 'app',
      sourcemap: true,
    },
    {
      file: 'public/build/bundle.min.js',
      format: 'iife',
      name: 'app',
      sourcemap: true,
      plugins: [terser()],
    },
  ],
  // external:['svelte/internal'],
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      include: 'src/**/*.svelte',
    }),
    resolve({ browser: true, dedupe: ['svelte'] }),
    commonjs(),
    typescript(),
  ],
};

• 更复杂的 rollup.configGitHub Issuesveltejs/language-tools#161

typescript

declare module '*.svelte' {
  const value: any;
  export default value;
}

@tsconfig/svelte

• tsconfig/basesGitHubtsconfig/bases

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Svelte",
  "_version": "2.0.0",

  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es2017",
    /**
      Svelte Preprocess cannot figure out whether you have a value or a type, so tell TypeScript
      to enforce using `import type` instead of `import` for Types.
     */
    "importsNotUsedAsValues": "error",
    "isolatedModules": true,
    /**
      To have warnings/errors of the Svelte compiler at the correct position,
      enable source maps by default.
     */
    "sourceMap": true,

    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

语法

• $: 表示状态 reactive
• $<变量名> 获取 reactive 变量值 - 类似订阅状态变化
• $$props 所有 props
• $$restProps 处理剩下的 props
• 控制流语法 {#if }{:else}{/if}
  • if(
    ), each, await(
    ,
    ), key
  • {#each things as thing (thing.key)} 添加 key 的方式 - key 可以为整个对象 - 内部使用 Map
• {@html } - 注入 html 内容
• {@debug } - console.log
• on
  • forward 事件
• on
  ={handler}
  • 事件可多次监听
• on
  |modifers={handler}
  • preventDefault
  • stopPropagation
  • passive
  • nonpassive
  • capture
  • once
  • self
  • trusted
• bind
  ={variable}
  • bind
    - 直接绑定 value 到 value
  • bind
    ={variable}
  • bind
    ={dom_node}
• class
  ={value}
• use
• use
  ={parameters}
  • 绑定生命周期到 action 函数返回对象
  • destroy
  • update
• transition
  • in/out
  • in/out
    ={params}
  • in/out
    |local
  • in/out
    |local={params}
    • fn
      • introstart
      • introend
      • outrostart
      • outroend
• transition
  ={params}
• transition
  |local
• transition
  |local={params}
• animate
• animate
  ={params}
• --style-props="anycssvalue"
  • 传递 css 变量
• <slot name="" prop={value}></slot>
• $$slots
• <svelte:window on:keydown={handleKeydown}/>
  • body
  • head
  • options - compiler options
  • fragment
• 特殊绑定属性
  • clientWidth, clientHeight, offsetWidth, offsetHeight
• 生命周期
  • onMount, onDestroy, beforeUpdate, afterUpdate
  • tick - resolve pendding state change
• store - 全局，类似 pmndrs/zustandGitHubpmndrs/zustandpmndrs/zustand 是什么？ · out of tree 状态管理 · 可外部查询、修改、订阅 · 可多个渲染树使用 · 支持 react concurrency · Context 可选 · 默认全局 store 单例 · 可在其它框架使用 - 不依赖 react笔记：zustand
  • 构造
    • writable
    • readable(initial,(set)=>{return ()=>{/*cleanup*/}})
    • derived($store,selector)
  • 方法
    • update, set, subscribe
  • 语法糖
    • $count - 等同于针对 count store 创建一个变量 $count, 并 subscribe 更新
• 特殊元素
  • slot
  • svelte
    - 使用当前组件 - 类似递归调用 - 因为 svelte 组件没有名字，需要使用特殊方法引用
  • svelte
    - 动态组件
  • svelte
    - 监听窗口事件
  • svelte
  • svelte
    - 添加 额外 head 元素
  • svelte
    - 编译器选项
    • immutable
    • accessors
    • namespace
    • tag
  • svelte

import { onDestroy } from 'svelte';

export function onInterval(callback, milliseconds) {
  const interval = setInterval(callback, milliseconds);

  onDestroy(() => {
    clearInterval(interval);
  });
}

<!-- module 维度代码 - 类似 react 组件里的全局代码 -->
<script context="module">
	let current;
  export function stopAll(){}
</script>

<!-- 当 user 变化的时候触发 debugger -->
{@debug user}