malinajs 0.8.0-a1 → 0.8.0-a2

package/malina.js

@@ -7498,7 +7498,21 @@
   function parseHTML(source) {
     const reader = new Reader(source);
 
-    const readScript = (reader) => {
+    const readScript = (reader, tag) => {
+      tag.type = 'script';
+
+      let isJS = true;
+      for (let a of tag.attributes) {
+        if (a.name == 'lang' || a.name == 'language' || a.name == 'type') {
+          isJS = a.value.indexOf('javascript') >= 0 || a.value.indexOf('ecmascript') >= 0;
+          tag.lang = a.value;
+          break;
+        }
+      }
+      tag.content = isJS ? readScriptJS(reader) : readScriptRaw();
+    };
+
+    const readScriptJS = (reader) => {
       class ScriptParser extends Parser {
         readToken_lt_gt(code) {
           if (this.input.slice(this.pos, this.pos + 9) == '</script>') {
@@ -7523,6 +7537,10 @@
       return reader.sub(start, end);
     };
 
+    const readScriptRaw = () => {
+      return reader.read(/^(.*?)<\/script>/s);
+    };
+
     const readStyle = () => {
       return reader.read(/^(.*?)<\/style>/s);
     };
@@ -7580,8 +7598,7 @@
           let tag = readTag(reader);
           push(tag);
           if(tag.name === 'script') {
-            tag.type = 'script';
-            tag.content = readScript(reader);
+            readScript(reader, tag);
             continue;
           } else if(tag.name === 'template') {
             tag.type = 'template';
@@ -22778,7 +22795,7 @@
       function(id, context) {
         var node = context, nodes = [ ], next = node.firstElementChild;
         while ((node = next)) {
-          node.id == id && (nodes[nodes.length] = node);
+          (node.id == id || node.dynId) && (nodes[nodes.length] = node);
           if ((next = node.firstElementChild || node.nextElementSibling)) continue;
           while (!next && (node = node.parentElement) && node !== context) {
             next = node.nextElementSibling;
@@ -24582,8 +24599,10 @@
               else n.className += ' ' + a.value;
             }
             n.attributes[a.name] = a.value;
-          } else if(a.name == 'id') n.attributes.id = n.id = a.value;
-          else if(a.name.startsWith('class:')) {
+          } else if(a.name == 'id') {
+            if (a.value?.includes('{')) n.dynId = true;
+            n.attributes.id = n.id = a.value;
+          } else if(a.name.startsWith('class:')) {
             n.className += ' ' + a.name.substring(6);
           } else n.attributes[a.name] = a.value;
         });
@@ -24886,17 +24905,18 @@
         return;
       } else if(this.config.passClass && (name == 'class' || name.startsWith('class:'))) {
         let metaClass, args = name.split(':');
-        if(args.length == 1) {
+        if (args.length == 1) {
           metaClass = '$$main';
         } else {
           assert(args.length == 2);
           metaClass = args[1];
           assert(metaClass);
+          if (!value) value = metaClass;
         }
         assert(value);
         this.css.passingClass = true;
 
-        const parsed = this.parseText(prop.value);
+        const parsed = this.parseText(value);
         this.detectDependency(parsed);
         let exp = parsed.result;
         $class.push(`${metaClass}: $$resolveClass(${exp})`);
@@ -26541,7 +26561,7 @@
     });
   }
 
-  const version = '0.8.0-a1';
+  const version = '0.8.0-a2';
 
 
   async function compile(source, config = {}) {

package/malina.mjs

@@ -7492,7 +7492,21 @@ class Reader {
 function parseHTML(source) {
   const reader = new Reader(source);
 
-  const readScript = (reader) => {
+  const readScript = (reader, tag) => {
+    tag.type = 'script';
+
+    let isJS = true;
+    for (let a of tag.attributes) {
+      if (a.name == 'lang' || a.name == 'language' || a.name == 'type') {
+        isJS = a.value.indexOf('javascript') >= 0 || a.value.indexOf('ecmascript') >= 0;
+        tag.lang = a.value;
+        break;
+      }
+    }
+    tag.content = isJS ? readScriptJS(reader) : readScriptRaw();
+  };
+
+  const readScriptJS = (reader) => {
     class ScriptParser extends Parser {
       readToken_lt_gt(code) {
         if (this.input.slice(this.pos, this.pos + 9) == '</script>') {
@@ -7517,6 +7531,10 @@ function parseHTML(source) {
     return reader.sub(start, end);
   };
 
+  const readScriptRaw = () => {
+    return reader.read(/^(.*?)<\/script>/s);
+  };
+
   const readStyle = () => {
     return reader.read(/^(.*?)<\/style>/s);
   };
@@ -7574,8 +7592,7 @@ function parseHTML(source) {
         let tag = readTag(reader);
         push(tag);
         if(tag.name === 'script') {
-          tag.type = 'script';
-          tag.content = readScript(reader);
+          readScript(reader, tag);
           continue;
         } else if(tag.name === 'template') {
           tag.type = 'template';
@@ -22772,7 +22789,7 @@ function Factory(global, Export) {
     function(id, context) {
       var node = context, nodes = [ ], next = node.firstElementChild;
       while ((node = next)) {
-        node.id == id && (nodes[nodes.length] = node);
+        (node.id == id || node.dynId) && (nodes[nodes.length] = node);
         if ((next = node.firstElementChild || node.nextElementSibling)) continue;
         while (!next && (node = node.parentElement) && node !== context) {
           next = node.nextElementSibling;
@@ -24576,8 +24593,10 @@ function makeDom(data) {
             else n.className += ' ' + a.value;
           }
           n.attributes[a.name] = a.value;
-        } else if(a.name == 'id') n.attributes.id = n.id = a.value;
-        else if(a.name.startsWith('class:')) {
+        } else if(a.name == 'id') {
+          if (a.value?.includes('{')) n.dynId = true;
+          n.attributes.id = n.id = a.value;
+        } else if(a.name.startsWith('class:')) {
           n.className += ' ' + a.name.substring(6);
         } else n.attributes[a.name] = a.value;
       });
@@ -24880,17 +24899,18 @@ function makeComponent(node, option={}) {
       return;
     } else if(this.config.passClass && (name == 'class' || name.startsWith('class:'))) {
       let metaClass, args = name.split(':');
-      if(args.length == 1) {
+      if (args.length == 1) {
         metaClass = '$$main';
       } else {
         assert(args.length == 2);
         metaClass = args[1];
         assert(metaClass);
+        if (!value) value = metaClass;
       }
       assert(value);
       this.css.passingClass = true;
 
-      const parsed = this.parseText(prop.value);
+      const parsed = this.parseText(value);
       this.detectDependency(parsed);
       let exp = parsed.result;
       $class.push(`${metaClass}: $$resolveClass(${exp})`);
@@ -26535,7 +26555,7 @@ function makeKeepAlive(node) {
   });
 }
 
-const version = '0.8.0-a1';
+const version = '0.8.0-a2';
 
 
 async function compile(source, config = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "malinajs",
-  "version": "0.8.0-a1",
+  "version": "0.8.0-a2",
   "license": "MIT",
   "scripts": {
     "build": "rollup -c",

package/readme.md

@@ -3,24 +3,35 @@
 
 <img align="right" width="200" height="200" src="https://github.com/malinajs/malinajs/raw/master/malinajs2.png" />
 
-Malina.js builds your web-application to use it **without framework on frontend side**. Therefore your web-app becomes thinner and faster, and the application itself consists of **vanilla JavaScript**, look at [examples](https://malinajs.github.io/repl/). [TodoMVC example](https://malina-todomvc.surge.sh) **2.7kb** (gzipped) and [source code](https://github.com/malinajs/todomvc).
+Malina.js helps you create a fast and thin web application that runs **without a front-end framework**
+* High performance, [look at benchmark](#benchmark)
+* One of the best in [startup metrics](#startupmetrics)
+* Compact bundle size of an app (starts from 185 bytes), [TodoMVC example](https://malina-todomvc.surge.sh) **2.7kb** (gzipped) [source code](https://github.com/malinajs/todomvc)
+* Familiar syntax based of standard HTML, CSS and JavaScript
 
-For documentation about Malinajs, please visit [our website](https://malinajs.github.io/docs/).  
-Also, please join our community on [Discord](https://discord.gg/ScDhhNCk6N) or [Telegram](https://t.me/malinajs).
+### Links
 
-### tools
-
-* [Syntax Highlighter for VS-Code](https://marketplace.visualstudio.com/items?itemName=AlexxNB.malina-js-highlight)
 * **[Try Malina.js online (REPL)](https://malinajs.github.io/repl/)**
+* [Documentation](https://malinajs.github.io/docs/)
+* [Telegram community](https://t.me/malinajs)
+* [Syntax Highlighter for VS-Code](https://marketplace.visualstudio.com/items?itemName=AlexxNB.malina-js-highlight)
+
+### Benchmark
+<a id="benchmark"></a>
+![Benchmark](files/benchmark.png)
 
-#### Articles
+### Startup metrics
+<a id="startupmetrics"></a>
+![Benchmark](files/startup_metrics.png)
+
+### Articles
 
 * [Comparision with Svelte.js](https://medium.com/@lega911/svelte-js-and-malina-js-b33c55253271)
 * [Comparision with Vue 3](https://medium.com/@lega911/vue-3-vs-malina-js-abd97025ba81)
 * [Passing CSS classes to child components](https://medium.com/@lega911/how-a-popular-feature-declined-by-svelte-went-live-in-malina-js-1a08fdb9dbc4)
 * [Using fragments](https://medium.com/@lega911/how-fragments-can-help-in-your-web-development-5efc4d10f9da)
 
-## The Gist
+## Example
 
 ```html
 <script>
@@ -39,26 +50,12 @@ Also, please join our community on [Discord](https://discord.gg/ScDhhNCk6N) or [
 
 You can get started with a simple app by running the following in your terminal:
 ```
-npx create-malina myapp
+npm create malina myapp
 cd myapp
 npm run dev
 # open http://localhost:7000/
 ```
 
-
-Or via Docker: 
-```
-docker run --rm -it --user ${UID} -p 7000:7000 -v `pwd`:/app/src lega911/malina
-# open http://localhost:7000/
-```
-
-
-Build compiler
-```
-npm install
-npm run build
-```
-
 ## License
 
 [MIT](LICENSE)