@shopify/create-hydrogen 1.0.0-alpha.23 → 1.0.4

package/template-hydrogen/src/pages/collections/[handle].server.jsx

@@ -1,69 +0,0 @@
-import {MediaFile, useShopQuery} from '@shopify/hydrogen';
-import {useParams} from 'react-router-dom';
-import gql from 'graphql-tag';
-
-import Layout from '../../components/Layout.client';
-import ProductCard from '../../components/ProductCard.client';
-
-export default function Collection() {
-  const {handle} = useParams();
-  const {data} = useShopQuery({query: QUERY, variables: {handle}});
-
-  const collection = data.collectionByHandle;
-
-  return (
-    <Layout>
-      <h1 className="text-2xl font-bold">{collection.title}</h1>
-
-      <ul className="grid lg:grid-cols-3 gap-6 mt-4">
-        {collection.products.edges.map((edge) => (
-          <li key={edge.node.id}>
-            <ProductCard product={edge.node} />
-          </li>
-        ))}
-      </ul>
-    </Layout>
-  );
-}
-
-const QUERY = gql`
-  fragment CollectionProductDetails on Product {
-    id
-    title
-    handle
-    priceRange {
-      maxVariantPrice {
-        amount
-        currencyCode
-      }
-      minVariantPrice {
-        amount
-        currencyCode
-      }
-    }
-    media(first: 1) {
-      edges {
-        node {
-          ...MediaFileFragment
-        }
-      }
-    }
-  }
-
-  query CollectionDetails($handle: String!) {
-    collectionByHandle(handle: $handle) {
-      id
-      title
-
-      products(first: 10) {
-        edges {
-          node {
-            ...CollectionProductDetails
-          }
-        }
-      }
-    }
-  }
-
-  ${MediaFile.Fragment}
-`;

package/template-hydrogen/src/pages/products/[handle].server.jsx

@@ -1,56 +0,0 @@
-import {useShopQuery, ProductProviderFragment} from '@shopify/hydrogen';
-import {useParams} from 'react-router-dom';
-import gql from 'graphql-tag';
-
-import ProductDetails from '../../components/ProductDetails.client';
-import NotFound from '../../components/NotFound.server';
-
-export default function Product() {
-  const {handle} = useParams();
-
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {
-      handle,
-      numProductMetafields: 10,
-      numProductVariants: 250,
-      numProductMedia: 6,
-      numProductVariantMetafields: 10,
-    },
-  });
-
-  if (!data.product) {
-    return <NotFound />;
-  }
-
-  return <ProductDetails data={data} />;
-}
-
-const QUERY = gql`
-  query product(
-    $handle: String!
-    $numProductMetafields: Int!
-    $numProductVariants: Int!
-    $numProductMedia: Int!
-    $numProductVariantMetafields: Int!
-  ) {
-    product: productByHandle(handle: $handle) {
-      id
-      vendor
-      seo {
-        title
-        description
-      }
-      images(first: 1) {
-        edges {
-          node {
-            originalSrc
-          }
-        }
-      }
-      ...ProductProviderFragment
-    }
-  }
-
-  ${ProductProviderFragment}
-`;

package/template-hydrogen/src/pages/search.server.jsx

@@ -1,107 +0,0 @@
-import {useEffect, useMemo, useState} from 'react';
-import {useHistory, useLocation} from 'react-router-dom';
-import {useShopQuery, MediaFile} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-import Layout from '../components/Layout.client';
-import ProductCard from '../components/ProductCard.client';
-
-/**
- * TODO: Refactor to a true server component.
- */
-export default function Search() {
-  const {search} = useLocation();
-  const originalQuery = useMemo(
-    () => new URLSearchParams(search).get('query'),
-    [search],
-  );
-  const history = useHistory();
-  const [query, setQuery] = useState(originalQuery);
-  const [newQuery, setNewQuery] = useState(query);
-
-  useEffect(() => {
-    if (originalQuery) {
-      setQuery(originalQuery);
-    }
-  }, [originalQuery]);
-
-  return (
-    <Layout>
-      <h1 className="text-2xl font-bold">Search</h1>
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          setQuery(newQuery);
-          history.push(`/search?query=${newQuery}`);
-        }}
-        className="mt-4 space-x-2"
-      >
-        <label htmlFor="search">Search Products:</label>
-        <input
-          autocomplete="off"
-          name="search"
-          id="search"
-          type="search"
-          value={newQuery}
-          onChange={(event) => setNewQuery(event.target.value)}
-          className="p-1"
-        />
-        <button type="submit" className="bg-black text-white font-bold p-1">
-          Search
-        </button>
-      </form>
-      {query && <SearchResults query={query} />}
-    </Layout>
-  );
-}
-
-function SearchResults({query}) {
-  const {data, fetching} = useShopQuery({query: QUERY, variables: {query}});
-
-  if (fetching) return <p>Loading...</p>;
-
-  return (
-    <>
-      <h2 className="text-xl font-medium mt-8">Search results for: {query}</h2>
-
-      {data.products.edges.length ? (
-        <ul className="grid lg:grid-cols-3 gap-6 mt-4">
-          {data.products.edges.map((edge) => (
-            <li key={edge.node.id}>
-              <ProductCard product={edge.node} />
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p>No results found.</p>
-      )}
-    </>
-  );
-}
-
-const QUERY = gql`
-  fragment SearchProductDetails on Product {
-    id
-    title
-    handle
-    media(first: 1) {
-      edges {
-        node {
-          ...MediaFileFragment
-        }
-      }
-    }
-  }
-
-  query ProductSearch($query: String!) {
-    products(query: $query, first: 10) {
-      edges {
-        node {
-          ...SearchProductDetails
-        }
-      }
-    }
-  }
-
-  ${MediaFile.Fragment}
-`;

package/template-hydrogen/src/pages/sitemap.xml.server.jsx

@@ -1,64 +0,0 @@
-import {flattenConnection, useShopQuery} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-export default function Sitemap({response}) {
-  response.doNotStream();
-
-  const {data} = useShopQuery({query: QUERY});
-
-  response.headers.set('content-type', 'application/xml');
-
-  return response.send(shopSitemap(data));
-}
-
-function shopSitemap(data) {
-  return `
-    <urlset
-      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-      xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
-    >
-      ${flattenConnection(data.products)
-        .map((product) => {
-          return `
-          <url>
-            <loc>
-              https://hydrogen-preview.myshopify.com/products/${product.handle}
-            </loc>
-            <lastmod>${product.updatedAt}</lastmod>
-            <changefreq>daily</changefreq>
-            <image:image>
-              <image:loc>
-                ${product?.images?.edges?.[0]?.node?.originalSrc}
-              </image:loc>
-              <image:title>
-                ${product?.images?.edges?.[0]?.node?.altText ?? ''}
-              </image:title>
-              <image:caption />
-            </image:image>
-          </url>
-        `;
-        })
-        .join('')}
-    </urlset>`;
-}
-
-const QUERY = gql`
-  query Products {
-    products(first: 100) {
-      edges {
-        node {
-          updatedAt
-          handle
-          images(first: 1) {
-            edges {
-              node {
-                originalSrc
-                altText
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;

package/template-hydrogen/tailwind.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
-  mode: 'jit',
-  darkMode: false, // or 'media' or 'class'
-  variants: {
-    extend: {},
-  },
-  plugins: [require('@tailwindcss/typography')],
-};

package/template-hydrogen/worker.js

@@ -1,22 +0,0 @@
-import handleEvent from '@shopify/hydrogen/worker';
-import entrypoint from './src/entry-server.jsx';
-// eslint-disable-next-line node/no-missing-import
-import indexHtml from './dist/client/index.html?raw';
-
-addEventListener('fetch', (event) => {
-  try {
-    event.respondWith(
-      handleEvent(event, {
-        entrypoint,
-        indexTemplate: indexHtml,
-        cache: caches.default,
-      }),
-    );
-  } catch (error) {
-    event.respondWith(
-      new Response(error.message || error.toString(), {
-        status: 500,
-      }),
-    );
-  }
-});