@canva/cli 0.0.1-beta.3 → 0.0.1-beta.31

package/templates/hello_world/src/tests/app.tests.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import React from "react";
+import type { RenderResult } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
+import { TestAppI18nProvider } from "@canva/app-i18n-kit";
+import { TestAppUiProvider } from "@canva/app-ui-kit";
+import { requestOpenExternalUrl } from "@canva/platform";
+import { useAddElement } from "utils/use_add_element";
+import { App, DOCS_URL } from "../app";
+
+function renderInTestProvider(node: React.ReactNode): RenderResult {
+  return render(
+    // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
+    <TestAppI18nProvider>
+      <TestAppUiProvider>{node}</TestAppUiProvider>,
+    </TestAppI18nProvider>,
+  );
+}
+
+jest.mock("utils/use_add_element");
+
+// 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 mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    mockAddUseElement.mockReturnValue(mockAddElement);
+    mockRequestOpenExternalUrl.mockResolvedValue({ status: "completed" });
+  });
+
+  // this test uses a mock in place of the useAddElement 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();
+
+    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();
+
+    // get a reference to the do something cool button element
+    const doSomethingCoolBtn = result.getByRole("button", {
+      name: "Do something cool",
+    });
+
+    // programmatically simulate clicking the button
+    fireEvent.click(doSomethingCoolBtn);
+
+    // we expect that addElement has been called by the button's click handler
+    expect(mockAddElement).toHaveBeenCalled();
+  });
+
+  // this test uses a mock in place of the @canva/platform requestOpenExternalUrl function
+  it("should call `requestOpenExternalUrl` when the button is clicked", () => {
+    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
+
+    const result = renderInTestProvider(<App />);
+
+    // get a reference to the Apps SDK button by name
+    const sdkButton = result.getByRole("button", {
+      name: "Open Canva Apps SDK docs",
+    });
+
+    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
+    fireEvent.click(sdkButton);
+    expect(mockRequestOpenExternalUrl).toHaveBeenCalled();
+
+    // assert that the requestOpenExternalUrl function was called with the expected arguments
+    expect(mockRequestOpenExternalUrl.mock.calls[0][0]).toEqual({
+      url: DOCS_URL,
+    });
+  });
+
+  // this test demonstrates the use of a snapshot test
+  it("should have a consistent snapshot", () => {
+    const result = renderInTestProvider(<App />);
+    expect(result.container).toMatchSnapshot();
+  });
+});

package/templates/hello_world/webpack.config.ts

@@ -0,0 +1,270 @@
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import * as path from "path";
+import * as TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import * as chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
+
+config();
+
+type DevConfig = {
+  port: number;
+  enableHmr: boolean;
+  enableHttps: boolean;
+  appOrigin?: string;
+  appId?: string; // Deprecated in favour of appOrigin
+  certFile?: string;
+  keyFile?: string;
+};
+
+export function buildConfig({
+  devConfig,
+  appEntry = path.join(process.cwd(), "src", "index.tsx"),
+  backendHost = process.env.CANVA_BACKEND_HOST,
+  // For IN_HARNESS, refer to the following docs for more information: https://www.canva.dev/docs/apps/test-harness/
+  inHarness = process.env.IN_HARNESS === "true",
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+  inHarness?: boolean;
+} = {}): Configuration & DevServerConfiguration {
+  const mode = devConfig ? "development" : "production";
+
+  if (!backendHost) {
+    console.error(
+      chalk.redBright.bold("BACKEND_HOST is undefined."),
+      `Refer to "Customizing the backend host" in the README.md for more information.`,
+    );
+    process.exit(-1);
+  } else if (backendHost.includes("localhost") && mode === "production") {
+    console.error(
+      chalk.redBright.bold(
+        "BACKEND_HOST should not be set to localhost for production builds!",
+      ),
+      `Refer to "Customizing the backend host" in the README.md for more information.`,
+    );
+  }
+
+  return {
+    mode,
+    context: path.resolve(process.cwd(), "./"),
+    entry: inHarness
+      ? {
+          harness: path.join(process.cwd(), "harness", "harness.tsx"),
+          init: path.join(process.cwd(), "harness", "init.ts"),
+        }
+      : {
+          app: appEntry,
+        },
+    target: "web",
+    resolve: {
+      alias: {
+        assets: path.resolve(process.cwd(), "assets"),
+        utils: path.resolve(process.cwd(), "utils"),
+        styles: path.resolve(process.cwd(), "styles"),
+        src: path.resolve(process.cwd(), "src"),
+      },
+      extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
+    },
+    infrastructureLogging: {
+      level: inHarness ? "info" : "none",
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: "ts-loader",
+              options: {
+                transpileOnly: true,
+                getCustomTransformers() {
+                  return {
+                    before: [
+                      transform({
+                        overrideIdFn: "[sha512:contenthash:base64:6]",
+                      }),
+                    ],
+                  };
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          exclude: /node_modules/,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                modules: true,
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [require("cssnano")({ preset: "default" })],
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(png|jpg|jpeg)$/i,
+          type: "asset/inline",
+        },
+        {
+          test: /\.(woff|woff2)$/,
+          type: "asset/inline",
+        },
+        {
+          test: /\.svg$/,
+          oneOf: [
+            {
+              issuer: /\.[jt]sx?$/,
+              resourceQuery: /react/, // *.svg?react
+              use: ["@svgr/webpack", "url-loader"],
+            },
+            {
+              type: "asset/resource",
+              parser: {
+                dataUrlCondition: {
+                  maxSize: 200,
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          include: /node_modules/,
+          use: [
+            "style-loader",
+            "css-loader",
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [require("cssnano")({ preset: "default" })],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            format: {
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+      ],
+    },
+    output: {
+      filename: `[name].js`,
+      path: path.resolve(process.cwd(), "dist"),
+      clean: true,
+    },
+    plugins: [
+      new DefinePlugin({
+        BACKEND_HOST: JSON.stringify(backendHost),
+      }),
+      // Apps can only submit a single JS file via the developer portal
+      new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+    ].filter(Boolean),
+    ...buildDevConfig(devConfig),
+  };
+}
+
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
+  if (!options) {
+    return {};
+  }
+
+  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
+    options;
+
+  let devServer: DevServerConfiguration = {
+    server: enableHttps
+      ? {
+          type: "https",
+          options: {
+            cert: certFile,
+            key: keyFile,
+          },
+        }
+      : "http",
+    host: "localhost",
+    historyApiFallback: {
+      rewrites: [{ from: /^\/$/, to: "/app.js" }],
+    },
+    port,
+    client: {
+      logging: "verbose",
+    },
+    static: {
+      directory: path.resolve(process.cwd(), "assets"),
+      publicPath: "/assets",
+    },
+  };
+
+  if (enableHmr && appOrigin) {
+    devServer = {
+      ...devServer,
+      allowedHosts: new URL(appOrigin).hostname,
+      headers: {
+        "Access-Control-Allow-Origin": appOrigin,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Private-Network": "true",
+      },
+    };
+  } else if (enableHmr && appId) {
+    // Deprecated - App ID should not be used to configure HMR in the future and can be safely removed
+    // after a few months.
+
+    console.warn(
+      "Enabling Hot Module Replacement (HMR) with an App ID is deprecated, please see the README.md on how to update.",
+    );
+
+    const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
+    devServer = {
+      ...devServer,
+      allowedHosts: appDomain,
+      headers: {
+        "Access-Control-Allow-Origin": `https://${appDomain}`,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Private-Network": "true",
+      },
+    };
+  } else {
+    if (enableHmr && !appOrigin) {
+      console.warn(
+        "Attempted to enable Hot Module Replacement (HMR) without configuring App Origin... Disabling HMR.",
+      );
+    }
+    devServer.webSocketServer = false;
+  }
+
+  return {
+    devtool: "source-map",
+    devServer,
+  };
+}
+
+export default buildConfig;

package/templates/common/conf/eslint-general.mjs

@@ -1,277 +0,0 @@
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import jest from "eslint-plugin-jest";
-import react from "eslint-plugin-react";
-import globals from "globals";
-
-export default [
-  {
-    plugins: {
-      "@typescript-eslint": typescriptEslint,
-      jest,
-      react,
-    },
-    languageOptions: {
-      globals: {
-        ...globals.serviceworker,
-        ...globals.browser,
-      },
-    },
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-    rules: {
-      "@typescript-eslint/no-non-null-assertion": "warn",
-      "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/consistent-type-imports": "error",
-      "@typescript-eslint/no-explicit-any": "warn",
-      "@typescript-eslint/no-empty-interface": "warn",
-      "@typescript-eslint/consistent-type-definitions": "off",
-      "@typescript-eslint/explicit-member-accessibility": [
-        "error",
-        {
-          accessibility: "no-public",
-          overrides: {
-            parameterProperties: "off",
-          },
-        },
-      ],
-      "@typescript-eslint/naming-convention": [
-        "error",
-        {
-          selector: "typeLike",
-          format: ["PascalCase"],
-          leadingUnderscore: "allow",
-        },
-      ],
-      "no-invalid-this": "off",
-      "@typescript-eslint/no-invalid-this": "error",
-      "@typescript-eslint/no-unused-expressions": [
-        "error",
-        {
-          allowShortCircuit: true,
-          allowTernary: true,
-        },
-      ],
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "none",
-          ignoreRestSiblings: true,
-        },
-      ],
-      "@typescript-eslint/no-require-imports": "error",
-      "jest/no-restricted-matchers": [
-        "error",
-        {
-          toContainElement:
-            "toContainElement is not recommended as it encourages testing the internals of the components",
-          toContainHTML:
-            "toContainHTML is not recommended as it encourages testing the internals of the components",
-          toHaveAttribute:
-            "toHaveAttribute is not recommended as it encourages testing the internals of the components",
-          toHaveClass:
-            "toHaveClass is not recommended as it encourages testing the internals of the components",
-          toHaveStyle:
-            "toHaveStyle is not recommended as it encourages testing the internals of the components",
-        },
-      ],
-      "react/jsx-curly-brace-presence": [
-        "error",
-        {
-          props: "never",
-          children: "never",
-        },
-      ],
-      "react/jsx-tag-spacing": [
-        "error",
-        {
-          closingSlash: "never",
-          beforeSelfClosing: "allow",
-          afterOpening: "never",
-          beforeClosing: "allow",
-        },
-      ],
-      "react/self-closing-comp": "error",
-      "react/no-unescaped-entities": "off",
-      "react/jsx-uses-react": "off",
-      "react/react-in-jsx-scope": "off",
-      "default-case": "error",
-      eqeqeq: [
-        "error",
-        "always",
-        {
-          null: "never",
-        },
-      ],
-      "no-caller": "error",
-      "no-console": "error",
-      "no-eval": "error",
-      "no-inner-declarations": "error",
-      "no-new-wrappers": "error",
-      "no-restricted-globals": [
-        "error",
-        {
-          name: "fit",
-          message: "Don't focus tests",
-        },
-        {
-          name: "fdescribe",
-          message: "Don't focus tests",
-        },
-        {
-          name: "length",
-          message:
-            "Undefined length - Did you mean to use window.length instead?",
-        },
-        {
-          name: "name",
-          message: "Undefined name - Did you mean to use window.name instead?",
-        },
-        {
-          name: "status",
-          message:
-            "Undefined status - Did you mean to use window.status instead?",
-        },
-        {
-          name: "spyOn",
-          message: "Don't use spyOn directly, use jest.spyOn",
-        },
-      ],
-      "no-restricted-properties": [
-        "error",
-        {
-          property: "bind",
-          message: "Don't o.f.bind(o, ...), use () => o.f(...)",
-        },
-        {
-          object: "ReactDOM",
-          property: "findDOMNode",
-          message: "Don't use ReactDOM.findDOMNode() as it is deprecated",
-        },
-      ],
-      "no-restricted-syntax": [
-        "error",
-        {
-          selector: "AccessorProperty, TSAbstractAccessorProperty",
-          message:
-            "Accessor property syntax is not allowed, use getter and setters.",
-        },
-        {
-          selector: "PrivateIdentifier",
-          message:
-            "Private identifiers are not allowed, use TypeScript private fields.",
-        },
-        {
-          selector:
-            "JSXOpeningElement[name.name = /^[A-Z]/] > JSXAttribute[name.name = /-/]",
-          message:
-            "Passing hyphenated props to custom components is not type-safe. Prefer a camelCased equivalent if available. (See https://github.com/microsoft/TypeScript/issues/55182)",
-        },
-        {
-          selector:
-            "CallExpression[callee.object.name='window'][callee.property.name='open']",
-          message:
-            "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
-        },
-      ],
-      "no-return-await": "error",
-      "no-throw-literal": "error",
-      "no-undef-init": "error",
-      "no-var": "error",
-      "object-shorthand": "error",
-      "prefer-const": [
-        "error",
-        {
-          destructuring: "all",
-        },
-      ],
-      "prefer-object-spread": "error",
-      "prefer-rest-params": "error",
-      "prefer-spread": "error",
-      radix: "error",
-    },
-  },
-  {
-    files: ["**/*.tsx"],
-    rules: {
-      "react/no-deprecated": "error",
-      "react/forbid-elements": [
-        "error",
-        {
-          forbid: [
-            {
-              element: "video",
-              message:
-                "Don't use HTML video directly. Instead, use the App UI Kit <VideoCard /> as this respects users' auto-playing preferences",
-            },
-            {
-              element: "em",
-              message:
-                "Don't use <em> to italicize text. Canva's UI fonts don't support italic font style.",
-            },
-            {
-              element: "i",
-              message:
-                "Don't use <i> to italicize text. Canva's UI fonts don't support italic font style.",
-            },
-            {
-              element: "iframe",
-              message:
-                "Canva Apps aren't allowed to contain iframes. You should either recreate the UI you want to show in the iframe in the app directly, or link to your page via a `<Link>` tag.  For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "script",
-              message:
-                "Script tags are not allowed in Canva SDK Apps. You should import JavaScript modules instead. For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "a",
-              message:
-                "Don't use <a> tags. Instead, use the <Link> component from the App UI Kit, and remember to open the url via the requestOpenExternalUrl method from @canva/platform.",
-            },
-            {
-              element: "img",
-              message:
-                "Have you considered using <ImageCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "embed",
-              message:
-                "Have you considered using <EmbedCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "audio",
-              message:
-                "Have you considered using <AudioCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "button",
-              message:
-                "Rather than using the native HTML <button> element, use the <Button> component from the App UI Kit for consistency and accessibility.",
-            },
-            {
-              element: "input",
-              message:
-                "Wherever possible, prefer using the form inputs from the App UI Kit for consistency and accessibility (TextInput, Checkbox, FileInput, etc).",
-            },
-            {
-              element: "base",
-              message:
-                "The <base> tag is not supported in Canva Apps. We recommend using hash-based routing. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "link",
-              message:
-                "If you're trying to include a css stylesheet, we recommend importing css using React, or using embedded stylesheets. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-          ],
-        },
-      ],
-    },
-  },
-];

package/templates/common/conf/eslint-i18n.mjs

@@ -1,23 +0,0 @@
-import formatjs from "eslint-plugin-formatjs";
-
-export default [
-  {
-    plugins: {
-      formatjs,
-    },
-    rules: {
-      "formatjs/no-invalid-icu": "error",
-      "formatjs/no-literal-string-in-jsx": "error",
-      "formatjs/enforce-description": "error",
-      "formatjs/enforce-default-message": "error",
-      "formatjs/enforce-placeholders": "error",
-      "formatjs/no-id": "error",
-      "formatjs/no-emoji": "error",
-      "formatjs/no-useless-message": "error",
-      "formatjs/no-multiple-plurals": "error",
-      "formatjs/no-offset": "error",
-      "formatjs/blocklist-elements": [2, ["selectordinal"]],
-      "formatjs/no-complex-selectors": "error",
-    }
-  }
-];