spz-script

Supported layouts: logic

When to use

When you need to implement special logic with JavaScript.
When you need to process data.

Code Demonstration

Basic Usage

Scripts are executed asynchronously in a Web Worker by default, without affecting the loading of other content on the page.

In the script, only exported functions can be used externally. Exported functions need to be exported using exportFunction, where the first argument is a string representing the name of the function to export; the second argument is which function of the exported script.

In the example below, we use a custom script to implement entering multiple pieces of information, using a spz-render to render the entered information.

<spz-script layout="logic" id="custom-script" @setAge="info-result.toggleClass(class='age-class', force=true);">
  const data = {
    email: '',
    username: '',
    age: '',
  };

  function setEmail(event) {
    data.email = event.value;
    return Promise.resolve({});
  }

  function setUsername(event) {
    data.username = event.value;
    return Promise.resolve({});
  }

  function setAge(event) {
    data.age = event.value;
    return Promise.resolve({});
  }

  function getData() {
    return Promise.resolve(data);
  }

  exportFunction('setEmail', setEmail);
  exportFunction('setUsername', setUsername);
  exportFunction('setAge', setAge);
  exportFunction('getData', getData);
</spz-script>

<div class="info-input-wrapper">
  <label>Input：</label>
  <label>
    Email: <input type="text" name="email" @input-debounced="custom-script.execute(func='setEmail', params=event);info-result.render;">
  </label>
  <label>
    Username: <input type="text" name="username" @input-debounced="custom-script.execute(func='setUsername', params=event);info-result.render;">
  </label>
  <label>
    Age: <input type="number" name="age" @input-debounced="custom-script.execute(func='setAge', params=event);info-result.render;">
  </label>
</div>

<spz-render src="spz-script:custom-script.getData" layout="container" id="info-result">
  <template>
    <div class="info-result-wrapper">
      <p>Input Result：</p>
      <div>
        <p>Email: <span>${data.email}</span></p>
        <p>Username: <span>${data.username}</span></p>
        <p>Age: <span>${data.age}</span></p>
      </div>
    </div>
  </template>
</spz-render>

Properties

Property Name	Description	Type	Default Value	Required
scope	Element ID, specifies an element as the execution context for the Web Worker. When DOM operations in the `spz-script` script only involve a small part of the overall elements, this area can be set as the execution context, other area elements are inaccessible, which helps to improve script execution speed	string	`html element`	No
type	When the value is `application/javascript`, it is executed as a normal script; otherwise, the script is executed asynchronously in a Web Worker	string	-	No

Methods

execute

Executes a function within the script.

Parameter Name	Description	Type	Required
func	The name of the function to execute	string	Yes
params	Parameters to pass	Object \| Array \| string	No

Events

[functionName]

When using execute to execute a function, an event with the same name as the function is automatically triggered.

AI Summary (LLM Ready)

Component ID: spz-script
One-line purpose: Used to write asynchronous JavaScript code.
Detected attribute rows: 0
Detected method subsections: 1
Detected event subsections: 1
Top attribute names: none (needs manual completion)
Top method names: execute
Top event names: [functionName]
Reading order: start from usage/examples, then verify attributes, methods, and events.
Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/

spz-script#

#When to use

#Code Demonstration

#Basic Usage

#Properties

#Methods

#execute

#Events

#[functionName]

#AI Summary (LLM Ready)