feat: create callback event after component loads (#28)

* feat: create callback event after component loads

- Implement a `on:loaded` event with `createEventDispatcher` that
  triggers after the component has been loaded
- Bump dependencies
- Add `eslint-plugin-svelte3` to avoid eslint warning about undeclared
  variables between `<script>` and `<script context="module">`
- Remove .eslintignore as it isn't being used

* docs: document `on:load` #28

.eslintrc

@@ -1,7 +1,13 @@
 {
   "root": true,
   "extends": ["eslint:recommended", "prettier", "prettier/standard"],
-  "plugins": ["prettier", "html"],
+  "plugins": ["prettier", "html", "svelte3"],
+  "overrides": [
+    {
+      "files": ["**/*.svelte"],
+      "processor": "svelte3/svelte3"
+    }
+  ],
   "parser": "babel-eslint",
   "settings": {
     "html/html-extensions": [".html", ".svelte"],

Loadable.svelte

@@ -52,7 +52,7 @@
 </script>
 
 <script>
-  import { onMount, getContext } from 'svelte'
+  import { onMount, getContext, createEventDispatcher } from 'svelte'
 
   export let delay = 200
   export let timeout = null
@@ -72,6 +72,8 @@
     componentProps = rest
   }
 
+  const dispatch = createEventDispatcher()
+
   const capture = getContext('svelte-loadable-capture')
   if (typeof capture === 'function' && ALL_LOADERS.has(loader)) {
     capture(loader)
@@ -125,8 +127,9 @@
     state = STATES.SUCCESS
     component = LOADED.get(loader)
   } else {
-    onMount(() => {
-      load()
+    onMount(async () => {
+      await load()
+      dispatch('load')
       if (unloader) {
         return () => {
           LOADED.delete(loader)

README.md

@@ -66,6 +66,20 @@ If the default slot is used, it's up to the developer to render the component:
 </Loadable>
 ```
 
+### Events
+
+- `on:load`: a function which is executed right after the `<Loadable>` component is loaded.
+
+```html
+<Loadable on:load={() => console.log('The component has been loaded')} loader={...} />
+```
+
+Otherwise, if your callback contains more code, you can wrap it into a function, and call it without parentheses
+
+```html
+<Loadable on:load={callback} loader={...} />
+```
+
 ### Slots
 
 - `loading`: customizes the loading state;