Initial Commit

packages/api-client/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+coverage
+lib
+server

packages/api-client/.npmignore

@@ -0,0 +1 @@
+node_modules

packages/api-client/__mocks__/context.mock.ts

@@ -0,0 +1,5 @@
+export const contextMock = {
+  config: {} as any,
+  client: jest.fn() as any,
+  api: jest.fn() as any,
+};

packages/api-client/__tests__/api/exampleEndpoint.spec.ts

@@ -0,0 +1,21 @@
+// import { exampleEndpoint } from '../../src/api';
+// import { contextMock } from '../../__mocks__/context.mock';
+// import consola from 'consola';
+
+describe('[Integration Boilerplate API] exampleEndpoint', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls commerce endpoint with proper parameters', async () => {
+    expect(true).toBe(true);
+  });
+
+  it('validates paramerets', async () => {
+    expect(true).toBe(true);
+  });
+
+  it('throws an error when request fails', async () => {
+    expect(true).toBe(true);
+  });
+});

packages/api-client/api-extractor.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../api-extractor.base.json",
+  "mainEntryPointFilePath": "./lib/index.d.ts",
+  "dtsRollup": {
+    "untrimmedFilePath": "./lib/<unscopedPackageName>.d.ts"
+  },
+  "docModel": {
+    "apiJsonFilePath": "<projectFolder>/docs/reference/api/<unscopedPackageName>.api.json"
+  }
+}

packages/api-client/jest.config.js

@@ -0,0 +1,11 @@
+const baseConfig = require('./../../jest.base.config');
+
+const apiClientJestConfig = { ...baseConfig };
+
+apiClientJestConfig.collectCoverageFrom = [
+  'src/**/*.ts',
+  '!src/types/**',
+  '!src/index.ts'
+];
+
+module.exports = apiClientJestConfig;

packages/api-client/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@vue-storefront/integration-boilerplate-api",
+  "version": "0.1.0",
+  "sideEffects": false,
+  "server": "server/index.js",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.es.js",
+  "types": "lib/index.d.ts",
+  "license": "VSFEL",
+  "engines": {
+    "node": ">=16.x"
+  },
+  "scripts": {
+    "build": "rimraf lib server && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "cross-env APP_ENV=test jest",
+    "prepublish": "yarn build"
+  },
+  "dependencies": {
+    "@vue-storefront/middleware": "3.0.0-rc.2",
+    "axios": "^0.21.1",
+    "consola": "^3.0.0"
+  },
+  "devDependencies": {
+    "jsdom": "^17.0.0"
+  },
+  "files": [
+    "lib/**/*",
+    "server/**/*"
+  ]
+}

packages/api-client/rollup.config.js

@@ -0,0 +1,36 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import pkg from './package.json';
+import { generateBaseConfig } from '../../rollup.base.config';
+
+const extensions = ['.ts', '.js'];
+
+const server = {
+  input: 'src/index.server.ts',
+  output: [
+    {
+      file: pkg.server,
+      format: 'cjs',
+      sourcemap: true
+    }
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {})
+  ],
+  plugins: [
+    nodeResolve({
+      extensions
+    }),
+    typescript({
+      // eslint-disable-next-line global-require
+      typescript: require('typescript'),
+      objectHashIgnoreUnknownHack: false
+    })
+  ]
+};
+
+export default [
+  generateBaseConfig(pkg), // It's required for other packages using api-client's types
+  server
+];

packages/api-client/src/api/exampleEndpoint/index.ts

@@ -0,0 +1,12 @@
+import { Endpoints } from '../../types';
+
+export const exampleEndpoint: Endpoints['exampleEndpoint'] = async (
+  context,
+  params
+) => {
+  console.log('exampleEndpoint has been called');
+
+  // Example request could look like this:
+  // return await context.client.get(`example-url?id=${params.id}`);
+  return { data: 'Hello, Vue Storefront Integrator!' };
+};

packages/api-client/src/api/getProducts/index.ts

@@ -0,0 +1,18 @@
+import { Endpoints } from '../../types';
+
+export const getProducts: Endpoints['getProducts'] = async (
+  context,
+  params
+) => {
+  console.log('getProducts has been called');
+  
+  const { client } = context;
+  try {
+    const { data } = await client.get('/shop/products?page=1&itemsPerPage=10');
+    return { data };
+  }
+  catch (error) {
+    console.log('error', error);
+    return { data: 'error' };
+  }
+};

packages/api-client/src/api/index.ts

@@ -0,0 +1,2 @@
+export { exampleEndpoint } from './exampleEndpoint';
+export { getProducts } from './getProducts';

packages/api-client/src/index.server.ts

@@ -0,0 +1,31 @@
+import axios from 'axios';
+import { apiClientFactory } from '@vue-storefront/middleware';
+import { MiddlewareConfig } from './index';
+import * as apiEndpoints from './api';
+
+/**
+ * In here you should create the client you'll use to communicate with the backend.
+ * Axios is just an example.
+ */
+const buildClient = () => {
+  const axiosInstance = axios.create({
+    baseURL: 'http://localhost:8000/api/v2',
+  });
+  return axiosInstance
+}
+
+const onCreate = (settings: MiddlewareConfig) => {
+  const client = buildClient();
+
+  return {
+    config: settings,
+    client
+  };
+};
+
+const { createApiClient } = apiClientFactory<any, any>({
+  onCreate,
+  api: apiEndpoints,
+});
+
+export { createApiClient };

packages/api-client/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * `api-client` for Vue Storefront 2 integration bolierplate.
+ *
+ * @remarks
+ * In here you can find all references to the integration API Client.
+ *
+ * @packageDocumentation
+ */
+
+export * from './types';

packages/api-client/src/types/api/endpoints.ts

@@ -0,0 +1,18 @@
+import { BoilerplateIntegrationContext, TODO } from '..'
+
+/**
+ * Definition of all API-client methods available in {@link https://docs.vuestorefront.io/v2/advanced/context.html#context-api | context}.
+ */
+export interface Endpoints {
+
+  /**
+   * Here you can find an example endpoint definition. Based on this example, you should define how your endpoint will look like.
+   * This description will appear in the API extractor, so try to document all endpoints added here.
+   */
+  exampleEndpoint(
+    context: BoilerplateIntegrationContext,
+    params: TODO
+  ): Promise<TODO>;
+  
+  getProducts(context: BoilerplateIntegrationContext, params: TODO): Promise<TODO>;
+}

packages/api-client/src/types/api/index.ts

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

packages/api-client/src/types/config/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Settings to be provided in the `middleware.config.js` file.
+ */
+export interface MiddlewareConfig {
+  // Add the fields provided in the `middleware.config.js` file.
+}

packages/api-client/src/types/context/index.ts

@@ -0,0 +1,21 @@
+import { IntegrationContext } from '@vue-storefront/middleware';
+import { AxiosInstance } from 'axios';
+import { MiddlewareConfig, ContextualizedEndpoints } from '../index';
+
+/**
+ * Runtime integration context, which includes API client instance, settings, and endpoints that will be passed via middleware server.
+ * This interface name is starting with `Boilerplate`, but you should use your integration name in here.
+ **/
+export type BoilerplateIntegrationContext = IntegrationContext<
+  AxiosInstance,
+  MiddlewareConfig,
+  ContextualizedEndpoints
+>;
+
+/**
+ * Global context of the application which includes runtime integration context.
+ **/
+export interface Context {
+  // This property is named `boilerplate`, but you should use your integration name in here.
+  $boilerplate: BoilerplateIntegrationContext;
+}

packages/api-client/src/types/index.ts

@@ -0,0 +1,19 @@
+import { Endpoints } from './api';
+
+/**
+ * All available API Endpoints without first argument - `context`, because this prop is set automatically.
+ */
+export type ContextualizedEndpoints = {
+  [T in keyof Endpoints]: Endpoints[T] extends (
+    x: any,
+    ...args: infer P
+  ) => infer R
+    ? (...args: P) => R
+    : never;
+};
+
+export type TODO = any;
+
+export * from './api';
+export * from './config';
+export * from './context';

packages/api-client/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
+  "exclude": ["__mocks__", "__tests__"]
+}