This works without React. about aphrodite HOT 6 CLOSED

@jlfwong That example I showed is using browser standards. Granted the diffHTML is my creation, but the following would also work:

import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  red: {
    backgroundColor: 'red'
  },

  blue: {
    backgroundColor: 'blue'
  },

  hover: {
    ':hover': {
        backgroundColor: 'red'
    }
  },

  small: {
    '@media (max-width: 600px)': {
      backgroundColor: 'red',
    }
  }
});

class App extends HTMLElement {
  attachedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = `
      <div>
        <span class="${css(styles.red)}">
            This is red.
        </span>
        <span class="${css(styles.hover)}">
            This turns red on hover.
        </span>
        <span class="${css(styles.small)}">
            This turns red when the browser is less than 600px width.
        </span>
        <span class="${css(styles.red, styles.blue)}">
            This is blue.
        </span>
        <span class="${css(styles.blue, styles.small)}">
            This is blue and turns red when the browser is less than
            600px width.
        </span>
      </div>
    `;
  }
}

document.registerElement('my-app', App);

Proving that no extra dependencies are necessary in order to use this library. Is there anything specific you'd like to see different, besides that it's a class extending an element with a render method?

from aphrodite.

Thanks! We did indeed design Aphrodite specifically with no dependency upon React.

I think this would be best accompanied by a more comprehensive example in the README of a non-React usage. I'm a bit reluctant to use the one you linked in the gist, as it looks very similar to React. I'd be leaning more towards something in higher usage and very non-React looking (notably not JSX). Perhaps handlebars would be a good choice, or even raw DOM manipulation.

Thoughts?

from aphrodite.

Ahh, I see! This is the first time I'm seeing a use of Web Components. If you could add to the attached diffs an example with an explanation that this is a Web Component with a link to the relevant spec (is it http://w3c.github.io/webcomponents/spec/custom/?). I think the example we use can be much simpler, since we're trying to demonstrate non-dependency on React, not trying to exercise the full feature set. Something like this, perhaps?

# Use without React

Aphrodite was built with React in mind, but does not depend on React. Here, you can see it
used with [Web Components][webcomponents]:

import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  red: {
    backgroundColor: 'red'
  }
});

class App extends HTMLElement {
  attachedCallback() {
    this.innerHTML = `
      <div class="${css(styles.red)}">
        This is red.
      </div>
    `;
  }
}

document.registerElement('my-app', App);

[webcomponents]: http://w3c.github.io/webcomponents/spec/custom

If that appeals to you, then would you mind updating the diff with something similar to this?

from aphrodite.

Looks great to me, I'll update my PR, thanks!

from aphrodite.

FWIW I'm so out-of-the-loop with the current specification that I couldn't tell you where the canonical URL lives. At the very least this can give some direction and we can improve the link in the future.

from aphrodite.

https://github.com/tbranyen/aphrodite/blob/readme-phrasing/README.md Updated here, let me know if you have any feedback in the PR comments and I'll push up changes later.

from aphrodite.