First working version!

LICENSE.txt

@@ -0,0 +1,22 @@
+MIT License
+
+Portions Copyright (c) 2019 Christian Kaisermann
+Copyright (c) 2019 Kevin Newman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,6 @@
+npdev:svetle-loadable
+=====================
+
+An easy way to split code at the component level dynamic imports for Meteor. This is a port from the original `svelte-loadable` project to Meteor, which adds SSR and hydration support, with a few other enhancements.
+
+Documentation to come. Check out [this starter](https://github.com/CaptainN/meteor-svelte-starter) for example integration.

package.js

@@ -0,0 +1,14 @@
+Package.describe({
+  name: "npdev:svelte-loadable",
+  version: "1.0.0-alpha.0",
+  summary: "Easy code splitting with Svelte-loadable",
+  git: "https://github.com/CaptainN/npdev-svelte-loadable.git"
+})
+
+Package.onUse(function (api) {
+  api.versionsFrom('[email protected]')
+  api.use(['ecmascript', 'ejson', 'svelte:compiler'])
+
+  api.mainModule('svelte-loadable-server.js', 'server', { lazy: true })
+  api.mainModule('svelte-loadable-client.js', 'client', { lazy: true })
+});

svelte-loadable-both.js

@@ -0,0 +1,42 @@
+export const ALL_LOADERS = new Map()
+import { LOADED } from './svelte-loadable.svelte'
+
+export function findLoader (resolved) {
+  for (let [loader, r] of ALL_LOADERS) {
+    if (r === resolved) return loader
+  }
+  return null
+}
+
+export function register (loadable) {
+  const resolved = loadable.resolve()
+  const loader = findLoader(resolved)
+  if (loader) {
+    return loader
+  } else {
+    ALL_LOADERS.set(loadable.loader, resolved)
+    return loadable.loader
+  }
+}
+
+export function preloadAll () {
+  return Promise.all(
+    Array.from(ALL_LOADERS.keys())
+    .filter(loader => !LOADED.has(loader))
+    .map(loader => loader().then((componentModule) => {
+      // TODO: This is very optimistic, and assumes loadables will always
+      // load correctly. This should instead leverage the internal state
+      // logic within svelte-loadable.svelte, which needs to be hoisted
+      // and exported in some usable way.
+      const component = componentModule.default || componentModule
+      LOADED.set(loader, component)
+      return componentModule
+    }))
+  ).then(() => {
+    // If new loaders have been registered by loaded components,
+    // load them next.
+    if (ALL_LOADERS.size > LOADED.size) {
+      return preloadAll()
+    }
+  })
+}

svelte-loadable-client.js

@@ -0,0 +1,37 @@
+import { EJSON } from 'meteor/ejson'
+import { LOADED } from './svelte-loadable.svelte'
+
+export { register, preloadAll, findLoader } from './svelte-loadable-both'
+export { default as LoadableProvider } from './svelte-loadable-provider-client.svelte'
+export { default as Loadable } from './svelte-loadable.svelte'
+
+const preload = (preloadables) => {
+  return Promise.all(preloadables
+    .map(resolved => findLoader(resolved))
+    .filter(loader => !LOADED.has(loader))
+    .map(loader => loader().then((componentModule) => {
+      // TODO: This is very optimistic, and assumes loadables will always
+      // load correctly. This should instead leverage the internal state
+      // logic within svelte-loadable.svelte, which needs to be hoisted
+      // and exported in some usable way.
+      const component = componentModule.default || componentModule
+      LOADED.set(loader, component)
+      return componentModule
+    }))
+  )
+}
+
+const resolved = () => new Promise((resolve) => { resolve() })
+
+export const loadHydratables = (id = '__hydratables__') => {
+  const preloadablesNode = document.getElementById(id)
+  if (preloadablesNode) {
+    const preloadables = EJSON.parse(preloadablesNode.innerText)
+    preloadablesNode.parentNode.removeChild(preloadablesNode)
+    return (preloadables.length > 0)
+      ? preload(preloadables)
+      : resolved()
+  } else {
+    return resolved()
+  }
+}

svelte-loadable-provider-client.svelte

@@ -0,0 +1 @@
+<slot />

svelte-loadable-provider-server.svelte

@@ -0,0 +1,20 @@
+<script>
+import { setContext } from 'svelte'
+import { EJSON } from 'meteor/ejson'
+import { ALL_LOADERS } from './svelte-loadable-both'
+
+const loaders = []
+setContext('svelte-loadable-capture', (loader) => {
+  loaders.push(ALL_LOADERS.get(loader))
+})
+
+export let handle = {}
+handle.toEJSON = () => (
+  EJSON.stringify(loaders)
+)
+handle.toScriptTag = function () {
+  return `<script type="text/ejson" id="__hydratables__">${this.toEJSON()}<`+`/script>`
+}
+</script>
+
+<slot />

svelte-loadable-server.js

@@ -0,0 +1,3 @@
+export { register, preloadAll } from './svelte-loadable-both'
+export { default as LoadableProvider } from './svelte-loadable-provider-server.svelte'
+export { default as Loadable } from './svelte-loadable.svelte'

svelte-loadable.svelte

@@ -0,0 +1,101 @@
+<script context="module">
+export const LOADED = new Map()
+
+const STATES = Object.freeze({
+  INITIALIZED: 0,
+  LOADING: 1,
+  SUCCESS: 2,
+  ERROR: 3,
+  TIMEOUT: 4,
+})
+</script>
+
+<script>
+/**
+ * Original work Copyright (c) 2019 Christian Kaisermann
+ * Modified work Copyright (c) 2019 Kevin Newman
+ * @see https://github.com/kaisermann/svelte-loadable
+ */
+import { onMount, getContext } from 'svelte'
+
+export let delay = 200
+export let timeout = null
+export let loader = null
+export let component = null
+export let error = null
+
+let load_time = null
+let timeout_timer = null
+let state = STATES.INITIALIZED
+let componentProps
+let slots
+
+$: {
+  let { $$slots, delay, timeout, component, loader, error, ...rest } = $$props
+  slots = $$slots
+  componentProps = rest
+}
+
+const capture = getContext('svelte-loadable-capture')
+if (typeof capture === 'function') {
+  capture(loader)
+}
+
+function clearTimers() {
+  clearTimeout(load_time)
+  clearTimeout(timeout_timer)
+}
+
+export async function load() {
+  clearTimers()
+
+  if (typeof loader !== 'function') {
+    return
+  }
+
+  load_time = setTimeout(() => {
+    state = STATES.LOADING
+    error = null
+    component = null
+  }, parseFloat(delay))
+
+  if (timeout) {
+    timeout_timer = setTimeout(() => {
+      state = STATES.TIMEOUT
+    }, parseFloat(timeout))
+  }
+
+  try {
+    const componentModule = await loader()
+    state = STATES.SUCCESS
+    component = componentModule.default || componentModule
+    LOADED.set(loader, component)
+  } catch (e) {
+    state = STATES.ERROR
+    error = e
+  }
+
+  clearTimers()
+}
+
+if (LOADED.has(loader)) {
+  state = STATES.SUCCESS
+  component = LOADED.get(loader)
+} else {
+  onMount(load)
+}
+</script>
+
+{#if state === STATES.ERROR}
+  <slot name="error" {error} />
+{:else if state === STATES.TIMEOUT}
+  <slot name="timeout" />
+{:else if state === STATES.LOADING}
+<slot name="loading" />
+{:else if state === STATES.SUCCESS}
+  {#if slots && slots.success}
+    <slot name="success" {component} props={componentProps} />
+  {:else}
+    <svelte:component this={component} {...componentProps} />
+  {/if}
+{/if}