component-playground - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

lib/editor.js

@@ -26,3 +26,3 @@ 'use strict';
       matchBrackets: true,
-      theme: 'monokai',
+      theme: this.props.theme,
       readOnly: this.props.readOnly
@@ -29,0 +29,0 @@ });

lib/playground.js

@@ -29,5 +29,14 @@ 'use strict';
     codeText: _React2['default'].PropTypes.string.isRequired,
-    scope: _React2['default'].PropTypes.object.isRequired
+    scope: _React2['default'].PropTypes.object.isRequired,
+    theme: _React2['default'].PropTypes.string,
+    noRender: _React2['default'].PropTypes.bool
   },
 
+  getDefaultProps: function getDefaultProps() {
+    return {
+      theme: 'monokai',
+      noRender: false
+    };
+  },
+
   getInitialState: function getInitialState() {
@@ -53,3 +62,4 @@ return {
           className: 'playgroundStage',
-          codeText: this.state.code })
+          codeText: this.state.code,
+          theme: this.props.theme })
       ),
@@ -61,3 +71,4 @@ _React2['default'].createElement(
           code: this.state.code,
-          scope: this.props.scope })
+          scope: this.props.scope,
+          noRender: this.props.noRender })
       )
@@ -64,0 +75,0 @@ );

lib/preview.js

@@ -40,3 +40,7 @@ 'use strict';
   _compileCode: function _compileCode() {
-    return _JSXTransform2['default'].transformWithDetails('(function(' + Object.keys(this.props.scope).join(',') + ', mountNode) {' + this.props.code + '\n});', { harmony: true }).code;
+    if (this.props.noRender) {
+      return _JSXTransform2['default'].transformWithDetails('(function(' + Object.keys(this.props.scope).join(',') + ', mountNode) {' + 'return React.createClass({' + 'render: function(){' + 'return (' + this.props.code + ')' + '}' + '});' + '\n});', { harmony: true }).code;
+    } else {
+      return _JSXTransform2['default'].transformWithDetails('(function(' + Object.keys(this.props.scope).join(',') + ', mountNode) {' + this.props.code + '\n});', { harmony: true }).code;
+    }
   },
@@ -65,3 +69,8 @@
       var compiledCode = this._compileCode();
-      eval(compiledCode).apply(null, scope);
+      if (this.props.noRender) {
+        var Component = _React2['default'].createElement(eval(compiledCode).apply(null, scope));
+        _React2['default'].render(Component, mountNode);
+      } else {
+        eval(compiledCode).apply(null, scope);
+      }
     } catch (err) {
@@ -68,0 +77,0 @@ this._setTimeout(function () {

package.json

 {
   "name": "component-playground",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A component for rendering React components with editable source and live preview",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -88,1 +88,18 @@ # component-playground
 Any module/component that is used inside the playground needs to be added to the scope object. See `/demo` for an example of how this works.
+
+###theme
+_React.PropTypes.string_
+
+String specifying which CodeMirror theme to initialize with. Defaults to 'monokai'.
+
+###noRender
+_React.PropTypes.bool_
+
+If set to true, removes the need to create a class or call React.render within the example code.
+When true, examples should be structured as the interior of a render method, see below:
+
+```
+<Button buttonStyle={this._getButtonStyle()}>
+  <p>My Button</p>
+</Button>
+```

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

Improved metrics

Total package byte prevSize

29942

increased by4.41%

Lines of code

669

increased by2.92%

Number of lines in readme file

105

increased by19.32%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes