msg-switch - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

.storybook/addons.js

+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

.storybook/config.js

+import { configure } from '@storybook/vue';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

stories/index.stories.js

+/* eslint-disable react/react-in-jsx-scope, react/no-this-in-sfc */
+
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+import { withKnobs, select, boolean, number } from '@storybook/addon-knobs';
+
+import { MsgSwitch, MsgCase } from '../src/';
+
+const stories = storiesOf('Use Cases', module);
+
+stories.addDecorator(withKnobs);
+
+stories.add('Simple - one', () => ({
+  components: { MsgSwitch, MsgCase },
+    template: `
+      <MsgSwitch value="one">
+        <MsgCase when="one">one</MsgCase>
+        <MsgCase when="two">two</MsgCase>
+        <MsgCase when="*">wildcard</MsgCase>
+      </MsgSwitch>
+    `,
+  }))
+.add('Simple - two', () => ({
+  components: { MsgSwitch, MsgCase },
+    template: `
+      <MsgSwitch value="two">
+        <MsgCase when="one">one</MsgCase>
+        <MsgCase when="two">two</MsgCase>
+        <MsgCase when="*">wildcard</MsgCase>
+      </MsgSwitch>
+    `,
+  }))
+.add('Simple - dyn', () => ({
+  components: { MsgSwitch, MsgCase },
+    template: `
+      <MsgSwitch value="dyn">
+        <MsgCase when="one">one</MsgCase>
+        <MsgCase when="two">two</MsgCase>
+        <MsgCase when="*">wildcard</MsgCase>
+      </MsgSwitch>
+    `,
+  }))
+.add('Simple - unknown', () => ({
+  components: { MsgSwitch, MsgCase },
+    template: `
+      <MsgSwitch value="unknown">
+        <MsgCase when="one">one</MsgCase>
+        <MsgCase when="two">two</MsgCase>
+        <MsgCase when="*">wildcard</MsgCase>
+      </MsgSwitch>
+    `,
+  }))
+  .add('with JSX', () => ({
+    components: { MsgSwitch, MsgCase },
+    // eslint-disable-next-line no-unused-vars
+    render(h) {
+      return <my-button onClick={this.action}>With JSX</my-button>;
+    },
+    methods: { action: linkTo('clicked') },
+  }))
+  .add('with some emoji', () => ({
+    components: { MsgSwitch, MsgCase },
+    template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+    methods: { action: action('clicked') },
+  }));
+
+/* eslint-enable react/react-in-jsx-scope */

stories/MyButton.js

+export default {
+  name: 'my-button',
+
+  data() {
+    return {
+      buttonStyles: {
+        border: '1px solid #eee',
+        borderRadius: 3,
+        backgroundColor: '#FFFFFF',
+        cursor: 'pointer',
+        fontSize: 15,
+        padding: '3px 10px',
+        margin: 10,
+      },
+    };
+  },
+
+  template: `
+    <button :style="buttonStyles" @click="onClick">
+      <slot></slot>
+    </button>
+  `,
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};

stories/Welcome.js

+// eslint-disable-next-line no-console
+const log = () => console.log('Welcome to storybook!');
+
+export default {
+  name: 'welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
+    },
+  },
+
+  data() {
+    return {
+      main: {
+        margin: 15,
+        maxWidth: 600,
+        lineHeight: 1.4,
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      },
+
+      logo: {
+        width: 200,
+      },
+
+      link: {
+        color: '#1474f3',
+        textDecoration: 'none',
+        borderBottom: '1px solid #1474f3',
+        paddingBottom: 2,
+      },
+
+      code: {
+        fontSize: 15,
+        fontWeight: 600,
+        padding: '2px 5px',
+        border: '1px solid #eae9e9',
+        borderRadius: 4,
+        backgroundColor: '#f3f2f2',
+        color: '#3a3a3a',
+      },
+
+      note: {
+        opacity: 0.5,
+      },
+    };
+  },
+
+  template: `
+    <div :style="main">
+      <h1>Welcome to STORYBOOK</h1>
+      <p>
+        This is a UI component dev environment for your app.
+      </p>
+      <p>
+        We've added some basic stories inside the
+        <br />
+        <code :style="code">src/stories</code>
+        <br />
+        directory.
+        <br />
+        A story is a single state of one or more UI components. You can have as many stories as
+        you want.
+        <br />
+        (Basically a story is like a visual test case.)
+      </p>
+      <p>
+        See these sample
+        <br />
+        <a :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
+        <br />
+        for a component called
+        <br />
+        <code :style="code">Button</code>
+        .
+      </p>
+      <p>
+        Just like that, you can add your own components as stories.
+        <br />
+        You can also edit those components and see changes right away.
+        <br />
+        (Try editing the <code :style="code">Button</code> component
+        located at <code :style="code">src/stories/Button.js</code>.)
+      </p>
+      <p>
+        This is just one thing you can do with Storybook.
+        <br />
+        Have a look at the
+        <br />
+        <a
+          :style="link"
+          href="https://github.com/storybooks/storybook"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Storybook
+        </a>
+        <br />
+        repo for more information.
+      </p>
+      <p :style="note">
+        <b>NOTE:</b>
+        <br />
+        Have a look at the
+        <br />
+        <code :style="code">.storybook/webpack.config.js</code>
+        <br />
+        to add webpack
+        loaders and plugins you are using in this project.
+      </p>
+    </div>
+  `,
+
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};

package.json

 {
   "name": "msg-switch",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/PlanitarInc/msg-switch",

README.md

@@ -63,3 +63,3 @@ # msg-switch [![Build Status](https://travis-ci.org/PlanitarInc/msg-switch.svg?branch=master)](https://travis-ci.org/PlanitarInc/msg-switch) [![npm version](https://badge.fury.io/js/msg-switch.svg)](https://badge.fury.io/js/msg-switch) [![](https://img.shields.io/github/license/PlanitarInc/msg-switch.svg)](https://www.npmjs.com/package/msg-switch)
 
-- Do not add hidden cases to DOM.
+- ~~Do not add hidden cases to DOM.~~
 - Support displaying multiple messages similar to [AngularJS' ngMessages](https://code.angularjs.org/1.6.10/docs/api/ngMessages/directive/ngMessages).
@@ -66,0 +66,0 @@

src/components/MsgCase.vue

 <template>
-  <span class="msg-case">
+  <span v-if="shown" class="msg-case">
     <slot :value="currentValue" />
@@ -17,3 +17,6 @@ </span>
   data() {
-    return { currentValue: '' };
+    return {
+      currentValue: '',
+      shown: false,
+    };
   },
@@ -26,7 +29,11 @@
   methods: {
-    updateCode(currentValue) {
+    show(currentValue) {
       this.currentValue = currentValue;
+      this.shown = true;
     },
+    hide() {
+      this.shown = false;
+    },
   },
 };
 </script>

src/components/MsgSwitch.vue

@@ -47,7 +47,6 @@ <template>
       if (oldCase) {
-        oldCase.$el.classList.remove('match');
+        oldCase.hide(this.value);
       }
       if (newCase) {
-        newCase.$el.classList.add('match');
-        newCase.updateCode(this.value);
+        newCase.show(this.value);
       }
@@ -58,11 +57,1 @@ },
 </script>
-
-<style>
-.msg-switch .msg-case {
-  display: none;
-}
-
-.msg-switch .msg-case.match {
-  display: inherit;
-}
-</style>

tests/unit/integration.spec.js

 import { mount } from '@vue/test-utils';
+import { MsgSwitch } from '../../src';
 import {
@@ -21,16 +22,4 @@ StdMessages,
 
-    test('should have all cases', () => {
-      expect(
-        listAllCases(wrapper).map(c => `${c.props.when}: ${c.text}`),
-      ).toEqual([
-        'one: default one',
-        'two: default two',
-        '*: default wildcard (one)',
-      ]);
-    });
-
     test('should display case "one"', () => {
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default one',
-      ]);
+      expect(wrapper.text()).toEqual('default one');
       expect(wrapper.html()).toMatchSnapshot();
@@ -41,5 +30,3 @@ });
       wrapper.setProps({ value: 'two' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default two',
-      ]);
+      expect(wrapper.text()).toEqual('default two');
       expect(wrapper.html()).toMatchSnapshot();
@@ -50,5 +37,3 @@ });
       wrapper.setProps({ value: 'dyn' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default wildcard (dyn)',
-      ]);
+      expect(wrapper.text()).toEqual('default wildcard (dyn)');
       expect(wrapper.html()).toMatchSnapshot();
@@ -59,5 +44,3 @@ });
       wrapper.setProps({ value: 'unknown' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default wildcard (unknown)',
-      ]);
+      expect(wrapper.text()).toEqual('default wildcard (unknown)');
       expect(wrapper.html()).toMatchSnapshot();
@@ -76,17 +59,4 @@ });
 
-    test('should have all cases', () => {
-      expect(
-        listAllCases(wrapper).map(c => `${c.props.when}: ${c.text}`),
-      ).toEqual([
-        'two: custom two',
-        'one: default one',
-        'two: default two',
-        '*: default wildcard (one)',
-      ]);
-    });
-
     test('should display case "one"', () => {
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default one',
-      ]);
+      expect(wrapper.text()).toEqual('default one');
       expect(wrapper.html()).toMatchSnapshot();
@@ -97,5 +67,3 @@ });
       wrapper.setProps({ value: 'two' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'custom two',
-      ]);
+      expect(wrapper.text()).toEqual('custom two');
       expect(wrapper.html()).toMatchSnapshot();
@@ -106,5 +74,3 @@ });
       wrapper.setProps({ value: 'dyn' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default wildcard (dyn)',
-      ]);
+      expect(wrapper.text()).toEqual('default wildcard (dyn)');
       expect(wrapper.html()).toMatchSnapshot();
@@ -115,5 +81,3 @@ });
       wrapper.setProps({ value: 'unknown' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default wildcard (unknown)',
-      ]);
+      expect(wrapper.text()).toEqual('default wildcard (unknown)');
       expect(wrapper.html()).toMatchSnapshot();
@@ -132,18 +96,4 @@ });
 
-    test('should have all cases', () => {
-      expect(
-        listAllCases(wrapper).map(c => `${c.props.when}: ${c.text}`),
-      ).toEqual([
-        'two: custom two',
-        '*: custom wildcard [one]',
-        'one: default one',
-        'two: default two',
-        '*: default wildcard (one)',
-      ]);
-    });
-
     test('should display case "one"', () => {
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default one',
-      ]);
+      expect(wrapper.text()).toEqual('default one');
       expect(wrapper.html()).toMatchSnapshot();
@@ -154,5 +104,3 @@ });
       wrapper.setProps({ value: 'two' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'custom two',
-      ]);
+      expect(wrapper.text()).toEqual('custom two');
       expect(wrapper.html()).toMatchSnapshot();
@@ -163,5 +111,3 @@ });
       wrapper.setProps({ value: 'dyn' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'custom wildcard [dyn]',
-      ]);
+      expect(wrapper.text()).toEqual('custom wildcard [dyn]');
       expect(wrapper.html()).toMatchSnapshot();
@@ -172,5 +118,3 @@ });
       wrapper.setProps({ value: 'unknown' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'custom wildcard [unknown]',
-      ]);
+      expect(wrapper.text()).toEqual('custom wildcard [unknown]');
       expect(wrapper.html()).toMatchSnapshot();
@@ -189,18 +133,4 @@ });
 
-    test('should have all cases', () => {
-      expect(
-        listAllCases(wrapper).map(c => `${c.props.when}: ${c.text}`),
-      ).toEqual([
-        'two: custom two',
-        'dyn: dynamic message',
-        'one: default one',
-        'two: default two',
-        '*: default wildcard (one)',
-      ]);
-    });
-
     test('should display case "one"', () => {
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default one',
-      ]);
+      expect(wrapper.text()).toEqual('default one');
       expect(wrapper.html()).toMatchSnapshot();
@@ -211,5 +141,3 @@ });
       wrapper.setProps({ value: 'two' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'custom two',
-      ]);
+      expect(wrapper.text()).toEqual('custom two');
       expect(wrapper.html()).toMatchSnapshot();
@@ -220,5 +148,3 @@ });
       wrapper.setProps({ value: 'dyn' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'dynamic message',
-      ]);
+      expect(wrapper.text()).toEqual('dynamic message');
       expect(wrapper.html()).toMatchSnapshot();
@@ -229,5 +155,3 @@ });
       wrapper.setProps({ value: 'unknown' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default wildcard (unknown)',
-      ]);
+      expect(wrapper.text()).toEqual('default wildcard (unknown)');
       expect(wrapper.html()).toMatchSnapshot();
@@ -246,19 +170,4 @@ });
 
-    test('should have all cases', () => {
-      expect(
-        listAllCases(wrapper).map(c => `${c.props.when}: ${c.text}`),
-      ).toEqual([
-        'two: custom two',
-        'dyn: dynamic message',
-        '*: custom wildcard [one]',
-        'one: default one',
-        'two: default two',
-        '*: default wildcard (one)',
-      ]);
-    });
-
     test('should display case "one"', () => {
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'default one',
-      ]);
+      expect(wrapper.text()).toEqual('default one');
       expect(wrapper.html()).toMatchSnapshot();
@@ -269,5 +178,3 @@ });
       wrapper.setProps({ value: 'two' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'custom two',
-      ]);
+      expect(wrapper.text()).toEqual('custom two');
       expect(wrapper.html()).toMatchSnapshot();
@@ -278,5 +185,3 @@ });
       wrapper.setProps({ value: 'dyn' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'dynamic message',
-      ]);
+      expect(wrapper.text()).toEqual('dynamic message');
       expect(wrapper.html()).toMatchSnapshot();
@@ -287,5 +192,3 @@ });
       wrapper.setProps({ value: 'unknown' });
-      expect(listVisibleCases(wrapper).map(c => c.text)).toEqual([
-        'custom wildcard [unknown]',
-      ]);
+      expect(wrapper.text()).toEqual('custom wildcard [unknown]');
       expect(wrapper.html()).toMatchSnapshot();
@@ -296,22 +199,1 @@ });
 });
-
-const listAllCases = wrapper => {
-  const visibleCases = wrapper.findAll('.msg-case');
-  const res = [];
-  for (let i = 0; i < visibleCases.length; i++) {
-    const c = visibleCases.at(i);
-    res[i] = {
-      classes: c.classes(),
-      props: c.props(),
-      text: c.text(),
-    };
-  }
-  return res;
-};
-
-const listVisibleCases = wrapper => {
-  // We test for `match` class because of the following limitation:
-  // > Your test can only detect inline styles when running in `jsdom`.
-  // (source https://vue-test-utils.vuejs.org/guides/#detecting-styles)
-  return listAllCases(wrapper).filter(c => c.classes.includes('match'));
-};

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Number of package files

46

12.2%

Lines of code

872

12.81%

Worsened metrics

Total package byte prevSize

128097

-1.07%

Number of low supply chain risk alerts

4

100%

No dependency changes