Introduction to Svelte-Web Components to achieve cross-frame component reuse (2)

using Svelte's development VUE and React custom cell components supported

In the previous section, we learned together how to use Svelte to encapsulate Web Component, so as to realize the use of spreadsheet components between different pages.

Svelte packaged components are reused across frameworks, and the benefits are obvious:

1. Use framework to develop, easier to maintain

2. There is no framework dependency after release, and it can be used in any other scenarios

3. The published Web Component is small in size

These unique advantages give Svelte a special advantage in component packaging. Before we learned how to use spreadsheet components freely between different pages. So what if you want to really use the same form component across different frameworks?

Then we continue with the content of the previous section and continue to introduce to you how to cross-frame the spreadsheet component to make the spreadsheet component usable in the native environment and various frameworks after the electronic form component is packaged.

Cross-frame component development

1. Use Svelte to develop AutoComplete Web Component

Svelte has a very rich ecology today. By searching, we can find a component of AutoComplete developed by Svelte, address: https://github.com/pstanoev/simple-svelte-autocomplete .

Let's fork this project together, make some simple modifications, and let him generate a Web Component (here, everyone needs to pay attention to whether the content of the three-party formation agreement includes operation modification release).

1. Modify src/SimpleAutocomplete.svelte

Add in the head:

<svelte:options tag="auto-complete" />

At the same time, modify items in the code to add some default information:

  // the list of items  the user can select from
  export let items = [];
  items = ["White", "Red", "Yellow", "Green", "Blue", "Black"];

2. Modify rollup.config.js

Configure customElement in plugins

The result after setting is:

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

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

3. Run npm run build to package and generate Web Component

After running, two files, index.js and index.mjs, will be generated in the root directory. js is supported by UMD and mjs is the ES version. We will directly use the index.js file supported by UMD.

Two, frameless page test

  <div id="ss" style="height: 600px;"></div>
  <script type="text/javascript" src="index.js"></script>

  <script type="text/javascript">
    window.onload = function(){
      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
      var sheet = spread.getActiveSheet();
      sheet.setCellType(1, 1, new AutoComplateCellType())
    }

    function AutoComplateCellType() {
      }
      AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
      AutoComplateCellType.prototype.createEditorElement = function () {
        var ac = document.createElement('auto-complete');
        ac.setAttribute("gcUIElement", "gcEditingInput");
        return ac;
      }
      AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
          if (editorContext) {
              editorContext.style.width=cellRect.width;
              editorContext.style.height=32;
              editorContext.parentElement.parentElement.style.overflow = "visible";
              return {height: 32};
          }
      };
      AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
          if (editorContext) {
              return editorContext.value;
          }
      };
      AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
          if (editorContext) {
            editorContext.value = value
          }
      };
  </script>

Introduce the generated index.js to create AutoComplateCellType, set it to the single grid, the effect is as shown in the figure:

Three, use in the Vue framework
Introduce AutoComplate Web Component through import

<script>
  import  '@grapecity/spread-sheets-vue'
  import '../static/index' // 复制打包的index.js到static文件夹下
  import * as GC from "@grapecity/spread-sheets"
  
      function AutoComplateCellType() {
        }
        AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
        AutoComplateCellType.prototype.createEditorElement = function () {
          var ac = document.createElement('auto-complete');
          ac.setAttribute("gcUIElement", "gcEditingInput");
          return ac;
        }
        AutoComplateCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
            if (editorContext) {
                editorContext.style.width=cellRect.width;
                editorContext.style.height=32;
                editorContext.parentElement.parentElement.style.overflow = "visible";
                return {height: 32};
            }
        };
        AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
            if (editorContext) {
                return editorContext.value;
            }
        };
        AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
            if (editorContext) {
              editorContext.value = value
            }
        };

  export default {
//    name: 'sample-header'
    methods:{
      workbookInitialized(spread){
        var sheet = spread.getActiveSheet();
        sheet.setCellType(1, 1, new AutoComplateCellType())
      }
    }
  }

</script>

Note here that after the packaged index.js is introduced, an error about TS will be reported, just delete the following content in the file.

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion

The way is the same in React, so I won’t go into details here.

If you have other ideas or implementation ideas, you are also welcome to comment and exchange.