Giter VIP home page Giter VIP logo

fix-whitespace's Introduction

fix-whitespace

A tiny library that fixes whitespace in JavaScript template strings.

const items = [1, 2, 3]

const generateSitePage = (head, content) => fixWhitespace`
  <!DOCTYPE html>
  <html>
    <head>
      (Begin head..)${head}(..End head)
      <meta charset='utf-8'>
    </head>
    <body>
      <div id='content'>
        ${"Early insert!"} (Begin content x1..)${content}(..end content; begin content x2..)${content}(..end content!)
        ${"And back down."}
      </div>
    </body>
  </html>
`

console.log(generateSitePage(
  fixWhitespace`
    <title>Hello, world!</title>
  `,

  fixWhitespace`
    <ul>${items.map(x => `<li>${x}</li>`).join('\n')}</ul>
  `
))
<!DOCTYPE html>
<html>
  <head>
    (Begin head..)<title>Hello, world!</title>(..End head)
    <meta charset='utf-8'>
  </head>
  <body>
    <div id='content'>
      Early insert! (Begin content x1..)<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
        <!-- Further indent at end! -->(..end content; begin content x2..)<ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
          <!-- Further indent at end! -->(..end content!)
      And back down.
    </div>
  </body>
</html>

Documentation

Read the code!

fix-whitespace's People

Contributors

towerofnix avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar

fix-whitespace's Issues

Add ability to merge lines together

Ala markdown style:

paragraphify`
  This is a very long paragraph! So long I've decided to split it across
  multiple lines within the source code.

  That said I still do have other paragraphs in this call of paragraphify.
  I want to make sure these stay separate!
`

// ->

`This is a very long paragraph! So long I've decided to split it across multiple lines within the source code.

That said I still do have other paragraphs in this call of paragraphify. I want to make sure these stay separate!`

Perhaps best as a new NPM library; but that said, it does fit the purpose of "fixing whitespace".

Improve/create "API"

  • Be able to call fixWhitespace with input lines, in addition to the ability of using it as a template tag. (This would likely involve having a new, separate, function.)
  • Have a way of controlling what fixWhitespace does (e.g., don't remove trailing newlines).

I've seen a few libraries/demos do something like this:

const createWhitespaceFixer = require('fix-whitespace')
const fixWS = createWhitespaceFixer({ /* ..opts.. */ })

console.log(fixWS`
  Lorem ipsum! Magic!
  Additional lines!
  ${"Embeds!\n".repeat(5)}
  ..And other general usage of fixWS, blah, blah.
`)

edit: This would, of course, be a major version bump.

Spiritual predecessor

It took me ages to eventually stumble across this again, but: fix-whitespace is actually a spiritual successor to my earlier project, pre-fixer.js (homepage, github)!

So here's a pinned issue for future me (or anyone curious) to make it easier to get back there, instead of spending months nebulously wondering if that homepage I so clearly remember ever actually existed in the end. 🐺

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.