hybrids - npm Package Compare versions

Comparing version 8.1.6 to 8.1.7

docs/CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+### [8.1.7](https://github.com/hybridsjs/hybrids/compare/v8.1.6...v8.1.7) (2022-11-10)
+
+
+### Bug Fixes
+
+* **layout:** support contents display type ([a7dba08](https://github.com/hybridsjs/hybrids/commit/a7dba08642789fc1858bc6d07003f5afd73e1247))
+* **layout:** use layout engine in nested templates in array items ([67f3a76](https://github.com/hybridsjs/hybrids/commit/67f3a76ae601b9e75c9cf75ea7ee42303679e751))
+
 ### [8.1.6](https://github.com/hybridsjs/hybrids/compare/v8.1.5...v8.1.6) (2022-10-31)
@@ -7,0 +15,0 @@

docs/component-model/layout-engine.md

@@ -146,7 +146,8 @@ # Layout Engine
 
-| Rule   | Arguments     | Defaults | Properties                                    |
-|--------|---------------|----------|-----------------------------------------------|
-| block  | [align:value] | block    | `display: block`<br>`text-align: [align]`     |
-| inline |               | ---      | `display: inline`<br>`display: [type]-inline` |
-| hidden | ---           | ---      | `display: none`                               |
+| Rule     | Arguments     | Defaults | Properties                                    |
+|----------|---------------|----------|-----------------------------------------------|
+| block    | [align:value] | block    | `display: block`<br>`text-align: [align]`     |
+| inline   |               | ---      | `display: inline`<br>`display: [type]-inline` |
+| contents |               | ---      | `display: contents`                           |
+| hidden   | ---           | ---      | `display: none`                               |
 
@@ -158,3 +159,3 @@ The `inline` rule can be used after other display types to make the element inline with corresponding type:
 <div layout="row inline"></div>
-<div layout="grid inline"></div>
+<div layout="grid:... inline"></div>
 ```
@@ -164,10 +165,10 @@
 
-| Rule                                           | Arguments                | Defaults    | Properties                                   |
-|------------------------------------------------|--------------------------|-------------|----------------------------------------------|
-| row<br>row-reverse<br>column<br>column-reverse | [wrap:value]             | type:nowrap | `display: flex` <br>`flex-flow: type [wrap]` |
-| grow                                           | [number:value]           | grow:1      | `flex-grow: [number]`                        |
-| shrink                                         | [number:value]           | shrink:1    | `flex-shrink: [number]`                      |
-| basis                                          | [size:dimension]         | ---         | `flex-basis: [size]`                         |
-| gap                                            | [column:dim.]:[row:dim.] | gap:1       | `column-gap: [column];`<br>`row-gap: [row];` |
-| order                                          | [number:value]           | order:0     | `order: [number]`                            |
+| Rule                                           | Arguments                | Defaults      | Properties                                   |
+|------------------------------------------------|--------------------------|---------------|----------------------------------------------|
+| row<br>row-reverse<br>column<br>column-reverse | [wrap:value]             | [type]:nowrap | `display: flex` <br>`flex-flow: type [wrap]` |
+| grow                                           | [number:value]           | grow:1        | `flex-grow: [number]`                        |
+| shrink                                         | [number:value]           | shrink:1      | `flex-shrink: [number]`                      |
+| basis                                          | [size:dimension]         | ---           | `flex-basis: [size]`                         |
+| gap                                            | [column:dim.]:[row:dim.] | gap:1         | `column-gap: [column];`<br>`row-gap: [row];` |
+| order                                          | [number:value]           | order:0       | `order: [number]`                            |
 
@@ -174,0 +175,0 @@ ### Grid

docs/README.md

@@ -7,5 +7,5 @@ <center>
 
+[![build status](https://github.com/hybridsjs/hybrids/actions/workflows/test.yml/badge.svg)](https://github.com/hybridsjs/hybrids/actions/workflows/test.yml?query=branch%3Amain)
+[![coverage status](https://img.shields.io/coveralls/github/hybridsjs/hybrids.svg?style=flat)](https://coveralls.io/github/hybridsjs/hybrids?branch=main)
 [![npm version](https://img.shields.io/npm/v/hybrids.svg?style=flat)](https://www.npmjs.com/package/hybrids)
-[![build status](https://img.shields.io/travis/hybridsjs/hybrids/main.svg?style=flat)](https://app.travis-ci.com/github/hybridsjs/hybrids)
-[![coverage status](https://img.shields.io/coveralls/github/hybridsjs/hybrids.svg?style=flat)](https://coveralls.io/github/hybridsjs/hybrids?branch=main)
 
@@ -12,0 +12,0 @@ **hybrids** is a JavaScript UI framework for creating fully-featured web applications, components libraries, or single web components with unique mixed declarative and functional architecture.

package.json

 {
   "name": "hybrids",
-  "version": "8.1.6",
+  "version": "8.1.7",
   "description": "A JavaScript framework for creating fully-featured web applications, components libraries, and single web components with unique declarative and functional architecture",
@@ -28,12 +28,11 @@ "type": "module",
   "scripts": {
-    "dev": "karma start karma.conf.cjs",
+    "karma": "karma start karma.conf.cjs",
+    "dev": "npm run karma -- --no-single-run --browsers ChromeHeadless",
     "dev:coverage": "rm -rf ./coverage && NODE_ENV=coverage npm run dev",
     "lint": "eslint ./src",
-    "test": "npm run lint && karma start karma.conf.cjs --single-run",
-    "test:coverage": "rm -rf ./coverage && NODE_ENV=coverage npm run test",
-    "coveralls": "npm run test:coverage && cat ./coverage/lcov.info | coveralls",
+    "test": "npm run lint && npm run karma",
+    "test:coverage": "rm -rf ./coverage && NODE_ENV=coverage npm run karma",
     "release": "npm run test && standard-version -a"
   },
   "devDependencies": {
-    "coveralls": "^3.1.0",
     "eslint": "^8.7.0",
@@ -47,3 +46,6 @@ "eslint-config-prettier": "^8.3.0",
     "karma-coverage": "^2.1.0",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^5.1.0",
+    "karma-webkit-launcher": "^1.1.0",
+    "playwright": "^1.27.1",
     "prettier": "^2.5.1",
@@ -50,0 +52,0 @@ "standard-version": "^9.3.2"

README.md

@@ -8,5 +8,5 @@
 
+[![build status](https://github.com/hybridsjs/hybrids/actions/workflows/test.yml/badge.svg)](https://github.com/hybridsjs/hybrids/actions/workflows/test.yml?query=branch%3Amain)
+[![coverage status](https://img.shields.io/coveralls/github/hybridsjs/hybrids.svg?style=flat)](https://coveralls.io/github/hybridsjs/hybrids?branch=main)
 [![npm version](https://img.shields.io/npm/v/hybrids.svg?style=flat)](https://www.npmjs.com/package/hybrids)
-[![build status](https://img.shields.io/travis/hybridsjs/hybrids/main.svg?style=flat)](https://app.travis-ci.com/github/hybridsjs/hybrids)
-[![coverage status](https://img.shields.io/coveralls/github/hybridsjs/hybrids.svg?style=flat)](https://coveralls.io/github/hybridsjs/hybrids?branch=main)
 
@@ -13,0 +13,0 @@ **hybrids** is a JavaScript UI framework for creating fully-featured web applications, components libraries, or single web components with unique mixed declarative and functional architecture.

src/template/layout.js

@@ -11,2 +11,3 @@ import global from "../global.js";
   }),
+  contents: { display: "contents" },
   hidden: { display: "none" },
@@ -13,0 +14,0 @@

src/template/resolvers/array.js

@@ -28,3 +28,3 @@ import global from "../../global.js";
   resolveValue,
-  isLayout,
+  useLayout,
 ) {
@@ -87,3 +87,3 @@ let lastEntries = arrayMap.get(target);
           matchedEntry.value,
-          isLayout,
+          useLayout,
         );
@@ -97,3 +97,3 @@ }
       );
-      resolveValue(host, entry.placeholder, entry.value, undefined, isLayout);
+      resolveValue(host, entry.placeholder, entry.value, undefined, useLayout);
     }
@@ -100,0 +100,0 @@

src/template/resolvers/value.js

@@ -39,3 +39,3 @@ import global from "../../global.js";
     case "array":
-      resolveArray(host, target, value, resolveValue);
+      resolveArray(host, target, value, resolveValue, useLayout);
       break;
@@ -42,0 +42,0 @@ case "node":

No alert changes

Improved metrics

Total package byte prevSize

444766

increased by0.3%

Number of package files

64

increased by1.59%

Lines of code

6611

increased by0.02%

Worsened metrics

Dev dependency count

14

increased by16.67%

No dependency changes