Comments (9)
Yeah, the important thing to me is the createElement function. I'll use it with hyperx when i'm working with something kinda like a template partial, or with https://www.npmjs.com/package/instyled when I want a reusable component with built in styling and simple behavior (once I get around to PRing the ability to change the createElement function), or even directly when i'm building DOM from a complex data structure. Sometimes I won't use it if I just have a static html string.
Then I'll dump the results of the above into probably a thin wrapper around morphdom (for now, unless something similar comes up that fits my needs better).
from nanohtml.
@shama yea I like the morphom composition in your example. Do you think you can also do the same with the dom-css/hyperx moduless, or would that make it significantly less convenient to use?
from nanohtml.
The easiest way for dom-css
is to just remove it and we would do:
var bel = require('bel')
var css = require('dom-css')
var div = bel`<div>hello</div>`
css(div, {color: 'red'})
Which is only slightly less convenient. I'm not a huge fan of inline styles anyways so this feature isn't super important to me. I prefer to write CSS in a template string and setting an unique class on my modules 👉 https://github.com/shama/bel/wiki/CSS-Modules
As for hyperx, it would become:
var hyperx = require('hyperx')
var bel = hyperx(require('bel'))
var div = bel`<div>hello</div>`
Which isn't too bad and would mean we could use hyperxify until or instead of #7.
At that point, this library becomes an alternative to hyperscript. So maybe a better strategy is to work on parity and just use hyperscript?
from nanohtml.
Or maybe not... looking at the source of hyperscript, it's doing a bit more things.
from nanohtml.
I'm curious what some of the examples in the bel readme/wiki would look like in this "composable style". On the one hand it'd be nice to have composability to avoid frameworkiness, on the other it might be too many things to compose at once (making it less convenient).
from nanohtml.
I'll convert some of the elements I've got in progress now and see how much of a pain it is.
from nanohtml.
Done. Please use https://github.com/maxogden/yo-yo for a more full feature set.
from nanohtml.
@shama I was wondering if there was any chance you could bring back dom-css or provide a way for users to specify their own.
from nanohtml.
@jbucaran You can still use dom-css
as it works with any native element:
var el = bel`<button>push me</button>`
domCSS(el, { border: '1px solid #000' })
from nanohtml.
Related Issues (20)
- `default` alias not defined on server.js HOT 4
- onclick Event Handlers with nanohtml/raw HOT 1
- Support custom elements V1 extension of built-in elements
- Cannot find module 'estraverse' HOT 5
- browserify transform sourcemaps only working partially HOT 1
- SyntaxError: Octal escape sequences are not allowed in template strings
- The qualified name provided ('clipPath"') contains the invalid character '"'. HOT 1
- Support array for multiple roots?
- Svgs elements not created properly HOT 2
- Browserify transform does not work for code transpiled from Typescript HOT 1
- Custom DOM library support on Node.js (e.g. JSDOM) HOT 3
- Text node as a root ignores the following element
- Way to keep whitespaces intact? HOT 2
- Valueless attributes gets unexpected default value
- Unclosed tags insert unexpected text node
- Support for conditional attributes? HOT 6
- bundle.min.js in npm package doesn't add html to window object HOT 1
- autofocus on input HOT 2
- babel + rollup import error HOT 4
- Question on upgrading from [email protected] HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nanohtml.