Preact: Any tipps on using Preact via CDN?

[kay-is]

I saw an example of using Preact directly in a browser, over CDN.

It's pretty nice for fast prototyping.

But one thing bothers me, the creation of VNodes is rather cumbersome.

I tried to use stuff like hyperscript, but it seems that the implementations I found either don't work with Preact or are only usable without babel etc.

I also looked into t7 which runs directly in the browser, but their "Universal" v-dom nodes don't seem to be universal enough to work with Preact.

Any tipps how to get a nicer interface to h?

[developit]

Hi @kay-is!

There are a few options here for sure.

Using preact-hyperscript

This is nice and simple thanks to @queckezz's nice work. That said, it might be too similar to the direct hyperscript (via h() calls) approach you've already used.

preact-hyperscript Codepen (hotlinked, no transpile step)

var { createElement:h, div, h2, h3, button, ul, li } = preactHyperscript;

var App = () => div([
  h2('#subtitle', 'Preact is a fast, 3kb alternative to React, with the same ES2015 API'),
  button({ href: 'http://ghub.io/preact' }, 'Learn More'),
  h3('Features'),
  ul(['preact', 'small', 'es2015', 'fast'].map(key => li(key)))
]);

preact.render(h(App), document.body);

---

Using Substack's hyperx

This parses tagged template literals into VDOM. It's pretty elegant and making it work with preact is as simple as passing it preact's h().

Preact + hyperx JSFiddle (no compilation, CDN hotlinks only)

var FooComponent = props => hx`
  <div>
    <h1>${props.title}</h1>
    <a href=${props.link}>Go Somewhere!</a>
  </div>
`;

render(h(FooComponent), document.body);

This second option sounds like what you wanted to achieve with t7.

---

Using t7

I got t7 to work nicely with Preact :) - you just have to do this:

window.React = preact;
t7.setOutput(t7.Outputs.React);

Other than that the syntax looks nearly the same as hyperx, only t7 provides a component registry (nice):

Preact + t7 JSFiddle (no compilation, CDN only)

[kay-is]

Ah nice, thank you :)

When I tried t7 with Preact I got a React not found error, so I added preact-compat and got an in not usable on undefined error on a PropTypes thingy.

the window.React = { createElement: preact.h } was missing, haha

[Badestrand]

Sorry, I know this is an old thread but it still shows up on Google.

Here is a small template that uses preact and JSX in the browser: https://gist.github.com/Badestrand/641a22bfcdce66a65d5a07d518237507