Skip to content

Adding textwrap.dedent for allowing indented html blocks #275

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

Merged
merged 5 commits into from
May 9, 2022

Conversation

sugatoray
Copy link
Contributor

@sugatoray sugatoray commented May 7, 2022

Currently any html block, which ideally should be indented properly to enhance readability, cannot be written as is. Adding textwrap.dedent helps with this and allows one to write indented html blocks as strings and later properly render the html when it is generated.

  • write indented html string
  • but dedent it while generating html
  • textwrap.dedent is meant for this purpose

Example

def create(self):
console.log("creating section")
new_child = create("section", self._id, "task bg-white my-1")
console.log("creating values")
console.log("creating innerHtml")
new_child._element.innerHTML = f"""
<label for="flex items-center p-2 ">
<input class="mr-2" type="checkbox" class="task-check">
<p class="m-0 inline">{self.render_content()}</p>
</label>
"""

The update (via this PR) makes the following work.

https://github.com/sugatoray/pyscript/blob/1f076e76df426a90ed186e5d21dc0d3361c91a43/pyscriptjs/src/pyscript.py#L261-L266

image

sugatoray and others added 2 commits May 7, 2022 01:26
- write indented html string
- but dedent it while generating html
- textwrap.dedent is meant for this purpose
@sugatoray
Copy link
Contributor Author

cc: @fpliger @philippjfr @sophiamyang

Copy link
Contributor

@verhulstm verhulstm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i like it

@sugatoray
Copy link
Contributor Author

A Note

This PR is unrelated to the following:

@verhulstm
Copy link
Contributor

good point, they are unrelated

@sugatoray
Copy link
Contributor Author

sugatoray commented May 7, 2022

@verhulstm I made a small indentation correction.

💡 Looks like you need to write the html block as follows to not let it look weird after linting is done.

	def create(self):
		...
		...
        new_child._element.innerHTML = dedent(
            f"""
            <label for="flex items-center p-2 ">
              <input class="mr-2" type="checkbox" class="task-check">
              <p class="m-0 inline">{self.render_content()}</p>
            </label>
            """
        )
		...
		...

Copy link
Contributor

@fpliger fpliger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. Thank you @sugatoray !

@fpliger fpliger added the status: accepted PR that has been reviewed and accepted label May 9, 2022
@fpliger fpliger merged commit ff3b994 into pyscript:main May 9, 2022
KOSIDOCS pushed a commit to KOSIDOCS/pyscript that referenced this pull request May 10, 2022
)

* Adding textwrap.dedent for indented html blocks
- write indented html string
- but dedent it while generating html
- textwrap.dedent is meant for this purpose

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fixed indentation

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fixed indentation

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: accepted PR that has been reviewed and accepted
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants