Skip to content

Keeping the hydration comments for Astro #273

@aminya

Description

@aminya

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions