Using Alpine in a Netlify CMS previewTemplate

Netlify CMS
, ,
#1

I’m trying to get 11ty + Netlify CMS + Tailwind working together but am experiencing some problems. Tailwind’s defacto JS-lib is Alpine.

I’ve grifted a lot of what Hylia is doing to generate previews because I know that’s a working installation. That file looks like this:

// preview.js which is linked up at the bottom of admin/index.html
const env = nunjucks.configure();

class Preview extends React.Component {
  render() {
    const {entry, path, context} = this.props;
    const data = context(entry.get('data').toJS());
    const html = env.render(path, { ...data });

    return <div dangerouslySetInnerHTML={{ __html: html }}/>
  }
}

const Product = ({ entry }) => (
  <Preview
    entry={entry}
    path="layouts/product.njk"
    context={({ title, text, sections }) => ({
      title,
      content: text,
      sections
    })}
  />
);

CMS.registerPreviewTemplate('products', Product);

The whole template renders as expected but JS doesn’t work. Alpine I think is supposed to watch for mutations, but instead it doesn’t do anything and all my dropdown menus and interactions don’t work.

I’ve tried created a ref to the node and manually initializing with Alpine.initializeComponent(this.myRef.current) but it’s not working either.

Has anyone been successful making Tailwind + Alpine + 11ty + NetlifyCMS work?

#2

Ok. Update. I took out all the Nunjucks template stuff while preparing a Reduced Test Case.

Step 1: I confirmed Alpine can work within React

It works! So that’s good. This tells me the issue is maybe within the implementation in the CMS.

Step 2: Reduced test case in Netlify CMS

I stripped out all the Nunjucks stuff, just to rule that out of the equation and used the same code from the working example above.

class Preview extends React.Component {
  render() {
    const html = `
      <div x-data="{ open: false }">
        <button x-on:click="open = true">Open Dropdown</button>

        <ul x-show="open" x-on:click.away="open = false">
          Dropdown Body
        </ul>
      </div>
    `;
    return (
      <div dangerouslySetInnerHTML={{ __html: html }}></div> 
    )
  }
}

CMS.registerPreviewTemplate('products', Product);

Looking at the output of the Preview Frame:

<iframe class="css-1jl34xb-PreviewPaneFrame e6emspu0">
#document
<!DOCTYPE html>
<html>
<head>
  <base target="_blank"><link href="/style.css" type="text/css" rel="stylesheet"></head>
  <body>
    <div>
       <div class="frame-content"><div>
        <div x-data="{ open: false }">
          <button x-on:click="open = true">Open Dropdown</button>
            <ul x-show="open" x-on:click.away="open = false">
              Dropdown Body
            </ul>
        </div>
    </div>
  </div>
</div>
</body>
</html>
</iframe>

Notably, there’s no script tag within the document. I tried injecting a script tag via the component, but it only appends it to the parent frame. Looking closer, the iframe doesn’t have a src nor srcdoc. So maybe this isn’t a normal iframe. So I looked into what was making this happen.

Step 3: Look how Netlify CMS renders that iframe

After looking around I found where Netlify CMS renders a document fragment directly inside the iframe using Ryan Sneddon’s react-frame-component on lines L188-L233 of EditorPreviewPane.js

What’s curious here, is that there’s a way to include styles via registerPreviewStyle but not a way to include scripts in a similar fashion.

    const styleEls = getPreviewStyles().map((style, i) => {
      if (style.raw) {
        return <style key={i}>{style.value}</style>;
      }
      return <link key={i} href={style.value} type="text/css" rel="stylesheet" />;
    });

    if (!collection) {
      <PreviewPaneFrame id="preview-pane" head={styleEls} />;
    }

I think I may be blocked here unless I’m able to patch Netlify CMS.

#3

Hi,

Have you tried to raise an issue on NetlifyCMS’s Github repo?
If you prefer more of a conversation style there’s a NetlifyCMS slack channel, where you can chat with the maintainers directly, hope this link works: https://join.slack.com/t/netlifycms/shared_invite/zt-aeo2ebk5-TKoTwtL4B77SJr0NhtUqMg

Anyway, it’s an interesting issue, keep us posted on what you learn!

PS: I’m a huge fan of your site and everything you do! :star_struck:

1 Like
#4

Okay, thanks! Bug/Feature issue filed on the Netlify CMS github repo.

:crossed_fingers: crossing fingers senpai notices me!

1 Like