romancow / dimdom Goto Github PK
View Code? Open in Web Editor NEWA small, simple way to represent a DOM - a “diminished DOM”
License: MIT License
A small, simple way to represent a DOM - a “diminished DOM”
License: MIT License
Experimental extension to #3
Allow one to "map" elements' names to functions that can be used when using a functional approach. This could make things a bit cleaner if there is a subset of elements you are using a lot.
For example:
elements = ['html', 'head', 'title', 'body', 'div', 'h1', 'p']
dom = DimDom elements, (dd) ->
dd.html {},
dd.head {},
dd.title 'DimDom Example'
dd.body 'background-color':'#f1f3f4',
dd.div id:'main', styles:{height:'100%', width:'100%'},
dd.h1 'An Example'
dd.p color:'#333333', 'Here is some text.'
You could also pass in an object instead of an array to map elements to other names, like {body:'body', div:'div', p:'p', custom:'div'}
. Maybe allow one to map an element with some default attributes to a custom name somehow?
Another possibility - allow the use of this
to call the mapped methods in addition to the passed function arg: @p color:'#333333', 'Here is some text.'
We could "pre-map" such functions, but that seems like a lot of potential element names to map. So maybe keep it opt-in, and allow the user to define the subset of elements they will be using themselves.
There is also the potential to check the browser for support of the Proxy object, and (if supported) automatically convert any method called on he function parameter (or this
) to an element name.
For most recent release, the single source file was finally separated into multiple source files. I wanted a really simple way to combine them that I had control over, rather than using a more "comprehensive" solution like browserify or webpack. So I inserted my own "cake-prepend" commands that would be parsed in the cakefile when the project is built, similar to what I've seen CodeKit and Prepos do.
It would be nice to move this processing into it's own module for ease of reuse (and for other to use). It could support both prepend and append commands, with a customizable prefix so it could actually support the CodeKit and Prepos commands.
Setup some GitHub integrated continuous integration service. Perhaps Travis CI since it's free for open-source?
Add a LICENSE.md file
Should we also add license info to the top of js file since this would be the distributed part?
Support some method for setting attribute's wit namespaces - for example thexlink:href
for svg.
Not sure what the syntax for this should be. Maybe pass a two item array as the attribute value?
new DimDom.SVG('image', {href: ["xlink", "example.jpg"]})
I'd prefer the namespace to be more associated with the attribute name than the value, though.
We could check for support of the shadow DOM and provide an option to create/attach a DimDom element as that instead of as a document fragment.
Would using two different possible implementation like this cause other complications?
If a function is passed in the attributes object, then it should be treated like an event, and that function should be added to created elements as an event listener.
Could check for existence of element's addEventListener
and fallback on event properties (element.onclick = someFunction;
) when not present.
Appears xlink namespace is required in svg images in safari and chrome embedded
related to #8
Instead of using the passed document to create elements, create
should get a DocumentFragment (via document.createDocumentFragment()
), use it to create and add elements, then return it. This method, according to docs, is more efficient.
A proposed new feature for a semi-terse approach for defining a longer document. How it would look in coffeescript:
dom = DimDom (dd) ->
dd 'html',
dd 'head',
dd 'title', 'DimDom Example'
dd 'body', 'background-color':'#f1f3f4',
dd 'div', id:'main', styles:{height:'100%', width:'100%'},
dd 'h1', 'An Example'
dd 'p', color:' #333333', 'Here is some text.'
Or a version using namespaces:
dom = DimDom.SVG (svg) ->
svg 'svg', {width:500, height: 300},
svg 'circle', {cx:50, cy:50, r:10}
svg 'foreignObject', DimDom.HTML (html) ->
html 'body', {},
html 'p', 'This is a test...'
svg 'foreignObject', DimDom.NS 'http://alternate/namespace', (alt) ->
alt 'madeUp'
Or if you're going to be switching back and forth between namespaces a lot:
dom = DimDom.NS [DimDom.NS.HTML, DimDom.NS.SVG, 'http://alternate/namespace'], (html, svg, alt) ->
svg 'svg', {width:500, height: 300},
svg 'circle', {cx:50, cy:50, r:10}
svg 'foreignObject',
html 'body', {},
html 'p', 'This is a test...'
svg 'foreignObject',
alt 'madeUp'
Possible included topics:
We could bind to created nodes and update them to match their DimDom object when the DimDom object is altered. For changing something like the name or namespace, would probably have to remove the children, create a new element, then re-add the children. Or we could just make those properties read-only.
Might want to make something like this opt-in, since someone might not want to use it - e.g. because of the extra overhead or they are using the same DimDom instance to "stamp-out" multiple cookie-cutter element structures.
Need a way to represent a collection of DimDom elements. It should basically behave like and array but provide the create
and appendTo
methods.
var elems = new DimDoms([
new DimDom("p", "Some text content."),
new DimDom("p", "Some more text content.")
]);
Not necessarily sold on the DimDoms
class name. Maybe something like DimDomCollection
? Maybe even something more functional, like:
var elems = DimDom.collect(
new DimDom("p", "Some text content."),
new DimDom("p", "Some more text content.")
);
Setup some GitHub integrated code quality service. Definitely want something that will monitor test coverage. Some sort of static analysis / automated code review might be good too. Probably want to look for one that is free for open-source (Code Climate and Coveralls both appear to be).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.