@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

package/dist/esnext/foundation/ServerStateProvider/index.d.ts

@@ -1 +0,0 @@
-export * from './ServerStateProvider.client';

package/dist/esnext/foundation/ServerStateProvider/index.js

@@ -1 +0,0 @@
-export * from './ServerStateProvider.client';

package/dist/esnext/foundation/ShopifyProvider/ShopifyContext.d.ts

@@ -1 +0,0 @@
-export declare const ShopifyContext: import("react").Context<import("../../types").ShopifyConfig | null>;

package/dist/esnext/foundation/ShopifyProvider/ShopifyContext.js

@@ -1,2 +0,0 @@
-import { createContext } from 'react';
-export const ShopifyContext = createContext(null);

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.d.ts

@@ -1,3 +0,0 @@
-import { ShopifyProviderProps } from './types';
-export declare const DEFAULT_API_VERSION = "2021-10";
-export declare function ShopifyProvider({ shopifyConfig, children, }: ShopifyProviderProps): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.js

@@ -1,11 +0,0 @@
-import React, { useMemo } from 'react';
-import { ShopifyContext } from './ShopifyContext';
-export const DEFAULT_API_VERSION = '2021-10';
-export function ShopifyProvider({ shopifyConfig, children, }) {
-    const shopifyProviderValue = useMemo(() => ({
-        locale: 'en-us',
-        graphqlApiVersion: DEFAULT_API_VERSION,
-        ...shopifyConfig,
-    }), [shopifyConfig]);
-    return (React.createElement(ShopifyContext.Provider, { value: shopifyProviderValue }, children));
-}

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.d.ts

@@ -1,8 +0,0 @@
-import { ReactElement } from 'react';
-import { ShopifyConfig } from '../../types';
-import { ReactQueryHydrationContext } from './types';
-export declare function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }: {
-    children: ReactElement;
-    shopifyConfig: ShopifyConfig;
-    hydrationContext: ReactQueryHydrationContext;
-}): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ShopifyProvider } from './ShopifyProvider';
-import { QueryProvider } from '../../hooks/useQuery';
-export function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }) {
-    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig },
-        React.createElement(QueryProvider, { hydrationContext: hydrationContext }, children)));
-}

package/dist/esnext/foundation/ShopifyProvider/hooks.d.ts

@@ -1,2 +0,0 @@
-import { ShopifyProviderValue } from './types';
-export declare function useShop(): ShopifyProviderValue;

package/dist/esnext/foundation/ShopifyProvider/hooks.js

@@ -1,9 +0,0 @@
-import { useContext } from 'react';
-import { ShopifyContext } from './ShopifyContext';
-export function useShop() {
-    const context = useContext(ShopifyContext);
-    if (!context) {
-        throw new Error('No Shopify Context found');
-    }
-    return context;
-}

package/dist/esnext/framework/plugins/vite-plugin-react-server-components-shim.js

@@ -1,123 +0,0 @@
-import path from 'path';
-import { promises as fs } from 'fs';
-import glob from 'fast-glob';
-import { tagClientComponents, wrapClientComponents } from '../server-components';
-export default () => {
-    let config;
-    let clientManifest;
-    return {
-        name: 'vite-plugin-react-server-components-shim',
-        enforce: 'pre',
-        configResolved(_config) {
-            config = _config;
-        },
-        buildStart() {
-            var _a;
-            if (config.build.ssr || config.command !== 'build')
-                return;
-            /**
-             * By default, it's assumed the path to Hydrogen components is adjacent to the config
-             * in node_modules. However, in the case of the Yarn monorepo (or E2E tests), this
-             * path needs to be customized. We use an environment variable in that case.
-             */
-            const hydrogenComponentPath = (_a = process.env.HYDROGEN_PATH) !== null && _a !== void 0 ? _a : './node_modules/@shopify/hydrogen';
-            /**
-             * Grab each of the client components in this project and emit them as chunks.
-             * This allows us to dynamically import them later during partial hydration in production.
-             */
-            const clientComponents = glob
-                .sync(path.resolve(config.root, './src/**/*.client.(j|t)sx'))
-                .concat(glob.sync(path.resolve(config.root, hydrogenComponentPath, 'dist/esnext/**/*.client.js')));
-            clientComponents.forEach((id) => {
-                this.emitFile({
-                    type: 'chunk',
-                    id,
-                    preserveSignature: 'strict',
-                });
-            });
-        },
-        async resolveId(source, importer) {
-            if (!importer)
-                return null;
-            /**
-             * Throw errors when non-Server Components try to load Server Components.
-             */
-            if (/\.server(\.(j|t)sx?)?$/.test(source) &&
-                !/\.server\.(j|t)sx?$/.test(importer) &&
-                // Ignore entrypoints, index re-exports, ClientMarker, handle-worker-event
-                !/(entry-server\.(j|t)sx?|index\.(html|js)|ClientMarker\.js|handle-worker-event\.js)$/.test(importer)) {
-                throw new Error(`Cannot import ${source} from "${importer}". ` +
-                    'By convention, Server Components can only be imported from other Server Component files. ' +
-                    'That way nobody accidentally sends these to the client by indirectly importing it.');
-            }
-            /**
-             * Throw errors when Client Components try to load Hydrogen components from the
-             * server-only entrypoint.
-             */
-            if (/@shopify\/hydrogen$/.test(source) &&
-                /\.client\.(j|t)sx?$/.test(importer)) {
-                throw new Error(`Cannot import @shopify/hydrogen from "${importer}". ` +
-                    'When using Hydrogen components within Client Components, use the `@shopify/hydrogen/client` entrypoint instead.');
-            }
-        },
-        transform(src, id, ssr) {
-            if (!ssr)
-                return null;
-            /**
-             * When a server component imports a client component, tag a `?fromServer`
-             * identifier at the end of the import to indicate that we should transform
-             * it with a ClientMarker (below).
-             *
-             * We are manually passing `@shopify/hydrogen/client` as an additional "from"
-             * identifier to allow local Server Components to import them as tagged Client Components.
-             * We should also accept this as a plugin argument for other third-party packages.
-             */
-            if (/\.server\.(j|t)sx?$/.test(id)) {
-                return tagClientComponents(src);
-            }
-        },
-        async load(id, ssr) {
-            if (!ssr)
-                return null;
-            /**
-             * Client components being loaded from server components need to be
-             * wrapped in a ClientMarker so we can serialize their props and
-             * dynamically load them in the browser.
-             */
-            if (id.includes('?fromServer')) {
-                return await wrapClientComponents({
-                    id,
-                    getManifestFile: getFileFromClientManifest,
-                    root: config.root,
-                    isBuild: config.command === 'build',
-                });
-            }
-            return null;
-        },
-    };
-    async function getFileFromClientManifest(manifestId) {
-        const manifest = await getClientManifest();
-        const fileName = '/' + manifestId.split('/').pop();
-        const matchingKey = Object.keys(manifest).find((key) => key.endsWith(fileName));
-        if (!matchingKey) {
-            throw new Error(`Could not find a matching entry in the manifest for: ${manifestId}`);
-        }
-        return manifest[matchingKey].file;
-    }
-    async function getClientManifest() {
-        if (config.command !== 'build') {
-            return {};
-        }
-        if (clientManifest)
-            return clientManifest;
-        try {
-            const manifest = JSON.parse(await fs.readFile(path.resolve(config.root, './dist/client/manifest.json'), 'utf-8'));
-            clientManifest = manifest;
-            return manifest;
-        }
-        catch (e) {
-            console.error(`Failed to load client manifest:`);
-            console.error(e);
-        }
-    }
-};

package/dist/esnext/framework/server-components.d.ts

@@ -1,12 +0,0 @@
-export declare function wrapClientComponents({ id, getManifestFile, root, isBuild, }: {
-    id: string;
-    getManifestFile: (manifestId: string) => Promise<string>;
-    root: string;
-    isBuild: boolean;
-}): Promise<string>;
-export declare function tagClientComponents(src: string, additionalReferences?: Array<string | RegExp>): {
-    code: string;
-    map: {
-        mappings: string;
-    };
-};

package/dist/esnext/framework/server-components.js

@@ -1,72 +0,0 @@
-export async function wrapClientComponents({ id, getManifestFile, root, isBuild, }) {
-    const normalizedId = id.slice(0, id.indexOf('?fromServer'));
-    const manifestId = normalizedId.replace(root, '');
-    const name = id.split('/').pop().split('.').shift();
-    /**
-     * ?fromServer can designate named exports as a comma-separated list.
-     * ?fromServer=Foo,Bar
-     *
-     * Re-named exports are also supported:
-     * ?fromServer=Foo:Baz,Bar
-     */
-    const names = id.includes('?fromServer=')
-        ? id
-            .slice(id.indexOf('?fromServer=') + '?fromServer='.length)
-            .split(',')
-            .map((name) => name.split(':').shift())
-        : [];
-    /**
-     * Determine the id of the chunk to be imported. If we're building
-     * the production bundle, we need to reference the chunk generated
-     * during the client manifest. Otherwise, we can pass the normalizedId
-     * and Vite's dev server will load it as expected.
-     */
-    const importId = isBuild
-        ? '/' + (await getManifestFile(manifestId))
-        : normalizedId;
-    const isNamedExport = names.length > 0;
-    let code = `import React from 'react';
-  import {ClientMarker} from '@shopify/hydrogen/marker';`;
-    if (!isNamedExport) {
-        code += `
-  import _Component from '${normalizedId}';
-
-  export default function _ClientComponent(props) {
-    return React.createElement(ClientMarker, { name: '${name}', id: '${importId}', props, component: _Component, named: false });
-  }
-  export * from '${normalizedId}';`;
-    }
-    else {
-        code += `
-  import {${names
-            .map((name, idx) => name + ' as ' + `_Component${idx}`)
-            .join(', ')}} from '${normalizedId}';`;
-        names.forEach((name, idx) => {
-            code += `\n
-  export function ${name}(props) {
-    return React.createElement(ClientMarker, { name: '${name}', id: '${importId}', props, component: _Component${idx}, named: true });
-  }`;
-        });
-    }
-    return code;
-}
-export function tagClientComponents(src, additionalReferences = []) {
-    const modulePatterns = [/[\w\/\.]+\.client(?:\.(?:j|t)sx?)?/]
-        // @ts-ignore
-        .concat(additionalReferences)
-        .map((pattern) => (pattern instanceof RegExp ? pattern.source : pattern));
-    const fromModulePattern = modulePatterns.join('|');
-    /**
-     * Default exports
-     * @see https://rubular.com/r/XZjsrolet5twvB
-     */
-    let regex = new RegExp(`import\\s*\\w*\\s*from\\s*(?:'|")(?:(${fromModulePattern}))`, 'g');
-    let code = src.replace(regex, (mod) => mod + '?fromServer');
-    /**
-     * Named exports
-     * @see https://rubular.com/r/6qdREcs4T9Nw1e
-     */
-    regex = new RegExp(`import\\s*{([\\w\\s,]+)}\\s*from\\s*(?:'|")(?:(${fromModulePattern}))`, 'g');
-    code = code.replace(regex, (mod, imports) => `${mod}?fromServer=${imports.replace(/ as /g, ':').replace(/ /g, '')}`);
-    return { code, map: { mappings: '' } };
-}