-
Notifications
You must be signed in to change notification settings - Fork 346
feat: add block props and block js scripts #423
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft
stravo1
wants to merge
12
commits into
frappe:develop
Choose a base branch
from
stravo1:block-scripts-and-props
base: develop
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Member
Author
|
WIP |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #423 +/- ##
===========================================
- Coverage 47.88% 47.18% -0.70%
===========================================
Files 26 26
Lines 1629 1672 +43
===========================================
+ Hits 780 789 +9
- Misses 849 883 +34 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
used the rawStylesSection as a template to create the props section to maintain consistency but forgot to update the name
previously, block props relied on blockIds to manage inheritance. This caused issues when using components - each component instance generated new blockIds for its blocks, breaking prop references that still pointed to the original component blockIds. maintaining and updating these blockId dependencies became increasingly complex and error-prone. this commit removes the dependency on blockIds entirely. Props are now identified by their names, and a stack-based approach is used to resolve inherited values. the system now behaves similarly to variable scoping in programming languages - where inherited props take the value of the nearest ancestor with the same prop name in the faimly tree (block scoping in programming)
green shows that inherited prop is valid, i.e., there is an ancestor who has that prop and can be inherited while red shows that the inherited prop is invalid and no ancestor was found having that prop
… edit block scripts
have NOT intentionally put all script content in one script tag as if here is an error in one of the blockScripts then the remaining/following blockScripts also fail to execute
Member
Author
|
Remaining features:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
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:
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.