Giter Site home page Giter Site logo

Render without DOM? about mithril.js HOT 15 CLOSED

yanns avatar yanns commented on August 26, 2024
Render without DOM?

from mithril.js.

Comments (15)

lhorie avatar lhorie commented on August 26, 2024 1

@StephanHoyer nice :)

I'm actually working on something similar too. A few things to consider: empty elements (e.g. <br />), and maybe considering handling events based on the value type instead of their names

from mithril.js.

ancms2600 avatar ancms2600 commented on August 26, 2024 1

i made this one in 35 lines if anyone is interested
https://gist.github.com/ancmikesmullin/102bcba5836362d46f4c0e7880e5a98f

from mithril.js.

lhorie avatar lhorie commented on August 26, 2024

Yeah, there's a couple of ways to do it.

One way is to implement a function that takes virtual elements and spits out an HTML string. A virtual element is a object that looks like

{tag: "div", attrs: {id: "foo", class: "bar"}, children: [ "a text node", /*other virtual elements */ ]}

You'd call this method instead of m.render if you're piecing things together manually.

I have a snippet that does this somewhere in my hard drive, but I haven't published it w/ the project. I'll go dig it up, but in the meantime, if you're feeling up to writing a bit of code, it's just a recursive function and not that hard to re-implement.

There's also an undocumented way, which is to mock the window dependency with the m.deps method. I have an example of this in the tests folder (mock.js), and a mock implementation that you can adapt to produce html strings as a side effect.

This second method is probably the more useful one, since it allows you to run the entire app on a programmable "browser"-in-the-server without the need for PhantomJS or similar.

I'm planning on releasing both the virtual-dom-to-html-string utlility method and a proper node.js adapter when I get the chance.

from mithril.js.

Raynos avatar Raynos commented on August 26, 2024

@yanns

you can use min-document or html-element as minimal DOM implementations.

Both of those support serializing their DOM representations to a HTML string.

You can also write a stringifier for a vdom representation by finding another stringifier and adjusting it to support mithril vdom like stringify.

from mithril.js.

activestylus avatar activestylus commented on August 26, 2024

Did you ever release that dom-to-string utility?

from mithril.js.

Raynos avatar Raynos commented on August 26, 2024

https://github.com/alexmingoia/virtual-dom-stringify

from mithril.js.

activestylus avatar activestylus commented on August 26, 2024

Cheers Raynos!

from mithril.js.

StephanHoyer avatar StephanHoyer commented on August 26, 2024

https://github.com/StephanHoyer/mithril-node-render

from mithril.js.

StephanHoyer avatar StephanHoyer commented on August 26, 2024

good point!

Fixed this

from mithril.js.

StreetStrider avatar StreetStrider commented on August 26, 2024

@lhorie, @StephanHoyer, @Raynos
Hello, everyone. Can you tell what's the status on this? Which soultion is preferred now?
@yanns, are you using some particular solution and if yes, which one?

from mithril.js.

lhorie avatar lhorie commented on August 26, 2024

@StreetStrider I'd use @StephanHoyer's library

from mithril.js.

tivac avatar tivac commented on August 26, 2024

@StreetStrider we've been using @StephanHoyer's library for months, it's exactly what you'd want.

from mithril.js.

StreetStrider avatar StreetStrider commented on August 26, 2024

@lhorie @tivac, Thanks for help! I'll certainly investigate it.
Also, thanks for keeping mithril in way of modularity and composability.

from mithril.js.

amireldor avatar amireldor commented on August 26, 2024

Hello persons. I've been trying out @StephanHoyer 's mithril-node-render. There's this issue with parameters to routes mentioned in his article (about his package). In order to get a parameter in your controller you have to do something like var stuff = params ? params.stuff : m.route.param('stuff').

Quoting:

This can be improved of cause. I simply did not come up with an elegant solution for this. Any ideas?

So, did anyone did come up with an elegant solution?

from mithril.js.

dead-claudia avatar dead-claudia commented on August 26, 2024

For what it's worth, for this reason alone I'm considering resurrecting my m-iso. Mithril itself simply relies too much on the DOM to sufficiently be useful in isomorphic applications. That's how it can stay so small. You'd be effectively reimplementing Mithril along with half of the DOM if you were to try to shim it into working in Node, especially if you're doing more than just rendering simple views and controllers (no network).

It's not elegant to remove Mithril from the DOM, and matter of fact, its source code isn't very elegant to begin with. Imagine spaghetti logic that manipulates quantum references to improbability drives. That's Mithril at the moment, and that's why @lhorie is working on a rewrite (thankfully).

As for m.route.param, that's a pretty simple concept to implement. The biggest problem with routing currently is Unicode. But to be honest, Unicode sucks. All it does is complicate things beyond all known recognition.

(Well...that and make it possible to write an app that supports 15 different languages, but let's ignore that for now...:smile:)

from mithril.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.