Merge branch 'next' into add-skyscanner-example

2025-04-04 13:11:20 +08:00 · 2020-09-02 15:01:52 +01:00 · 2020-09-02 15:01:52 +01:00 · 9716485196
commit 9716485196
parent adc108f8b5 a9c1044cf9
18 changed files with 685 additions and 90 deletions
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -122,12 +122,16 @@
    "react": ">=16.3.0",
    "react-dom": "*",
    "react-is": "^16.8.0",
+    "sveltedoc-parser": "^3.0.4",
    "vue": "^2.6.10",
    "vue-docgen-api": "^4.29.1",
    "vue-docgen-loader": "^1.5.0",
    "webpack": ">=4"
  },
  "peerDependenciesMeta": {
+    "sveltedoc-parser": {
+      "optional": true
+    },
    "vue": {
      "optional": true
    },
--- a/addons/docs/src/frameworks/svelte/HOC.svelte
+++ b/addons/docs/src/frameworks/svelte/HOC.svelte
@ -15,4 +15,5 @@
  });
 </script>

+<svelte:options accessors={true} />
 <div id={hash} />
--- a/addons/docs/src/frameworks/svelte/config.ts
+++ b/addons/docs/src/frameworks/svelte/config.ts
@ -1,8 +1,12 @@
+import { extractArgTypes } from './extractArgTypes';
+import { extractComponentDescription } from '../../lib/docgen';
 import { prepareForInline } from './prepareForInline';

 export const parameters = {
  docs: {
    inlineStories: true,
    prepareForInline,
+    extractArgTypes,
+    extractComponentDescription,
  },
 };
--- a/addons/docs/src/frameworks/svelte/extractArgTypes.test.ts
+++ b/addons/docs/src/frameworks/svelte/extractArgTypes.test.ts
@ -0,0 +1,94 @@
+import svelteDoc from 'sveltedoc-parser';
+import * as fs from 'fs';
+import { createArgTypes } from './extractArgTypes';
+
+const content = fs.readFileSync(`${__dirname}/sample/MockButton.svelte`, 'utf-8');
+
+describe('Extracting Arguments', () => {
+  it('should be svelte', () => {
+    expect(content).toMatchInlineSnapshot(`
+      <script>
+        import { createEventDispatcher, afterUpdate } from 'svelte';
+        export let text = '';
+        export let rounded = true;
+
+        const dispatch = createEventDispatcher();
+
+        function onClick(event) {
+          rounded = !rounded;
+
+          dispatch('click', event);
+        }
+
+        afterUpdate(() => {
+          dispatch('afterUpdate');
+        });
+      </script>
+      <style>
+        .rounded {
+          border-radius: 35px;
+        }
+
+        .button {
+          border: 3px solid;
+          padding: 10px 20px;
+          background-color: white;
+          outline: none;
+        }
+      </style>
+      <svelte:options accessors="{true}">
+      </svelte:options>
+      <button class="button"
+              class:rounded
+              on:click="{onClick}"
+      >
+        <strong>
+          {rounded ? 'Round' : 'Square'} corners
+        </strong>
+        <br>
+        {text}
+        <slot>
+        </slot>
+      </button>
+    `);
+  });
+
+  it('should generate ArgTypes', async () => {
+    const doc = await svelteDoc.parse({ fileContent: content, version: 3 });
+
+    const results = createArgTypes(doc);
+
+    expect(results).toMatchInlineSnapshot(`
+      Object {
+        "rounded": Object {
+          "control": Object {
+            "type": "boolean",
+          },
+          "defaultValue": true,
+          "description": null,
+          "name": "rounded",
+          "table": Object {
+            "defaultValue": Object {
+              "summary": true,
+            },
+          },
+          "type": Object {},
+        },
+        "text": Object {
+          "control": Object {
+            "type": "text",
+          },
+          "defaultValue": "",
+          "description": null,
+          "name": "text",
+          "table": Object {
+            "defaultValue": Object {
+              "summary": "",
+            },
+          },
+          "type": Object {},
+        },
+      }
+    `);
+  });
+});
--- a/addons/docs/src/frameworks/svelte/extractArgTypes.ts
+++ b/addons/docs/src/frameworks/svelte/extractArgTypes.ts
@ -0,0 +1,83 @@
+import { ArgTypes } from '@storybook/api';
+
+import { ArgTypesExtractor } from '../../lib/docgen';
+
+type ComponentWithDocgen = {
+  __docgen: Docgen;
+};
+
+type Docgen = {
+  components: [];
+  computed: [];
+  data: [
+    {
+      defaultValue: any;
+      description: string;
+      keywords: [];
+      kind: string;
+      name: string;
+      readonly: boolean;
+      static: boolean;
+      type: { kind: string; text: string; type: string };
+      visibility: string;
+    }
+  ];
+  description: null;
+  events: [];
+  keywords: [];
+  methods: [];
+  name: string;
+  refs: [];
+  slots: [];
+  version: number;
+};
+
+export const extractArgTypes: ArgTypesExtractor = (component) => {
+  // eslint-disable-next-line new-cap
+  const comp: ComponentWithDocgen = new component({ props: {} });
+  // eslint-disable-next-line no-underscore-dangle
+  const docs = comp.__docgen;
+
+  const results = createArgTypes(docs);
+
+  return results;
+};
+
+export const createArgTypes = (docs: Docgen) => {
+  const results: ArgTypes = {};
+  docs.data.forEach((item) => {
+    results[item.name] = {
+      control: { type: parseType(item.type.type) },
+      name: item.name,
+      description: item.description,
+      type: {},
+      defaultValue: item.defaultValue,
+      table: {
+        defaultValue: {
+          summary: item.defaultValue,
+        },
+      },
+    };
+  });
+
+  return results;
+};
+
+/**
+ * Function to convert the type from sveltedoc-parser to a storybook type
+ * @param typeName
+ * @returns string
+ */
+const parseType = (typeName: string) => {
+  switch (typeName) {
+    case 'string':
+      return 'text';
+
+    case 'enum':
+      return 'radio';
+    case 'any':
+      return 'object';
+    default:
+      return typeName;
+  }
+};
--- a/addons/docs/src/frameworks/svelte/preset.ts
+++ b/addons/docs/src/frameworks/svelte/preset.ts
@ -0,0 +1,13 @@
+import path from 'path';
+
+import { Configuration } from 'webpack';
+
+export function webpackFinal(webpackConfig: Configuration, options: any = {}) {
+  webpackConfig.module.rules.push({
+    test: /\.svelte$/,
+    loader: path.resolve(`${__dirname}/svelte-docgen-loader`),
+    enforce: 'pre',
+  });
+
+  return webpackConfig;
+}
--- a/addons/docs/src/frameworks/svelte/sample/MockButton.svelte
+++ b/addons/docs/src/frameworks/svelte/sample/MockButton.svelte
@ -0,0 +1,38 @@
+<script>
+  import { createEventDispatcher, afterUpdate } from 'svelte';
+  export let text = '';
+  export let rounded = true;
+
+  const dispatch = createEventDispatcher();
+
+  function onClick(event) {
+    rounded = !rounded;
+
+    dispatch('click', event);
+  }
+
+  afterUpdate(() => {
+    dispatch('afterUpdate');
+  });
+</script>
+
+<style>
+  .rounded {
+    border-radius: 35px;
+  }
+
+  .button {
+    border: 3px solid;
+    padding: 10px 20px;
+    background-color: white;
+    outline: none;
+  }
+</style>
+
+<svelte:options accessors={true} />
+<button class="button" class:rounded on:click={onClick}>
+  <strong>{rounded ? 'Round' : 'Square'} corners</strong>
+  <br />
+  {text}
+  <slot />
+</button>
--- a/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts
+++ b/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts
@ -0,0 +1,38 @@
+import svelteDoc from 'sveltedoc-parser';
+
+import * as path from 'path';
+
+/**
+ * webpack loader for sveltedoc-parser
+ * @param source raw svelte component
+ */
+export default async function svelteDocgen(source: string) {
+  // get filename for source content
+  // eslint-disable-next-line no-underscore-dangle
+  const file = path.basename(this._module.resource);
+
+  // set SvelteDoc options
+  const options = {
+    fileContent: source,
+    version: 3,
+  };
+
+  let docgen = '';
+
+  try {
+    const componentDoc = await svelteDoc.parse(options);
+
+    // populate filename in docgen
+    componentDoc.name = path.basename(file);
+
+    docgen = `
+    export const __docgen = ${JSON.stringify(componentDoc)};
+  `;
+  } catch (error) {
+    console.error(error);
+  }
+  // inject __docgen prop in svelte component
+  const output = source.replace('</script>', `${docgen}</script>`);
+
+  return output;
+}
--- a/addons/docs/src/typings.d.ts
+++ b/addons/docs/src/typings.d.ts
@ -17,3 +17,7 @@ declare module 'react-element-to-jsx-string' {

  export default function render(element: React.ReactNode, options: Options): string;
 }
+
+declare module 'sveltedoc-parser' {
+  export function parse(options: any): Promise<any>;
+}
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@ -39,6 +39,7 @@
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "regenerator-runtime": "^0.13.3",
+    "sveltedoc-parser": "^3.0.4",
    "ts-dedent": "^1.1.1"
  },
  "devDependencies": {
--- a/docs/get-started/examples.md
+++ b/docs/get-started/examples.md
@ -19,6 +19,12 @@ See how to build UIs using a [component driven](https://www.componentdriven.org/

 - [BBC Psammead](https://bbc.github.io/psammead/?path=/story/components-brand--without-brand-link)
 - [The Guardian](https://master--5dfcbf3012392c0020e7140b.chromatic.com)
+<!-- 
+NOTE for contributors: This is a curated list. Here's what qualifies:
+- Website or app Storybook that illustrates how to build UIs from small components to pages
+- Used in production by a medium/large company or large open source community
+- Must be developed actively
+  -->

 ## Design systems and component libraries

@ -36,6 +42,11 @@ Learn how leading teams build design systems.
 - [Reaviz](https://reaviz.io/?path=/story/docs-intro--page)
 - [ShareGate Orbit](https://orbit.sharegate.design/?path=/docs/getting-started-packages--page)
 - [AppNexus Lucid](https://appnexus.github.io/lucid/?path=/docs/documentation-introduction--introduction)
- [React Pakistan](https://react-pakistan.github.io/react-storybook-composed)
 - [AnyVision UI](http://storybook.anyvision.co/)
 - [Skyscanner Backpack](https://backpack.github.io/storybook/)
+<!-- 
+NOTE for contributors: This is a curated list. Here's what qualifies:
+- Design system or component library
+- Used in production by a medium/large company or large open source community (Grommet, Chakra)
+- Must have greater than 20+ contributors OR 1k+ GitHub stars OR show exceptional use of SB features
+  -->
--- a/docs/writing-docs/docs-page.md
+++ b/docs/writing-docs/docs-page.md
@ -2,7 +2,7 @@
 title: 'DocsPage'
 ---

-When you install [Storybook Docs](https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md), DocsPage is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, args tables, and code examples into a single page for each component.
+When you install [Storybook Docs](https://github.com/storybookjs/storybook/blob/next/addons/docs/), DocsPage is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, args tables, and code examples into a single page for each component.

 The best practice for docs is for each component to have its own set of documentation and stories.

--- a/examples/svelte-kitchen-sink/src/stories/snapshots/addon-controls.stories.storyshot
+++ b/examples/svelte-kitchen-sink/src/stories/snapshots/addon-controls.stories.storyshot
@ -1,54 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Storyshots Addon/Controls Rounded 1`] = `
+exports[`Storyshots Addon/Controls Show Case 1`] = `
 <section
  class="storybook-snapshot-container"
 >
  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-     
-    <br />
-     
-    
-     
-    Rounded text
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Addon/Controls Square 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
+    Control Showcase
  </h1>
   
  <button
@ -63,25 +20,87 @@ exports[`Storyshots Addon/Controls Square 1`] = `
     
    
     
-    Squared text
+    You clicked
    : 
    0
  </button>
   
-  <p>
-    A little text to show this is a view.
-  </p>
+  <h2>
+    Array Range
+  </h2>
   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
+  <div>
+    []
+  </div>
   
-  <p>
-    then wrapping the component up in a view
-  </p>
+  <h2>
+    Progress Bar
+  </h2>
   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
+  <progress
+    max="100"
+    min="0"
+    step="1"
+    value={0}
+  />
+   
+  <h2>
+    Enum Selectors
+  </h2>
+   
+  <h3>
+    inline radio
+  </h3>
+   
+  <div>
+    <p>
+      Loading State: 
+      loading
+    </p>
+  </div>
+   
+  <h3>
+    inline check
+  </h3>
+   
+  <div>
+    <p>
+      Food Items: 
+      []
+    </p>
+  </div>
+   
+  <h3>
+    inline select
+  </h3>
+   
+  <div>
+    <p>
+      Car choice: 
+      car
+    </p>
+  </div>
+   
+  <h2>
+    Color Picker
+  </h2>
+   
+  <div>
+    <div
+      class="Box svelte-zg433x"
+      style="background-color: rgb(0, 0, 0);"
+    />
+  </div>
+   
+  <h2>
+    Date Picker
+  </h2>
+   
+  <div>
+    <p>
+      Date: 
+      Invalid Date
+    </p>
+  </div>
 </section>
 `;
--- a/examples/svelte-kitchen-sink/src/stories/addon-controls.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-controls.stories.js
@ -1,26 +1,38 @@
-import ButtonView from './views/ButtonView.svelte';
+import ControlShowcaseView from './views/ControlShowcaseView.svelte';

 export default {
  title: 'Addon/Controls',
+  component: ControlShowcaseView,
  argTypes: {
-    rounded: { type: { name: 'boolean' } },
-    text: { type: { name: 'string' } },
+    range: { defaultValue: 0, control: { type: 'range', min: 0, max: 100 } },
+    loadingState: {
+      control: {
+        type: 'inline-radio',
+        options: ['loading', 'error', 'ready'],
+      },
+    },
+    food: {
+      control: {
+        type: 'inline-check',
+        options: ['apple', 'banana', 'orange'],
+      },
+    },
+    car: {
+      control: {
+        type: 'select',
+        options: ['Truck', 'SUV', 'Tesla'],
+      },
+    },
+    color: {
+      control: 'color',
+    },
+    date: {
+      control: 'date',
+    },
  },
 };

-const Template = (args) => ({
-  Component: ButtonView,
+export const ShowCase = (args) => ({
+  Component: ControlShowcaseView,
  props: args,
 });
-
-export const Rounded = Template.bind({});
-Rounded.args = {
-  rounded: true,
-  text: 'Rounded text',
-};
-
-export const Square = Template.bind({});
-Square.args = {
-  rounded: false,
-  text: 'Squared text',
-};
--- a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
+++ b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte
@ -1,18 +1,33 @@
-<h1>Button view</h1>
-<Button {rounded} on:click={handleClick}>{text}: {count}</Button>
-<p>A little text to show this is a view.</p>
-<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
-<p>then wrapping the component up in a view</p>
-<p>made just for the story is the simplest way to achieve this.</p>
-
 <script>
  import Button from '../../components/Button.svelte';

+  /**
+   * @component Button View
+   */
+
+  /**
+   * Rounds the button
+   */
  export let rounded = false;
+
+  /**
+   * Displays the count
+   */
  export let count = 0;
+
+  /**
+   * Button text
+   */
  export let text = 'You clicked';

  function handleClick(event) {
    count += 1;
  }
 </script>
+
+<h1>Button view</h1>
+<Button {rounded} on:click={handleClick}>{text}: {count}</Button>
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>
--- a/examples/svelte-kitchen-sink/src/stories/views/ControlShowcaseView.svelte
+++ b/examples/svelte-kitchen-sink/src/stories/views/ControlShowcaseView.svelte
@ -0,0 +1,100 @@
+<script>
+  import Button from '../../components/Button.svelte';
+
+  /**
+   * Rounds the button
+   */
+  export let rounded = false;
+
+  /**
+   * Displays the count
+   */
+  export let count = 0;
+
+  /**
+   * Button text
+   */
+  export let text = 'You clicked';
+
+  /**
+   * Array object
+   */
+  export let arrayTest = [];
+
+  /**
+   * number range
+   */
+  export let range = 0;
+
+  /**
+   * Loading State
+   */
+  export let loadingState = 'loading';
+
+  /**
+   * Food items
+   */
+  export let food = [];
+
+  /**
+   * car choice
+   */
+  export let car = 'car';
+
+  /**
+   * color choice
+   */
+  export let color = '#000000';
+
+  /**
+   * date choice
+   */
+  export let date = '';
+
+  function handleClick(event) {
+    count += 1;
+  }
+</script>
+
+<style>
+  .Box {
+    width: 200px;
+    height: 200px;
+  }
+</style>
+
+<h1>Control Showcase</h1>
+<Button {rounded} on:click={handleClick}>{text}: {count}</Button>
+
+<h2>Array Range</h2>
+<div>{JSON.stringify(arrayTest)}</div>
+
+<h2>Progress Bar</h2>
+<progress value={range} min={0} max={100} step={1} />
+
+<h2>Enum Selectors</h2>
+
+<h3>inline radio</h3>
+<div>
+  <p>Loading State: {loadingState}</p>
+</div>
+
+<h3>inline check</h3>
+<div>
+  <p>Food Items: {JSON.stringify(food)}</p>
+</div>
+
+<h3>inline select</h3>
+<div>
+  <p>Car choice: {car}</p>
+</div>
+
+<h2>Color Picker</h2>
+<div>
+  <div class="Box" style="background-color: {color}" />
+</div>
+
+<h2>Date Picker</h2>
+<div>
+  <p>Date: {new Date(date)}</p>
+</div>
--- a/lib/components/package.json
+++ b/lib/components/package.json
@ -52,7 +52,7 @@
    "ts-dedent": "^1.1.1"
  },
  "devDependencies": {
-    "css": "^2.2.4",
+    "css": "^3.0.0",
    "enzyme": "^3.9.0",
    "jest": "^26.0.0",
    "jest-enzyme": "^7.0.2"
--- a/yarn.lock
+++ b/yarn.lock
@ -5697,6 +5697,11 @@ acorn@^7.0.0, acorn@^7.1.0, acorn@^7.1.1:
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
  integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==

+acorn@^7.3.1, acorn@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.0.tgz#e1ad486e6c54501634c6c397c5c121daa383607c"
+  integrity sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==
+
 address@1.1.2, address@^1.0.1, address@^1.1.0, address@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@ -11145,6 +11150,15 @@ css@^2.0.0, css@^2.2.1, css@^2.2.4:
    source-map-resolve "^0.5.2"
    urix "^0.1.0"

+css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+  dependencies:
+    inherits "^2.0.4"
+    source-map "^0.6.1"
+    source-map-resolve "^0.6.0"
+
 cssauron@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/cssauron/-/cssauron-1.4.0.tgz#a6602dff7e04a8306dc0db9a551e92e8b5662ad8"
@ -11606,7 +11620,7 @@ deep-extend@^0.6.0:
  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==

-deep-is@~0.1.3:
+deep-is@^0.1.3, deep-is@~0.1.3:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
@ -13591,6 +13605,14 @@ eslint-scope@^5.0.0:
    esrecurse "^4.1.0"
    estraverse "^4.1.1"

+eslint-scope@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5"
+  integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-teamcity@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/eslint-teamcity/-/eslint-teamcity-3.0.1.tgz#14524bb460afef6501eb1d1eff819a4b19fa4804"
@ -13612,11 +13634,65 @@ eslint-utils@^2.0.0:
  dependencies:
    eslint-visitor-keys "^1.1.0"

+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==

+eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint@7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.6.0.tgz#522d67cfaea09724d96949c70e7a0550614d64d6"
+  integrity sha512-QlAManNtqr7sozWm5TF4wIH9gmUm2hE3vNRUvyoYAa4y1l5/jxD/PQStEjBMQtCqZmSep8UxrcecI60hOpe61w==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    eslint-scope "^5.1.0"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^1.3.0"
+    espree "^7.2.0"
+    esquery "^1.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash "^4.17.19"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
 eslint@^5.16.0:
  version "5.16.0"
  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
@ -13707,6 +13783,15 @@ esm@^3.2.25, esm@^3.2.4:
  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==

+espree@7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.2.0.tgz#1c263d5b513dbad0ac30c4991b93ac354e948d69"
+  integrity sha512-H+cQ3+3JYRMEIOl87e7QdHX70ocly5iW4+dttuR8iYSPr/hXKFb+7dBsZ7+u1adC4VrnPlTkv0+OwuPnDop19g==
+  dependencies:
+    acorn "^7.3.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.3.0"
+
 espree@^5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
@ -13725,6 +13810,15 @@ espree@^6.1.2:
    acorn-jsx "^5.2.0"
    eslint-visitor-keys "^1.1.0"

+espree@^7.2.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.0.tgz#dc30437cf67947cf576121ebd780f15eeac72348"
+  integrity sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.3.0"
+
 esprima@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@ -13745,7 +13839,7 @@ esprima@~3.0.0:
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
  integrity sha1-U88kes2ncxPlUcOqLnM0LT+099k=

-esquery@^1.0.1:
+esquery@^1.0.1, esquery@^1.2.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
@ -14280,7 +14374,7 @@ fast-json-stable-stringify@2.1.0, fast-json-stable-stringify@2.x, fast-json-stab
  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==

-fast-levenshtein@~2.0.6:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@ -16416,6 +16510,16 @@ htmlnano@^0.2.2:
    terser "^4.3.9"
    uncss "^0.17.2"

+htmlparser2-svelte@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2-svelte/-/htmlparser2-svelte-4.1.0.tgz#3f8421a2896e58d1c430fe2a82033c8f6377cc64"
+  integrity sha512-+4f4RBFz7Rj2Hp0ZbFbXC+Kzbd6S9PgjiuFtdT76VMNgKogrEZy0pG2UrPycPbrZzVEIM5lAT3lAdkSTCHLPjg==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^3.0.0"
+    domutils "^2.0.0"
+    entities "^2.0.0"
+
 htmlparser2@3.8.x:
  version "3.8.3"
  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
@ -20395,6 +20499,14 @@ levn@^0.3.0, levn@~0.3.0:
    prelude-ls "~1.1.2"
    type-check "~0.3.2"

+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
 li@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/li/-/li-1.3.0.tgz#22c59bcaefaa9a8ef359cf759784e4bf106aea1b"
@ -23228,6 +23340,18 @@ optionator@^0.8.1, optionator@^0.8.2, optionator@^0.8.3:
    type-check "~0.3.2"
    word-wrap "~1.2.3"

+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
 ora@4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/ora/-/ora-4.0.3.tgz#752a1b7b4be4825546a7a3d59256fa523b6b6d05"
@ -25097,6 +25221,11 @@ preact@^8.4.2:
  resolved "https://registry.yarnpkg.com/preact/-/preact-8.5.3.tgz#78c2a5562fcecb1fed1d0055fa4ac1e27bde17c1"
  integrity sha512-O3kKP+1YdgqHOFsZF2a9JVdtqD+RPzCQc3rP+Ualf7V6rmRDchZ9MJbiGTT7LuyqFKZqlHSOyO/oMFmI2lVTsw==

+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@ -27005,7 +27134,7 @@ regexpp@^2.0.1:
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==

-regexpp@^3.0.0:
+regexpp@^3.0.0, regexpp@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
@ -28864,6 +28993,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
    source-map-url "^0.4.0"
    urix "^0.1.0"

+source-map-resolve@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+
 source-map-support@^0.4.15, source-map-support@~0.4.0:
  version "0.4.18"
  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
@ -29591,6 +29728,11 @@ strip-json-comments@^3.0.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
  integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==

+strip-json-comments@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
 strong-log-transformer@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
@ -29838,6 +29980,15 @@ svelte@^3.18.1:
  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b"
  integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw==

+sveltedoc-parser@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/sveltedoc-parser/-/sveltedoc-parser-3.0.4.tgz#39215a9e3499fdc86691905149028bc844a44175"
+  integrity sha512-E8SWWUuAcoYeh4vEXuDLrfOvc0ajhbj8fQtwjp6bCxBCH8/eGsDG5lzacKR4uCwnzVasILqjcfdXHEXa7DS8Fg==
+  dependencies:
+    eslint "7.6.0"
+    espree "7.2.0"
+    htmlparser2-svelte "4.1.0"
+
 svg-parser@^2.0.0, svg-parser@^2.0.2:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
@ -30920,6 +31071,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=

+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
 type-check@~0.3.2:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
@ -32720,7 +32878,7 @@ with@^7.0.0:
    assert-never "^1.2.1"
    babel-walk "3.0.0-canary-5"

-word-wrap@~1.2.3:
+word-wrap@^1.2.3, word-wrap@~1.2.3:
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==