Coder Social home page Coder Social logo

Respect whitespace about marko HOT 6 CLOSED

marko-js avatar marko-js commented on June 22, 2024
Respect whitespace

from marko.

Comments (6)

patrick-steele-idem avatar patrick-steele-idem commented on June 22, 2024

Hi @mattfysh, Marko will remove unnecessary whitespace based on some builtin rules, by default. These rules are partially based on the rules that browser's use to normalize whitespace and partially based on the goal of allowing nicely indented markup. These rules are as follows:

  • For whitespace before the first child element: text = text.replace(/^\n\s*/g, '')
  • For whitespace after the last child element: text = text.replace(/\n\s*$/g, '')
  • For whitespace between child elements: text = text.replace(/^\n\s*$/g, '')
  • Any contiguous sequence of whitespace characters is collapsed into a single whitespace character

FYI, the whitespace removal happens in the following code:
marko/compiler/TextNode.js:112

It's possible to disable whitespace removal on a per-element basis using a special attribute applied to a parent element. It's also possible to disable all whitespace removal by changing an option for the compiler. Unfortunately the docs are currently lacking for both these options so I'll describe them below for now:

Option 1) Disable whitespace removal using the c-whitespace attribute:

<div c-whitespace="preserve">
    <my-first-tag>
    <my-second-tag>
</div>

Option 2) Disable all whitespace removal by changing a compiler option

require('marko/compiler').defaultOptions.preserveWhitespace = true;

Also, you can avoid whitespace removal by avoiding the new line character. For example, the following whitespace between the elements will be preserved:

<my-first-tag> <my-second-tag>

I'll work on adding some formal documentation on the whitespace removal rules. Do these options meet your needs or are you looking for a different solution?

from marko.

patrick-steele-idem avatar patrick-steele-idem commented on June 22, 2024

@mattfysh, I added some documentation to clarify how Marko deals with whitespace:
https://github.com/raptorjs/marko#whitespace

Please let me know what you think.

Thanks,
Patrick

from marko.

philidem avatar philidem commented on June 22, 2024

Perhaps we should add a tag that can be used to enable preservation of whitespace.

For example, something like this:

<preserve-whitespace>
<my-first-tag>
<my-second-tag>
</preserve-whitespace>

Sometimes there isn't a convenient parent tag to add the c-whitespace="preserve" attribute

from marko.

patrick-steele-idem avatar patrick-steele-idem commented on June 22, 2024

I agree regarding introducing a <preserve-whitespace> tag. I have added Issue #11 to the backlog.

from marko.

patrick-steele-idem avatar patrick-steele-idem commented on June 22, 2024

Marking issue as closed since additional docs were added clarifying the whitespace rules for Marko. If there are still issues please let us know. Thanks.

from marko.

ivanfilhoz avatar ivanfilhoz commented on June 22, 2024
require('marko/compiler').defaultOptions.preserveWhitespace = true;

Sorry to reopen an old issue, but how to set this option with marko/express?

from marko.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.