idyll-lang / idyll

Create explorable explanations and interactive essays.
http://idyll-lang.org/
MIT License
2.01k stars 87 forks source link

Adopt a more HTML/JSX-like component sytax? #584

Open mathisonian opened 5 years ago

mathisonian commented 5 years ago

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"
   />
cesutherland commented 4 years ago

:+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.

mathisonian commented 3 years ago

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.