@shopify/ui-extensions - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0-alpha.0

build/cjs/index.js

@@ -1,1 +0,44 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _api = require("./api");
+
+Object.keys(_api).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _api[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _api[key];
+    }
+  });
+});
+
+var _components = require("./components");
+
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _components[key];
+    }
+  });
+});
+
+var _extension = require("./extension");
+
+Object.keys(_extension).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _extension[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _extension[key];
+    }
+  });
+});

build/node/index.js

@@ -1,1 +0,44 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _api = require("./api");
+
+Object.keys(_api).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _api[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _api[key];
+    }
+  });
+});
+
+var _components = require("./components");
+
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _components[key];
+    }
+  });
+});
+
+var _extension = require("./extension");
+
+Object.keys(_extension).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _extension[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _extension[key];
+    }
+  });
+});

build/ts/index.d.ts

@@ -1,2 +0,4 @@
-export type { BaseBannerProps, BaseButtonProps, BaseHeadingProps, BaseBlockStackProps, BaseInlineStackProps, } from './types';
+export * from './api';
+export * from './components';
+export * from './extension';
 //# sourceMappingURL=index.d.ts.map

build/ts/index.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./api"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./extension"), exports);

index.d.ts

@@ -1,1 +0,2 @@
-export * from "./build/ts/index";
+export * from "./build/ts/index.ts";
+export {default} from "./build/ts/index.ts";

index.js

@@ -1,1 +0,1 @@
-module.exports = require("./build/node/index");
+module.exports = require("./build/cjs/index.ts/index");

package.json

 {
   "name": "@shopify/ui-extensions",
-  "version": "1.0.2",
+  "version": "2.0.0-alpha.0",
   "main": "index.js",
   "module": "index.mjs",
   "esnext": "index.esnext",
-  "types": "index.d.ts",
+  "types": "./build/typescript/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "admin": [
+        "./build/typescript/surfaces/admin/index.d.ts"
+      ],
+      "checkout": [
+        "./build/typescript/surfaces/checkout/index.d.ts"
+      ]
+    }
+  },
   "exports": {
@@ -14,6 +24,18 @@ ".": {
     },
-    "./*": "./*"
+    "./admin": {
+      "esnext": "./admin.esnext",
+      "import": "./admin.mjs",
+      "require": "./admin.js"
+    },
+    "./checkout": {
+      "esnext": "./checkout.esnext",
+      "import": "./checkout.mjs",
+      "require": "./checkout.js"
+    }
   },
   "license": "MIT",
   "sideEffects": false,
+  "dependencies": {
+    "@remote-ui/core": "^2.1.16"
+  },
   "publishConfig": {
@@ -23,3 +45,3 @@ "access": "public",
   },
-  "gitHead": "a00fc56a2f02a7201f480e60aff0459c2f8c55ca"
+  "gitHead": "3dc342dd1805cd345f78a92fb3426795c4ef642a"
 }

README.md

 # `@shopify/ui-extensions`
 
-This package contains shared types and utilities for all of the other ui-extensions packages in this repo.
+This package contains the public type definitions and utilities needed to create a Shopify UI extension. This is a generalized package that is intended to be the long-term home of the surface-specific packages in this repository, like `@shopify/checkout-ui-extensions` and `@shopify/admin-ui-extensions`.
+
+Currently, this package contains the API for two [surfaces](https://github.com/Shopify/ui-extensions-private/discussions/1770#discussion-4324275):
+
+- [`admin`](./src/surfaces/admin)
+- [`checkout`](./src/surfaces/checkout)
+
+This surface-based grouping is mostly cosmetic; all extensions use the same underlying technology, and most of the same “core” components (e.g., `Layout`, `BlockStack`, etc) and capabilities (e.g., direct API access, session tokens). Separating APIs by surface makes it easier for a developer to see what is available to them in each context, and gives us a flexible system for introducing components and APIs available in only some surfaces.
+
+An admin extension using “vanilla” JavaScript would be written as follows:
+
+```ts
+import {
+  extension,
+  TextField,
+  EditorSettings,
+} from '@shopify/ui-extensions/admin';
+
+export default extension(
+  'Admin::CheckoutEditor::RenderSettings',
+  (root, {settings, applySettingChange}) => {
+    const editorSettings = root.createComponent(EditorSettings);
+
+    const textfield = root.createComponent(TextField, {
+      label: 'Message',
+      helpText: 'The message to show to buyers when this extension is rendered',
+      value: settings.current.message,
+      onChange(value) {
+        applySettingsChange({key: 'message', value});
+      },
+    });
+
+    editorSettings.appendChild(textfield);
+    root.appendChild(editorSettings);
+  },
+);
+```
+
+## What is a “UI Extension”?
+
+A UI extension is a JavaScript-based module that can hook in to client-side behaviors on any of Shopify’s first party UI surface areas. No matter whether the developer is embedding into the admin or checkout, whether they are rendering UI or [registering listeners for client-side events](https://shopify.dev/apps/pixels); it’s all a UI extension.
+
+The most minimal definition of a UI extension has the following properties:
+
+- A **name** that is presented to merchants when interacting with the extension.
+- The **extension points** that the UI extension implements. These are represented with string identifiers that describe the surface and responsibility of the extension. For example, [`Checkout::CartLines::RenderAfter`](https://shopify.dev/api/checkout-extensions/checkout/extension-points/api) gives the UI Extension the ability to render UI after the cart lines in a checkout; [`WebPixel::Register`](https://shopify.dev/apps/pixels/pixel-extension) registers a Web Pixel to track client-side events. A UI Extension can register to support multiple extension points, and must map each to a JavaScript module in their application.
+
+The types in this package allow us to represent additional details about the extension points developers can implement. Each extension point can define what APIs it supports, including:
+
+- What **UI Components** are available to be rendered, and what properties those UI components accept
+- What **imperative APIs** are provided by the host, for reading and writing data relevant to the extension
+
+The available components and APIs can be different for each extension point. Additionally, Shopify can vary the components and APIs it provides based on many other factors at runtime, like:
+
+- Whether an extension is built by Shopify or a third party
+- Whether the API client that owns the extension has certain approval scopes,
+- Whether the shop or API client has particular beta flags enabled

sewing-kit.config.ts

@@ -5,4 +5,6 @@ import {createPackage} from '@sewing-kit/config';
 export default createPackage((pkg) => {
-  pkg.entry({root: './src/index'});
+  pkg.entry({root: './src/index.ts'});
+  pkg.entry({name: 'admin', root: './src/surfaces/admin/index.ts'});
+  pkg.entry({name: 'checkout', root: './src/surfaces/checkout/index.ts'});
   pkg.use(uiExtensionsPackage());
 });

src/index.ts

@@ -1,7 +0,3 @@
-export type {
-  BaseBannerProps,
-  BaseButtonProps,
-  BaseHeadingProps,
-  BaseBlockStackProps,
-  BaseInlineStackProps,
-} from './types';
+export * from './api';
+export * from './components';
+export * from './extension';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128853

increased by214.57%

Number of package files

290

increased by253.66%

Lines of code

1774

increased by491.33%

Number of lines in readme file

60

increased by1400%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@remote-ui/core@^2.1.16

• + Added@remote-ui/core@2.2.4(transitive)

• + Added@remote-ui/rpc@1.4.5(transitive)

• + Added@remote-ui/types@1.1.3(transitive)