Syntax improvement

[luwes]

The other thing was the syntax.

let view = shtml`${"scope-name"}
  <p>Some text.</p>
`;

seems a little strange to me. what about something like this?

let view = shtml('scope-name')`
  <p>Some text.</p>
`;

let view = shtml('scope-name', 'maybe-another')`
  <p>Some text.</p>
`;

let possibleToCache = shtml('scope-name');
let view = possibleToCache`
  <p>Some text.</p>
`;

Styled jsx also doesn't explicitly define scope names. I think this should be possible if an unique name is chosen, check if a style element is passed through the h function and then prefix the rules in that style element on the fly, performance could be affected, not sure about that.

[luwes]

a tagged template function like that would be created by

export function shtml(...scopes) {
  return function() {
	return api.h.apply(api.h, arguments);
  }
}

[theSherwood]

Yes! That api is dramatically better!

Styled jsx also doesn't explicitly define scope names

Yes. I tried to find a nice way of handling that but nothing occurred to me that wouldn't trash performance. And I don't totally understand your suggestion. Care to elaborate?

[luwes]

Oh I think I misread the docs, seems there is the html tag which does scoping without an explicit scope name. I assume the inline style is then automatically applied to the scope?

[tomByrer]

I'm with luwes; in this example:

let view = shtml`${"scope-name"}
  <p>Some text.</p>
`;

in my brain becomes:

let view = shtml`
scope-name <p>Some text.</p>
`;

But, TBH, I don't like zeit's syntax either. If I had to CSS-in-JSX, I am OK with styled-components/. ThemeUI is an interesting pivot on organizing CSS.

[theSherwood]

I agree with the suggestions around the syntax for the call to shtml. I quite like the solution @luwes provided.

To create a new scope:

let view = shtml('scope-name')`
  <p>Some text.</p>
`;

To propagate the scope above?:

shtml()`
  <p>Some text.</p>
`;

This is useful for things like conditionals where you have nested calls to shtml and want them to all get the same scope.

And for blocking scope, html as in Sinuous:

let view = html`
  <p>Some text.</p>
`;

I'm also not married to the naming of shtml and ssvg. Those names are terrible, but nothing good jumped out at me. Ideas?

Oh I think I misread the docs, seems there is the html tag which does scoping without an explicit scope name. I assume the inline style is then automatically applied to the scope?

I don't entirely understand what you are saying, but to my mind there are 3 use cases:

1. Set a new scope
2. In a nested call to shtml (as in the case of a conditional), propagate the scope set above
3. Block the scope from propagating and the class names from being injected.

Presently, I do, respectively:

shtml`${'new-scope-name'} ... `

shtml` ... `

html` ... `

But I prefer the shtml('new-scope-name') and shtml() solutions.

But, TBH, I don't like zeit's syntax either. If I had to CSS-in-JSX, I am OK with styled-components/. ThemeUI is an interesting pivot on organizing CSS.

@tomByrer There we must disagree. styled-jsx is the only CSS-in-JS solution I can abide!

Edit: Some formatting improvements.

[theSherwood]

Okay. Made some changes to the api.

import { html, svg } from 'sinuous-style';

And they are used like this:

1. Set a new scope

let view = html("scope-name")`
  <p>Some text.</p>
`;

2. Propagate outer scope

let view = html("scope-name")`
  <p>Some text.</p>
  ${() => condition && html()`
    <p>Some more text.</p>
  `}
`;

3. Block outer scopes

let view = html`
  <p>Some text.</p>
`;

This feels a lot cleaner to me. Any further thoughts on this?

[luwes]

that looks great @theSherwood 👍 thanks for changing it