Invalid HTML attributes get removed by BeautifulSoup

maximdeclercq commented 3 years ago

Some Vue attributes like @click are not working because I think they get removed by BeautifulSoup while parsing. A workaround is to use v-on: right now because that attribute starts with a letter.

maximdeclercq commented 3 years ago

Might have to use a different parser than lxml, e.g. html5lib. See this paragraph. This might also solve the issue with the head tag that @krystofer47 was having in #6. Maybe we can use html5lib for the root component and html.parser for subcomponents?

maximdeclercq commented 3 years ago

After testing the various parser, my above theory was correct. html5lib should be used for the root component and html.parser for the other components to avoid wrapping them in html tags.

from bs4 import BeautifulSoup

template = '''
    <div class="d-flex">
        <button class="mx-2 btn btn-info" @click="count -= 1"></button>
        <h3>[[ count ]]</h3>
        <button class="mx-2 btn btn-info" @click="count += 1"></button>
    </div>
'''

print(BeautifulSoup(template, 'xml').prettify())
# <?xml version="1.0" encoding="utf-8"?>
# <div class="d-flex">
#  <button class="mx-2 btn btn-info">
#   @click="count -= 1"&gt;
#  </button>
#  <h3>
#   [[ count ]]
#  </h3>
#  <button class="mx-2 btn btn-info">
#   @click="count += 1"&gt;
#  </button>
# </div>

print(BeautifulSoup(template, 'lxml').prettify())
# <html>
#  <body>
#   <div class="d-flex">
#    <button class="mx-2 btn btn-info">
#    </button>
#    <h3>
#     [[ count ]]
#    </h3>
#    <button class="mx-2 btn btn-info">
#    </button>
#   </div>
#  </body>
# </html>

print(BeautifulSoup(template, 'html5lib').prettify())
# <html>
#  <head>
#  </head>
#  <body>
#   <div class="d-flex">
#    <button @click="count -= 1" class="mx-2 btn btn-info">
#    </button>
#    <h3>
#     [[ count ]]
#    </h3>
#    <button @click="count += 1" class="mx-2 btn btn-info">
#    </button>
#   </div>
#  </body>
# </html>

print(BeautifulSoup(template, 'html.parser').prettify())
# <div class="d-flex">
#  <button @click="count -= 1" class="mx-2 btn btn-info">
#  </button>
#  <h3>
#   [[ count ]]
#  </h3>
#  <button @click="count += 1" class="mx-2 btn btn-info">
#  </button>
# </div>

maximdeclercq / django-vue

Invalid HTML attributes get removed by BeautifulSoup #7