bemto-components - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

Changelog.md

 ## Bemto-components changelog
 
+### v2.0.3 (2018-03-29)
+
+- Fixed merging of element props.
+- Fixed passing of empty arrays as children, as it caused problems with empty tags like `img`.
+
 ### v2.0.2 (2018-03-28)
@@ -4,0 +9,0 @@

docs/2_2_1_elements.md

@@ -143,4 +143,30 @@ ## Elements
 
+Sometimes you could want to use the content passed to an element as its attribute and not as its actual content. In that case you can use a trick of using an empty array for its value:
+
+    const Block = bemto('.block', {
+      content: [
+        {
+          elem: 'content',
+          children: true
+        },
+        {
+          elem: 'helper',
+          props: {
+            src: p => p.__helper
+          },
+          content: []
+        }
+      ]
+    });
+
+    <div>
+      <Block
+        __helper='https://placebear.com/50/30'
+      >
+        Bear!
+      </Block>
+    </div>
+
 - - -
 
 Those are almost all features available for elements, but we have a lot of plans to expand on this idea. And, I need to mention this: as well as with the modifiers you'll know about below, all of this makes much more sense when used with styled-components. You'll see.

docs/2_4_advanced.md

@@ -44,3 +44,3 @@ ## Advanced Features and the Future
 - `['foo', 'bar']` — accept only `foo` and `bar` props if present.
-- `{}` — object that could have a key `except` that could contain props that should **not** be accepted. When used on Element, would be merged with the props that are accepted by BLock.
+- `{}` — object that could have a key `except` that could contain props that should **not** be accepted. When used on Element, would be merged with the props that are accepted by Block. You can also use the `acceptProps: { except: […] }` on Block whenever you want to blackList any properties from being rendered in the end.
 
@@ -47,0 +47,0 @@ **Note:** right now the `className` is always accepted _only_ by Block, as well as any bemto props (those starting from `_`). Also, right now exception would always override inclusion, so if Block accepts some prop, it won't be possible to accept it on Elements. This probably woulc change in the future.

lib/index.js

@@ -378,3 +378,3 @@ const React = require('react');
 
-      const myPropsProps = elemProp && elemProp.props || item.props || {};
+      const myPropsProps = item.props || {};
       if (elemProp && elemProp.props) {
@@ -499,2 +499,6 @@ for (var key in elemProp.props) {
         })
+        if (options.children && options.children.constructor === Array && !options.children.length) {
+          options.children = null;
+        }
+
         if (options.omitTag) {
@@ -501,0 +505,0 @@ return options.children;

package.json

 {
   "name": "bemto-components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Smart components for using parts of BEM methodology with React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

styleguide.config.js

@@ -92,2 +92,4 @@ // Only until https://github.com/styled-components/styled-components/issues/945#issuecomment-340166853 would be merged
 
+  serverPort: 6061,
+
   resolver: (ast, recast) => {
@@ -94,0 +96,0 @@ const annotatedComponents = annotationResolver(ast, recast);

test/test.js

@@ -1909,1 +1909,69 @@ const React = require('react');
 });
+
+test('blacklist for props', () => {
+  testSnapshot(
+    bemto({
+      acceptProps: { except: 'foo' }
+    }),
+    { foo: 'bar', title: 'ok ok ok' }
+  );
+});
+
+test('merging props for element', () => {
+  testSnapshot(
+    bemto({
+      content: {
+        elem: 'Content',
+        props: {
+          foo: 'should stay',
+          bar: 'should not stay'
+        },
+        children: true
+      }
+    }),
+    { __Content: { props: { bar: 'overridden', baz: 'new prop' } } },
+    'some content'
+  );
+});
+
+test('merging props for a component element', () => {
+  testSnapshot(
+    bemto({
+      content: {
+        elem: 'Content',
+        tag: bemto({ props: { compProp: 'should stay yay?', compProp2: 'should not stay' } }),
+        props: {
+          foo: 'should stay',
+          bar: 'should not stay',
+          compProp2: 'new compProp2 value, would not stay'
+        },
+        children: true
+      }
+    }),
+    { __Content: { props: { bar: 'overridden', baz: 'new prop', compProp2: 'final compProp2 value' } } },
+    'some content'
+  );
+});
+
+test('handling content of an element as a component', () => {
+  testSnapshot(
+    bemto({
+      content: [
+        {
+          elem: 'Helper',
+          tag: bemto('em.foo'),
+          props: {
+            title: p => p.__Helper
+          },
+          content: []
+        },
+        {
+          elem: 'Content',
+          children: true
+        }
+      ]
+    }),
+    { __Helper: 'Should go to title' },
+    'some content'
+  );
+});

No alert changes

Improved metrics

Total package byte prevSize

1173019

increased by0.28%

Lines of code

5942

increased by1.16%

No dependency changes