initial commit.

2020-03-03 14:09:14 +01:00
commit 38c949139b
27 changed files with 7309 additions and 0 deletions
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="webcomponents-loader.js"></script>
+  </head>
+  <body style="margin: 0;">
+  </body>
+</html>
@@ -0,0 +1,58 @@
+import { gql, ApolloServer } from 'apollo-server-express';
+import { v4 as uuid } from 'uuid';
+
+const typeDefs = gql`
+    type Book {
+        id: String!
+        title: String!
+        author: String!
+    }
+
+    type Query {
+        books: [Book!]
+    }
+
+    type Mutation {
+        addBook(title: String!, author: String!): Book
+        delBook(id: String!): Book
+    }
+`;
+
+const BOOKS = [
+    { id: uuid(), title: "Hyperion", author: "Dan Simmons" },
+    { id: uuid(), title: "Dune", author: "Frank Herbert" },
+];
+
+const resolvers = {
+    Query: {
+        books: () => {
+            return BOOKS;
+        },
+    },
+
+    Mutation: {
+        addBook: (_, { title, author }) => {
+            const entry = { id: uuid(), title, author };
+            BOOKS.push(entry);
+            return entry;
+        },
+        delBook: (_, { id }) => {
+            const idx = BOOKS.findIndex(book => book.id === id);
+
+            if (idx === -1) {
+                return undefined;
+            }
+
+            const book = BOOKS[idx];
+            BOOKS.splice(idx, 1);
+            return book;
+        },
+    },
+};
+
+const server = new ApolloServer({
+    typeDefs,
+    resolvers,
+});
+
+export default server;
@@ -0,0 +1,19 @@
+import express from 'express';
+import server from './apollo';
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import webpackConfig from '../../webpack.web.development.js';
+
+const app = express();
+
+const compiler = webpack(webpackConfig);
+
+app.use(webpackDevMiddleware(compiler));
+app.use(webpackHotMiddleware(compiler));
+
+server.applyMiddleware({ app });
+
+app.listen(8080, () => {
+    console.log('Server started');
+});
@@ -0,0 +1,12 @@
+import express from 'express';
+import server from './apollo';
+
+const app = express();
+
+server.applyMiddleware({ app });
+
+app.use(express.static('dist/web'));
+
+app.listen(8080, () => {
+    console.log('Server started');
+});
@@ -0,0 +1,27 @@
+:host {
+    display: block;
+}
+
+input, button {
+    font-size: 24px;
+    padding: 5px 10px;
+    border: solid 1px #ddd;
+    &:focus {
+        outline: none;
+        border: solid 1px #aaa;
+    }
+}
+
+button {
+    background-color: #dfc;
+    color: #555;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+
+    &:active {
+        background-color: #ceb;
+    }
+
+    &:disabled {
+        background-color: #ddd;
+    }
+}
@@ -0,0 +1,47 @@
+import { component, html, useState } from 'haunted';
+import { useMutation } from '@apollo/react-hooks';
+import * as yup from 'yup';
+import { AddBook, GetBooks } from './queries'
+import Css from './bookform.scss';
+
+const schema = yup.object().shape({
+    title: yup.string().required(),
+    author: yup.string().required(),
+});
+
+const BookForm = () => {
+    const [title, setTitle] = useState("");
+    const [author, setAuthor] = useState("");
+    const [addBook, { loading }] = useMutation(AddBook);
+
+    return html`
+        <style>${Css.toString()}</style>
+        <input type="text"
+            placeholder="book title"
+            .value=${title}
+            @change=${(e: any) => setTitle(e.target.value)}>
+        <input type="text"
+            placeholder="author name"
+            .value=${author}
+            @change=${(e: any) => setAuthor(e.target.value)}>
+        <button @click=${async () => {
+            try {
+                const data = await schema.validate({ author, title });
+                await addBook({ variables: data, update: (cache, result) => {
+                    const list: any = cache.readQuery({ query: GetBooks });
+                    cache.writeQuery({ query: GetBooks, data: { books: [...list.books, result.data.addBook] }});
+                }});
+                setTitle("");
+                setAuthor("");
+            } catch(e) {
+                console.log(e);
+                if (e instanceof yup.ValidationError) {
+                    console.log("validation error");
+                }
+            }
+        }} ?disabled=${loading}>Add book</button>
+    `;
+}
+
+customElements.define('book-form', component(BookForm));
+
@@ -0,0 +1,22 @@
+:host {
+    display: block;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+p {
+    border-bottom: solid 1px #cdf;
+
+    .author {
+        font-size: 20px;
+        font-style: italic;
+        font-weight: normal;
+    }
+
+    a {
+        color: #cdf;
+        font-size: 14px;
+        text-decoration: none;
+    }
+}
+
@@ -0,0 +1,32 @@
+import { component, html } from 'haunted';
+import { useQuery, useMutation } from '@apollo/react-hooks';
+import { GetBooks, DelBook } from './queries';
+import Css from './booklist.scss';
+
+const BookList = () => {
+    const { data, loading } = useQuery(GetBooks);
+    const [delBook] = useMutation(DelBook);
+
+    if (loading) {
+        return html`<h1>Loading...</h1>`;
+    }
+
+    return html`
+        <style>${Css.toString()}</style>
+        ${data.books.map((book: any) => html`
+            <p>${book.title} <span class="author">by ${book.author}</span>
+            <a href="#" @click=${async (e: any) => {
+                e.preventDefault();
+                await delBook({ variables: { id: book.id }, update: (cache) => {
+                    const list: any = cache.readQuery({ query: GetBooks });
+                    const cleaned = list.books.filter((b: any) => b.id !== book.id);
+                    cache.writeQuery({ query: GetBooks, data: { books: cleaned } });
+                } });
+            }}>[delete]</a>
+            </p>`
+        )}
+    `;
+}
+
+customElements.define('book-list', component(BookList));
+
@@ -0,0 +1,18 @@
+import { html, render } from 'haunted';
+import ApolloClient from 'apollo-boost';
+import { getApolloContext } from '@apollo/react-hooks';
+import './myapp';
+
+const client = new ApolloClient({
+    uri: '/graphql',
+});
+
+const ApolloContext = getApolloContext();
+customElements.define('apollo-provider', ApolloContext.Provider);
+
+render(html`
+    <apollo-provider .value=${{client}}>
+        <my-app></my-app>
+    </apollo-provider>
+`, document.body);
+
@@ -0,0 +1,17 @@
+:host {
+    font-family: Ubuntu, sans-serif;
+    display: block;
+    & > * {
+        padding: 10px;
+    }
+
+}
+
+.version {
+    font-size: 60%;
+}
+
+h1 {
+    margin-top: 0;
+    background-color: #dfc;
+}
@@ -0,0 +1,19 @@
+import { component, html } from 'haunted';
+import { useApolloClient, useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+import Css from './myapp.scss';
+import './booklist';
+import './bookform';
+
+const App = () => {
+    const cli = useApolloClient();
+
+    return html`
+        <style>${Css.toString()}</style>
+        <h1>Haunted Apollo Demo <span class="version">(client ${cli.version})</span></h1>
+        <book-form></book-form>
+        <book-list></book-list>
+    `;
+}
+
+customElements.define('my-app', component(App));
@@ -0,0 +1,30 @@
+import gql from "graphql-tag";
+
+export const GetBooks = gql`
+    query getBooks {
+        books {
+            id
+            title
+            author
+        }
+    }
+`;
+
+export const AddBook = gql`
+    mutation addBook($title: String!, $author: String!) {
+        addBook(title: $title, author: $author) {
+            id
+            title
+            author
+        }
+    }
+`;
+
+export const DelBook = gql`
+    mutation delBook($id: String!) {
+        delBook(id: $id) {
+            id
+        }
+    }
+`;
+
@@ -0,0 +1,5 @@
+// typings.d.ts
+declare module '*.scss' {
+  const content: string;
+  export default content;
+}
@@ -0,0 +1,9 @@
+import * as Haunted from 'haunted';
+
+export default {
+    useState: Haunted.useState,
+    useContext: Haunted.useContext,
+    createContext: Haunted.createContext,
+};
+
+export * from 'haunted';