docs: use sapper/cypress for e2e testing

docs/src/client.js

@@ -0,0 +1,3 @@
+import * as sapper from "@sapper/app";
+
+sapper.start({ target: document.querySelector("#sapper") });

docs/src/components/GlobalHeader.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let segment = undefined;
+
+  import {
+    SkipToContent,
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderUtilities,
+    HeaderActionLink
+  } from "carbon-components-svelte";
+</script>
+
+<Header
+  company="Carbon"
+  platformName="Components Svelte"
+  href="."
+  rel="prefetch"
+  aria-current={segment === undefined ? 'page' : undefined}>
+  <SkipToContent />
+  <HeaderNav>
+    <HeaderNavItem
+      rel="prefetch"
+      href="about"
+      text="About"
+      aria-current={segment === 'about' ? 'page' : undefined} />
+    <HeaderNavItem
+      rel="prefetch"
+      href="components"
+      text="Components"
+      aria-current={segment === 'components' ? 'page' : undefined} />
+  </HeaderNav>
+</Header>

docs/src/routes/_error.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let status;
+  export let error = {};
+
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<div>
+  {error.message}.
+  <Link href=".">Return home</Link>
+</div>
+
+{#if process.env.NODE_ENV === 'development' && error.stack}
+  <pre>{error.stack}</pre>
+{/if}

docs/src/routes/_layout.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let segment = undefined;
+
+  import { Content } from "carbon-components-svelte";
+  import GlobalHeader from "../components/GlobalHeader.svelte";
+</script>
+
+{#if segment !== 'examples'}
+  <GlobalHeader {segment} />
+  <Content>
+    <slot />
+  </Content>
+{:else}
+  <slot />
+{/if}

docs/src/routes/about.svelte

@@ -0,0 +1,6 @@
+<h1>About</h1>
+
+<p>
+  <code>carbon-components-svelte</code>
+  is the Svelte implementation of the Carbon Design System
+</p>

docs/src/routes/components/[slug].json.js

@@ -0,0 +1,17 @@
+import components from "./_components.js";
+
+const componentsMap = new Map();
+
+components.forEach((post) => {
+  componentsMap.set(post.slug, JSON.stringify(post));
+});
+
+export function get(req, res, next) {
+  if (componentsMap.has(req.params.slug)) {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(componentsMap.get(req.params.slug));
+  } else {
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ message: "Not found" }));
+  }
+}

docs/src/routes/components/[slug].svelte

@@ -0,0 +1,38 @@
+<script context="module">
+  export async function preload({ params }) {
+    const res = await this.fetch(`components/${params.slug}.json`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { data };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
+</script>
+
+<script>
+  export let data = {};
+
+  import { onMount } from "svelte";
+
+  let component = undefined;
+
+  onMount(async () => {
+    try {
+      component = await import(`../examples/${data.title}.svelte`);
+    } catch (e) {
+      console.log(e);
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>{data.title}</title>
+</svelte:head>
+
+<h1>{data.title}</h1>
+
+{#if component}
+  <svelte:component this={component.default} />
+{/if}

docs/src/routes/components/_components.js

@@ -0,0 +1,10 @@
+const components = [
+  {
+    title: "Button",
+  },
+].map((post) => ({
+  ...post,
+  slug: post.title.toLowerCase().replace(/\s+/g, "-"),
+}));
+
+export default components;

docs/src/routes/components/index.json.js

@@ -0,0 +1,6 @@
+import components from "./_components.js";
+
+export function get(req, res) {
+  res.writeHead(200, { "Content-Type": "application/json" });
+  res.end(JSON.stringify(components));
+}

docs/src/routes/components/index.svelte

@@ -0,0 +1,27 @@
+<script context="module">
+  export function preload() {
+    return this.fetch("components.json")
+      .then(r => r.json())
+      .then(data => ({ data }));
+  }
+</script>
+
+<script>
+  export let data = [];
+
+  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+</script>
+
+<svelte:head>
+  <title>Components</title>
+</svelte:head>
+
+<h1>Components</h1>
+
+<UnorderedList>
+  {#each data as data, i (data.title)}
+    <ListItem>
+      <Link rel="prefetch" href="components/{data.slug}">{data.title}</Link>
+    </ListItem>
+  {/each}
+</UnorderedList>

docs/src/routes/examples/Button.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button kind="primary">Primary button</Button>
+<Button kind="secondary">Secondary button</Button>
+<Button kind="tertiary">Tertiary button</Button>
+<Button kind="ghost">Ghost button</Button>

docs/src/routes/examples/_layout.svelte

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

docs/src/routes/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import components from "./components/_components";
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<h1>Welcome</h1>
+
+{#each components as component}
+  <Link href="examples/{component.title}">{component.title}</Link>
+{/each}

docs/src/server.js

@@ -0,0 +1,11 @@
+import sirv from "sirv";
+import polka from "polka";
+import * as sapper from "@sapper/server";
+
+const { PORT, NODE_ENV } = process.env;
+
+polka()
+  .use(sirv("static", { dev: NODE_ENV === "development" }), sapper.middleware())
+  .listen(PORT, (err) => {
+    if (err) console.log("error", err);
+  });

docs/src/service-worker.js

@@ -0,0 +1,82 @@
+import { timestamp, files, shell, routes } from '@sapper/service-worker';
+
+const ASSETS = `cache${timestamp}`;
+
+// `shell` is an array of all the files generated by the bundler,
+// `files` is an array of everything in the `static` directory
+const to_cache = shell.concat(files);
+const cached = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			self.clients.claim();
+		})
+	);
+});
+
+self.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	if (!url.protocol.startsWith('http')) return;
+
+	// ignore dev server requests
+	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
+	// always serve static files and bundler-generated assets from cache
+	if (url.host === self.location.host && cached.has(url.pathname)) {
+		event.respondWith(caches.match(event.request));
+		return;
+	}
+
+	// for pages, you might want to serve a shell `service-worker-index.html` file,
+	// which Sapper has generated for you. It's not right for every
+	// app, but if it's right for yours then uncomment this section
+	/*
+	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+		event.respondWith(caches.match('/service-worker-index.html'));
+		return;
+	}
+	*/
+
+	if (event.request.cache === 'only-if-cached') return;
+
+	// for everything else, try the network first, falling back to
+	// cache if the user is offline. (If the pages never change, you
+	// might prefer a cache-first approach to a network-first one.)
+	event.respondWith(
+		caches
+			.open(`offline${timestamp}`)
+			.then(async cache => {
+				try {
+					const response = await fetch(event.request);
+					cache.put(event.request, response.clone());
+					return response;
+				} catch(err) {
+					const response = await cache.match(event.request);
+					if (response) return response;
+
+					throw err;
+				}
+			})
+	);
+});

docs/src/template.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#161616" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="upgrade-insecure-requests"
+    />
+
+    %sapper.base%
+
+    <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
+    />
+    <title>Carbon Components Svelte</title>
+
+    %sapper.styles% %sapper.head%
+  </head>
+  <body>
+    <div id="sapper">%sapper.html%</div>
+
+    %sapper.scripts%
+  </body>
+</html>