Fix: Reactive El Variables; Refactor: Rehaul of State Dependencies; Feat: Parent El Variables

[jorenrui]

Description

• Made element-scoped variables reactive
• Made a more efficient way of updating dependencies based on the updated state.
• Added parent el variables or the :parent directive.

Element Variables

If you want to use the variable across an element's attributes and events, you can use el.:

<script>
  items = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']
</script>

<button
  :load="el.selectedItem = items.pop()"
  :click="el.selectedItem = items.pop()"
  :text="`Last Item: ${el.selectedItem}`"
>
  Click Me
</button>

Like the example above, :load can be used to set the initial value of the variable.

Parent Element Variables

Adding a :parent attribute to an element will allow you to access its variables from its children using parent. variables.

A children's parent. variable is the same as the parent's el. variable.

<div id="accordion" class="accordion" :parent>
  <!-- Parent Element -->

  <!-- Children Elements -->
  <!-- parent.variable == #accordion's el.variable -->
  <section
    class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
  >
    <button
      :click="parent.activeSection = 'about'"
      class="cursor-pointer font-bold p-4"
    >
      About Us
    </button>
    <div
      class="p-4 pt-2 overflow-hidden hidden"
      :class="parent.activeSection =='about' ? 'block' : 'hidden'"
    >
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod.
    </div>
  </section>

  <section
    class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
  >
    <button
      :click="parent.activeSection = 'contact'"
      class="cursor-pointer font-bold p-4"
    >
      Contact Us
    </button>
    <div
      class="p-4 pt-2 overflow-hidden"
      :class="parent.activeSection =='contact' ? 'block' : 'hidden'"
    >
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod.
    </div>
  </section>

  <section
    class="grid transition-all border-gray-300 border rounded hover:bg-gray-100"
    :class="parent.activeSection =='team' ? 'active' : ''"
  >
    <button
      :click="parent.activeSection = 'team'"
      class="cursor-pointer font-bold p-4"
    >
      Team 3
    </button>
    <div
      class="p-4 pt-2 overflow-hidden"
      :class="parent.activeSection =='team' ? 'block' : 'hidden'"
    >
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod.
    </div>
  </section>
</div>

Summary by CodeRabbit

• New Features
  • Added a new method to check if an entity exists within the document.
  • Introduced a State class for managing entities and their dependencies more effectively.
• Enhancements
  • Improved event handling attributes for better scoping and clarity.
  • Enhanced error handling in attribute evaluation methods to prevent crashes.
• Refactor
  • Refined logic related to mouse events and styling in the Multi Select section.
  • Overhauled the creation and insertion process of elements in the Tonic Dialog section.
  • Streamlined entity variable tracking and dependency management for efficiency.
• Bug Fixes
  • Fixed text display issue by changing "Update and Reload" to "Loading..." in a specific heading.

📦 Published PR as canary version: 1.0.1-canary.11.a129aa8.0

✨ Test out this PR locally via:

npm install tonic-minijs@1.0.1-canary.11.a129aa8.0
# or 
yarn add tonic-minijs@1.0.1-canary.11.a129aa8.0

[coderabbitai]

Warning

Rate Limit Exceeded

@jorenrui has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 39 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between b216062 and 0008af8.

Walkthrough

The updates across various files focus on enhancing event handling, error management, state management, and code clarity. Key improvements include the use of scoped variables for event attributes, streamlined entity management with the introduction of the State class, and robust error handling mechanisms. These changes aim to improve the codebase's maintainability, readability, and resilience against errors, ensuring a smoother and more reliable application experience.

Changes

Files	Summary
demo/observer.html, index.html	Updated event handling attributes for better scoping and clarity in observer.html. Refactored text, mouse events, styling, and element handling in various sections in index.html.
lib/entity.js, lib/entity/events.js, lib/entity/attributes.js	Enhanced entity management with new methods, efficient variable tracking, unique identifier generation, and dependency cleanup in entity.js. Added logic for entity fetching and event attribute evaluation in entity/events.js. Improved error handling with try-catch blocks and element existence checks in entity/attributes.js.
lib/generators/lexer.js	Introduced a TODO comment for improving expression handling in lexer.js to enhance support for various expressions.
lib/main.js	Streamlined state management and variable tracking, replaced methods with state object equivalents, and updated variable and method references in main.js.
lib/state.js	Introduced the State class for managing entities, states, and dependencies, utilizing Proxies for state management and dependency tracking in state.js.
readme.md	Added support for reactive state, introduced an experimental :each loop, enabled saving variables in local storage, clarified global variable behavior, showcased variable methods, and more in readme.md.

🐇🎉
Changes abound, the code does leap,
Through lines and functions, a bound so steep.
A rabbit pranced, in the moon's soft glow,
With each update, our progress does show.
So here's to the code, refined and bright,
Guiding our path, like stars at night.
🌟📜🐾

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 22

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 2a0246a and d2a02d1.

Files selected for processing (6)

• demo/observer.html (1 hunks)
• index.html (3 hunks)
• lib/entity.js (7 hunks)
• lib/entity/attributes.js (1 hunks)
• lib/main.js (4 hunks)
• lib/state.js (1 hunks)

Additional comments: 6

lib/main.js (2)

• 4-4: Missing import validation for State. Ensure that State is correctly imported and exists in the specified path.
• 12-12: Instantiation of State class without passing required parameters or initial configuration. Verify if State constructor needs arguments.

demo/observer.html (1)

• 17-19: Usage of el.isHovered assumes el is defined in the scope. Verify that el is correctly scoped and accessible in this context.

lib/state.js (2)

• 8-15: Constructor initializes multiple Maps without validation or pre-population logic. Confirm if initial state setup is required.
• 44-47: Potential issue with adding duplicate entity IDs to dependencies. Use of Set is correct, but ensure that logic correctly handles all cases.

lib/entity.js (1)

• 29-31: isExists method relies on document.documentElement.contains. Ensure this method accurately reflects the entity's existence in all use cases.

[coderabbitai]

Review Status

Actionable comments generated: 1

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between d2a02d1 and 789f5c1.

Files selected for processing (9)

• demo/observer.html (1 hunks)
• index.html (6 hunks)
• lib/entity.js (7 hunks)
• lib/entity/attributes.js (2 hunks)
• lib/entity/events.js (4 hunks)
• lib/generators/lexer.js (1 hunks)
• lib/main.js (5 hunks)
• lib/state.js (1 hunks)
• readme.md (3 hunks)

Files skipped from review as they are similar to previous changes (5)

• demo/observer.html
• index.html
• lib/entity/attributes.js
• lib/main.js
• lib/state.js

Additional comments: 14

lib/entity/events.js (4)

• 39-40: Ensure that MiniJS.state.entities.values() is always expected to return a valid iterable collection to avoid runtime errors.
• 74-74: The explicit call to this.evaluate(':load') might not be necessary if :load events are automatically handled elsewhere. Confirm its necessity.
• 84-84: Skipping the :load attribute in event bindings is correct, but ensure there's a mechanism to handle :load events elsewhere or on initial load.
• 232-240: The separation of elVariables and variables based on the attribute prefix is a good approach for scoping. However, ensure that this.base.variables correctly populates and differentiates between el. prefixed variables and others.

lib/entity.js (4)

• 32-34: The isExists method correctly checks if the entity's element is in the document. This is a good approach for validating entity existence.
• 99-112: The handling of el state variables introduces a structured approach to managing scoped variables. Ensure that MiniJS.state.create and MiniJS.state.addVariable are optimized for performance and avoid unnecessary re-creations or duplications.
• 128-134: The logic for handling non-el and non-parent variables seems correct, but ensure that MiniJS.tryFromLocal is used appropriately and that it doesn't introduce side effects or performance issues.
• 204-229: The dispose method's enhancements for cleaning up entities and variables are well-structured. However, ensure that the cleanup process doesn't inadvertently remove entities or variables that are still in use elsewhere.

readme.md (6)

• 26-26: The note on only supporting non-nested objects for reactive state is clear and important for users to understand the current limitations.
• 183-185: The caution against using the experimental :each loop in production is important for setting the right expectations. Ensure that this feature is thoroughly tested before recommending for production use.
• 188-200: The explanation on variables saved in Local Storage is clear. However, ensure that the implementation details and limitations are well-documented elsewhere in the codebase or documentation.
• 216-228: The section on local variables using const and let is a good addition for clarifying scope within event handlers. Ensure that examples provided are tested and work as expected in all supported browsers.
• 239-241: The demonstration of element variables using el. is clear and provides a good example of scoped variable usage. Ensure that the :load and :click events are correctly implemented to support this feature.
• 251-315: The explanation of parent element variables and their usage is comprehensive. Ensure that the implementation supports the described behavior accurately, especially the equivalence of parent. and el. variables.

[coderabbitai]

Review Status

Actionable comments generated: 7

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 789f5c1 and b216062.

Files selected for processing (2)

• lib/entity/events.js (5 hunks)
• readme.md (3 hunks)

Files skipped from review as they are similar to previous changes (1)

• lib/entity/events.js

[github-actions]

🚀 PR was released in v1.0.1 🚀