Skip to content
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

Keeping the hydration comments for Astro #273

Open
aminya opened this issue Mar 21, 2024 · 1 comment
Open

Keeping the hydration comments for Astro #273

aminya opened this issue Mar 21, 2024 · 1 comment

Comments

@aminya
Copy link
Contributor

aminya commented Mar 21, 2024

Astro uses a series of comments for hydration some auto-generated and some constant. However, the pattern is that they appear before an astro-island tag, and they end by astro:end. Is there a way to detect these and skip the removal of comments?

Here's an example:

  <!--xs-->
  <astro-island uid="Z1HH3k9" data-solid-render-id="s0" component-url="/_astro/UserTable.BxWprf39.js" component-export="UserTable" renderer-url="/_astro/client.DNocdGga.js" props="{}" ssr client="load" opts='{"name":"UserTable","value":true}' await-children>
      <div data-hk="s00-0-0-0-1" >
          <div >
              <div >
                  <div >
                      <div >
                          <div >
                              <button type="button" >
                                  Refresh
                              </button>
                          </div>
                          <table >
                              <thead >
                                  <tr >
                                      <th scope="col" >
                                          <div >
                                              <input id="checkbox-all" type="checkbox" >
                                              <label for="checkbox-all" >checkbox</label>
                                          </div>
                                      </th>
                                      <!--$-->
                                      <th data-hk="s00-0-0-0-3-0-0" scope="col" >id</th>
                                      <th data-hk="s00-0-0-0-3-1-0" scope="col" >name</th>
                                      <th data-hk="s00-0-0-0-3-2-0" scope="col" >email</th>
                                      <!--/-->
                                      <th scope="col" ></th>
                                  </tr>
                              </thead>
                              <tbody ></tbody>
                          </table>
                      </div>
                  </div>
              </div>
              <div >
                  <div >
                      <button >
                          Previous
                      </button>
                      <button >
                          Next
                      </button>
                      <span >
                          Showing <span >1-20</span>
                      </span>
                  </div>
              </div>
              <!--$-->
              <button data-hk="s00-0-0-0-5-1-0-0-0-0-0" type="button" aria-haspopup="dialog" aria-expanded="false" data-closed id="error-trigger"></button>
              <!--/-->
          </div>
      </div>
      <script>
          (self.$R = self.$R || {}).s0 = [],
          _$HY.r["s00-0-0-0-0"] = (s=>s[0] = [])($R.s0);
      </script>
      <!--astro:end-->
  </astro-island>

https://github.com/withastro/astro/blob/e457bb2e90f876d1ae1aa7272d37866e2583e0c2/packages/astro/src/runtime/server/render/component.ts#L322

To keep hydration working, I have disabled removeComments as of astro-htmlnano v1.4.2.
aminya/astro-plugins#30

@maltsev
Copy link
Member

maltsev commented Mar 21, 2024

Yes, it should be possible to do.

A PR is appreciated :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants