Svelte入門——Web Components實現跨框架組件複用

語言: CN / TW / HK

時間 2021-11-24 15:02:09 葡萄城技術團隊

主題: javascript pkg spreadjs svelte github npm vue.js react

Svelte 是構建 Web 應用程序的一種新方法，推出後一直不温不火，沒有繼Angular、React和VUE成為第四大框架，但也沒有失去熱度，無人問津。造成這種情況很重要的一個原因是，Svelte 的核心思想在於【通過靜態編譯減少框架運行時的代碼量】，它可以像React和VUE一樣開發，但卻沒有虛擬DOM。，使它可以Svelte可以將代碼編譯為體積小、不依賴於框架的JS代碼。

看起來滿滿優點，但因為過於靈活，導致大家無法寫出高度一致的業務代碼，以上優點並沒有在實際的大項目中得到很好的體現。

Svelte 這款框架並不完美，卻又沒有在殘酷的市場競爭中死掉，是因為它擁有一本特殊祕籍，一些使它成為其他框架無法替代的一員的功能。。

而對於 Svelte 來説，這本祕籍的名字就叫做——Web Components。

在多團隊協同完成的大項目中，各個團隊可能使用不同的框架版本，甚至不同的框架，這讓不同項目之間的組件複用變得困難。"write one，run anywhere"就是一句空話。這種情況下Svelte就變成了溝通跨越框架鴻溝的橋樑，使用Svelte開發的無框架依賴的Web Components，可以在各個框架間複用。同時，Svelte的開發方式也不像寫pure js那樣繁瑣。

下面以SpreadJS集成為例，介紹如何用Svelte開發一款spread-sheets Web Component供其他頁面複用。

創建Svelte template工程。 svelte 官方提供了template 工程，只要clone或者下載項目即可。

http://github.com/sveltejs/component-template

npx degit sveltejs/component-template my-new-component
cd my-new-component
npm install # or yarn

修改 rollup.config.js，添加 customElement: true 配置，輸出為web component組件。

添加後的rollup.config.js如下。

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';

const name = pkg.name
        .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
        .replace(/^\w/, m =&gt; m.toUpperCase())
        .replace(/-\w/g, m =&gt; m[1].toUpperCase());

export default {
        input: 'src/index.js',
        output: [
                { file: pkg.module, 'format': 'es' },
                { file: pkg.main, 'format': 'umd', name }
        ],
        plugins: [
                svelte({
                        customElement: true,
                }),
                resolve()
        ],
};

更新 src/Component.svelte，創建spread-sheets組件。

<svelte:options tag="spread-sheets" />
<script>
    import { createEventDispatcher, onMount } from 'svelte';
    // Event handling
    const dispatch = createEventDispatcher();
    export let value ="";
    $: valueChanged(value);
    function valueChanged(newValue) {
      console.log("value changed", newValue);
      if(spread){
        let sheet = spread.getActiveSheet();
        sheet.setValue(0, 0, value);
      }
    }

    let spreadHost;
    let spread;
    function dispatchEvent(name, e) {
      // dispatch(name, e);
      const event = new CustomEvent(name, {
        detail: e,
        bubbles: true,
        cancelable: true,
        composed: true, // this line allows the event to leave the Shadow DOM
      });
      // console.log(event)
      spreadHost.dispatchEvent(event);
    }
      onMount(() => {
          spread = new GC.Spread.Sheets.Workbook(spreadHost);
          let sheet = spread.getActiveSheet();
          sheet.setValue(0, 0, value);
          spread.bind(GC.Spread.Sheets.Events.ValueChanged, function(s, e){
            e.evnetName = "ValueChanged";
            dispatchEvent("changed", e);
          });
          spread.bind(GC.Spread.Sheets.Events.RangeChanged, function(s, e){
            e.evnetName = "RangeChanged";
            dispatchEvent("changed", e);
          });
      });



  </script>
  <style>
      
  </style>
  <div bind:this="{" spreadhost} style="width: 100%; height:100%"></div>

這樣我們的自定義組件就創建好了，只需要調用npm run build，就能編譯出spread-sheets 組件了。

在頁面引用組件。創建index.html頁面，並引用編譯好的js文件。同時引入spreadjs相關資源。直接使用spread-sheets標籤添加SpreadJS。



  
    <meta name="spreadjs culture" content="zh-cn">
    <meta charset="utf-8">
    <title>My Counter</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="http://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
  
  
    <!-- <spread-sheets-designer></spread-sheets-designer> -->
    <button onclick="getJSON()">GetJSON</button>
    <spread-sheets value="123" style="display:block; width: 80%; height: 400px;"></spread-sheets>


    <script src="http://demo.grapecity.com.cn/SpreadJS/WebDesigner/lib/spreadjs/scripts/gc.spread.sheets.all.14.1.3.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="/dist/index.js"></script>
    <script type="text/javascript">

      document.querySelector("spread-sheets").addEventListener("changed", function(){
        console.log(arguments)
      })

      window.onload = function(){
        document.querySelector("spread-sheets").setAttribute("value", "234");
      }

    </script>

添加後效果如下圖。

總結

雖然看起來Web Component完美解決了組件之間的複用問題，但是用Svelte 開發的Web Component也存在一些限制：比如，只能傳遞string 屬性；綁定的attribute是單向綁定，想要獲取組件內部更新值，需要綁定event獲取。

如果大家對Svelte 有更多興趣，歡迎留言交流~

「其他文章」