mithriljs / mithril-node-render Goto Github PK

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.

not support promise ?

Hi, there
i use mithril + jsx in my app and i want use this ! how can i do that ?

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?

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 ;)

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.

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.

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.

Would it be possible for you to bump it to [email protected]?

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.

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.

render(m('', [ m('span'), [ m('ul') ]])) === '<div><span></span><ul></ul></div>'

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-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 '';
  }

  ...
}

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 ?

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.

the blog is https://gist.github.com/StephanHoyer/bddccd9e159828867d2a
It will more convenient if you move it to the project wiki

the html will render become
<div><div>here?</div><button>button</button></div>
it can only render static content?

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 = {&quothello&quot:&quotworld&quot}</script>

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.

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

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 : '';
    }
    ...
}

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 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() || {};

TypeError: Cannot call method 'toLowerCase' of undefined
at render (../node_modules/mithril-node-render/index.js:86:47)

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?

see MithrilJS/mithril.js#1279

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.

Can you upload some DEMO? Thanks!

Hi Stephan,

Will this be made mithril v1.0 compatible? I understand that the mithril rewrite will be completed soon.

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?

Example:

m('div', { innerHTML: 'Hello <b>there</b>' }, 'No Thanks')

Result:

<div innerHTML="Hello &lt;b&gt;there&lt;/b&gt;"></div>

Expected

<div>Hello <b>there</b></div>

I've started a pull request with a failing test.

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

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,