html`${seq.map(i => html`<li>Counter #${i} ${counter}</li>`)}`

should return a DocumentFragment

https://codesandbox.io/s/sinuous-array-bug-4s2nr

Currently there is no way to batch observable changes.

S.js solves this with freeze
https://github.com/adamhaile/S#sfreeze--code

Preact uses a render queue
https://github.com/preactjs/preact/blob/b4e059ad00ff2d4dc71b0d69d4a148a204da6d5f/src/component.js#L169-L169

Hi how to render html in string
something like dangerouslySetInnerHTML in react or v-html in vue ?
Thanks.

Suppose I have:

const strings = {
    'en': {'greeting': 'Good Morning'},
    'de': {'greeting': 'Guten Morgen'}
}

And an observable variable:

const lang = o('en')
And a function:

const i18n = (key) => {
    return strings[lang()][key]
}

Next, a cpl visual components:

<p>${lang}</p>

<h4>${i18n('greeting')}</h4>
And lastly a button:

<button onclick=${()=> lang('de')}>Switch Lang</button>

When I click the button the lang variable does indeed change (the p element is rendered), but the i18n function that powers the h4 element is not re-evaluated. Any ideas?

Want to keep this here as a reminder. Mobx uses a run id for some optimizations which looked interesting but not sure it's worth the added bytes yet.

@localvoid explained the concept

@luwes I think that it is possible to get rid of all duplicates from observables to computeds at the cost of one additional property on observables, also it can improve reset performance (in most cases it won't be necessary to remove edges from observables to computed).

1. When computed is executed, create a new execution id nextId++ and store it in the execution context(on stack) of this computed.
2. When observable is accessed - push a new entry to the array of dependencies (computed -> observable) and assign computed execution id to observable lastAccessedBy to perform a simple check for duplicates.
3. When computed is finished executing, iterate over all dependencies and refresh all lastAccesedBy to prevent edge cases when nested computeds could overwrite it.
4. Iterate over old dependencies and remove observable->computed dependencies that have lastAccessedBy !== computed execution id. When observable is removed, assign lastAccesedBy to -1, if it still should remain in the list, assign -2.
5. Iterate again over new dependencies and add observable->computed edges that doesn't have -2 in lastAccessedBy.

Just an idea, maybe I've missed something, maybe it isn't worth it :)

EDIT: Also, it is possible to detect when there aren't any nested computeds by checking that nextId isn't greater than current execution id + 1. And when there aren't any nesteds, we can skip step3.

EDIT2:

• In step4 it is actually unnecessary to mark removed nodes with -1
• In many cases we can also skip step5 by counting how many observable->computed should stay alive in step4 and then just comparing it with the length of new dependencies array (this optimization probably won't work when we detect nested computeds).

Kind of curious what would be needed to make this work.
It would be a compiler only, at runtime it would be too slow and heavy.

A handlebars to hyperscript compiler?
Hyperbars looks promising, https://github.com/vincentracine/hyperbars

Additional useful info on the topic here: adamhaile/surplus#26

Hi @luwes,

Are there any contribution guidelines? I'd like to contribute in some way if possible. If not to the core library, then make a helper module or two.

I've got a fork of the repo, but am having a devil of a time getting it to build. I'm trying to run npm run build, but I'm getting back a load of errors:

'sinuous/h' is imported by packages/sinuous/src/index.js, but could not be resolved – treating it as an external dependency
                sinuous.js ⏤  247 B
'sinuous/h' is imported by packages/sinuous/src/index.js, but could not be resolved – treating it as an external dependency
                sinuous.js ⏤  377 B
'sinuous/h' is imported by packages/sinuous/src/index.js, but could not be resolved – treating it as an external dependency
            sinuous.min.js ⏤  269 B
'sinuous/observable' is imported by packages/sinuous/src/index.js, but could not be resolved – treating it as an external dependency
'sinuous/h' is imported by packages/sinuous/src/index.js, but could not be resolved – treating it as an external dependency
 sinuous-observable.min.js ⏤  272 B
       babel-plugin-htm.js ⏤  1.78 kB
       babel-plugin-htm.js ⏤  3.62 kB
'sinuous/hydrate' is imported by packages/sinuous/all/src/all.js, but could not be resolved – treating it as an external dependency
'sinuous/observable' is imported by packages/sinuous/all/src/all.js, but could not be resolved – treating it as an external dependency
'sinuous/map/mini' is imported by packages/sinuous/all/src/all.js, but could not be resolved – treating it as an external dependency
'sinuous' is imported by packages/sinuous/all/src/all.js, but could not be resolved – treating it as an external dependency
[!] Error: Cannot create an explicit namespace object for module "all" because it contains a reexported external namespace
packages/sinuous/all/src/all.js

Any idea what I might be getting wrong?

Hi, should I mix sinuous with your swiss, for component managment ? Is this goog idea ?, I can make components with sinuos itself, but swiss has a great element().

Add more info about sinuous/htm and sinuous/babel-plugin-htm.

When I try to render new data, where contents may changed, but same ID, the content gets not updated.

const data = observable([]);

1. render:

var items = fetch_items_from_server();
data(items);

2. render (updated contents):

var items = fetch_items_from_server();
data(items);

Is that a bug? What is the workaround to this issue?

Does an ${if...} ${if...else} exist?

A nested transaction (another transaction called during this callback), if you intend to allow them, will throw a Cannot read property 'forEach' of undefined on line 65 because the queue is set to undefined by the nested tx after it runs. Perhaps set a flag and skip all this in nested txs or something?

Hi,

let s = {
  count: o(0)
};

ex: https://codesandbox.io/s/swiss-test-uj3e2

How do I clone s to a new object?

Are there any plans on the roadmap for a context api? I was looking at the implementation of Solid.js' context api:
https://github.com/ryansolid/solid/blob/master/packages/solid/src/signal.ts

It is minimal but it is also tangled up with the state/reactivity model. I don't know if there's any way to avoid that. I really like what Sinuous is doing with the multitude of small packages so that you only bring in what you need. It does seem like it would be a shame to add much to sinuous' super simple state/reactivity model. Is there a way to add a simple context system without messing with the reactivity model?

In Event handler function I need both event and item
Then I have:

onclick = o(clicked);

clicked = (e, a) => {
    console.log('e:',e);
    console.log('a:',a);
    e.preventDefault();
  }

${map(this.categories, (item) => this.html`<li id=${item.id}><a class=${this.activeClass(item)} onclick="${this.onclick}" href="${item.id}">${item.name}</a></li>`)}

How to pass item to event handler with observable?

I can only:

onclick="${() => () => this.clicked(event, item)}

Thanks

Hi,
Wow, such an amazing library I started to love it already. And the size of the library is impressive.
This not an issue actually.

I have been using Hyperapp (https://github.com/jorgebucaran/hyperapp). So I did a similar imitation of it. But I don't know how to use props in app() function.

Eg: https://codesandbox.io/s/sinuous-counter-krlz2

What is your recommendation when building a larger app: inline styles or css or do you have a fav css-in-js solution in the spirt of Sinuous?

Importing Sinuous with the new script module type doesn't work because the peer dependencies can't be resolved in the browser. e.g. sinuous/observable

<script type="module" src="https://unpkg.com/[email protected]/dist/sinuous.esm.js">

Related to #6 and #56

import memoPropsFunction from "@luwes/memo";

const memo = fn => {
  const fragToArray = props => {
    // Add a root call here otherwise the removing of the component
    // would already automatically remove the observable subscriptions
    // This root will orphan this component's computations
    // and we'll be in charge of the clean up.
    const el = root(() => fn(props));

    // Memoizing a document fragment is impossible because
    // once it is appended, it's cleared of its children
    // leaving an empty shell, on next render the comp would just be cleared.
    // Store the child refs in an array and memo and return this.
    if (el.nodeType === 11) {
      return [].slice.call(el.childNodes);
    }
    return el;
  };
  return memoPropsFunction(fragToArray);
};

Hi @luwes et al,

First, thank you for sinuous. I haven't put it to hard use yet, but the tinkering I've done with your library has been a lot of fun. I'm looking forward to getting a lot of use out of it.

Looking at sinuous/observable, I didn't see any option for explicitly setting dependencies for an observable or computed function. S.js has S.on(...), for example. I find having that option pretty handy. And since you seem to favor global functions over dot notation, I thought watch([deps], fn) could work as an api.

Let me know if something like this falls within your vision for sinuous!

Best of luck and thanks again.

Hi can you show me a minimal routing example using sinuous components?

Some research on whether an observable object should be added which is more in line with how Vue, Mobx and Solid use a proxy to the accessor of the observable.

This provides some advantages:

• Simpler to get and set, state.color instead of color().
• Easy JSON stringify

Disadvantages:

• Always need to be called from the state object, users might find it strange the value can't be cached without losing the reactivity.

Shouldn't:

be typed as

export const observable: ObservableCreator<any>;

or am I missing something? I can't get this simple line to compile.

I think this might be possible similarly to lit-html where they use the string part of the tagged template as a cache key and always return the same Node but update the dynamic parts on each render.

Sinuous could have a mode that instead of rendering once and update fine grained with the help of computeds, update with a render function which would also only create DOM once but update the dynamic values if they change with the api.insert and api.property calls.

All the logic is pretty much there from sinuous/template.
The only challenge is to create a unique key from the hyperscript calls that could be used for caching the DOM tree and getting the dynamic template fields/holes.

Related to 62c5733

I want to provide a new test category where the performance of dealing with internal data comes back for libraries like surplus and sinuous. But I'm stuck on one specific step. Maybe you see the issue promptly.

This is the test implementation for your lib: https://github.com/nextapps-de/mikado/blob/master/bench/test/sinuous/internal.html
This is the specific line which fails: https://github.com/nextapps-de/mikado/blob/master/bench/bench.js#L424

I also tried to pass store reference to this method and apply like var data = items(); data[0].title = "foo"; items(data); but without luck, the changes are not rendered.

Would be really nice if I could solve this.

const title = o('Title');
html`${title}`

should return a string Title

html`${() => seq().map(i => html`<li>Counter #${i} ${counter}</li>`)}`

should return a DocumentFragment

Research if partial attributes are possible and worth adding.

This is currently not working

  var banana = o();
  var count = 0;
  S(() => {
    count++;
    return banana() + ' shake';
  });
  t.equal(count, 1);

  var carrot = o();
  S(() => {
    console.log('banana false');
    banana(false);

    carrot() + ' soup';

    console.log('banana true');
    banana(true);
  });

  carrot('carrot');
  t.equal(count, 5);

Noticed there was an issue with inserts that have the same value.
https://codesandbox.io/s/sinuous-template-issue-t3o57

Probably because of

Lighterhtml @WebReflection seems to have cracked this. Not sure if it's possible with this library.

I'm experimenting with some dynamic rendering of some components here:
https://codesandbox.io/s/dynamic-components-z69n5

I'm wrapping the dynamic component in a closure in order to make it reactive:

const view = html`
    <h3>Dynamic Components</h3>
    <button onclick=${addToList}>
      Add to List
    </button>
    <button onclick=${switchComponent}>
      Switch Component
    </button>
    <hr />
    ${() =>
      html`
        <${list()} items=${items} />
      `}
  `;

Is there a more idiomatic way of dealing with dynamic components? And if not, would it be worth considering some alternative to a closure with a nested html call?

This feels related to #6 on Conditional Rendering, which faced a similar closure and nested html call issue. As RyanSolid pointed out, the template must be recreated repeatedly.

This Preact demo ported to Sinuous showed signs of a memory leak
https://luwes.github.io/sinuous-rainbow-spiral/

The observable listeners kept on increasing and made the detached html elements stay alive.

Hi,

How can I use an object in o?

Eg. https://jsfiddle.net/kethan/52a1q47x/9/

Currently fragments (array of nodes) are not supported via HTM because HTM generates an array of nodes instead of an h call w/ array of nodes.

See developit/htm#89

The observables are not updating like expected.
Dom exception error and stack overflow.

https://codesandbox.io/s/sinuous-counter-hmp8x

Really love your work for making sinuous. Do you have a plan for support typescript?

Hi, What is proper way to share data between components? In vue, react there are state stores, but I dont want to use external libraries for it ? I think I should make global data container for it. But im not sure what is proper way. Thanks

Add a section to the docs on the hydrate module.

I noticed that, using tagged templates at least, contenteditable seems to do nothing while contentEditable sets the correct property on the node. I don't know if there are other attributes that are working this way or not. But it seems inconsistent with the onclick and oninput. Thought I ought to make you aware.

https://codesandbox.io/s/sinuous-contenteditable-elq81

Currently attaching event handlers can look a bit strange if done without observables.

onclick="${() => () => count(count() - 1)}"

This is necessary because if the function was declared as an observable.

const countDown = observable(() => count(count() - 1));

it would look like

onclick="${countDown}"

in Sinuous this will be called to get the function from the observable

Event handler is countDown()

If the top code snippet was written as

onclick="${() => count(count() - 1)}"

it would execute the function immediately.

I am getting Uncaught ReferenceError: o is not defined

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <script src="https://unpkg.com/sinuous"></script>
<script>
const counter = o(0);
const view = () => {
    return html`
    <div>Counter ${counter}</div>
  `;
};

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);
</script>
</body>
</html>

• Using linear search[1] when removing edges
  @localvoid mentioned this could be optimized.

• Try out prevention of duplicate edges concept
  solidjs/solid#46 (comment)

Just the kind of simplicity and ergonomics that I was looking for in a JS library. However I have a few questions:

• Can this be used in production?
• If not, what features are missing?
• Is there a roadmap?

Would be great to be able to "hydrate" DOM trees that are generated statically by the server or a static site generator aka HTML from a HTML file.

I'm struggling to figure out how to create and consume reusable components.

In React, with JSX, you'd create one like this:

const Button = (props) => {
   return (<button>{props.children}</button>)
}

and use like this:

<Button><Icon /></Button>

In Svelte, you'd create one like this:

<button>
  <slot />
</button>

and use like this:

<Button><Icon /></Button>

What is the idiomatic way to do this in sinuous with tagged templates?

@ryansolid #4 (comment) brought up a good issue that same key observable tags would override the property on the data object. This would result in only the last tag action being called on that property change.

Potential solution is to keep an array of actions per key and run all on property change.

Preproduce

Template contains only conditional statement.

Expected

A DocumentFragment is returned with proper content based on the conditional block.

Actual

The conditional block is returned instead.

https://stackblitz.com/edit/js-y7ww82?file=index.js

Adjacent text nodes are difficult to hydrate, check for a solution.
Good test by @ryansolid

<div>${greeting} ${name}<span>!</span></div>. From the server <div>Hi John Snow<span>!</span></div>

I like the idea of having the html template literals in separate files. It's good practice to keep the views as code free as possible.

Keep UI components as minimal as you can. If you isolate business logic and side-effects from UI, everything gets easier.
@ericelliott

Will be pretty much a port of
https://gitlab.com/rockerest/rollup-plugin-lit-html