Add example

timhall · timhall · commit 82a4c89bf6fa · 2019-04-26T17:02:10.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,5 @@
 /dist
-
-/example/.sapper/
-/example/export/
-/example/build/
-/example/app/manifest/
+/example/public/bundle.*
 
 node_modules
 .vscode
diff --git a/example/public/global.css b/example/public/global.css
@@ -0,0 +1,13 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
diff --git a/example/public/index.html b/example/public/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset='utf8'>
+	<meta name='viewport' content='width=device-width'>
+
+	<title>Svelte app</title>
+
+	<link rel='stylesheet' href='global.css'>
+	<link rel='stylesheet' href='bundle.css'>
+</head>
+
+<body>
+	<script src='bundle.js'></script>
+</body>
+</html>
diff --git a/example/rollup.config.js b/example/rollup.config.js
@@ -0,0 +1,31 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import replace from 'rollup-plugin-replace';
+
+export default {
+  input: 'src/main.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/bundle.js',
+    globals: {
+      'apollo-boost': ''
+    }
+  },
+  external: [],
+  plugins: [
+    svelte({
+      dev: true,
+      css: css => {
+        css.write('public/bundle.css');
+      }
+    }),
+    resolve(),
+    commonjs(),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  ]
+};
diff --git a/example/server.js b/example/server.js
@@ -0,0 +1,46 @@
+const { GraphQLServer } = require('graphql-yoga');
+
+// Source: https://thegreatestbooks.org/
+const books = [
+  { id: '1', title: 'In Search of Lost Time' },
+  { id: '2', title: 'Don Quixote' },
+  { id: '3', title: 'Ulysses' },
+  { id: '4', title: 'The Great Gatsby' },
+  { id: '5', title: 'Moby Dick' },
+  { id: '6', title: 'Hamlet' },
+  { id: '7', title: 'War and Peace' },
+  { id: '8', title: 'The Odyssey' },
+  { id: '9', title: 'One Hundred Years of Solitude' },
+  { id: '10', title: 'The Divine Comedy' }
+];
+
+const typeDefs = `
+  type Book {
+    id: ID!
+    title: String!
+  }
+
+  type Query {
+    books: [Book!]!
+  }
+`;
+
+const resolvers = {
+  Query: {
+    async books() {
+      await latency();
+      return books;
+    }
+  }
+};
+
+const server = new GraphQLServer({ typeDefs, resolvers });
+server.start({ port: 4001, debug: true }, () => {
+  console.log('GraphQL server listening on localhost:4001');
+});
+
+async function latency(ms = 100) {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}
diff --git a/example/src/App.svelte b/example/src/App.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { client } from './data';
+	import { setClient } from '../../';
+	import Books, { preload } from './Books.svelte';
+
+	// Approximate sapper preload
+	const preloading = preload();
+
+	setClient(client);
+</script>
+
+<section>
+	<h2>Books</h2>
+
+	{#await preloading}
+		<p>Preloading books....</p>
+	{:then preloaded}
+		<Books {...preloaded} />
+	{:catch error}
+		<p>Error preloading books: {error}</p>
+	{/await}
+</section>
diff --git a/example/src/Books.svelte b/example/src/Books.svelte
@@ -0,0 +1,31 @@
+<script context="module">
+  import { gql } from 'apollo-boost';
+  import { client, BOOKS } from './data';
+
+  export async function preload() {
+    return {
+      cache: await client.query({ query: BOOKS })
+    };
+  }
+</script>
+<script>
+  import { getClient, restore, query } from '../../';
+  
+  export let cache;
+
+  const books = query(client, { query: BOOKS });
+</script>
+
+<ul>
+  {#await $books}
+    <li>Loading...</li>
+  {:then result}
+    {#each result.data.books as book (book.id)}
+      <li>{book.title}</li>
+    {:else}
+      <li>No books found</li>
+    {/each}
+  {:catch error}
+    <li>Error loading books: {error}</li>
+  {/await}
+</ul>
diff --git a/example/src/data.js b/example/src/data.js
@@ -0,0 +1,14 @@
+import ApolloClient, { gql } from 'apollo-boost';
+
+export const client = new ApolloClient({
+  uri: 'http://localhost:4001'
+});
+
+export const BOOKS = gql`
+  {
+    books {
+      id
+      title
+    }
+  }
+`;
diff --git a/example/src/main.js b/example/src/main.js
@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;
diff --git a/package.json b/package.json
@@ -15,9 +15,12 @@
   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "npm run build",
-    "example": "cd example && sapper dev",
     "test": "jest",
-    "check": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "example": "run-p example:*",
+    "example:build": "cd example && rollup -c -w",
+    "example:serve": "sirv example/public --dev",
+    "example:server": "node example/server"
   },
   "dependencies": {
     "apollo-utilities": "^1.2.1",
@@ -31,18 +34,24 @@
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.4.3",
     "@types/jest": "^24.0.11",
+    "apollo-boost": "^0.3.1",
     "apollo-cache-inmemory": "^1.5.1",
     "apollo-client": "^2.5.1",
     "apollo-link": "^1.2.11",
     "apollo-link-state": "^0.4.2",
     "graphql": "^14.2.1",
+    "graphql-yoga": "^1.17.4",
     "jest": "^24.7.1",
+    "npm-run-all": "^4.1.5",
     "rollup": "^1.10.1",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-dts": "^0.12.0",
     "rollup-plugin-filesize": "^5.0.1",
     "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-typescript": "^1.0.1",
+    "sirv-cli": "^0.4.0",
     "svelte": "^3.0.0",
     "ts-jest": "^24.0.2",
     "tslib": "^1.9.3",
