Avoid copying zag hook

[selenil]

Instead of copying a bunch of JS files to the user’s project in order to use ZagHook, we should keep all those files in the library and provide a createZagHooks function that returns the hook and users can import it directly from SaladUI.

The next steps are to figure out how to download the source code of Zag packages, as they depend on other core packages, and how to support the --as-lib option because, in that case, users won't use salad.add and will need to manually install Zag packages.

One solution to both problems is to bundle SaladUI with all Zag packages pre-installed to avoid downloads, but that would require users to include code they aren’t using. We need another solution here.

Summary by Sourcery

Introduce the createZagHook function to provide the hook directly from SaladUI. Update the component initialization to use the provided components modules. Install Zag packages as dependencies.

New Features:

• Provide a createZagHook function in SaladUI to access the hook directly.

Tests:

• Updated component tests to use the new createZagHook function.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request refactors how Zag components are integrated into SaladUI. Instead of copying JS files to the user's project, the library now provides a createZagHook function that users can import directly from SaladUI. This simplifies the integration process and keeps all necessary files within the library.

Sequence diagram: New Zag hook initialization process

sequenceDiagram
    participant U as User App
    participant S as SaladUI
    participant Z as Zag Components

    U->>S: Import createZagHook
    U->>Z: Import Zag components
    U->>S: createZagHook(components)
    S-->>U: Return ZagHook
    Note over U: Register ZagHook in LiveSocket
    U->>U: new LiveSocket(..., {hooks: {ZagHook}})

Loading

Class diagram: Component class structure

classDiagram
    class Component {
        +el: Element
        +context: Object
        +componentsModules: Object
        +cleanupFunctions: Map
        +prevAttrsMap: WeakMap
        +constructor(el, context, componentsModules)
        +init()
        +render()
        +destroy()
        -initComponent()
        -initService()
        -initApi()
    }
    note for Component "Modified to accept componentsModules parameter"

Loading

File-Level Changes

Change	Details	Files
Introduce createZagHook function	Created a new createZagHook function in assets/zag/index.js that returns a LiveView hook. Modified the Component class in assets/zag/component.js to accept a componentsModules argument in the constructor. Removed the ZagHook.js file.	assets/zag/index.js assets/zag/component.js
Modify salad.add task to use the new createZagHook function	Removed the logic that copies Zag files to the user's project. Modified the setup_zag_integration function to print instructions on how to use the createZagHook function. Removed the logic that installs the zag package using npm.	lib/mix/tasks/salad.add.ex
Update package.json	Added @zag-js/types as a dependency.	assets/package.json

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @selenil - I've reviewed your changes - here's some feedback:

Overall Comments:

• The install_zag_package/1 function is left unimplemented with just a TODO. Consider implementing this critical functionality before merging, or split this into two PRs - one for the architectural changes and another for the package installation feature.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}