Git Product home page Git Product logo

pug-as-jsx-utils's Introduction

pug-as-jsx-utils

const { pugToJsx } = require('pug-as-jsx-utils');

const result = pugToJsx(`
  div
    h1.greeting(onClick='{handleClick}')
      | Hello World, {name}!
`, { template: true });
// result
{
  "jsx": "<div>\n  <h1 className=\"greeting\" onClick={handleClick}>\n    Hello World, {name}!\n  </h1>\n</div>",
  "imports": [],
  "useThis": false,
  "variables": [
    "handleClick",
    "name"
  ],
  "jsxTemplate": "import React from 'react';\n\nexport default function(__params = {}) {\n  const { handleClick, name } = __params;\n  return (\n    <div>\n      <h1 className=\"greeting\" onClick={handleClick}>\n        Hello World, {name}!\n      </h1>\n    </div>\n);\n}\n"
}

// result.jsx
<div>
  <h1 className="greeting" onClick={handleClick}>
    Hello World, {name}!
  </h1>
</div>

// result.jsxTemplate
import React from 'react';

export default function(__params = {}) {
  const { handleClick, name } = __params;
  return (
    <div>
      <h1 className="greeting" onClick={handleClick}>
        Hello World, {name}!
      </h1>
    </div>
  );
}

pug-as-jsx-utils's People

Contributors

bluewings avatar billypon avatar

Watchers

James Cloos avatar

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.