fix: strip extraneous linebreaks in pretty dom #45

KonnorRogers · 2023-01-14T21:38:12Z

@CreativeTechGuy I think you'll like this much more!!

Heres an example three shadow roots deep:

Before

<body>
  <div>
    <triple-shadow-roots>
      <ShadowRoot>


        <nested-shadow-roots>
          <ShadowRoot>


            <duplicate-buttons>
              <ShadowRoot>


                <slot
                  name="start"
                />


                <button>
                  Button One
                </button>


                <br />


                <slot />


                <br />


                <button>
                  Button Two
                </button>


                <slot
                  name="end"
                />


              </ShadowRoot>
            </duplicate-buttons>


          </ShadowRoot>


        </nested-shadow-roots>


      </ShadowRoot>
    </triple-shadow-roots>
  </div>
</body>

After

<body>
  <div>
    <triple-shadow-roots>
      <ShadowRoot>
        <nested-shadow-roots>
          <ShadowRoot>
            <duplicate-buttons>
              <ShadowRoot>
                <slot
                  name="start"
                />
                <button>
                  Button One
                </button>
                <br />
                <slot />
                <br />
                <button>
                  Button Two
                </button>
                <slot
                  name="end"
                />
              </ShadowRoot>
            </duplicate-buttons>
          </ShadowRoot>
        </nested-shadow-roots>
      </ShadowRoot>
    </triple-shadow-roots>
  </div>
</body>

No, I have no idea why these extra spaces popup...since it only affects shadow roots I'm kind of confused...perhaps something in serialization? Idk. But it works now.

CreativeTechGuy · 2023-01-15T00:40:06Z

src/pretty-shadow-dom.ts

+
+function removeDuplicateNewLines(str: string) {
+  let final = str.replace(
+    new RegExp(`${findWhiteSpace}.*${findWhiteSpace}{2,}`, "g"),


Would this mess with a string like abc ? (<space>abc<space><space>)? The .* part is what raised red flags in my head.

It’s testing against line breaks + empty space first, in testing with template literals it doesn’t seem to affect it.

CreativeTechGuy · 2023-01-15T00:41:03Z

Awesome thank you!

KonnorRogers added 2 commits January 13, 2023 17:00

working on printer whitespace

654c70f

working on printer whitespace

80fd4b5

KonnorRogers force-pushed the konnorrogers/fix-whitespace-in-pretty-dom branch from 4df77ad to 9970a57 Compare January 14, 2023 21:38

fix: strip extraneous whitespace of elements with multiple shadow roots

0abad42

KonnorRogers force-pushed the konnorrogers/fix-whitespace-in-pretty-dom branch from 9970a57 to 0abad42 Compare January 14, 2023 21:49

KonnorRogers merged commit 863475c into main Jan 14, 2023

KonnorRogers deleted the konnorrogers/fix-whitespace-in-pretty-dom branch January 14, 2023 21:52

CreativeTechGuy reviewed Jan 15, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: strip extraneous linebreaks in pretty dom #45

fix: strip extraneous linebreaks in pretty dom #45

KonnorRogers commented Jan 14, 2023

CreativeTechGuy Jan 15, 2023

KonnorRogers Jan 15, 2023

CreativeTechGuy commented Jan 15, 2023

fix: strip extraneous linebreaks in pretty dom #45

fix: strip extraneous linebreaks in pretty dom #45

Conversation

KonnorRogers commented Jan 14, 2023

CreativeTechGuy Jan 15, 2023

Choose a reason for hiding this comment

KonnorRogers Jan 15, 2023

Choose a reason for hiding this comment

CreativeTechGuy commented Jan 15, 2023