feat: add block props and block js scripts
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
propskeyword.
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.
WIP
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.
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)