基于SvelteKit Storybook编写组件

如何写组件？

通过storybook基于svelte、bootstrap4学些如何写自己的组件。

• 实用storybook主要便于组件的浏览、交互与测试
• 仅适用了bootstrap的样式
• 组件基于svelte开发

创建storybook目录

• src/stories-svelte
  • Introduction.stories.mdx
  • button.stories.svelte

创建组件目录

• src/components
  • index.ts
  • button
    • Button.svelte
    • index.ts

引入bootstrap

  npm i -D bootstrap@4.6.1

添加bootstrap样式

修改配置svelte.config.js，从配置中引入bootstrap.scss。

通过vite配置引入无效

preprocess: [
    preprocess({
      postcss: true,
      scss: {
        prependData: `@import "bootstrap/scss/bootstrap.scss";`,
        outputStyle: 'compressed',
      },
      preserve: ['ld+json'],
    })
  ]

修改storybook配置

必须配置后才能使用bootstrap样式，修改.storybook/main.js文件

1. 配置addons

  npm i -D @storybook/preset-scss

  "addons":[
    "@storybook/preset-scss"
  ]

2. 配置svelteOptions

"svelteOptions": {
  "preprocess": [
    sveltePreprocess({
      postcss: true,
      scss: {
        prependData: `@import "bootstrap/scss/bootstrap.scss";`,
        outputStyle: 'compressed',
      },
      preserve: ['ld+json'],
    }),
  ]
}

创建组件

在src/components目录中创建组件Button

• src/components
  • button
    • button.css
    • Button.svelte
    • index.ts
      // 组件全局入口
  • index.ts
    // 组件全局样式
  • index.scss

打开bootstrap官网组件章节，Button，将对应的class提取为变量，同时添加按钮点击事件，基于createEventDispatcher将事件分发到组件上。

主要使用了bootstrap的样式，bootstrap相关的js实现由组件实现。

  
  <!-- <button type="button" class="btn btn-primary">Primary</button> -->
  <button 
    type="button" 
    class={['btn', `${_btnPrefix}-${type}`, `btn-${size}`].join(' ')}
    aria-pressed={active}
    {..._props}
    on:click={onClick}>
    {label}
</button>

<script lang="ts">
  // export ...

  const dispatch = createEventDispatcher();

  export const onClick = (event)=>{
    dispatch('click', event);
  }
</script>

编写Story

在src/stories-svelte目录下创建Button.stories.svelte与.xmd文件

编写Story主要使用了