Normal Programming Mistake

    pug2tsx

    1.0.0 • Public • Published

    About

    Pug is a concise low-boilerplate templating language. It was originally designed for generating HTML strings.

    Pug2tsx is a utility that compiles pug templates to Typescript TSX files, enabling pug to be used for libraries like Solid.js & React in type-safe manner.

    Usage

    molosser -i <input-directory> -o <output-directory>
    

    This will generate typescript files in the output-directory which will have to be separately compiled through tsc for wrappers over it. Refer typescript documentation for other details.

    Syntax

    Tags can be composed through indentation:

    // hello.pug
    - import * as React from "react"
    
    - export const Hello = () =>
        div
            | Hello world
    

    The above is compiled to:

    // hello.tsx
    
    import * as React from "react";
    
    export const Hello = () => {
        return (
            <div>
                Hello world
            </div>
        );
    }
    

    Motivation

    • Due to popularity of React the JS ecosystem has settled on unweildy XML based syntax for component composition.
    • Haml/Jade's indented syntax is much cleaner and succint.
    • Solutions like babel-plugin-transform-react-pug are framework dependent (only React) and are not Typescript friendly.

    Differences from primary Pug compiler

    1. Pug compiles to HTML/Javascript, Molosser compiles to typescript code.

    2. Pug allows fragments of code which are not valid javascript and has some smart detection of blocks:

      - for (var x = 0; x < 3; x++)
        li item
      

      pug2tsx expects (and validates) code blocks to be valid typescript - so above usage is illegal.

    3. Following pug features are not supported, because they don't blend well with component oriented usage:

      1. Includes/Extends/Blocks - Just use ES6 imports and Composition of components
      2. Mixins - Use composition of components
      3. Filters - May be implemented someday

    TODO

    • [ ] Language server plugin
    • [ ] Webpack loader

    Contributing

    Contributions are welcome in form of bug reports and pull requests through github.

    License

    MIT

    Install

    npm i pug2tsx

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    144 kB

    Total Files

    60

    Last publish

    Collaborators

    • lorefnon