@wix/astro 0.3.4 → 1.0.2

package/src/utils/generateAppManifest.ts

@@ -0,0 +1,49 @@
+import type {
+  AppManifest,
+  BackofficePage,
+  Webhook,
+} from '@wix/cli-app-manifest';
+import { ComponentType } from '@wix/ambassador-devcenter-components-v1-component/types';
+import type { Model } from './createProjectModel.js';
+
+export function generateAppManifest(model: Model): AppManifest {
+  return {
+    appId: model.app.appId,
+    components: model.extensions
+      .map((extension) => extension.config)
+      .map((config) => {
+        switch (config.compType) {
+          case ComponentType.BACK_OFFICE_PAGE:
+            if (config.compData.backOfficePage.iframeUrl) {
+              return config;
+            }
+
+            return {
+              ...config,
+              compData: {
+                backOfficePage: {
+                  ...config.compData.backOfficePage,
+                  iframeUrl: `_wix/extensions/backoffice/${config.compId}`,
+                },
+              },
+            } satisfies BackofficePage;
+          case ComponentType.WEBHOOK:
+            if (config.compData.webhook.callbackUrl) {
+              return config;
+            }
+
+            return {
+              ...config,
+              compData: {
+                webhook: {
+                  ...config.compData.webhook,
+                  callbackUrl: `_wix/extensions/webhooks/${config.compId}`,
+                },
+              },
+            } satisfies Webhook;
+          default:
+            return config;
+        }
+      }),
+  };
+}

package/src/utils/getSessionTokensFromCookie.ts

@@ -0,0 +1,38 @@
+import type { APIContext } from 'astro';
+import { TokenRole } from '@wix/sdk';
+import { WIX_CLIENT_ID } from 'astro:env/client';
+import { z } from 'astro/zod';
+import { checkIsDynamicPageRequest } from './checkIsDynamicPageRequest.js';
+
+const tokensSchema = z.object({
+  clientId: z.string(),
+  tokens: z.object({
+    accessToken: z.object({
+      expiresAt: z.number(),
+      value: z.string(),
+    }),
+    refreshToken: z.object({
+      role: z.nativeEnum(TokenRole),
+      value: z.string(),
+    }),
+  }),
+});
+
+export function getSessionTokensFromCookie(context: APIContext) {
+  if (!checkIsDynamicPageRequest(context)) {
+    return;
+  }
+
+  const rawCookie = context.cookies.get('wixSession')?.json();
+
+  if (rawCookie) {
+    const tokensParseResult = tokensSchema.safeParse(rawCookie);
+
+    if (
+      tokensParseResult.success &&
+      tokensParseResult.data.clientId === WIX_CLIENT_ID
+    ) {
+      return tokensParseResult.data;
+    }
+  }
+}

package/src/utils/isValidBackofficeComponent.ts

@@ -0,0 +1,15 @@
+import type { Component } from '@wix/cli-app-manifest';
+import { ComponentType } from '@wix/ambassador-devcenter-components-v1-component/types';
+
+export function isValidBackofficeComponent(component: Component) {
+  return (
+    (component.compType === ComponentType.BACK_OFFICE_PAGE &&
+      !component.compData.backOfficePage.iframeUrl) ||
+    (component.compType === ComponentType.BACK_OFFICE_EXTENSION_WIDGET &&
+      !component.compData.backOfficeExtensionWidget.iframeUrl) ||
+    (component.compType === ComponentType.BACK_OFFICE_EXTENSION_MENU_ITEM &&
+      !component.compData.backOfficeExtensionMenuItem.iframeUrl) ||
+    (component.compType === ComponentType.BACK_OFFICE_MODAL &&
+      !component.compData.backOfficeModal.iframeUrl)
+  );
+}

package/src/utils/isValidWebhookComponent.ts

@@ -0,0 +1,9 @@
+import type { Component } from '@wix/cli-app-manifest';
+import { ComponentType } from '@wix/ambassador-devcenter-components-v1-component/types';
+
+export function isValidWebhookComponent(component: Component) {
+  return (
+    component.compType === ComponentType.WEBHOOK &&
+    !component.compData.webhook.callbackUrl
+  );
+}

package/src/utils/loadExtension.ts

@@ -0,0 +1,59 @@
+import { join } from 'node:path';
+import type { Schema } from 'zod';
+import { pathExists, readJson } from '@wix/cli-fs';
+import { globby } from 'globby';
+import { outdent } from 'outdent';
+
+export async function loadExtension<T>({
+  directory,
+  fileName,
+  rootDir,
+  schema,
+}: {
+  directory: string;
+  fileName: string;
+  rootDir: string;
+  schema: Schema<T>;
+}) {
+  const extensions: Array<{
+    componentFilePath: string;
+    config: T;
+    cwd: string;
+  }> = [];
+
+  const extensionsPaths = await globby(join(directory, '*'), {
+    cwd: rootDir,
+    onlyDirectories: true,
+  });
+
+  for (const extensionPath of extensionsPaths) {
+    const configDir = join(extensionPath, `${fileName}.json`);
+
+    if (!(await pathExists(configDir))) {
+      throw new Error('Missing extension config file');
+    }
+
+    const extensionConfigFile = await readJson(configDir);
+    const parsedExtensionConfig = schema.safeParse(extensionConfigFile);
+
+    if (!parsedExtensionConfig.success) {
+      throw new Error(outdent`
+        Invalid extension configuration:
+
+        ${parsedExtensionConfig.error.errors
+          .map((e) => `${e.path.join('.')}: ${e.message}`)
+          .join('\n')}
+      `);
+    }
+
+    const componentFilePath = join(extensionPath, `${fileName}.tsx`);
+
+    extensions.push({
+      componentFilePath,
+      config: parsedExtensionConfig.data,
+      cwd: extensionPath,
+    });
+  }
+
+  return extensions;
+}

package/src/utils/saveSessionTokensToCookie.ts

@@ -0,0 +1,17 @@
+import type { Tokens } from '@wix/sdk';
+import type { APIContext } from 'astro';
+import { WIX_CLIENT_ID } from 'astro:env/client';
+
+function sessionCookieJson(tokens: Tokens) {
+  return {
+    clientId: WIX_CLIENT_ID,
+    tokens,
+  };
+}
+
+export function saveSessionTokensToCookie(context: APIContext, tokens: Tokens) {
+  context.cookies.set('wixSession', sessionCookieJson(tokens), {
+    path: '/',
+    secure: true,
+  });
+}

package/src/utils/writeVirtualBackofficeExtensionFiles.ts

@@ -0,0 +1,56 @@
+import { rm, writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { globby } from 'globby';
+import { outdent } from 'outdent';
+import type { Model } from '../utils/createProjectModel.js';
+import { isValidBackofficeComponent } from '../utils/isValidBackofficeComponent.js';
+
+export async function writeVirtualBackofficeExtensionFiles(
+  model: Model,
+  codegenDir: string
+) {
+  const backofficeExtensions = model.extensions.filter((extension) =>
+    isValidBackofficeComponent(extension.config)
+  );
+
+  const existingFiles = await globby(`*.astro`, {
+    cwd: codegenDir,
+    onlyFiles: true,
+  });
+
+  for (const filename of existingFiles) {
+    const hasMatchingSourceFile = backofficeExtensions.some(
+      (extension) => `${extension.config.compId}.astro` === filename
+    );
+
+    if (hasMatchingSourceFile) {
+      continue;
+    }
+
+    await rm(join(codegenDir, filename));
+  }
+
+  for (const extension of backofficeExtensions) {
+    const originalEntrypoint = resolve(
+      model.rootDir,
+      extension.componentFilePath
+    );
+    const virtualEntrypoint = join(
+      codegenDir,
+      `${extension.config.compId}.astro`
+    );
+
+    await writeFile(
+      virtualEntrypoint,
+      outdent`
+        ---
+        import Component from '${originalEntrypoint}';
+        ---
+
+        <div>
+          <Component client:only="react" />
+        </div>
+      `
+    );
+  }
+}

package/src/utils/writeVirtualWebhookExtensionFiles.ts

@@ -0,0 +1,70 @@
+import { rm, writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { globby } from 'globby';
+import { outdent } from 'outdent';
+import type { Model } from '../utils/createProjectModel.js';
+import { isValidWebhookComponent } from './isValidWebhookComponent.js';
+
+export async function writeVirtualWebhookExtensionFiles(
+  model: Model,
+  codegenDir: string
+) {
+  const webhookExtensions = model.extensions.filter((extension) =>
+    isValidWebhookComponent(extension.config)
+  );
+
+  const existingFiles = await globby(`*.ts`, {
+    cwd: codegenDir,
+    onlyFiles: true,
+  });
+
+  for (const filename of existingFiles) {
+    const hasMatchingSourceFile = webhookExtensions.some(
+      (extension) => `${extension.config.compId}.ts` === filename
+    );
+
+    if (hasMatchingSourceFile) {
+      continue;
+    }
+
+    await rm(join(codegenDir, filename));
+  }
+
+  for (const extension of webhookExtensions) {
+    const originalEntrypoint = resolve(extension.cwd, 'event.ts');
+    const virtualEntrypoint = join(codegenDir, `${extension.config.compId}.ts`);
+
+    await writeFile(
+      virtualEntrypoint,
+      outdent`
+        import type { APIRoute } from 'astro';
+        import { AppStrategy, createClient } from '@wix/sdk';
+        import { WIX_CLIENT_ID } from 'astro:env/client';
+        import { WIX_CLIENT_PUBLIC_KEY, WIX_CLIENT_SECRET } from 'astro:env/server';
+
+        const client = createClient({
+          auth: AppStrategy({
+            appId: WIX_CLIENT_ID,
+            appSecret: WIX_CLIENT_SECRET,
+            publicKey: WIX_CLIENT_PUBLIC_KEY,
+          }),
+        });
+
+        const olderClient = globalThis.__wix_context__.client;
+
+        client.enableContext('global');
+
+        await import('${originalEntrypoint}');
+
+        if (olderClient) {
+          olderClient.enableContext('global');
+        }
+
+        export const ALL: APIRoute = async (context) => {
+          await client.webhooks.processRequest(context.request);
+          return new Response('OK');
+        };
+      `
+    );
+  }
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "test"],
+  "compilerOptions": {
+    "outDir": "build",
+    "declaration": true
+  }
+}

package/tsup.config.mjs

@@ -0,0 +1,28 @@
+import { defineConfig } from '@wix/tsup-configs/public-node';
+
+export default defineConfig(
+  {
+    entry: ['src/index.ts'],
+    target: 'node20.9',
+    format: ['esm'],
+    outDir: 'build',
+    splitting: false,
+    external: ['astro', 'vite', /^astro:/],
+    dts: {
+      resolve: ['astro', 'vite', /^astro:/],
+    },
+  },
+  [
+    {
+      entry: ['src/middleware/auth.ts', 'src/routes/webhooks.ts'],
+      target: 'node20.9',
+      format: ['esm'],
+      outDir: 'build-runtime',
+      splitting: false,
+      external: ['astro', 'vite', /^astro:/],
+      dts: {
+        resolve: ['astro', 'vite', /^astro:/],
+      },
+    },
+  ]
+);

package/README.md

@@ -1,121 +0,0 @@
-# Wix Integration For Astro
-
-The Wix integration for Astro allows you to build custom frontends with Astro on top of the Wix Developer Platform. The integration provides a boilerplate-free development experience with a set of tools to help streamline your development with Wix.
-
-The main features of the Wix integration for Astro include:
-
-- **Easy SDK Integration**: Use the Wix SDK modules directly through a pre-initialized and contextually available `WixClient`.
-- **Session Management Middleware**: A middleware that manages a session cookie for the current site visitor.
-- **Adapter for Wix Hosting**: The integration provides an adapter for Wix hosting, allowing you to deploy your Astro project to Wix hosting.
-
-## Getting Started
-
-The easiest way to get started with the Wix integration for Astro is to scaffold a new Astro project with one of the Wix templates. If you already have an Astro project or rather start with another template, you can add the Wix integration to an existing Astro project.
-
-### Scaffold a New Astro Project with a Wix Template
-
-Wix provides a collection of Astro templates that are pre-configured with the Wix integration for Astro and also act as a starting point for different types of projects. Check out our Wix Astro templates on GitHub: [wix/headless-templates/astro](https://github.com/wix/headless-templates/tree/main/astro).
-
-```bash
-# npm
-npm create astro@latest --template wix/headless-templates/astro/<template-name>
-# yarn
-yarn create astro@latest --template wix/headless-templates/astro/<template-name>
-# pnpm
-pnpm create astro@latest --template wix/headless-templates/astro/<template-name>
-```
-
-Check the template's README for more information on how to get started with the template.
-
-### Add the Wix Integration to an Existing Astro Project
-
-If you already have an Astro project or want to start with another template, you can add the Wix integration to your project.
-
-```bash
-# npm
-npx astro add @wix/astro
-# yarn
-yarn astro add @wix/astro
-# pnpm
-pnpx astro add @wix/astro
-```
-
-#### Setting up local development
-
-> 💡 If you are deploying your project to Wix, check out the guide on [local development with the Wix Edge CLI](../cli//local-development.md).
-
-The Wix integration requires the `WIX_CLIENT_ID` environment variable to be set. For local development, you can create a `.env.local` file in the root of your project and add the `WIX_CLIENT_ID` environment variable.
-
-```properties
-WIX_CLIENT_ID=your-wix-client-id
-```
-
-> ❓ Not sure what the Wix Client ID is or how to obtain it? Check out our documentation to [Create an OAuth App](https://dev.wix.com/docs/go-headless/getting-started/setup/authentication/create-an-oauth-app-for-visitors-and-members)
-
-## Features
-
-### Easy SDK Integration
-
-The Wix integration for Astro provides a pre-initialized and contextually available `WixClient` that allows you to use the Wix SDK modules directly in your Astro project.
-
-For example, to query your products from the Wix Stores API, you can just install the `@wix/stores` npm package and use the methods directly after importing them.
-
-```js
----
-import { products } from "@wix/stores";
-
-const storeProducts = await products.queryProducts().find();
----
-
-<h1>Number of products in store: {storeProducts.items.length}</h1>
-```
-
-#### SDK Modules in Astro Components frontmatter
-
-You can use any of the SDK modules in your Astro components frontmatter to fetch data at build time or on-demand. There's no need to create an explicit `WixClient` and methods can be called directly.
-
-```astro
----
-import { products } from "@wix/stores";
-
-const storeProducts = await products.queryProducts().find();
----
-
-<h1>Products</h1>
-
-{storeProducts.map((product) => (
-  <div>
-    <h2>{product.name}</h2>
-    <p>{product.description}</p>
-  </div>
-))}
-```
-
-##### Pre-rendering
-
-When used in pre-rendered components or pages, the SDK modules will use an automatically generated visitor session for the entire build. This means you'll only be able to access public data, and any data that requires a visitor session will be reset on each build.
-
-> 💡 If you are working with APIs that require a current visitor session, be sure to set the relevant pages / components to [on-demand rendering](#on-demand-rendering).
-
-##### On-demand rendering
-
-When used in on-demand rendered components or pages, the SDK modules will use the current visitor session. This means you'll be able to access data that requires a visitor session, and the data will be fetched on-demand when the page is visited.
-
-Visitor session management is handled by the [Session Management Middleware](#session-management-middleware).
-
-#### SDK Modules in Scripts / UI Frameworks
-
-You can also use the SDK modules in your scripts or UI frameworks. Just import the modules and use them as you would in any other JavaScript environment.
-
-```html
-<p>Products in store: <span id="productsCount">...</span></p>
-<script>
-import { products } from "@wix/stores";
-
-const storeProducts = await products.queryProducts().find();
-
-document.getElementById("productsCount").innerText = storeProducts.items.length;
-</script>
-```
-
-In your scripts or UI framework components, your API calls will be authenticated with the current visitor session as managed by the [Session Management Middleware](#session-management-middleware).

package/dist/auth-context.d.ts

@@ -1,5 +0,0 @@
-import { AsyncLocalStorage } from "node:async_hooks";
-import type { AuthenticationStrategy } from "@wix/sdk";
-export declare const authStrategyAsyncLocalStorage: AsyncLocalStorage<{
-    auth: AuthenticationStrategy<void>;
-}>;

package/dist/auth-context.js

@@ -1,2 +0,0 @@
-import { AsyncLocalStorage } from "node:async_hooks";
-export const authStrategyAsyncLocalStorage = new AsyncLocalStorage();

package/dist/client.d.ts

@@ -1,15 +0,0 @@
-import { categories, posts, tags } from "@wix/blog";
-import { items } from "@wix/data";
-export declare const getWixClient: ({ modules }?: {
-    modules: {
-        items: typeof items;
-        posts: typeof posts;
-        categories: typeof categories;
-        tags: typeof tags;
-    };
-}) => import("@wix/sdk").WixClient<undefined, import("@wix/sdk").IOAuthStrategy, {
-    items: typeof items;
-    posts: typeof posts;
-    categories: typeof categories;
-    tags: typeof tags;
-}>;

package/dist/client.js

@@ -1,16 +0,0 @@
-import { categories, posts, tags } from "@wix/blog";
-import { items } from "@wix/data";
-import { createClient, OAuthStrategy } from "@wix/sdk";
-export const getWixClient = ({ modules } = { modules: { items, posts, categories, tags } }) => {
-    const { WIX_CLIENT_ID } = import.meta.env;
-    if (!WIX_CLIENT_ID) {
-        throw new Error(`❌ Wix Client ID is missing! Please create an ".env.local" file with WIX_CLIENT_ID.`);
-    }
-    const wixClient = createClient({
-        modules,
-        auth: OAuthStrategy({
-            clientId: WIX_CLIENT_ID,
-        }),
-    });
-    return wixClient;
-};

package/dist/components/login-helpers/bi-header-generator.d.ts

@@ -1,11 +0,0 @@
-import { APIMetadata, PublicMetadata } from '@wix/sdk-types';
-export declare const WixBIHeaderName = "x-wix-bi-gateway";
-export type WixBIHeaderValues = {
-    ['environment']: 'js-sdk' | string;
-    ['package-name']?: string;
-    ['method-fqn']?: string;
-    ['entity']?: string;
-};
-export declare function biHeaderGenerator(apiMetadata: APIMetadata, publicMetadata?: PublicMetadata, environment?: string): {
-    [WixBIHeaderName]: string;
-};

package/dist/components/login-helpers/bi-header-generator.js

@@ -1,17 +0,0 @@
-export const WixBIHeaderName = 'x-wix-bi-gateway';
-export function biHeaderGenerator(apiMetadata, publicMetadata, environment) {
-    return {
-        [WixBIHeaderName]: objectToKeyValue({
-            environment: `js-sdk${environment ? `-${environment}` : ``}`,
-            'package-name': apiMetadata.packageName ?? publicMetadata?.PACKAGE_NAME,
-            'method-fqn': apiMetadata.methodFqn,
-            entity: apiMetadata.entityFqdn,
-        }),
-    };
-}
-function objectToKeyValue(input) {
-    return Object.entries(input)
-        .filter(([_, value]) => Boolean(value))
-        .map(([key, value]) => `${key}=${value}`)
-        .join(',');
-}

package/dist/components/login-helpers/iframeUtils.d.ts

@@ -1,4 +0,0 @@
-export declare function addListener(eventTarget: any, name: string, fn: Function): void;
-export declare function removeListener(eventTarget: any, name: string, fn: Function): void;
-export declare function loadFrame(src: string): HTMLIFrameElement;
-export declare function addPostMessageListener(state: string): Promise<unknown>;

package/dist/components/login-helpers/iframeUtils.js

@@ -1,43 +0,0 @@
-export function addListener(eventTarget, name, fn) {
-    if (eventTarget.addEventListener) {
-        eventTarget.addEventListener(name, fn);
-    }
-    else {
-        eventTarget.attachEvent('on' + name, fn);
-    }
-}
-export function removeListener(eventTarget, name, fn) {
-    if (eventTarget.removeEventListener) {
-        eventTarget.removeEventListener(name, fn);
-    }
-    else {
-        eventTarget.detachEvent('on' + name, fn);
-    }
-}
-export function loadFrame(src) {
-    const iframe = document.createElement('iframe');
-    iframe.style.display = 'none';
-    iframe.src = src;
-    return document.body.appendChild(iframe);
-}
-export function addPostMessageListener(state) {
-    let responseHandler;
-    let timeoutId;
-    const msgReceivedOrTimeout = new Promise((resolve, reject) => {
-        responseHandler = (e) => {
-            if (!e.data || e.data.state !== state) {
-                // A message not meant for us
-                return;
-            }
-            resolve(e.data);
-        };
-        addListener(window, 'message', responseHandler);
-        timeoutId = setTimeout(() => {
-            reject(new Error('OAuth flow timed out'));
-        }, 120000);
-    });
-    return msgReceivedOrTimeout.finally(() => {
-        clearTimeout(timeoutId);
-        removeListener(window, 'message', responseHandler);
-    });
-}

package/dist/components/login-helpers/login-helpers.d.ts

@@ -1,42 +0,0 @@
-export interface OauthPKCE {
-    codeVerifier: string;
-    codeChallenge: string;
-    state: string;
-}
-export interface OauthData extends OauthPKCE {
-    originalUri: string;
-    redirectUri: string;
-}
-export interface OauthPKCE {
-    codeVerifier: string;
-    codeChallenge: string;
-    state: string;
-}
-export interface Token {
-    value: string;
-}
-export interface AccessToken extends Token {
-    expiresAt: number;
-}
-export declare enum TokenRole {
-    NONE = "none",
-    VISITOR = "visitor",
-    MEMBER = "member"
-}
-export interface TokenResponse {
-    access_token: string;
-    expires_in: number;
-    refresh_token: string | null;
-    token_type: string;
-    scope?: string | null;
-}
-export declare const getMemberTokensForDirectLogin: (sessionToken: string) => Promise<{
-    clientId: string;
-    tokens: {
-        accessToken: AccessToken;
-        refreshToken: {
-            value: string;
-            role: TokenRole;
-        };
-    };
-}>;