Example?

The recent update to make this a generator looks great. An example would be even greater 😃

I’ve managed to build a runtime using s-js. It only exports a single {wrap} function.

Next I copy that runtime as and use it in a new project ‘s-jsx/index.js’ (using rollup + the babel-jsx… plugin). A simple build where I import import S from 's-js'; import { wrap } from './s-jsx'; and run console.log('Hello World') works fine… When I create a “dumb” component (no data just a static message) and use S.root(()=>…) it also works fine As soon as I start using S to add some data and render it in my component, it screams out “Can’t find variable: r” Last week, r, root, selectEach and selectWhen would all have been exported by the runtime I built; but no longer. The question is - where’s it hiding now?

[ryansolid]

Great I’m glad you got things working. Yeah I mean while it’s possible I don’t think I’d want to be writing that close to the metal. I still like the declarative format. The best approach to almost Vanilla I’ve seen is https://github.com/Freak613/stage0, but it isn’t for me. Too manual wiring up your own update functions.

I just tried to publish s-jsx just now on npm but it said the name was too similar to a different repo. So I will need to rename it which is awkward since s-jsx is the perfect name. I have no idea what to call it. Atleast you can access it from github for now until I can think of something.

[andymans]

Finally got it working! Because of the dopey way I’d set up my project I needed to:

import * as s from ‘./s-jsx’` (my own custom build of dom-expressions)

and then in rollup-config:

"plugins": [["jsx-dom-expressions", {moduleName: 's'}]]

That worked; but obvs was totally brutal. Your new s-jsx repo is far neater!

The value I’m seeing here is that your approach:

1. can really help people to get off the crack cocaine that is ‘virtual dom’
2. do so without locking themselves into a “framework”
3. allows 1 & 2 with almost zero performance trade-off

Perhaps I can build something with a slightly smaller bundle size, and a little more perf, if I write some optimized (ouch!) vanilla js. BUT - let’s say I want to add ‘i18n’ to my app. How do I do that in vanilla? Well, I need to react EVERY time either my language or my data changes, laboriously executing an update on every element that is affected (pseudocode):

elem.textContent = You have **count** new count !=1?"messages":"message"

The alternative in your approach:

<p>{(i18n('messageCount', state.countOfMessages))}</p>

…where i18n is a trivially simple function that returns a value from a hash accepting a key and optional count param (if pluralization needed).

Being able to do this is a total “god-send” compared to doing the same in vanilla!

Great work on Solid btw! It’s really cool. But I like this lightweight approach too.