mithriljs / mithril-node-render Goto Github PK
View Code? Open in Web Editor NEWUse mithril views to render server side
License: MIT License
Use mithril views to render server side
License: MIT License
Is there a reason for escaping HTML in attribute values? Talking about this line.
Some CMS/ESP solutions use tags for serving dynamic content (it stinks but is true). Escaping attribute values makes it impossible to use these tags inside attributes.
What I'm talking about (made-up example):
<a href="<span random-cms='asset_url'></span>">Download asset</a>
I'm interested to know if there's a reason the content is escaped. If there is a solid reason, maybe it could be considered to add an option for leaving attribute values unescaped?
Either way, I can provide a tested pull request once there is a conclusion on this issue.
the blog is https://gist.github.com/StephanHoyer/bddccd9e159828867d2a
It will more convenient if you move it to the project wiki
Can you add a DEMO link? Thanks!
This came up as a discrepancy between mithril-node-render and mithril's parseQueryString module in 1.0
https://jsfiddle.net/ACXgit/otmd6qL7/2/
Basically, parseQueryString("?date=2016-01-01")
yields a Date object in parseQueryString but it yields a string in mithril-node-render
This is how react-dom and React Native handle their dependency on React, and would help prevent issues like #58 in the future. I imagine most users consuming this module probably already have Mithril installed as a dependency, so you wouldn't run into the peerDependency
hell that you do with e.g. eslint plugins and presets.
Is there any way we can run mithril-node-render with Mithril 2.0.0-rc.3? If not now, are you planning to support Mithril 2.0 at some point in the future / when it's not in pre-release?
Community health files are stuff like CONTRIBUTING.md, FUNDING.yml, and so on, stuff that normally lives in .github
, docs/
, or the repo's root. I've added default files for everything on this list of supported file types except for a CONTRIBUTING.md file, as that process varies pretty greatly across repos. For issue templates, there's two templates: one for bugs and one for feature requests. The pull request template and issue templates are each derived from the core project's own core templates but with core-specific stuff omitted.
No action is required on your part, but you may wish to customize these appropriately and/or take other related action in light of this like adding/removing issue templates.
If you have any questions, comments, or concerns, please file an issue and I'd be more than willing to address them.
TypeError: Cannot call method 'toLowerCase' of undefined
at render (../node_modules/mithril-node-render/index.js:86:47)
Hello, with the latest version I'm unable to pass down data via vnode.attrs
to child components.
Commit ddf38d1 seems to be the culprit - previous versions are working as expected.
Test code to reproduce the issue:
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"mithril": "https://github.com/lhorie/mithril.js/tarball/48d786b08553d5463d8ed14e6fb6c95610801520",
"mithril-node-render": "github:stephanhoyer/mithril-node-render#rewrite"
}
}
index.js:
global.window = require('mithril/test-utils/browserMock')();
global.document = window.document;
const m = require('mithril');
const render = require('mithril-node-render');
const component = {
view: () => {
return m('strong', m(subComponent, {text: 'test'}));
}
}
const subComponent = {
oninit: (vnode) => {
console.log('vnode.attrs: ', vnode.attrs);
},
view: (vnode) => {
return m('span', vnode.attrs.text);
}
}
const html = render(m(component));
console.log('HTML: ', html);
Mithril core's oninit
is synchronous, yet this for some reason awaits it. Shouldn't it be sync as well, to match the rest of the API including core's m.render
being itself 100% sync?
It'd also resolve #65 as a side effect.
Can you upload some DEMO? Thanks!
This would be a breaking change and would only work on node >=8, but it would remove the dependency on co
and I think make the code slightly more idiomatic for vanilla JS.
Hi Stephan,
Will this be made mithril v1.0 compatible? I understand that the mithril rewrite will be completed soon.
Components that have children seem do not actually render their children.
I've created a gist demonstrating the behavior.
Here is the output I get when I run ospec on the code from the gist:
parent component:
"<div></div>"
should equal
"<div>howdy</div>"
at o (C:\Users\Ben\Code\bc9205a33538e025f1e503dc0211b171\index.js:24:50)
parent component:
"<div></div>"
should equal
"<div><span>howdy</span></div>"
at o (C:\Users\Ben\Code\bc9205a33538e025f1e503dc0211b171\index.js:25:61)
4 assertions completed in 24ms, of which 2 failed
It seems like adding children: copy(view.children)
to the component vnode creation fixes things, but I'm not sure if that's the proper fix?
Hello ! ๐
In your README you say : Optionally pass in options as an object: m.render(component, options).
but it is Optionally pass in options as an object: render(component, options).
, no ?
Hello,
I'm rewriting this package in TypeScript, I don't know yet if the backward compatibilty should be preserved - please advise.
code example - https://github.com/tlaziuk/mithril-node-render/blob/master/index.ts
Would you be interested in merging my code into this repo?
not support promise ?
Would it be possible for you to bump it to [email protected]
?
Example:
var m = require("mithril"),
render = require("mithril-node-render"),
html = render(
m("input[type=text]", {
value: null
})
);
console.log(html); // <input type="text" value="null">
This is inconsistent with DOM rendering, where null
values are equivalent to the empty string.
Hi, I'm porting your nice code to Haxe, and I see that you are using Object.keys(view)
to render trusted content. Is there a specific reason for this, since view
is always(?) a String object in this case Object.keys
gives some problem in Haxe so I'm using the string value directly and it seems to work, but I wanted to be sure.
I am interested on running this library embedded in a .NET application using JavaScriptEngineSwitcher
Getting back a string when executing render will be ideal.
Is there any way to be able to:
var html = render(m('div', 'Hello'))
//<div>Hello</div>
I don't care on losing the async initialization.
eg.
lets say I have a custom config to manually set the style on an element:
config = function(e){
e.style.height = "50px"
}
Can't do this.
Make the new isClass function match how Mithril itself checks for class components: i.e. classes don't have to actually use class syntax, they just need to be functions that have a view method on their prototype. This would simplify the check, and prevent possible incompatibilities between mithril and mithril-node-render.
m('div', { innerHTML: 'Hello <b>there</b>' }, 'No Thanks')
<div innerHTML="Hello <b>there</b>"></div>
<div>Hello <b>there</b></div>
I've started a pull request with a failing test.
m('div', { a: true }), m('div', { a: false })
should be rendered as
<div a></div><div></div>
instead of
<div a="true"></div><div a="false"></div>
Can be fixed by:
function createAttrString(attrs) {
...
return Object.keys(attrs).map(function(name) {
if (typeof attrs[name] === 'function') {
return;
}
if (typeof attrs[name] === 'boolean') {
return attrs[name] ? ' ' + name : '';
}
...
}
Hi,
i'm currently trying your absolut masterpiece of software, but some how i'm a litte stuck ...
Within a component, i would like to use the m.route.param function, but on the server its not provided ... probably because there is no "mithril m.route()" call. Do you see a simple solution to bring this feature to your software? I'm not sure if its even possible because it looks like its more a mithril internal call ... maybe you see a workaround? Maybe a browserlyfied helper function?
Any ideas are greatly appreciate!
Greets,
Chris
Shouldn't it be a regular dependency instead of a devdependency? I don't know that this package makes much sense without also having mithril installed. You'd also then be explicitly tying it to a mithril version, which would be good in case mithril changes the underlying format of the data structure returned by m()
, thus breaking this module.
I can send a PR your way if you agree, it's a pretty small change ;)
Hello,
I found a problem when use this plugin with ES6 class component ( https://mithril.js.org/components.html#es6-classes ).
node raises error TypeError: Cannot call a class as a function
, because mithril-node-renderer calls es6 class as function in this.
https://github.com/MithrilJS/mithril-node-render/blob/master/index.js#L175
Best regards,
Hi, there
i use mithril + jsx in my app and i want use this ! how can i do that ?
render(m('', [ m('span'), [ m('ul') ]])) === '<div><span></span><ul></ul></div>'
Hey Stephan :)
in the latest version, it always escapes JSON, so if you want to render JS variables, it won't work, for example:
{
controller: function(params) {
this.js = {"hello": "world"};
return this;
},
view: function(ctrl) {
return m("SCRIPT", "var who = " + JSON.stringify(ctrl.js));
}
}
Should get:
<script>var who = {"hello":"world"}</script>
But get:
<script>var who = {"hello":"world"}</script>
mithril-node-render transforms
[m('div', false), m('div', 0)]
into
<div></div><div></div>
while mithril transforms the above into
<div>false</div><div>0</div>
Can be fixed as follows:
function createChildrenContent(view) {
if(Array.isArray(view.children) && !view.children.length) {
return '';
}
return render(view.children);
}
function render(view) {
var type = typeof view;
if (type === 'string' || type === 'number' || type === 'boolean') {
return view;
}
if (!view) {
return '';
}
...
}
Hi I am getting the error below because mithril-node-render assumes controller function returns an object which is not required.
TypeError: Cannot read property 'onunload' of undefined
at render (node_modules/mithril-node-render/index.js:87:14)
The easy fix for me is to add || {}
to the return value of view.controller()
var scope = view.controller() || {};
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.