krakenjs / jsx-pragmatic Goto Github PK

View Code? Open in Web Editor NEW

185.0 13.0 29.0 532 KB

Build JSX structures, then decide at runtime which pragma you want to use to render them.

License: Apache License 2.0

JavaScript 99.84% Shell 0.16%

hacktoberfest

jsx-pragmatic's People

Contributors

Stargazers

Watchers

jsx-pragmatic's Issues

How to handle events？

Thanks for great project!

If only we can render jsx to html,so what is the different with string template.

Typescript support

Is there a Typescript definition available for this module?

Children as second argument out of line with API

Isn't this out of step with the React API where children is on the props variable?

https://reactjs.org/docs/composition-vs-inheritance.html#containment

Is there any particular reason this decision was made and will it persist?

Without library?

You wrote:
"We're not tying ourselves to any particular framework yet"

but in Hello World I received following error:
Uncaught SyntaxError: Unexpected token <

See:
https://next.plnkr.co/edit/D2PlLSAmFQSW85mM?preview

What is necessary to do to make the most simply Hello world directly in the browser?

Thanks.

Children can only be passed as attributes

First of all thank you, this is a really interesting and promising library.

I'm trying to get the hang of the library and was setting up some basic components. Unless I'm messing something, children can only be passed as attributes:

For Example:
<ActionItem className="ASD DSA SDA" ariaLabel="Download" children="file_download" />

Works and children inside action item is "file_download"

<ActionItem className="ASD DSA SDA" ariaLabel="Download">file_download</ActionItem>

does not work, children is undefined.

Here is ActionItem

import { node } from 'jsx-pragmatic';

interface DestructTypes {
  className: string;
  ariaLabel: string;
  children: string | Element;
};

export default function ActionItem({ className, ariaLabel, children }: DestructTypes) {
  const classes = "material-icons mdc-top-app-bar__action-item " + className;
  console.log(children);
  return (
    <a
    href="#"
    className={classes}
    aria-label={ariaLabel}>
      {children}
    </a>
  );
}

Thanks

render with container id throws TypeError

Hey, I am trying to add some html to a div container like in the paypal checkout with the button. I used the demo for that but unfortunately its not working.

index.html

<head>
	<title>JSX Pragmatic Dev Demo</title>
</head>

<body>
  <div id="test"></div>
  <script src="/jsx-pragmatic-demo.js"></script>
</body>

index.jsx:

/* @flow */
/* @jsx node */

import { node, dom } from '../../src';

export function login() {

  return (
    <section>
      <input type="text" placeholder="email" />
      <input type="password" placeholder="password" />
      <button>Log In</button>
    </section>
  );
}

// console.log(login());
login().render('#test')

Output

Uncaught TypeError: renderer is not a function
    at ElementNode._proto.render (VM1088 jsx-pragmatic-demo.js:97)
    at Module.<anonymous> (VM1088 jsx-pragmatic-demo.js:257)
    at __webpack_require__ (VM1088 jsx-pragmatic-demo.js:13)
    at VM1088 jsx-pragmatic-demo.js:61
    at VM1088 jsx-pragmatic-demo.js:62
    at VM1088 jsx-pragmatic-demo.js:2
    at VM1088 jsx-pragmatic-demo.js:3

And another question: When using with dom() I only get the code back when console.logging it. I thought it would render to to page automatically?!

Add Issue Templates for Bug, Documentation or feature Issue.

Generate pre built templates which helps to get all relevant information related to an issue and its type.
I would like to work upon the same.

@bluepnume Can I work in this issue?

This project isn't written in TypeScript, but many TypeScript users would like to use published typings. For this issue, create TypeScript typings that cover the exported functions, and contribute it back to DefinitelyTyped!

This issue is great for someone who wants to learn more about TypeScript!

className not converting to class

Hey, sorry if this is related to my other open issue...

When I use className in my jsx components, it eventually converts to classname instead of class.

Was this intended as well?

Thanks

Create a CHANGELOG.md file

Create a Changelog based on the keep a Changelog format
Update the Changelog with at least the last five commits.
Keep the Changelog updated when a new version gets released.
Use the Unreleased section to track unreleased changes.

Props of type number not working

When I use the following component with a number has property:

interface Props {
  count: number;
}
export function Hello({ count }: Props) {
    return <p>Hello world {count}</p>;
}

I get the following error:

(node:14748) UnhandledPromiseRejectionWarning: TypeError: Unrecognized node type: number
    at normalizeChildren (/node_modules/jsx-pragmatic/dist/webpack:/pragmatic/src/node.js:159:6)

Did I do something wrong? Or do I miss some settings?

krakenjs / jsx-pragmatic Goto Github PK

jsx-pragmatic's People

Contributors

Stargazers

Watchers

Forkers

jsx-pragmatic's Issues

index.html

index.jsx:

Output

Recommend Projects

Recommend Topics

Recommend Org

Jobs