nextapps-de / mikado Goto Github PK

Mikado is the webs fastest template library for building user interfaces.

License: Apache License 2.0

JavaScript 97.08% HTML 2.92%

template templates template-engine templating template-library rendering-engine virtual-dom handlebars mustache mustache-templates

mikado's People

Contributors

Stargazers

Watchers

mikado's Issues

mikado.debug.js:1053 Uncaught TypeError: Cannot read property 'n' of undefined

For some reason Mikado does not recognize the template name.

Template

<template id="index">
  <div>
    <h1>Index Route</h1>
  </div>
</template>

Compiled To JSON

{"t":"template","a":{"id":"index"},"i":{"i":{"t":"h1","x":"Index Route"}},"d":true,"n":"index","v":"0.7.53"}

Rendering

let rootNode = document.getElementById("ROOT");
Mikado.register(indexTemplateAsJson)(rootNode, "index");

// Another Way
Mikado.register(indexTemplateAsJson);
let view = Mikado("index")
  .mount(rootNode)
  .render();

Maybe I'm not using the API correctly?

Typescript support [Question]

Hello, I've found this framework interesting, but I could not see if it supports typescript and how to create a typescript based mikado project.
Does mikado support typescript? How do I configure a mikado project with typescript? If it is not supported, is it in the roadmap?

Thanks

more about the principle of implementation

Thank you, this is a great project!! ❤️
it is even faster than the vanillajs. I am very interested about it.
i want to know more about the principle of implementation, do you have related blogs or articles?

is it possible to use proxy with "{{#= ...}}" support?

Hi,
I am using a template with only proxy brackets, but I am in need of passing HTML string also to the template, which looks like:

<td data-sort="{{= data.inorders}}" data-balance="orders">{{#= data.inorders_format}}</td>

I set store: true when initiating Mikado., but when I check the console store is set to false.

I dont know if it is possible to use proxy with HTML string support.
This is taken from the Advanced example
https://github.com/nextapps-de/mikado#advanced-example

It writes like this:
To pass HTML markup as a string, the curly brackets needs to be followed by # e.g. {{# ... }}. For better performance, relevant tasks avoid passing HTML contents as a string.

But it doesn't mention proxy support?
Thanks for any update on this.

Edit: If this isn't supported, I would love to see this feature in the coming update.
Edit2: I noticed that stealth: true, does that mean it runs in stealth mode with proxy for faster performance updates?

regards Zilveer

click events don't work in IE10/11

In IE11 on a touchscreen device the click event is registered as a "tap"/touch event. And IE10/11 doesn't support touch events.

starting out with Mikado

I'm a newbie in using mikado (or any other ui library) and been trying to use it but I'm getting an empty page so far.
what are the first steps to start using mikado ?

proxy {{= is not working anymore

I had a view setup with lose=true, store=true and the template contains only one {{= data.isloading }}. Now after the update when i change: view.data(0).isloading = 'is-loading'; the data is updated but the dom is not.

I tried with an external store, with an observable array array also. The observable array only works if I change the whole data object at index 0. But I need to change only one property ...

Shouldn't keyed test use key property?

Shouldn't the third value of list be 'id' instead of null if it should be keyed test?

mikado/bench/test/redom/keyed.html

Line 66 in dfb701b

this.el = this.table = list('div', Item, null, { store });

Any update?

Hi,
what a lovely library, it really kicks Svelte, Vue, React and even Vanilla when used properly.

But have I missed something about the progress?
I havent seen any progress for long time and I really hope the developer @ts-thomas keeps up the good work.

Well done and I am really looking forward to updates.

regards Zilveer

Compiling the Todo demo fails

Compiling the Todo demo fails because it's referencing mikado/task/compile instead of mikado-compile. The compile command in the package.json references the wrong path for the template files. Serve references task/server instead of the npm package for mikado-server.

DEBUG build should not minify output javascript files

Support for compiling templates containing svg tags

I compiled a template with svg tags added, but the svg did not show up.

mikado.js v0.7.64

Issue:

Compiling a template with svg tags added does not show svg
- The svg tag should be created with Document.createElementNS.
- Probably the reason is that mikado uses Document.createElement to create elements.
Compiling an svg tag with the class attribute set result in an error.
- The className property of the svg element is SVGAnimatedString, not String.

Code (mikado/demo/svg/svg.dev.html):

The svg element is set to the "test-class" class.

<html lang="en">

<head>
    <title>Mikado</title>
</head>

<body>
    <div id="root"></div>
    <template id="basic">
        <svg width="1652px" height="296px" viewBox="0 0 1652 296" version="1.1" xmlns="http://www.w3.org/2000/svg"
            class="test-class">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="mikado-logo">
                    <path
                        d="M413.2,289.8 L360,289.8 L360,93 L410.8,93 L410.8,117 C421.6,97.8 446.8,87.4 468.4,87.4 C495.2,87.4 516.8,99 526.8,120.2 C542.4,96.2 563.2,87.4 589.2,87.4 C625.6,87.4 660.4,109.4 660.4,162.2 L660.4,289.8 L608.8,289.8 L608.8,173 C608.8,151.8 598.4,135.8 574,135.8 C551.2,135.8 537.6,153.4 537.6,174.6 L537.6,289.8 L484.8,289.8 L484.8,173 C484.8,151.8 474,135.8 450,135.8 C426.8,135.8 413.2,153 413.2,174.6 L413.2,289.8 Z M759.6,289.8 L706.4,289.8 L706.4,93 L759.6,93 L759.6,289.8 Z M759.6,53.2 L706.4,53.2 L706.4,-3.69482223e-13 L759.6,-3.69482223e-13 L759.6,53.2 Z M998.2,93 L919.4,175.8 L999.8,289.8 L934.6,289.8 L882.6,214.6 L860.6,237.8 L860.6,289.8 L807.4,289.8 L807.4,0.2 L860.6,0.2 L860.6,166.2 L928.6,93 L998.2,93 Z M1010,236.2 C1010,201 1036,181.4 1068.8,176.6 L1117.2,169.4 C1128.4,167.8 1132,162.2 1132,155.4 C1132,141.4 1121.2,129.8 1098.8,129.8 C1075.6,129.8 1062.8,144.6 1061.2,161.8 L1014,151.8 C1017.2,121 1045.6,87 1098.4,87 C1160.8,87 1184,122.2 1184,161.8 L1184,258.6 C1184,269 1185.2,283 1186.4,289.8 L1137.6,289.8 C1136.4,284.6 1135.6,273.8 1135.6,266.2 C1125.6,281.8 1106.8,295.4 1077.6,295.4 C1035.6,295.4 1010,267 1010,236.2 Z M1088.8,255.8 C1111.2,255.8 1132,245 1132,210.2 L1132,201.4 L1087.6,208.2 C1074,210.2 1063.2,217.8 1063.2,233 C1063.2,244.6 1071.6,255.8 1088.8,255.8 Z M1416.2,0.2 L1416.2,254.2 C1416.2,267.4 1417,281.8 1417.8,289.8 L1367,289.8 C1366.2,285.8 1365,276.2 1365,267 C1356.2,282.6 1336.2,294.6 1309.8,294.6 C1253.8,294.6 1213.8,250.6 1213.8,191 C1213.8,133.4 1252.6,88.2 1308.2,88.2 C1342.2,88.2 1358.2,102.2 1363.8,112.6 L1363.8,0.2 L1416.2,0.2 Z M1267.4,191 C1267.4,226.2 1288.2,247 1316.2,247 C1343.4,247 1364.6,226.2 1364.6,190.6 C1364.6,155.4 1343.4,135.8 1316.2,135.8 C1289,135.8 1267.4,155.8 1267.4,191 Z M1548.2,247.4 C1574.2,247.4 1598.2,228.6 1598.2,191.4 C1598.2,154.2 1574.2,135.4 1548.2,135.4 C1522.2,135.4 1498.2,154.2 1498.2,191.4 C1498.2,228.2 1522.2,247.4 1548.2,247.4 Z M1548.2,87 C1607,87 1651.4,130.6 1651.4,191.4 C1651.4,251.8 1607,295.8 1548.2,295.8 C1489.4,295.8 1445,251.8 1445,191.4 C1445,130.6 1489.4,87 1548.2,87 Z"
                        id="mikado" fill="#4A4A4A"></path>
                    <g id="Symbol" transform="translate(0.000000, 20.000000)">
                        <path
                            d="M240,240 L270,240 L270,270 L240,270 L240,240 Z M180,240 L210,240 L210,270 L180,270 L180,240 Z M180,180 L210,180 L210,210 L180,210 L180,180 Z M60,120 L90,120 L90,150 L60,150 L60,120 Z M120,120 L150,120 L150,150 L120,150 L120,120 Z M120,60 L150,60 L150,90 L120,90 L120,60 Z M240,0 L270,0 L270,30 L240,30 L240,0 Z M120,0 L150,0 L150,30 L120,30 L120,0 Z M240,120 L270,120 L270,150 L240,150 L240,120 Z"
                            id="Red" fill="#EB4642"></path>
                        <path
                            d="M60,240 L90,240 L90,270 L60,270 L60,240 Z M120,240 L150,240 L150,270 L120,270 L120,240 Z M0,240 L30,240 L30,270 L0,270 L0,240 Z M240,180 L270,180 L270,210 L240,210 L240,180 Z M60,180 L90,180 L90,210 L60,210 L60,180 Z M120,180 L150,180 L150,210 L120,210 L120,180 Z M0,180 L30,180 L30,210 L0,210 L0,180 Z M0,120 L30,120 L30,150 L0,150 L0,120 Z M240,60 L270,60 L270,90 L240,90 L240,60 Z M180,60 L210,60 L210,90 L180,90 L180,60 Z M60,60 L90,60 L90,90 L60,90 L60,60 Z M0,60 L30,60 L30,90 L0,90 L0,60 Z M180,0 L210,0 L210,30 L180,30 L180,0 Z M60,0 L90,0 L90,30 L60,30 L60,0 Z M0,0 L30,0 L30,30 L0,30 L0,0 Z"
                            id="Blue" fill="#58ABEA"></path>
                        <rect id="Yellow" fill="#FFD200" x="180" y="120" width="30" height="30"></rect>
                    </g>
                </g>
            </g>
        </svg>
    </template>

    <script src="../../src/config.js"></script>
    <script type="module">
        import Mikado from "../../src/mikado.js";
        import Compile from "../../src/compile.js";
        Mikado.compile = Compile;

        const root = document.getElementById("root");
        const template = Mikado.compile("basic");
        Mikado.once(root, template);
    </script>
</body>

</html>

Error:

Uncaught TypeError: value.indexOf is not a function
    handle_value mikado/src/compile.js:273
    compile mikado/src/compile.js:155
    <anonymous> mikado/demo/svg/svg.dev.html:38
compile.js:273:15

for with if example gives js error

I'm trying to do a template with a "for" that has an "if" within it and can't get it to work, gets an error. I found the example on the readme page is very similar and gets the same error.

Example conditional branch from README.md that gives error:

<main>
  <title>{{ data.title }}</title>
  <tweets for="data.tweets">
    <section if="data.content">{{ data.content }}</section>
  </tweets>
</main>

Full code to run:

<script src="mikado.debug.js"></script>
<div id="app"></div>
<template id="tpl">
<main>
  <title>{{ data.title }}</title>
  <tweets for="data.tweets">
    <section if="data.content">{{ data.content }}</section>
  </tweets>
</main>
</template>

<script>
var data = {
    title: "Some title",
    tweets: [
        {content: "Text1"},
        {content: "Text2"},
        {content: "Text3"},
    ]
}
var view = new Mikado(Mikado.compile('tpl'));
view.mount(document.getElementById('app'));
view.render(data);
</script>

Error is: VM14:3 Uncaught TypeError: Cannot set property 'hidden' of undefined

Code generated:

(function anonymous(p, s, data, index, view) {
    "use strict";
    var self, v;
    if (true) {
        self.hidden = false;                 <----- self was never set, so gets error here
        self = p[1];
        v = data.content;
        if (self._text !== v) {
            self._text = v;
            self.nodeValue = v
        }
        ;self = p[0]
    } else
        self.hidden = true
}
)

Mikado 0.7.57

Issue when used together with Webpack?

Hi
When trying to use Mikado inside a webpack-packaged application, I see the following error on the browser's console:
Uncaught ReferenceError: SUPPORT_EVENTS is not defined
which seems plausible since the first 3 lines of event.js seem to be

import Mikado from "./mikado.js";

if(SUPPORT_EVENTS){

It doesn't matter if I use const Mikado = require('mikado'); or import Mikado from 'mikado'

Is this some sort of bug, or is it just me not understanding how this thing works or how it is supposed to be used?

Error while compiling

Hi, first congrats as it looks like a very promising project !

However I had problems while following the basic exemple :

This work :
npm install mikado-compile
npx mikado-compile template.html

This doesn't work :
npm install mikado-compile
npx mikado compile template.html
Error: Module was not found. Please run 'npm install mikado-compile'

I also try to install it globally but without success.

using nvm
node version : 8.9.1 and 8.12.0
mac os Mojave

update api docs

I think some api methods from docs (README.md) are out of sync with the code.

1 . view.init(<template>, <options>)

template is not optional
the example below will not work:
Initialize an existing view with new options:
view.init(options);

2 . view.apply(node, <data>, <payload>)

the definition of method is: .apply = function(root, data, index, payload) and it is not handled so that it can check if payload is provided instead of index.
there is no description for this method on where and how to use it.

3 . view.add(data, <payload>)

the example below will not work:
Add one data item before an index:
view.add(data, 0); // add to beginning

4 . view.update(node, data, <payload>)

it should of been view.update(node | index, data, <payload>), because it is handled if we provide a number instead of a node.

5 . view.refresh(<payload>)

it should of been view.refresh(<node | index>,<payload>)

6 . view.shift(node | index, index), view.listen(event) and view.unlisten(event)

there is no description for this methods on where and how to use it.

7 . Reactive Proxy (Observer) - version from Limitations needs to be updated

Proxy actually comes with some limitations on template expressions. Improving those restrictions is already work in progress and will release in v0.5.0.

README.md is too long

I'd like to suggest breaking down everything from Table of contents down to the very bottom of the page into small(er) .md files, and putting them into docs/, possibly at some point generating a static website out of it to serve as a documentation.

The current reconcile algorithm will be slow in theory

Because it's O (N ^ 2).

Theoretically, it is much slower than other algorithms, and the use case in performance test is just a special case of its speed.

what is the main diffrence beween Keyed/Non-Keyed Modes ?

In another way what is the use of each of them ?

Create More Example

Hi, Thomas, can you give more example. maybe based on requirement https://github.com/gothinkster/realworld. thx

The docs state that we can refresh by node reference but the code that should handle it is commented out

In the docs / readme we have:

view.refresh(<node | index>, )

But the code snippet above, that should handle the node case is commented out:

    // else if(index && (typeof (tmp = index["_idx"]) === "number")){
    //
    //     node = index;
    //     index = tmp;
    // }

Error in benchmark test on https://mikado.js.org/

When I run the benchmark test on https://mikado.js.org/ in the latest Google Chrome,
the test stops rendering results after starting the Mikado test...
In the Devloper Console I see multiple instances of this error message:
event.data.split is not a function

Thanks & keep up the good work!
Teun

Nesting views?

Is there a best practice for nesting views? Or it should not be done unless the parent view is rendered as once?

Mikado.compile (in browser) error if template contains elements without closing tag

If you have non closing elements in the template (br, img, input, etc.) calling the compile method throws: TypeError: Cannot read property 'nodeValue' of null

const template = (

`<template id="testnonclosing">
    <div>
		<h1>Test non closing</h1>
		<input name="firstname" type="text">
		<br>
		<br />
    </div>
    <div>
		<h1>Test non closing</h1>
                    <img src="" alt="">
                    <img src="" alt="" />
    </div>
</template>`

);

*tested only in browser

view.data(node) returns undefined on event handler

I'm trying to make a sample work but I've found an issue. If I don't call view.refresh() or view.render() twice, then view.data(node) returns undefined:

Code sample below:

<div id="app"></div>
<template id="user-list">
	<div>
		<p>{{data.name}}</p>
		  <ul for="data.roles">
			<li class="{{data.active ? 'on' : 'off'}}" click="clicked">{{data.description}}</li>
		  </ul>
	</div>
</template>

<script src="https://rawcdn.githack.com/nextapps-de/mikado/master/dist/mikado.es5.js"></script>
<script>

	var users = [
	  {
		name: "John",
		roles: [{description: 'data reader', active: 1}, {description: 'data writer', active: 0}, {description: 'dbo', active: 0}]
	  },
	  {
		name: "Anna",
		roles: [{description: 'data reader', active: 1}, {description: 'data writer', active: 1}, {description: 'dbo', active: 0}]
	  },
	  {
		name: "Thomaz",
		roles: [{description: 'data reader', active: 0}, {description: 'data writer', active: 0}, {description: 'dbo', active: 1}]
	  }
	];
	
	 var tpl = Mikado.compile(document.getElementById("user-list"));
	 var view = Mikado(tpl, { store: true, loose: true });
	 view.route("clicked", function(node, event, self) {
		var item = view.data(node);
		console.log(item); // if we don't call view.refresh (or view.render twice) it logs 'undefined'
	 });
	 view.mount(document.getElementById('app'));
	 view.render(users);
	 //view.refresh(); // uncomment to make it work as it should ...

</script>

Typos in README

The word thrust should be trust.
The words you are thrust should be you trust.
The words mode which boost should be mode, which boosts.

Mikado and web components

Hi,

@ts-thomas, what are your thoughts about combining mikado lib with web components? There is not a single reference in doc about Shadow DOM.
has someone tried using mikado in Shadow DOM or any basic wc lib?

Looking forward to reading thoughts and experiences. Tia

Can someone help me to complete benchmark test?

I would be really happy about if someone could help me to implement further benchmark libraries.

The boilerplate for the test is really simple. It needs just one public function which renders a passed array to a given template, e.g.: https://github.com/nextapps-de/mikado/tree/master/bench/test (each index.html takes the whole test implementation).

Issue 1: I have some issues with the implementation of knockout, it performs too bad but idk how I can improve that.

Issue 2: The benchmark of vue.js runs asynchronously, I did not find a way how to force updates in sync (nothing worked).

Basic demo es6 does not work

I test this file
demo/basic/demo.es6.html

The error is:
Uncaught TypeError: this.listen is not a function

Could you have a look?

Mobile Benchmarks and Keyed Benchmarks

Since mobile performance is a large factor for some applications, here are some benchmarks.

Device Details

Android Power-Save Mode

Android Performance Mode

Input max value in templates is removed when rendered

HTML provides a "max" attributed to set the maximum value for an input field. Mikado removes it when rendering the templates. This is most noticeable on range input fields because the max value determines how far a user can slide it to the right.

For example, I should be able to do this in the template...

But instead have to do this in the template...

Then run this javascript after the template is rendered... document.getElementById('qty-' + id).max = qtyMax;

The same issue applies to number input fields (e.g., "<input type="number" max="10") where it can be used for notifying users when they have entered a number outside of the range (e.g., "input:out-of-range { border: 2px solid red; }").

I think Mikado ignores the input max attribute because it is using the max attribute for loops.

Add morphdom to benchmarks

It would be good to add https://github.com/patrick-steele-idem/morphdom to the Mikado benchmark, since both use a similar pattern of DOM patching.

possible to do a pwa / real world app example?

Irrelevant Benchmarks

In the Compiler Methods the benchmark results are irrelevant to a real world project.
What if instead of op/s we have ln/s as in lines per second?

Issue with using templates with table tags

Hi,

I have issues with using templates with table tags.

This is my html:

<table id="log"></table>

and this is my javascript

var tweets = [
  {
    user: "User A",
    tweets: ["foo", "bar", "foobar"]
  },
  {
    user: "User B",
    tweets: ["foo", "bar", "foobar"]
  },
  {
    user: "User CC",
    tweets: ["foo", "bar", "foobar"]
  }
];

const tpl = 
  `<tr>
    <td>User: {{ data.user }}</td>
    <td>Tweets: {{ data.tweets.length }}</td>
  </tr>`;

const tplC = Mikado.compile(tpl);
const view = new Mikado(tplC);

const container = document.getElementById('log');
view.mount(container);

view.render(tweets)

But it throws error Uncaught TypeError: can't access property "id", a is null
on the line: const tplC = Mikado.compile(tpl);

When I am using div tags in template it works good, but it doesnt want to work with table tags.
Can someone guide me here?

All help is appreciated.

regards Zilveer

TodoMVC: Proper method for running the demo

In order to make the todo app work after removing all files in the subdirectories of ./template except for *.html files I had to:

npm install mikado
npm install mikado-compile
At the root directory of todomvc/ run the following -

npx mikado-compile template/main/main.html
npx mikado-compile template/footer/footer.html
npx mikado-compile template/list/list.html
npx mikado-compile template/app/app.html

npx http-server
then go to localhost:8080/ and interact with the site.

At step 3 I tried npx mikado-compile, npx mikado-compile template, and npm run compile. None of them worked.

At step 4 I tried npx mikado-server and npm run server. Neither of the commands worked.

I got it working so I'm happy, I'm just wondering if I'm supposed to do something else. Cool project btw.

broken link in readme TOC

actual

mikado/README.md

Line 89 in 28338f4

11. <a href="#keyed">Keyed / Non-Keyed Modes</a>

expected

https://github.com/nextapps-de/mikado#keyednon-keyed-modes

Consider a community chat

@ts-thomas Could we set up a community chat for Mikado?
Slack, Gitter, etc

We need to handle XSS

I already made some notes to this topic: https://github.com/nextapps-de/mikado#xss-security

We should start by supporting an external sanitizer for the client side which could be passed as a parameter when initialize the view (not compiling, because this method is optional).

Mikado.once doesn't work if provided a callback.

According to your example : Mikado.once(root, template, data, payload, callback);
We could provide a callback, but when providing a callback it will render after destroy(true) so it throws :
Template was not mounted or root was not found.
Cannot read property '0' of null

Bench issue

Congrats on your library! Awesome performance.

Thanks for adding Sinuous to the bench. I appreciate it!

I saw you couldn't use the template function, I think it's because of this custom href attribute on the div element.
https://github.com/nextapps-de/mikado/blob/master/bench/test/sinuous/index.html#L30

Node.cloneNode() doesn't clone "custom" properties. I know it's an attribute but in my lib properties are set if possible. Since href is specific to anchor tags it's not cloned I guess.

Renderer add div to text element

Template:

<a href="/home"><i class="fa fa-home"></i> Oreo</a>

Rendered:

<a href="/home"><i class="fa fa-home"></i><div>Oreo</div></a>

It makes the text show on another line which is not aligned with the fontawesome icon.

Using template in the same file with Mikado's constructor

Hi Thomas Wilkerling,

Any chance to use template as following and compile to json format with babel:

const user = ...

const template = html`
<table>
    <tr>
        <td>User:</td>
        <td>${user}</td>
    </tr>
    <tr>
        <td>Tweets:</td>
        <td>${user.tweets.length}</td>
    </tr>
</table>
`

const view = Mikado.new(template);

src/mikado.js line 850 typo error

Hi, in src/mikado.js on line 850 we have this.apply(tmp, item, view, x) and should have been this.apply(tmp, item, x, view). Right now you are passing the payload instead of the index.

I also provided a comment on your commit at the specified line.

I am now in the learning phase of mikado. And still have a bunch of things to test and see how they would fit best in my future projects. Anyway you did an amazing job creating mikado. Congrats!

Docs Website

It would be nice to have a docs website for easier way to browse the documentation.

We could generate the docs using Docute, Docsify, etc and host with GitHub pages.

Condition on {{...}} does not work as expected

<span class="nav-item">
    <a class="nav-link {{ data.active_tab == 'setting' ? 'active' : '' }}" href="/#setting">test</a>
</span>

render result, class is empty:

<span class="nav-item"><a href="/#setting" class="">test</a></span>

Modify to this:

<span class="nav-item">
    <a class="{{ data.active_tab == 'setting' ? 'nav-link active' : 'nav-link' }}" href="/#setting">test</a>
</span>

the result is rendered ok:

<span class="nav-item"><a href="/#setting" class="nav-link active">test</a></span>

Xone Reboot

Xone reboot would be very much interesting. Please do not wait for Github starts to motivate you.

More solid features may in fact boost the number of starts and usage.

Also, see if there is a chance like being part of a foundation like perhaps OpenJS which may boost adaptation and contributions. Maybe your work on search and animation can be part of it if there is a chance.

nextapps-de / mikado Goto Github PK

mikado's People

Contributors

Stargazers

Watchers

Forkers

mikado's Issues

Template

Compiled To JSON

Rendering

Device Details

Android Power-Save Mode

Android Performance Mode

Recommend Projects

Recommend Topics

Recommend Org