@canva/cli 1.9.0 → 1.11.0

package/templates/data_connector/tsconfig.json

@@ -28,7 +28,10 @@
     "sourceMap": true,
     "inlineSources": true,
     "module": "ESNext",
-    "noImplicitAny": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "allowSyntheticDefaultImports": true,
@@ -44,8 +47,7 @@
     "./utils/**/*",
     "./scripts/**/*",
     "./declarations/declarations.d.ts",
-    "./styles/**/*",
-    "./node_modules/@types/**/*"
+    "./styles/**/*"
   ],
   "ts-node": {
     "compilerOptions": {

package/templates/data_connector/webpack.config.ts

@@ -196,7 +196,7 @@ function buildDevConfig(options?: DevConfig): {
     return {};
   }
 
-  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
+  const { port, enableHmr, appOrigin, enableHttps, certFile, keyFile } =
     options;
   const host = "localhost";
 

package/templates/gen_ai/backend/routers/image.ts

@@ -151,7 +151,7 @@ export const createImageRouter = () => {
     // Add the job to the jobQueue along with the timeoutId
     jobQueue.push({ jobId, prompt, timeoutId });
 
-    res.status(200).send({
+    return res.status(200).send({
       jobId,
     });
   });
@@ -208,15 +208,13 @@ export const createImageRouter = () => {
     }
 
     const index = jobQueue.findIndex((job) => job.jobId === jobId);
-    if (index !== -1) {
+    const job = jobQueue[index];
+    if (index !== -1 && job) {
       cancelledJobs.push({ jobId });
       // If the job is found, remove it from the jobQueue
-      const { timeoutId } = jobQueue[index];
       jobQueue.splice(index, 1);
       // Also clear the timeout associated with this job if it exists
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
+      clearTimeout(job.timeoutId);
       return res.status(200).send("Job successfully cancelled.");
     }
 

package/templates/gen_ai/canva-app.json

@@ -16,5 +16,10 @@
         "type": "mandatory"
       }
     ]
+  },
+  "intent": {
+    "design_editor": {
+      "enrolled": true
+    }
   }
 }

package/templates/gen_ai/package.json

@@ -18,11 +18,13 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
+    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.1.1",
     "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.3",
     "@canva/error": "^2.1.0",
+    "@canva/intents": "^2.0.0",
     "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.1",
     "cookie-parser": "1.4.7",
@@ -44,9 +46,9 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "@svgr/webpack": "8.1.0",
     "@testing-library/react": "16.3.0",
+    "@types/cors": "2.8.19",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "5.0.7",
     "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.10",
     "@types/node": "20.19.2",
@@ -66,7 +68,7 @@
     "debug": "4.4.1",
     "dotenv": "16.6.0",
     "exponential-backoff": "3.1.2",
-    "express": "4.21.2",
+    "express": "4.22.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
@@ -75,7 +77,7 @@
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",
-    "node-forge": "1.3.1",
+    "node-forge": "1.3.2",
     "nodemon": "3.0.1",
     "open": "8.4.2",
     "postcss-loader": "8.1.1",

package/templates/gen_ai/src/components/footer.tsx

@@ -6,7 +6,7 @@ import { purchaseCredits, queueImageGeneration } from "src/api";
 import { RemainingCredits } from "src/components";
 import { NUMBER_OF_IMAGES_TO_GENERATE } from "src/config";
 import { useAppContext } from "src/context";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import { getObsceneWords } from "src/utils";
 import { FooterMessages as Messages } from "./footer.messages";
 

package/templates/gen_ai/src/components/image_grid.tsx

@@ -34,7 +34,9 @@ export const ImageGrid = () => {
   ) => {
     const parentNode = event.currentTarget.parentElement;
     try {
-      parentNode?.classList.add(styles.hidden);
+      if (styles.hidden) {
+        parentNode?.classList.add(styles.hidden);
+      }
 
       await ui.startDragToPoint(event, {
         type: "image",
@@ -50,7 +52,9 @@ export const ImageGrid = () => {
         },
       });
     } finally {
-      parentNode?.classList.remove(styles.hidden);
+      if (styles.hidden) {
+        parentNode?.classList.remove(styles.hidden);
+      }
     }
   };
 

package/templates/gen_ai/src/components/loading_results.tsx

@@ -12,7 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { cancelImageGenerationJob, getImageGenerationJobStatus } from "src/api";
 import { useAppContext } from "src/context";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 
 const INTERVAL_DURATION_IN_MS = 100;
 const TOTAL_PROGRESS_PERCENTAGE = 100;

package/templates/gen_ai/src/components/prompt_input.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { useIntl } from "react-intl";
 import { useLocation } from "react-router-dom";
 import { useAppContext } from "src/context";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import { PromptInputMessages as Messages } from "./prompt_input.messages";
 
 // @TODO: Adjust according to your specific requirements.
@@ -59,8 +59,11 @@ const generateExamplePrompt = (currentPrompt: string): string => {
   const MAX_ATTEMPTS = 3;
 
   while (currentPrompt === newPrompt && attempts < MAX_ATTEMPTS) {
-    newPrompt =
+    const randomPrompt =
       examplePrompts[Math.floor(Math.random() * examplePrompts.length)];
+    if (randomPrompt) {
+      newPrompt = randomPrompt;
+    }
     attempts++;
   }
 

package/templates/gen_ai/src/index.tsx

@@ -1,15 +1,4 @@
-import { createRoot } from "react-dom/client";
-import "@canva/app-ui-kit/styles.css";
-import { App } from "./app";
+import { prepareDesignEditor } from "@canva/intents/design";
+import designEditor from "./intents/design_editor";
 
-const root = createRoot(document.getElementById("root") as Element);
-
-function render() {
-  root.render(<App />);
-}
-
-render();
-
-if (module.hot) {
-  module.hot.accept("./app", render);
-}
+prepareDesignEditor(designEditor);

package/templates/gen_ai/src/{app.tsx → intents/design_editor/app.tsx}

@@ -2,9 +2,9 @@ import { AppI18nProvider } from "@canva/app-i18n-kit";
 import { AppUiProvider } from "@canva/app-ui-kit";
 import { ErrorBoundary } from "react-error-boundary";
 import { createHashRouter, RouterProvider } from "react-router-dom";
-import { ContextProvider } from "./context";
-import { ErrorPage } from "./pages";
-import { routes } from "./routes";
+import { ContextProvider } from "../../context";
+import { ErrorPage } from "../../pages";
+import { routes } from "../../routes";
 
 export const App = () => (
   <AppI18nProvider>

package/templates/gen_ai/src/{home.tsx → intents/design_editor/home.tsx}

@@ -1,7 +1,7 @@
 import { Rows } from "@canva/app-ui-kit";
 import { Outlet } from "react-router-dom";
 import * as styles from "styles/components.css";
-import { Footer } from "./components";
+import { Footer } from "../../components";
 
 export const Home = () => (
   <div className={styles.scrollContainer}>

package/templates/gen_ai/src/intents/design_editor/index.tsx

@@ -0,0 +1,17 @@
+import "@canva/app-ui-kit/styles.css";
+import type { DesignEditorIntent } from "@canva/intents/design";
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+
+async function render() {
+  const root = createRoot(document.getElementById("root") as Element);
+
+  root.render(<App />);
+}
+
+const designEditor: DesignEditorIntent = { render };
+export default designEditor;
+
+if (module.hot) {
+  module.hot.accept("./app", render);
+}

package/templates/gen_ai/src/pages/error.tsx

@@ -2,7 +2,7 @@ import { Button, Rows, Text } from "@canva/app-ui-kit";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { useAppContext } from "src/context";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import * as styles from "styles/components.css";
 
 /**

package/templates/gen_ai/src/routes/routes.tsx

@@ -1,8 +1,8 @@
-import { Home } from "src/home";
+import { Home } from "src/intents/design_editor/home";
 import { ErrorPage } from "src/pages/error";
 import { GeneratePage } from "src/pages/generate";
 import { ResultsPage } from "src/pages/results";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 
 export const routes = [
   {

package/templates/gen_ai/styles/components.css

@@ -36,3 +36,21 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
+
+/* Main container for the content publisher preview UI */
+.previewContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* Wrapper for the content publisher post preview */
+.previewWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(400px + 32px + 2px); /* Image width + padding + border */
+}

package/templates/gen_ai/tsconfig.json

@@ -28,7 +28,10 @@
     "sourceMap": true,
     "inlineSources": true,
     "module": "ESNext",
-    "noImplicitAny": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "allowSyntheticDefaultImports": true,
@@ -44,8 +47,7 @@
     "./utils/**/*",
     "./scripts/**/*",
     "./declarations/declarations.d.ts",
-    "./styles/**/*",
-    "./node_modules/@types/**/*"
+    "./styles/**/*"
   ],
   "ts-node": {
     "compilerOptions": {

package/templates/gen_ai/utils/backend/base_backend/create.ts

@@ -41,12 +41,12 @@ export function createBaseServer(router: express.Router): BaseServer {
   app.disable("x-powered-by");
 
   // Health check endpoint
-  app.get("/healthz", (req, res: Response) => {
+  app.get("/healthz", (req, res) => {
     res.sendStatus(200);
   });
 
   // logging middleware
-  app.use((req: Request, res: Response, next: NextFunction) => {
+  app.use((req, _res, next) => {
     serverDebug(`${new Date().toISOString()}: ${req.method} ${req.url}`);
     next();
   });
@@ -62,7 +62,7 @@ export function createBaseServer(router: express.Router): BaseServer {
   });
 
   // default error handler
-  app.use((err, req, res, next) => {
+  app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
     console.error(err.stack);
     res.status(500).send({
       error: "something went wrong",

package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts

@@ -1,8 +1,6 @@
 /* eslint-disable no-console */
 import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import Express from "express-serve-static-core";
 
 /**
  * Prefix your start command with `DEBUG=express:middleware:bearer` to enable debug logging
@@ -47,13 +45,13 @@ export function createBearerMiddleware(
 
       req["user_id"] = user;
 
-      next();
+      return next();
     } catch (e) {
       if (e instanceof AuthorizationError) {
         return sendUnauthorizedResponse(res, e.message);
       }
 
-      next(e);
+      return next(e);
     }
   };
 }

package/templates/gen_ai/webpack.config.ts

@@ -196,7 +196,7 @@ function buildDevConfig(options?: DevConfig): {
     return {};
   }
 
-  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
+  const { port, enableHmr, appOrigin, enableHttps, certFile, keyFile } =
     options;
   const host = "localhost";
 

package/templates/hello_world/canva-app.json

@@ -12,5 +12,10 @@
         "type": "mandatory"
       }
     ]
+  },
+  "intent": {
+    "design_editor": {
+      "enrolled": true
+    }
   }
 }

package/templates/hello_world/package.json

@@ -19,11 +19,13 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
+    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.1.1",
     "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.3",
     "@canva/error": "^2.1.0",
+    "@canva/intents": "^2.0.0",
     "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.1",
     "react": "^19.2.0",
@@ -39,8 +41,8 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "@svgr/webpack": "8.1.0",
     "@testing-library/react": "16.3.0",
+    "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "5.0.7",
     "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.10",
     "@types/node": "20.19.2",
@@ -57,7 +59,7 @@
     "cssnano": "7.1.1",
     "debug": "4.4.1",
     "dotenv": "16.6.0",
-    "express": "4.21.2",
+    "express": "4.22.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
@@ -66,7 +68,7 @@
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",
-    "node-forge": "1.3.1",
+    "node-forge": "1.3.2",
     "nodemon": "3.0.1",
     "open": "8.4.2",
     "postcss-loader": "8.1.1",

package/templates/hello_world/src/index.tsx

@@ -1,22 +1,4 @@
-import { AppI18nProvider } from "@canva/app-i18n-kit";
-import { AppUiProvider } from "@canva/app-ui-kit";
-import { createRoot } from "react-dom/client";
-import { App } from "./app";
-import "@canva/app-ui-kit/styles.css";
+import { prepareDesignEditor } from "@canva/intents/design";
+import designEditor from "./intents/design_editor";
 
-const root = createRoot(document.getElementById("root") as Element);
-function render() {
-  root.render(
-    <AppI18nProvider>
-      <AppUiProvider>
-        <App />
-      </AppUiProvider>
-    </AppI18nProvider>,
-  );
-}
-
-render();
-
-if (module.hot) {
-  module.hot.accept("./app", render);
-}
+prepareDesignEditor(designEditor);

package/templates/hello_world/src/{app.tsx → intents/design_editor/app.tsx}

@@ -1,15 +1,23 @@
+import { useFeatureSupport } from "@canva/app-hooks";
 import { Button, Rows, Text } from "@canva/app-ui-kit";
+import { addElementAtCursor, addElementAtPoint } from "@canva/design";
 import { requestOpenExternalUrl } from "@canva/platform";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useAddElement } from "utils/use_add_element";
 import * as styles from "styles/components.css";
 
 export const DOCS_URL = "https://www.canva.dev/docs/apps/";
 
 export const App = () => {
-  const addElement = useAddElement();
+  const isSupported = useFeatureSupport();
+  const addElement = [addElementAtPoint, addElementAtCursor].find((fn) =>
+    isSupported(fn),
+  );
 
   const onClick = () => {
+    if (!addElement) {
+      return;
+    }
+
     addElement({
       type: "text",
       children: ["Hello world!"],
@@ -43,7 +51,22 @@ export const App = () => {
             }}
           />
         </Text>
-        <Button variant="primary" onClick={onClick} stretch>
+        <Button
+          variant="primary"
+          onClick={onClick}
+          disabled={!addElement}
+          tooltipLabel={
+            !addElement
+              ? intl.formatMessage({
+                  defaultMessage:
+                    "This feature is not supported in the current page",
+                  description:
+                    "Tooltip label for when a feature is not supported in the current design",
+                })
+              : undefined
+          }
+          stretch
+        >
           {intl.formatMessage({
             defaultMessage: "Do something cool",
             description:

package/templates/hello_world/src/intents/design_editor/index.tsx

@@ -0,0 +1,25 @@
+import "@canva/app-ui-kit/styles.css";
+import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { AppUiProvider } from "@canva/app-ui-kit";
+import type { DesignEditorIntent } from "@canva/intents/design";
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+
+async function render() {
+  const root = createRoot(document.getElementById("root") as Element);
+
+  root.render(
+    <AppI18nProvider>
+      <AppUiProvider>
+        <App />
+      </AppUiProvider>
+    </AppI18nProvider>,
+  );
+}
+
+const designEditor: DesignEditorIntent = { render };
+export default designEditor;
+
+if (module.hot) {
+  module.hot.accept("./app", render);
+}

package/templates/hello_world/src/{tests → intents/design_editor/tests}/app.tests.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
+import { useFeatureSupport } from "@canva/app-hooks";
 import { TestAppI18nProvider } from "@canva/app-i18n-kit";
 import { TestAppUiProvider } from "@canva/app-ui-kit";
+import { addElementAtCursor, addElementAtPoint } from "@canva/design";
+import type { Feature } from "@canva/platform";
 import { requestOpenExternalUrl } from "@canva/platform";
 import { fireEvent, render } from "@testing-library/react";
 import type { RenderResult } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { useAddElement } from "utils/use_add_element";
 import { App, DOCS_URL } from "../app";
 
 function renderInTestProvider(node: ReactNode): RenderResult {
@@ -17,33 +19,35 @@ function renderInTestProvider(node: ReactNode): RenderResult {
   );
 }
 
-jest.mock("utils/use_add_element");
+jest.mock("@canva/app-hooks");
 
 // This test demonstrates how to test code that uses functions from the Canva Apps SDK
 // For more information on testing with the Canva Apps SDK, see https://www.canva.dev/docs/apps/testing/
 describe("Hello World Tests", () => {
-  // Mocking the useAddElement hook
-  const mockAddElement = jest.fn();
-  const mockAddUseElement = jest.mocked(useAddElement);
+  const mockIsSupported = jest.fn();
+  const mockUseFeatureSupport = jest.mocked(useFeatureSupport);
   const mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
 
   beforeEach(() => {
     jest.resetAllMocks();
-    mockAddUseElement.mockReturnValue(mockAddElement);
+    mockIsSupported.mockImplementation(
+      (fn: Feature) => fn === addElementAtPoint,
+    );
+    mockUseFeatureSupport.mockReturnValue(mockIsSupported);
     mockRequestOpenExternalUrl.mockResolvedValue({ status: "completed" });
   });
 
-  // this test uses a mock in place of the useAddElement hook
+  // this test uses a mock in place of the useFeatureSupport hook
   it("should add a text element when the button is clicked", () => {
     // assert that the mocks are in the expected clean state
-    expect(mockAddUseElement).not.toHaveBeenCalled();
-    expect(mockAddElement).not.toHaveBeenCalled();
+    expect(mockUseFeatureSupport).not.toHaveBeenCalled();
+    expect(addElementAtPoint).not.toHaveBeenCalled();
 
     const result = renderInTestProvider(<App />);
 
     // the hook should have been called in the render process but not the callback
-    expect(mockAddUseElement).toHaveBeenCalled();
-    expect(mockAddElement).not.toHaveBeenCalled();
+    expect(mockUseFeatureSupport).toHaveBeenCalled();
+    expect(addElementAtPoint).not.toHaveBeenCalled();
 
     // get a reference to the do something cool button element
     const doSomethingCoolBtn = result.getByRole("button", {
@@ -53,8 +57,10 @@ describe("Hello World Tests", () => {
     // programmatically simulate clicking the button
     fireEvent.click(doSomethingCoolBtn);
 
-    // we expect that addElement has been called by the button's click handler
-    expect(mockAddElement).toHaveBeenCalled();
+    // we expect that addElementAtPoint has been called by the button's click handler
+    expect(mockIsSupported).toHaveBeenCalledWith(addElementAtPoint);
+    expect(mockIsSupported).not.toHaveBeenCalledWith(addElementAtCursor);
+    expect(addElementAtPoint).toHaveBeenCalled();
   });
 
   // this test uses a mock in place of the @canva/platform requestOpenExternalUrl function
@@ -73,7 +79,7 @@ describe("Hello World Tests", () => {
     expect(mockRequestOpenExternalUrl).toHaveBeenCalled();
 
     // assert that the requestOpenExternalUrl function was called with the expected arguments
-    expect(mockRequestOpenExternalUrl.mock.calls[0][0]).toEqual({
+    expect(mockRequestOpenExternalUrl.mock.calls[0]?.[0]).toEqual({
       url: DOCS_URL,
     });
   });

package/templates/hello_world/styles/components.css

@@ -36,3 +36,21 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
+
+/* Main container for the content publisher preview UI */
+.previewContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* Wrapper for the content publisher post preview */
+.previewWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(400px + 32px + 2px); /* Image width + padding + border */
+}

package/templates/hello_world/tsconfig.json

@@ -28,7 +28,10 @@
     "sourceMap": true,
     "inlineSources": true,
     "module": "ESNext",
-    "noImplicitAny": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "allowSyntheticDefaultImports": true,
@@ -44,8 +47,7 @@
     "./utils/**/*",
     "./scripts/**/*",
     "./declarations/declarations.d.ts",
-    "./styles/**/*",
-    "./node_modules/@types/**/*"
+    "./styles/**/*"
   ],
   "ts-node": {
     "compilerOptions": {