builder icon indicating copy to clipboard operation
builder copied to clipboard

feat: add block props and block js scripts

Open stravo1 opened this issue 2 months ago • 3 comments

This PR introduces block-level props and block-specific JavaScript scripts.

Each block now has two new properties: Block Script and Props.

  • Block Script: These are JavaScript code snippets associated with an individual block, unlike Client Scripts which apply to an entire page. Block Scripts make it easier to manage reactivity by eliminating the need for multiple Client Scripts and by localizing logic to the block itself.

    Within a Block Script, two special keywords are available:

    • this: Refers directly to the DOM node corresponding to the block. Example:

      this.addEventListener('click', ...)
      

      attaches an event listener to the block itself.

    • props: Provides access to the properties passed to the block. Props are discussed below.

  • Props: Props work similarly to those found in component-based JavaScript frameworks such as Vue or React. They serve as an interface between the “outside world” and the block script.

    There are three types of props:

    • static - Constant literal values.
    • dynamic - Derived from Data Scripts.
    • inherited - Passed down from parent blocks.

    As mentioned earlier, props can be accessed within the Block Script using the props keyword.

This addition brings some of the benefits of component-based frameworks into the builder. By associating scripts and props directly with blocks (and therefore components), it becomes easier to create reusable components and component libraries.

stravo1 avatar Oct 20 '25 14:10 stravo1

WIP

stravo1 avatar Oct 20 '25 14:10 stravo1

Codecov Report

:x: Patch coverage is 38.12500% with 99 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 46.54%. Comparing base (06fd541) to head (661a6bd). :warning: Report is 1 commits behind head on develop.

Files with missing lines Patch % Lines
...ilder/builder/doctype/builder_page/builder_page.py 38.12% 99 Missing :warning:
Additional details and impacted files
@@             Coverage Diff             @@
##           develop     #423      +/-   ##
===========================================
- Coverage    47.80%   46.54%   -1.26%     
===========================================
  Files           26       26              
  Lines         1638     1781     +143     
===========================================
+ Hits           783      829      +46     
- Misses         855      952      +97     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:
  • :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

codecov[bot] avatar Oct 20 '25 14:10 codecov[bot]

Remaining features:

  • [x] Standard props in Component Root Block
  • [ ] Reuse Block Scripts for Components instead of creating extra <script> tags (next iter)
  • [ ] Autocomplete in Block Script for "this" and "props" (next iter)

stravo1 avatar Nov 09 '25 05:11 stravo1