react-jsbox - npm Package Compare versions

Comparing version 0.0.55 to 0.0.56

package.json

 {
   "name": "react-jsbox",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "A Custom React Renderer for writing JSBox apps in React.",
@@ -37,3 +37,3 @@ "keywords": [
     "babel-preset-minify": "^0.5.1",
-    "eslint": "^6.3.0",
+    "eslint": "^6.4.0",
     "eslint-plugin-babel": "^5.3.0",
@@ -44,3 +44,3 @@ "eslint-plugin-import": "^2.18.2",
     "react": "16.9.0",
-    "rollup": "1.21.0",
+    "rollup": "1.21.3",
     "rollup-plugin-babel": "^4.3.3",
@@ -53,5 +53,5 @@ "rollup-plugin-cleanup": "^3.1.1",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^5.1.1"
+    "rollup-plugin-terser": "^5.1.2"
   },
   "license": "MIT"
-}
+}

README.md

 <h1 align="center">Welcome to react-jsbox 👋</h1>
 <p>
-  <img src="https://img.shields.io/badge/version-0.0.32-blue.svg?cacheSeconds=2592000" />
+  <img src="https://img.shields.io/badge/version-0.0.56-blue.svg?cacheSeconds=2592000" />
 </p>
@@ -22,3 +22,3 @@
 
-```javascript
+```jsx
 import React from 'react'
@@ -113,3 +113,3 @@ import ReactJSBox from 'react-jsbox'
 
-```javascript
+```jsx
 import * as React from 'react'
@@ -146,2 +146,3 @@ import * as ReactJSBox from 'react-jsbox'
     this._input = React.createRef()
+    this._handleTextChange = this.handleTextChange.bind(this)
   }
@@ -185,3 +186,3 @@
           events={{
-            changed: this.handleTextChange.bind(this)
+            changed: this._handleTextChange
           }}
@@ -208,3 +209,3 @@ />
 
-```javascript
+```jsx
 import React from 'react'
@@ -299,7 +300,7 @@ import ReactJSBox from 'react-jsbox'
 
-#### UseEffect
+#### useEffect
 
 In **useCache.js**
 
-```javascript
+```jsx
 import {useEffect, useState} from 'react'
@@ -326,3 +327,3 @@
 
-```javascript
+```jsx
 import React from 'react'
@@ -388,2 +389,83 @@ import ReactJSBox from 'react-jsbox'
 
+#### JsxLiteral
+
+```javascript
+const htm = require("htm")
+const { createElement, useState } = require("react")
+const ReactJSBox = require("react-jsbox")
+const jsx = htm.bind(createElement)
+const { width, height } = $device.info.screen
+
+const listTemplate = {
+    views: [
+        {
+            type: "label",
+            props: {
+                bgcolor: $color("#474b51"),
+                textColor: $color("#abb2bf"),
+                align: $align.center,
+                font: $font("iosevka", 24)
+            },
+            layout: $layout.fill
+        }
+    ]
+}
+
+$ui.render({
+    props: {
+        title: "JsxLiteralExample"
+    },
+    views: [
+        {
+            type: "view",
+            props: {
+                id: "root"
+            },
+            layout: $layout.fill
+        }
+    ]
+})
+
+function JsxLiteralExample() {
+    const [count, setCount] = useState(0);
+    return jsx`<view frame=${styles.container}>
+      <label
+        frame=${styles.text}
+        align=${$align.center}
+        font=${$font(26)}
+        text=${String(count)}
+        autoFontSize=${true}
+      />
+      <progress
+      frame=${$rect(15, 150, width - 30, 30)}
+      value=${0.5 + count * 0.01}
+      }}
+      />
+      <list
+        frame=${styles.list}
+        scrollEnabled=${false}
+        radius=${5}
+        bgcolor=${$color("#ededed")}
+        data=${["INCREASE", "DECREASE", "RESET"]}
+        template=${listTemplate}
+        events=${{
+            didSelect: (sender, { row }, data) => {
+                setCount(count => count + [1, -1, -count][row])
+                $audio.play({ id: 1104 })
+                console.log(count)
+            }
+        }}
+      />
+    </view>`
+}
+
+const styles = {
+    container: $rect(0, 0, width, height),
+    text: $rect(0, 64, width, 30),
+    list: $rect(0, width * 0.5, width, 132)
+}
+
+ReactJSBox.render(jsx`<${JsxLiteralExample} />`, $("root"))
+```
+
 ## Author
@@ -390,0 +472,0 @@

No alert changes

Improved metrics

Total package byte prevSize

107001

increased by1.94%

Number of lines in readme file

472

increased by21.03%

No dependency changes