react-live - npm Package Compare versions

Comparing version 1.8.0-2 to 1.9.0

lib/components/Editor/index.js

@@ -59,3 +59,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.undoStack = [], _this.undoOffset = 0, _this.undoTimestamp = 0, _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.undoStack = [], _this.undoOffset = 0, _this.undoTimestamp = 0, _this.compositing = false, _this.state = {
       html: ''
@@ -101,2 +101,5 @@ }, _this.onRef = function (node) {
     }, _this.updateContent = function (plain) {
+      if (_this.compositing) {
+        return;
+      }
       _this.setState({ html: (0, _prism2.default)(plain, _this.props.language) });
@@ -208,2 +211,12 @@
       }
+    }, _this.onCompositionStart = function (evt) {
+      if (_this.props.onCompositionStart) {
+        _this.props.onCompositionStart(evt);
+      }
+      _this.compositing = true;
+    }, _this.onCompositionEnd = function (evt) {
+      if (_this.props.onCompositionEnd) {
+        _this.props.onCompositionEnd(evt);
+      }
+      _this.compositing = false;
     }, _this.onClick = function (evt) {
@@ -265,2 +278,4 @@ if (_this.props.onClick) {
       contentEditable: contentEditable,
+      onCompositionEnd: contentEditable ? this.onCompositionEnd : undefined,
+      onCompositionStart: contentEditable ? this.onCompositionStart : undefined,
       onKeyDown: contentEditable ? this.onKeyDown : undefined,
@@ -267,0 +282,0 @@ onKeyUp: contentEditable ? this.onKeyUp : undefined,

lib/utils/transpile/index.js

@@ -28,6 +28,6 @@ 'use strict';
 
-  // NOTE: Workaround for classes, since buble doesn't allow `return` without a function
-  var transformed = (0, _transform2.default)(code).trim().replace(/^var \w+ =/, '').replace(/;$/, '');
+  // NOTE: Workaround for classes and arrow functions.
+  var transformed = (0, _transform2.default)('(' + code + ')').trim();
 
-  return (0, _errorBoundary2.default)((0, _evalCode2.default)('return (' + transformed + ')', scope), errorCallback);
+  return (0, _errorBoundary2.default)((0, _evalCode2.default)('return ' + transformed, scope), errorCallback);
 };
@@ -34,0 +34,0 @@

package.json

 {
   "name": "react-live",
-  "version": "1.8.0-2",
+  "version": "1.9.0",
   "description": "A production-focused playground for live editing React code",
@@ -21,3 +21,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "buble": "^0.15.2",
+    "buble": "^0.18.0",
     "core-js": "^2.4.1",
@@ -24,0 +24,0 @@ "dom-iterator": "^0.3.0",

README.md

@@ -77,9 +77,11 @@ <p align="center"><img src="https://raw.githubusercontent.com/philpl/react-live/master/docs/logo.gif" width=250></p>
 
-But you can of course pass more things to this scope, that will be available as variables in the code. Example:
+But you can of course pass more things to this scope, that will be available as variables in the code. Here's an example using [styled components](https://github.com/styled-components/styled-components):
 
 ```js
-import styled from 'styled-components'
+import styled from 'styled-components';
 
-const scope = {styled}
+const headerProps = { text: 'I\'m styled!' };
 
+const scope = {styled, headerProps};
+
 const code = `
@@ -91,3 +93,3 @@ const Header = styled.div\`
 
-  render(<Header>I'm styled!</Header>)
+  render(<Header>{headerProps.text}</Header>)
 `
@@ -94,0 +96,0 @@

src/components/Editor/index.js

@@ -19,2 +19,3 @@ import React, { Component } from 'react'
   undoTimestamp = 0
+  compositing = false
 
@@ -70,2 +71,5 @@ state = {
   updateContent = plain => {
+    if (this.compositing) {
+      return;
+    }
     this.setState({ html: prism(plain, this.props.language) })
@@ -179,3 +183,3 @@
       this.recordChange(plain, this.selection)
-      this.updateContent(plain)
+      this.updateContent(plain);
     } else {
@@ -186,2 +190,16 @@ this.undoTimestamp = 0
 
+  onCompositionStart = evt => {
+    if (this.props.onCompositionStart) {
+      this.props.onCompositionStart(evt)
+    }
+    this.compositing = true;
+  }
+
+  onCompositionEnd = evt => {
+    if (this.props.onCompositionEnd) {
+      this.props.onCompositionEnd(evt)
+    }
+    this.compositing = false;
+  }
+
   onClick = evt => {
@@ -239,2 +257,4 @@ if (this.props.onClick) {
         contentEditable={contentEditable}
+        onCompositionEnd={contentEditable ? this.onCompositionEnd : undefined}
+        onCompositionStart={contentEditable ? this.onCompositionStart : undefined}
         onKeyDown={contentEditable ? this.onKeyDown : undefined}
@@ -241,0 +261,0 @@ onKeyUp={contentEditable ? this.onKeyUp : undefined}

src/utils/transpile/index.js

@@ -9,11 +9,8 @@ import transform from './transform'
 ) => {
-  // NOTE: Workaround for classes, since buble doesn't allow `return` without a function
-  const transformed = transform(code)
-    .trim()
-    .replace(/^var \w+ =/, '')
-    .replace(/;$/, '')
+  // NOTE: Workaround for classes and arrow functions.
+  const transformed = transform(`(${code})`).trim()
 
   return errorBoundary(
     evalCode(
-      `return (${transformed})`,
+      `return ${transformed}`,
       scope
@@ -20,0 +17,0 @@ ),

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1346751

increased by3.59%

Lines of code

28625

increased by9.03%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

195

increased by1.04%

Dependency changes

• + Addedacorn@5.7.4(transitive)

• + Addedacorn5-object-spread@4.0.0(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbuble@0.18.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedmagic-string@0.22.5(transitive)

• + Addedsupports-color@5.5.0(transitive)

• - Removedacorn-object-spread@1.0.0(transitive)

• - Removedansi-regex@2.1.1(transitive)

• - Removedansi-styles@2.2.1(transitive)

• - Removedbuble@0.15.2(transitive)

• - Removedchalk@1.1.3(transitive)

• - Removedhas-ansi@2.0.0(transitive)

• - Removedmagic-string@0.14.0(transitive)

• - Removedstrip-ansi@3.0.1(transitive)

• - Removedsupports-color@2.0.0(transitive)

• Updatedbuble@^0.18.0