idyll icon indicating copy to clipboard operation
idyll copied to clipboard

Adopt a more HTML/JSX-like component sytax?

Open mathisonian opened this issue 6 years ago • 2 comments

Idyll's component syntax was originally designed so it would be familiar to users who were comfortable with component embed tags used in content management systems, but I worry it may prevent a learning barrier to a group of potential users who are already familiar with HTML.

[Header
  fullWidth:true
  title:"Climate Change"
  subtitle:"Welcome to Idyll. Open index.idyll to start writing"
  author:"Your Name Here"
  authorLink:"https://idyll-lang.org"
  date:`(new Date()).toDateString()`
  background:"#222222"
  color:"#ffffff"
   /]

With a few small tweaks we could change the Idyll compiler to match an HTML/JSX-like syntax. Would people be interested in this? Any change here would need to be done either behind a flag or as a major version bump.

<Header
  fullWidth=true
  title="Climate Change"
  subtitle="Welcome to Idyll. Open index.idyll to start writing"
  author="Your Name Here"
  authorLink="https://idyll-lang.org"
  date={(new Date()).toDateString()}
  background="#222222"
  color="#ffffff"
   />

mathisonian avatar Aug 13 '19 06:08 mathisonian

:+1: I'm into this, but as a language feature not syntactic sugar — it'd be nice to be able to render off the shelf React components in idyll, similar to mdxjs.

cesutherland avatar Apr 06 '20 19:04 cesutherland

FWIW this already exists as a language feature (you can npm install some-great-component) and use it in idyll like [SomeGreatComponent /]. The change would just be to the syntax.

We could also make this configurable, but that could lead to people sharing idyll docs that are incompatible without also sharing their compiler configuration.

mathisonian avatar Mar 09 '21 22:03 mathisonian