malinajs / malinajs Goto Github PK

View Code? Open in Web Editor NEW

1.1K 40.0 37.0 1.69 MB

Frontend compiler, inspired by Svelte

Home Page: https://malinajs.github.io

License: MIT License

HTML 0.72% JavaScript 99.28%

malinajs's Introduction

Malina.js

Malina.js helps you create a fast and thin web application that runs without a front-end framework

High performance, look at benchmark
One of the best in startup metrics
Compact bundle size of an app (starts from 185 bytes), TodoMVC example 2.7kb (gzipped) source code
Familiar syntax based of standard HTML, CSS and JavaScript

Benchmark

Startup metrics

Articles

Example

<script>
  let name = 'world';
    
  function rename() {
    name = 'user';
  }
</script>

<h1>Hello {name.toUpperCase()}!</h1>
<button @click={rename}>Rename</button>

Quick Start

You can get started with a simple app by running the following in your terminal:

npm create malina myapp
cd myapp
npm run dev
# open http://localhost:7000/

License

MIT

malinajs's People

Contributors

Stargazers

Watchers

malinajs's Issues

Encoding

Anything I write into a component in non-English, appears in the wrong encoding, Western instead of UTF8 (rendezÃ©s that should be rendezés). While all the data from outside (say, a database) appears correctly.
I tried in the root component

<malina:head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>malina zz app</title>
</malina:head>

, title works, meta doesn't.
And now, firefox has even disabled the encoding correction.

.editor > :global(*) crashes

So this code that works in Svelte:

.editor > :global(*) {
    background-color: #444;
 }

Does this in Malina:

[!] (plugin malina) Error: CSS error: '.editor.m3pnt7t>*'

Similar-looking code like :global(.editor > *) and .editor :global(*) works, and docs say that setting :global on part of CSS selector should work, but of course that's not quite what I need.

The use case is having some display: flex/display: grid parent with a bunch of flex item children which have some shared properties. In this case I'm setting background-color like that as there's no gap-background-color, but it's a reasonably common pattern.

I think Malina just needs some regexp fix here.

'import' and 'export' may only appear at the top level

Hi Oleg,
Malina gave me (plugin malina) SyntaxError: 'import' and 'export' may only appear at the top level;

let Cmp
function onMount(){
   import('./test.html').then(module=>Cmp=module.default))
})

How to write <svelte:component this={Cmp}/> in Malina?
Please, help. Im trying to convert my app to malina.
Thanks

Does Malina use event-delegation for bindings?

In the Medium article about Svelte vs Malina i saw this code-snippet showing how Malina builds the DOM:

$element.innerHTML = `<div class="some class"> <span> <b>a lot of <i>html</i> can be here</b> </span> </div>`;
$element.childNodes[0].childNodes[1].addEventListener('click', ...);

I have not read through the source code, but is my intuition correct thinking that Malina adds an EventListener to every single element with an event-binding? If that's the case then implementing event delegation would enhance the performance of an application (especially when scaling). Thoughts about this?

Scope CSS

Hi, Oleg,
Scope CSS not work in media query.

nav {
   left: 15rem;
}
@media screen and (min-width: 768px) {
      nav {
         left: 0;
      }
}

Regards,

[bug] Не появился css-хэш у элемента с заданным классом

Не появился css-хэш у элемента с заданным классом

Исходные данные

REPL
MalinaJS v.0.6.57

Ожидаемый результат

(в контексте примера из repl)

в <style> появится h1.s.md7ffuy{color:red}h1.m.md7ffuy{color:yellow}
в <body> появится <h1 class="m md7ffuy">hello world</h1>

Фактический результат

(в контексте примера из repl)

в <style> появился h1.s.md7ffuy{color:red}h1.m.md7ffuy{color:yellow}
в <body> появился <h1 class="m">hello world</h1> (нет класса .md7ffuy, из-за этого стили не отработали)

pure browser only frame work is possible or not?

hello,
I'm trying using some browser only frame work to do my work on some project.
I've tried vue 2.6 and alpine 3.8 and both can work for me, but my project has huge amount of nodes(some kind of sheet with cells).
vue and alpine are all slowing down in this scale.
and then i've tried your work, it looks work fast and easy for coding.
Thanks !

however , My project needs to work with jsp together in one page, which means that node.js is not accepted .
So, is that malina.js possible to work in pure browser end?
(like <script include...>)
If so, how to try it?
(I've tried online (REPL), but don't know how to derive it out.(runtime.js just works for builded code?)

Using script and stylesheet headers

As like svelte:head, is there a way to use files like loaded in html <head> tag?

List item binding consistency problem.

When items are added by push method,
each block works well but in text expression, there occurs problem.

Code example:
When I clicked 'put' button, the <div> tag with each block updates automatically.
But the <p> tag with list variable binding only doesn't update automatically.

<script>
    let name = 'world';
    let lst = [1, 3, 5, 7, 9]
    let val = "";
</script>

<input type="text" value={val} />
<button @click={lst.push(5)}>put</button>
<h1>Hello {name.toUpperCase()}!</h1>
<div>
    {#each lst as itm, idx}
        <p>{itm} {idx} </p>
    {/each}
</div> 
<p>{lst}</p>

Support to deno

any plan to add support so that the compiler can run in deno. could help

Why does this error?

https://malinajs.github.io/repl/#/share/5f8eab64783693001713bb9a

Dont know how to explain it better than the code.
If I add two or more items to the array in one, um, tick, then it will error on the next add in the next tick.

Im new to this sort of thing, so prolly doing something not the best way, I dunno.

Avoid inserting `$$apply` on side effects free functions

Hi, I was playing around with Malina in the repl and I noticed that an $$apply call would be inserted for every function declaration, even though I didn't have a mutation on any of the bindings, so I dug into the code and realized that we can make the compiled output smalled (and faster) by not including that change-detection check on:
- Uncalled functions
- Functions that don't reference any binding in it
- Functions that do have reference to a binding but they don't mutate it

For example, none of these function should get the $$apply marker on it

<script>
	const data = []

	// Uncalled
	function foo(a, b) {
		return a + b
	}

	// No reference to binding mutation
	function bar() {
		console.log("Hi")
	}

	bar()

	// Reference to binding but no mutation
	function zoo() {
		console.log(data)
	}
	
	zoo()
<script/>

<h1>{data}</h1>

I implemented the uncalled function check, to later realize that it's not actually necesary since the tree-shaker will remove the function altogether, but the other two cases will apply, if this is interesting to you I can try develop them.

I would need to get a list of the binding inside the transformNode function, so I can check if inside that function any binding is being referenced and/or mutated.

Although a simple name check would be totally right (we may get false negatives, adding $apply where it wasn't needed) because we would actually need to build a symbol table so othat a variable foo actually referes to the foo in the template and not any othe foo from a different scope.

Parse error

Hi, malina is a awesome framework, a great metrial for learning, thanks.

And I found a issue in the html parser, code below should be valid, now it throws an error [MalinaJS] Compile error: AssertError: undefined.

<button @click={1+/*}*/1}>hello</button>

REPL: Inconsistent spoken language displayed

The editor and tab titles are displaying in one language (non-english) while the rest of the app is in english. I've attached a pic to show the issue. I went through each of the examples and versions and it was the same.

[Question] - Why Malina

Hi,
I find Malinajs an awesome framework! A lot of things are better than Svelte, and it's really compact. So here comes my question: why create an independent project instead of contributing to Svelte? For a personnal project it's really cool to make something similar to Svelte, but it could be awesome to have all this features in Svelte directly.

Anyway, good work!

Support for a svelte-preprocess equivalent (stylus, pug, etc directly in component files)

Are there plans to support this ? Or is there already a way to do it ?

The improvements over Svelte are great and I strongly consider switching to Malina for any project to come, but this is a very important feature to me so I would like to know how or whether it's considered.

I'm aware that Malina supports SASS out of the box, but I didn't find anything for HTML.

Regardless, thanks for the great work.

How to bind event to a class?

How to bind event to a class?
As jQuery:
$('.myclass').click(doSomething());

What's the preferred name?

I think this project is really cool, that's why I am creating a plugin to support this framework in Reboost, but I am not sure what the plugin should be called. What's the preferred name for this project? Just Malina or MalinaJS? Or what the plugin's name should be? plugin-malina or plugin-malinajs. Waiting for your answer 😀

[idea] insert css (just like js)

Since we are able to arbitrarily insert js in the document, it seems like arbitrarily inserting css should also be possible. I think it would also make sense for these styles to be scoped in the same fashion as #64.

<div>
    {- button {
        color: blue;
    }}

    <button>this is blue</button>
    <button>this is blue</button>
</div>
<button>this is not</button>

we could also have self references matching the js references

<div {- $element {
        background-color: red;
    }}>
</div>

this has an advantage over inline styles because we an do media queries

<div {- @media (max-width: 600px) {
            $element {
                background-color: red;
            }
     }}>
</div>

we could do global like this

{- global .some-class {
    ...
}}

and/or we could do global like this

{- :global(.some-class) {
     ...
}}

Hope this makes sense to you; Happy to help out in any way I can. You can reach me quickest in the Discord server.

Keep up the great work!

[idea] insert, script, and style syntax simplification/unification

This issue will make most sense if you first read #64 and #65.

Inserts are a great feature, but they bring into question the existence of the script and style tags. If JS can be inserted anywhere using the syntax {* } then why do we need the syntax <script></script>. In my opinion, it would be ideal to have as little syntax overlap as possible to avoid the inevitable "what's the difference between x and y?" questions. I think we could simplify the syntax to be more along the lines of this.

{* 
    import Component from "./Component";
    ...
}

<div>
    <Component/>
</div>

{-
   div {
        background-color: blue;
    } 
}

Alternatively, we could make things more semantic and consistent with something like this. Notice @ symbols matches the @html so it fits right in.

{@js
    let a = 5
}

<div>
    {@js let a = 5}
</div>

{@css
    div {
        background-color: blue;
    }
}

This would also allow a consistent syntax for 3rd party languages.

{@rust
    ...
}

Hope this makes sense to you; Happy to help out in any way I can. You can reach me quickest in the Discord server.

Keep up the great work!

Reference to component results compilation error

Example from documentation doesn't work.

https://malinajs.github.io/repl/#/share/bEVMvA-pGH0

MalinaJS:Compile error: can't access lexical declaration 'name' before initialization: <Component #component />

Also as an idea: maybe it makes sense to cover the code with tests?

Do I need something special for imports from npm packages?

In package.json:

  "dependencies": {
    "fast-printf": "^1.6.9"
  }

In src/App.xht:

import { printf } from "fast-printf"

I get this error:

[!] Error: 'printf' is not exported by node_modules/fast-printf/dist/src/printf.js, imported by src/App.xht

Meanwhile:

$ cat  node_modules/fast-printf/dist/src/printf.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.printf = exports.createPrintf = void 0;
const createPrintf_1 = require("./createPrintf");
Object.defineProperty(exports, "createPrintf", { enumerable: true, get: function () { return createPrintf_1.createPrintf; } });
exports.printf = createPrintf_1.createPrintf();

The same code works in Svelte just fine. Do I need some special syntax for this? There's nothing about it in the docs.

Parameters

Can I give GET (or any) parameters to the app?
If I try to add ?anything to localhost:7000 all I get is Not found.

localhost:7000#{"k":"v"} works, I can get it from location.href, but it's awkward.

Each block error

Code below does not work properly.

<script>
  let data = [1,2,3,4,5]
</script>

{#each data as item}
  <button @click={data.push(item)}>{item}</button>
{/each}

https://malinajs.github.io/repl/#/share/6058c7cb67286100157937c7

Native support for TypeScript?

Are there plans to support TypeScript? There's some good work here, would love to see type-safety built in.

[Idea] #break (and #continue)

Just an idea, not even necessarily a good one, but at least interesting 😀:

I usually don't use else in code and just use return inside if statements. I wonder if the same would make sense in templates.

Here I think of every HTML element as a NodeList that we loop over to render the children. So using the name break makes sense. (continue could make sense in #each blocks).

Simple example

This

{#if error}
  <p>Error: {error}</p>
  {#break}
{/if}

<div>Div with a lot of contents</div>

would render the same as

{#if error}
  <p>Error: {error}</p>
{:else}
  <div>Div with a lot of contents</div>
{/if}

Nested example

<div class="container">
  {#if error}
    <p>Error: {error}</p>
    {#break}
  {/if}

  <p>This is not rendered...</p>
</div>

<p>...but this is</p>

Labeled

Probably a bad idea, and rarely any use for, but still interesting

<div #container class="container">
  <div class="inner">
    {#if error}
      <p>Error: {error}</p>
      {#break container}
    {/if}
  
    <p>This is not rendered...</p>
  </div>
  
  <p>...neither is this</p>
</div>

<p>But this is</p>

[feat] each item destructor

💡 Деструктор итерируемого элемента

Дать возможность в блоке #each деструктуризировать (распаковать) итерируемый элемент.

Преимущества:

отсутсвие доп строчек кода, при создаиние компоненты => чище код

Текущая реализация:

malinajs: 0.6.55

<script>
    let properties = {
        category_id: {type: 11, title: 'Категория'},
        guid: {type: 18, title: 'GUID'},
        name: {type: 18, title: 'Название'},
        photo: {type: 18, title: 'Фото'},
        sku: {type: 18, title: 'Артикул'},
    };
</script>

<ol>
    {#each Object.entries(properties) as item}
    {* const [key, property] = item}
        <li>{property.title}</li>
    {/each}
</ol>

Ожидаемый результат

<script>
    let properties = {
        category_id: {type: 11, title: 'Категория'},
        guid: {type: 18, title: 'GUID'},
        name: {type: 18, title: 'Название'},
        photo: {type: 18, title: 'Фото'},
        sku: {type: 18, title: 'Артикул'},
    };
</script>

<ol>
    {#each Object.entries(properties) as [key, property]}
        <li>{property.title}</li>
    {/each}
</ol>

Unexpected token

Hi, @lega911

I have issue to run malinajs. After npm run dev the following errors shown up. I am currently using windows 10 and vscode.
`

rollup -c -w
Malina.js 0.5.1
rollup v2.21.0
bundles src/main.js → src\public\bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\App.html (6:29)
4:
5:
6: Hello {name}!
^
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:5171:30)
at Module.error (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:9603:16)
at tryParse (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:9517:23)
at Module.setSource (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:9902:30)
at ModuleLoader.addModuleSource (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:17777:20)
at async ModuleLoader.fetchModule (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:17831:9)
at async Promise.all (index 0)
at async ModuleLoader.fetchStaticDependencies (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:17855:34)
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (C:\2020-TMP\000\myapp\node_modules\rollup\dist\shared\rollup.js:17832:9)
`

Can't write an {expression} into a <td> or <th> element

Hi.
The answer is el1 is null .
See this.

<script>
    let name = 'world';
</script>

<h1>Hello {name.toUpperCase()}!</h1>
<table>
  <tr>
    <td>aaaa</td>
    <td>{name}</td> <!-- this breaks it -->
  </tr>
</table>

Thanks,
Laca

convert numbers automatically

Malina looks great. One thing: This same code on sveltejs does not need the parseInt() calls, I think because it figures out the input is type "number" would that be good to add to malinajs?

https://malinajs.github.io/repl/#/share/5f877e0fd710fc00172f8c7a

<script>
    let a = 1
    let b = 2
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
<p> {a} + {b} = {parseInt(a) + parseInt(b)}</p>

[idea] dom nodes could represent javascript closures when inserting js

My initial assumption when I read about snippets was that variables would be scoped to the dom node they are within. This doesn't seem to be the case but I think it would be a very powerful feature. Was this already considered?

Example 1: variable declared inside the dom node closure

<div>

    {* let a = 5} `a` enters the scope here

</div> `a` exits the scope here

Example 2: variable declared on the dom node

<div
    {* let a = 5} `a` enters the scope here
> `a` exits the scope here

</div>

alternatively

<div
    {* let a = 5} `a` enters the scope here
 >

</div> `a` exits the scope here

Allowing Globals

In my opinion, having the snippets be global is an anti pattern because it will lead to variable conflicts, but maybe it could be allowed using a modifier.

{global * let a = 5;}
{* global let a = 5;}

Hope this makes sense to you; Happy to help out in any way I can. You can reach me quickest in the Discord server.

Keep up the great work!

store management - writable ?

Does MalinaJs support svelte store management - svelte writable or what is the best store for MalinaJs ?

routing

i thought react was a good framework, then i discovered svelte and i thought it was better than react and now i discovered malina which is even better than svelte. I would like to see malina in the top 1. I think it would be a good idea to implement a routing system based on the file structure and their names as they do in Sapper, nextjs, blitzjs, zeroserver.io

Top level <g> does not work

So I tried to port my Svelte hello world to malinajs.

Turns out elements with top level do not work (broken branch)

Here's what works (each element with own svg)

I used Chrome dev tools, clicked edit as HTML on #eyes, added one space to make Chrome save, and pressed enter - and suddenly it appeared (but at this point it wasn't reactive, as it's just raw html).

So it's probably something to do with SVG namespaces or base classes or whatnot.

(Imba2 has same problem; Imba1 and Svelte don't)

Joining forces with Svelte?

Svelte has some cool new features coming next.
It will drop support for Sapper and svelte will be able to do server side render too.

Svelte has already support for Typescript, it's known by devs.

I love the improvements that Malina.js brings, but it would be awesome if Svelte and Malina would merge.

Is there any way to trigger use: action after rendering finished, not before?

OK so this code in Svelte REPL and Malina REPL does different things:

<script>
let output = ""
function action(el) {
  output = el.innerText
}
</script>

<div use:action>
{#each [1,2,3,4] as i}
{i}
{/each}
</div>

DIV CONTAINS: {output}

Malina runs it before children update so it gets "". Svelte runs it after children update so it gets "1 2 3 4".

I don't mind whichever one is the default, but I don't know how to get Svelte-like behavior in Malina, and I need it.

Svelte even has await tick() I could use for this if it wasn't already default to wait for full render, but I don't think Malina has anything like that.

(for my use case I need parent's scrollHeight etc. to see which elements can be seen and do some conditional rendering logic, and that won't be ready until all children are rendered).

Using CSS Framework

I want to see Malina using one of CSS framework.

TailwindCSS
Bootstrap

I think it will be great building Design System with Malina.

Should I put it in /example/tailwindcss? What do you think? @lega911

Feedback

(There's probably a better place to put this than a github issue, but responding in a Medium comment made the code sections impractical)

I'm pretty excited for this framework.

I love/use Vue, but I've known I'll eventually have to switch away from it because of the virtual DOM. React has all of the fundamental problems, I've been keeping up with Svelte as I think they have the right idea with $: and no virtual DOM, but it is flawed with change detection and other aspects. So seeing this as a combination of Svelte and Vue gives me hope that Manilla can be (not the perfect framework, but) the framework without any fatal design flaws.

I hope this feedback will help

#divRef is awesome #1 needed feature that was lacking in all frameworks I know of. I'm absolutely thrilled to see it
<CustomComponent /> (react style) also awesome, it really connects the JS to the HTML
Functional components (also react style) awesome as well Vue greatly needed/needs these for creating simple wrappers
Deep reactivity / two-way data binding is a must, and it looks like Malina nails that 👌
Scoped CSS is also must. I've heard Malina has it, but I'm not quite sure how it is implemented. I haven't fully explored malina's $class feature but it looks interesting.
I hope web-components + shadow DOM will be supported, that could be game changing
I hope scss (or similar) will be supported, but isn't a must-have.
Finally, there's only one major complaint I have so far. The framework is great and simple; no virtual DOM, nearly HTML compliant, even the $: is valid JavaScript. When I open up a random project/file that happens to use Malina (before even hearing about Malina or looking at the documentation), all of it makes sense because it uses JS, HTML, and CSS

... well almost. Suddenly my eyes hit {#if } and I know there is some magic going on. Suddenly I go from having a full understanding (based on universally agreed on web-dev syntax) to needing to read documentation for a very specific framework and having no clear understanding of what is going on (e.g.)

{#each todos as item, index}
    {index}:
    <Item :item @remove={remove(index)} />
    <br />
{\each}

.
- Are these server-side executed or runtime?
- What scope do they have access to?
- Can I put a console.log inside of them?
- If I saw #if, I'd assume theres a #for (nope, have to go read documentation)
- remove is a function, and its being called with index and its return value is being attached to the element, wait no, then the code wouldn't work? (Vue has this same confusing syntax problem, with roots being from HTML)
- Are they reactive to changes in the variables?

I think this initial doubt/confusion/required-additional-framework-specific-learning can be avoided by reusing existing syntax. I don't think Vue's going with the html-compliant v-if was a great choice (and I know Malina seeks to remedy the problems with that), but I do think reusing an existing spec (even HTML) was better than inventing an entirely new syntax. I think Malina can do better, not necessarily with JSX (although that would be fine with me), but even just words/patterns that map to JS or HTML concepts like

<div>
    <#for (let [item, index] of Object.entries(todos)) >
        {index}:
        <Item :item @remove={remove(index)} />
        <br />
    <#for />
</div>

or to make it standout more

<if()>
    #for (let [item, index] of Object.entries(todos)) {
        {index}:
        <Item :item @remove={remove(index)} />
        <br />
    }
</div>

When I see @click I know I can also use @mouseover but when I see #if idk if I can use #else#if or #elseif or #else_if or #elsif or something entirely different. Everything in the template becomes an edgecase I have to look up and memorize, making it much harder to learn and less likely to be adopted. This is a major problem for me, but its not a fundamental problem like change detection or scoped css.

At least that's my 2 cents. I look forward to seeing the progress on this project!

await not working as expected

Hello !
I was trying every function of malinajs

Then i noticed {#await promise} wasn't working properly when using <style>

Here are some examples:

Working:
https://malinajs.github.io/repl/#/share/5f87d862d710fc00172f905c

Not working:
https://malinajs.github.io/repl/#/share/5f87d7ecd710fc00172f9050

Another not working example:
https://malinajs.github.io/repl/#/share/5f87d82bd710fc00172f9054

Thanks in advance and congratulations for this awesome work, it feels very good using it.

Is $context reactive?

If I change $context in a child will I see a change in the parent? If so, this does not work.
I'm looking for a way to have global state.

Here is the repl,,,
https://malinajs.github.io/repl/#/share/LuyiRsfJHct

SSR

I believe svelte is so inspiring and awesome for delivering great concepts to other frameworks and Malina is fantastic for production if there is no blocking bug. I actually started learning svelte last month and immediately found myself uncomfortable with matters which they are solved in Malina. I wanted to thank first. 🥇
Now what about SSR ? I did not find any related help doc on that

support for snowpack app?

npm run build_app is not working correctly

First of all thanks a lot for such an awesome library. I was simply blown away when I stumbled upon malinajs last week.

I have an issue in getting up and running using version 0.7.10 (I could get the older versions of 0.6 working using the command "npx create-malina myapp" as mentioned in the readme)

In order to use the latest version, I cloned this repository (https://github.com/malinajs/malinajs)
I also created a folder titled "example" and put the files App.xht and main.js in that folder.
I also created a folder titled "public" inside the "example" folder and added an index.html to it

My App.xht is a simple Hello world file which works as expected in REPL


<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

<div>
    <input type="text" :value={name} *{$element.focus()} />
</div>

<style type="scss">
    h1, div {
        text-align: center;
        min-width: 300px;
        margin: 40px auto;
    }

    input {
        font-size: 24px;
    }
</style>

The main.js file contains

import App from './App.xht';
App(document.body);

and index.html contains

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>malina-app</title>
        <script defer src='app.js'></script>
    </head>
    <body></body>
</html>

After this I ran "npm install", "npm run build" and "npm run build_app".
It did create an "app.js" file in the public folder.

But upon loading the index.html in the browser, it was not displaying anything and had errors in the console, which read something like

Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at $onDestroy (app.js:5:54)
    at addEvent (app.js:27:5)
    at bindInput (app.js:173:5)
    at app.js:228:7
    at app.js:134:27
    at app.js:239:3
    at app.js:241:2

It appears that app.js had some parts missing or so. I was wondering if this is a bug, or if this is a mistake on my side.

Bug with &entities; in conditional blocks

Here's a block:

<script>
    let visible = false
</script>

<h1>A &gt; B</h1>

<div on:click={() => visible=!visible}>
  {#if visible}
    &gt;
  {:else}
    &lt;
  {/if}
</div>

Expected and also Svelte: "A > B >" / "A > B <"

Actual Malina: "A > B >" / "A > B <"

move codebase to Typescript

Hello everyone

do you have plan to use typescript as main language for developing this library?
it is hard to read source code of malinajs without typings, for example in src/xNode.js file it is hard to know signature of xNode() function.
or working with context object is hard without typings and suggestions.

or at least you can use jsdocs for important objects or functions.
this project is great and I like to contribute if I can.

thanks

Rollup plugin: file expression support

Hi!

I'm using malinajs with vitejs.
Project structure is:

index.html
App.html
main.js
package.json
vite.config.js

When i build this project, malina fails because inspect index.html and it tries compile.

My fix was setting malinaRollup extension to ['xht', 'ma'], and not including 'html'.

It is possible support file extensions as expression ? like

malinaRollup({
extension: ["src/**/*.html"]
})

Thanks!

Support onError life cycle

It is possible support onError call when something crash?
For example, Svelte crashes completely when an error happens. And users must reload the website.

I have not see in malinaJs support for this.
Thanks

Add es version of compiler (with deps included) to npm package

I would like to compile and run malinajs code in an html file without nodejs using an es file from unpkg.com/malinajs.

The malina.js and compiler.js inside of the npm package seem to require nodejs.

malina.js - Needs acorn and other dependencies available through require.
compiler.js - Needs fs and reads a file from argv to compile.

I was able to make some changes to support this, but would like some feedback before creating a PR.

Branch/commit with changes: afaur@065e936
Notes
- The node-resolve plugin complained about acorn and astring.
  - Importing only what was used from them instead of the default seemed to fix the issue.
- Added Brotli and gzip compression (maybe runtime.js could have this as well?).
  - unpkg may use these if they are provided in the npm package, but I am not sure mjackson/unpkg#77 (comment)
  - Do you happen to know if including these are necessary?
- Made a new rollup bundle called web-compiler (Same as malina.js but with all deps bundled as an es)
  - This is really malina-including-deps.mjs, but I named it web-compiler.mjs, do you have a name preference?
- Steps to create and run the web-compiler-example.html
  - gen_exa=1 npm run prepare creates a web-compiler-example.html file in the directory.
  - npx servor . will run a local web server in the current directory.
  - Visiting http://localhost:8080/web-compiler-example.html will compile, and run the code in the dom.

Hydration

How to properly hydrate on MalinaJS?

onMount

Hi Oleg,
I think function onMount, dont work with syntax;

const onMount = ()=> {...} 
const onMount = function() {...}

Regards,

malinajs / malinajs Goto Github PK

malinajs's Introduction

Malina.js

Links

Benchmark

Startup metrics

Articles

Example

Quick Start

License

malinajs's People

Contributors

Stargazers

Watchers

Forkers

malinajs's Issues

Не появился css-хэш у элемента с заданным классом

Исходные данные

Ожидаемый результат

Фактический результат

Simple example

Nested example

Labeled

💡 Деструктор итерируемого элемента

Преимущества:

Текущая реализация:

Ожидаемый результат

Example 1: variable declared inside the dom node closure

Example 2: variable declared on the dom node

Allowing Globals

Recommend Projects

Recommend Topics

Recommend Org