@player-ui/react 0.3.0-next.2 → 0.3.0-next.4

package/dist/index.esm.js

@@ -1,14 +1,113 @@
-import React, { useRef, useEffect, useCallback, useMemo } from 'react';
-import { Player, NOT_STARTED_STATE } from '@player-ui/player';
+import { NoopLogger, Player, NOT_STARTED_STATE } from '@player-ui/player';
 export * from '@player-ui/player';
-import { Asset, AssetContext } from '@player-ui/react-asset';
-import { ErrorBoundary } from 'react-error-boundary';
-import { PlayerContext } from '@player-ui/react-utils';
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
 import { SyncWaterfallHook, AsyncParallelHook } from 'tapable-ts';
 import { Subscribe, useSubscribedState } from '@player-ui/react-subscribe';
 import { Registry } from '@player-ui/partial-match-registry';
+import { ErrorBoundary } from 'react-error-boundary';
 import { MetricsCorePluginSymbol, RequestTimeWebPlugin } from '@player-ui/metrics-plugin';
 
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+const AssetContext = React.createContext({});
+const ReactAsset = (props) => {
+  const { registry } = React.useContext(AssetContext);
+  let unwrapped;
+  if ("type" in props && "id" in props) {
+    unwrapped = props;
+  } else if ("asset" in props) {
+    unwrapped = props.asset;
+  }
+  if (!unwrapped || typeof unwrapped !== "object" || (unwrapped == null ? void 0 : unwrapped.type) === void 0) {
+    throw Error(`Cannot determine asset type.`);
+  }
+  const Impl = registry == null ? void 0 : registry.get(unwrapped);
+  if (!Impl) {
+    throw Error(`No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`);
+  }
+  return /* @__PURE__ */ React.createElement(Impl, __spreadValues$3({}, unwrapped));
+};
+
+const PlayerContext = React.createContext({});
+const usePlayer = () => {
+  const { player } = React.useContext(PlayerContext);
+  return player;
+};
+
+const noopLogger = new NoopLogger();
+function useLogger() {
+  var _a;
+  const player = usePlayer();
+  return (_a = player == null ? void 0 : player.logger) != null ? _a : noopLogger;
+}
+
+function useAssetProps(asset) {
+  return {
+    id: asset.id,
+    "data-asset-type": asset.type
+  };
+}
+
+function trimSlashes(str) {
+  return str.replace(/^\/+|\/+$/g, "");
+}
+function removeEmptyValuesFromObject(obj) {
+  return Object.keys(obj).reduce((acc, key) => {
+    const value = obj[key];
+    if (value !== null && value !== void 0) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+}
+function isEmptyObject(obj) {
+  return Object.keys(obj).length === 0 && obj.constructor === Object;
+}
+function isFunction(maybeFn) {
+  return Boolean(maybeFn instanceof Function || typeof maybeFn === "function");
+}
+function callOrReturn(maybeFn, fnArgs) {
+  if (isFunction(maybeFn)) {
+    return maybeFn(fnArgs);
+  }
+  return maybeFn;
+}
+
+function buildUrl(url, params = {}) {
+  const baseUrl = new URL(url);
+  if (params && isEmptyObject(params)) {
+    return baseUrl.toString();
+  }
+  Object.keys(params).forEach((key) => {
+    const value = params[key];
+    baseUrl.searchParams.append(key, String(value));
+  });
+  return baseUrl.toString();
+}
+
+function useGetConstantByType(type, key) {
+  const player = usePlayer();
+  return player == null ? void 0 : player.constantsController.getConstants(key, type);
+}
+function useGetConstant(key) {
+  const player = usePlayer();
+  return player == null ? void 0 : player.constantsController.getConstants(key, "constants");
+}
+
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
 var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
@@ -25,8 +124,8 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-const WebPlayer$1 = ({ view }) => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$2({}, view)));
+const ReactPlayer$1 = ({ view }) => {
+  return /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$2({}, view));
 };
 
 class OnUpdatePlugin {
@@ -76,10 +175,10 @@ var __async$1 = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const WEB_PLAYER_VERSION = "0.3.0-next.2";
-const COMMIT = "3b8d937ea6cb5b198dc8e1b834644666884c5d18";
+const WEB_PLAYER_VERSION = "0.3.0-next.4";
+const COMMIT = "774a3cf3b0765796901d03a311a06ee68e690a74";
 const _window = typeof window === "undefined" ? void 0 : window;
-class WebPlayer {
+class ReactPlayer {
   constructor(options) {
     this.assetRegistry = new Registry();
     this.hooks = {
@@ -102,24 +201,24 @@ class WebPlayer {
     const playerPlugins = plugins.filter((p) => Boolean(p.apply));
     this.player = (_b = options == null ? void 0 : options.player) != null ? _b : new Player({ plugins: playerPlugins });
     plugins.forEach((plugin) => {
-      if (plugin.applyWeb) {
-        plugin.applyWeb(this);
+      if (plugin.applyReact) {
+        plugin.applyReact(this);
       }
     });
     onUpdatePlugin.apply(this.player);
     this.Component = this.hooks.webComponent.call(this.createReactComp());
-    this.webplayerInfo = {
+    this.reactPlayerInfo = {
       playerVersion: this.player.getVersion(),
       playerCommit: this.player.getCommit(),
-      webplayerVersion: WEB_PLAYER_VERSION,
-      webplayerCommit: COMMIT
+      reactPlayerVersion: WEB_PLAYER_VERSION,
+      reactPlayerCommit: COMMIT
     };
   }
   getPlayerVersion() {
-    return this.webplayerInfo.playerVersion;
+    return this.reactPlayerInfo.playerVersion;
   }
   getPlayerCommit() {
-    return this.webplayerInfo.playerCommit;
+    return this.reactPlayerInfo.playerCommit;
   }
   findPlugin(symbol) {
     var _a;
@@ -127,20 +226,20 @@ class WebPlayer {
   }
   registerPlugin(plugin) {
     var _a;
-    if (!plugin.applyWeb)
+    if (!plugin.applyReact)
       return;
-    plugin.applyWeb(this);
+    plugin.applyReact(this);
     (_a = this.options.plugins) == null ? void 0 : _a.push(plugin);
   }
-  getWebPlayerVersion() {
-    return this.webplayerInfo.webplayerVersion;
+  getReactPlayerVersion() {
+    return this.reactPlayerInfo.reactPlayerVersion;
   }
-  getWebPlayerCommit() {
-    return this.webplayerInfo.webplayerCommit;
+  getReactPlayerCommit() {
+    return this.reactPlayerInfo.reactPlayerCommit;
   }
   createReactComp() {
-    const ActualPlayerComp = this.hooks.playerComponent.call(WebPlayer$1);
-    const WebPlayerComponent = () => {
+    const ActualPlayerComp = this.hooks.playerComponent.call(ReactPlayer$1);
+    const ReactPlayerComponent = () => {
       const view = useSubscribedState(this.viewUpdateSubscription);
       if (this.options.suspend) {
         this.viewUpdateSubscription.suspend();
@@ -163,7 +262,7 @@ class WebPlayer {
         view
       }))));
     };
-    return WebPlayerComponent;
+    return ReactPlayerComponent;
   }
   setWaitForNextViewUpdate() {
     const shouldCallResetHook = this.options.suspend && this.hooks.onBeforeViewReset.isUsed();
@@ -179,6 +278,7 @@ class WebPlayer {
     }));
   }
 }
+const WebPlayer = ReactPlayer;
 
 class StateTapPlugin {
   constructor(callback) {
@@ -192,11 +292,11 @@ class StateTapPlugin {
   }
 }
 
-const useWebPlayer = (options) => {
+const useReactPlayer = (options) => {
   const [playerState, setPlayerState] = React.useState(NOT_STARTED_STATE);
-  const webPlayer = React.useMemo(() => {
+  const reactPlayer = React.useMemo(() => {
     var _a;
-    const wp = new WebPlayer({
+    const rp = new ReactPlayer({
       player: options == null ? void 0 : options.player,
       plugins: [
         ...(_a = options == null ? void 0 : options.plugins) != null ? _a : [],
@@ -204,11 +304,11 @@ const useWebPlayer = (options) => {
       ],
       suspend: options == null ? void 0 : options.suspend
     });
-    return wp;
+    return rp;
   }, []);
-  const { player } = webPlayer;
+  const { player } = reactPlayer;
   return {
-    webPlayer,
+    reactPlayer,
     player,
     playerState
   };
@@ -331,7 +431,7 @@ class ManagedState {
       value: "not_started",
       context: {
         playerConfig,
-        webPlayer: new WebPlayer(playerConfig),
+        reactPlayer: new ReactPlayer(playerConfig),
         manager: options.manager
       }
     };
@@ -350,14 +450,14 @@ class ManagedState {
   restart() {
     var _a;
     if (((_a = this.state) == null ? void 0 : _a.value) === "error") {
-      const { playerConfig, manager, prevResult, webPlayer } = this.state.context;
+      const { playerConfig, manager, prevResult, reactPlayer } = this.state.context;
       this.setState({
         value: "completed",
         context: {
           playerConfig,
           manager,
           result: prevResult,
-          webPlayer
+          reactPlayer
         }
       });
     } else {
@@ -370,11 +470,11 @@ class ManagedState {
       this.callbacks.forEach((c) => {
         c.onState(state);
       });
-      const { manager, webPlayer, playerConfig } = state.context;
+      const { manager, reactPlayer, playerConfig } = state.context;
       try {
         const nextState = yield this.processState(state, {
           manager,
-          webPlayer,
+          reactPlayer,
           playerConfig
         });
         if (nextState) {
@@ -385,7 +485,7 @@ class ManagedState {
           value: "error",
           context: {
             manager,
-            webPlayer,
+            reactPlayer,
             playerConfig,
             error: e
           }
@@ -431,7 +531,7 @@ class ManagedState {
           context: __spreadProps(__spreadValues({}, context), {
             flow: state.context.flow,
             prevResult: state.context.prevResult,
-            result: state.context.webPlayer.start(state.context.flow)
+            result: state.context.reactPlayer.start(state.context.flow)
           })
         };
       }
@@ -493,12 +593,12 @@ const ManagedPlayer = (props) => {
   React.useEffect(() => {
     return () => {
       var _a2, _b;
-      const playerState = state == null ? void 0 : state.context.webPlayer.player.getState();
+      const playerState = state == null ? void 0 : state.context.reactPlayer.player.getState();
       if ((state == null ? void 0 : state.value) === "running" && (playerState == null ? void 0 : playerState.status) === "in-progress") {
         (_b = (_a2 = props.manager).terminate) == null ? void 0 : _b.call(_a2, playerState.controllers.data.serialize());
       }
     };
-  }, [props.manager, state == null ? void 0 : state.context.webPlayer.player, state == null ? void 0 : state.value]);
+  }, [props.manager, state == null ? void 0 : state.context.reactPlayer.player, state == null ? void 0 : state.value]);
   if ((state == null ? void 0 : state.value) === "error") {
     if (props.fallbackComponent) {
       return /* @__PURE__ */ React.createElement(props.fallbackComponent, {
@@ -515,12 +615,12 @@ const ManagedPlayer = (props) => {
       throw state.context.error;
     }
   }
-  if (state == null ? void 0 : state.context.webPlayer) {
-    const { Component } = state.context.webPlayer;
+  if (state == null ? void 0 : state.context.reactPlayer) {
+    const { Component } = state.context.reactPlayer;
     return /* @__PURE__ */ React.createElement(Component, null);
   }
   return null;
 };
 
-export { ManagedPlayer, WebPlayer, usePersistentStateMachine, useRequestTime, useWebPlayer };
+export { AssetContext, ManagedPlayer, PlayerContext, ReactAsset, ReactPlayer, WebPlayer, buildUrl, callOrReturn, isEmptyObject, isFunction, removeEmptyValuesFromObject, trimSlashes, useAssetProps, useGetConstant, useGetConstantByType, useLogger, usePersistentStateMachine, usePlayer, useReactPlayer, useRequestTime };
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@player-ui/react",
-  "version": "0.3.0-next.2",
+  "version": "0.3.0-next.4",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -11,12 +11,10 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@player-ui/player": "0.3.0-next.2",
-    "@player-ui/partial-match-registry": "0.3.0-next.2",
-    "@player-ui/metrics-plugin": "0.3.0-next.2",
-    "@player-ui/react-asset": "0.3.0-next.2",
-    "@player-ui/react-subscribe": "0.3.0-next.2",
-    "@player-ui/react-utils": "0.3.0-next.2",
+    "@player-ui/player": "0.3.0-next.4",
+    "@player-ui/partial-match-registry": "0.3.0-next.4",
+    "@player-ui/metrics-plugin": "0.3.0-next.4",
+    "@player-ui/react-subscribe": "0.3.0-next.4",
     "react-error-boundary": "^3.1.3",
     "tapable-ts": "^0.1.0",
     "@babel/runtime": "7.15.4"

package/src/app.tsx

@@ -1,23 +1,19 @@
 import React from 'react';
-import { Asset } from '@player-ui/react-asset';
-import type { Asset as AssetType } from '@player-ui/player';
+import type { View } from '@player-ui/player';
+import { ReactAsset } from './asset';
 
-export interface WebPlayerProps {
+export interface ReactPlayerProps {
   /**
    * The Content view object to render
    */
-  view: AssetType;
+  view: View;
 }
 
 /**
- * The entry for the WebPlayer's React tree
+ * The entry for the ReactPlayer's React tree
  */
-const WebPlayer = ({ view }: WebPlayerProps) => {
-  return (
-    <div>
-      <Asset {...view} />
-    </div>
-  );
+const ReactPlayer = ({ view }: ReactPlayerProps) => {
+  return <ReactAsset {...view} />;
 };
 
-export default WebPlayer;
+export default ReactPlayer;

package/src/asset/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { Asset as AssetType, AssetWrapper } from '@player-ui/player';
+import type { Registry } from '@player-ui/partial-match-registry';
+
+export type AssetRegistryType = Registry<React.ComponentType<any>>;
+
+export interface ContextType {
+  /**
+   * A registry of Asset -> React Components
+   */
+  registry?: AssetRegistryType;
+}
+
+export const AssetContext = React.createContext<ContextType>({});
+
+/**
+ * A React Component that looks up an implementation from a registry
+ */
+export const ReactAsset = (
+  props: AssetType<string> | AssetWrapper<AssetType<string>>
+) => {
+  const { registry } = React.useContext(AssetContext);
+
+  let unwrapped;
+
+  if ('type' in props && 'id' in props) {
+    unwrapped = props;
+  } else if ('asset' in props) {
+    unwrapped = (props as unknown as AssetWrapper).asset;
+  }
+
+  if (
+    !unwrapped ||
+    typeof unwrapped !== 'object' ||
+    unwrapped?.type === undefined
+  ) {
+    throw Error(`Cannot determine asset type.`);
+  }
+
+  const Impl = registry?.get(unwrapped);
+
+  if (!Impl) {
+    throw Error(
+      `No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}`
+    );
+  }
+
+  return <Impl {...unwrapped} />;
+};

package/src/hooks.tsx

@@ -1,13 +1,13 @@
 import type { Player, PlayerFlowState } from '@player-ui/player';
 import { NOT_STARTED_STATE } from '@player-ui/player';
 import React from 'react';
-import type { WebPlayerOptions } from './player';
-import { WebPlayer } from './player';
+import type { ReactPlayerOptions } from './player';
+import { ReactPlayer } from './player';
 import { StateTapPlugin } from './plugins/tapstate-plugin';
 
-export interface UseWebPlayerReturn {
+export interface UseReactPlayerReturn {
   /** The web-player instance */
-  webPlayer: WebPlayer;
+  reactPlayer: ReactPlayer;
   /** Player instance */
   player: Player;
   /** The state of Player */
@@ -15,17 +15,17 @@ export interface UseWebPlayerReturn {
 }
 
 /**
- * The `useWebPlayer` hook is an easy way to integrate the web-player into your React app.
+ * The `useReactPlayer` hook is an easy way to integrate the web-player into your React app.
  * Simply supply your config, plugins, and an optional flow, which will be automatically started for you when changed.
  */
-export const useWebPlayer = (
-  options?: WebPlayerOptions
-): UseWebPlayerReturn => {
+export const useReactPlayer = (
+  options?: ReactPlayerOptions
+): UseReactPlayerReturn => {
   const [playerState, setPlayerState] =
     React.useState<PlayerFlowState>(NOT_STARTED_STATE);
 
-  const webPlayer = React.useMemo(() => {
-    const wp = new WebPlayer({
+  const reactPlayer = React.useMemo(() => {
+    const rp = new ReactPlayer({
       player: options?.player,
       plugins: [
         ...(options?.plugins ?? []),
@@ -34,13 +34,13 @@ export const useWebPlayer = (
       suspend: options?.suspend,
     });
 
-    return wp;
+    return rp;
   }, []);
 
-  const { player } = webPlayer;
+  const { player } = reactPlayer;
 
   return {
-    webPlayer,
+    reactPlayer,
     player,
     playerState,
   };

package/src/index.tsx

@@ -1,6 +1,8 @@
-export * from './player';
 export * from '@player-ui/player';
+export * from './player';
 export * from './hooks';
 export * from './manager/managed-player';
 export * from './manager/request-time';
 export * from './manager/types';
+export * from './asset';
+export * from './utils';

package/src/manager/managed-player.tsx

@@ -7,8 +7,8 @@ import type {
   ManagedPlayerContext,
 } from './types';
 import { useRequestTime } from './request-time';
-import type { WebPlayerOptions } from '../player';
-import { WebPlayer } from '../player';
+import type { ReactPlayerOptions } from '../player';
+import { ReactPlayer } from '../player';
 
 /** noop middleware */
 function identityMiddleware<T>(next: Promise<T>) {
@@ -58,9 +58,9 @@ class ManagedState {
     manager: FlowManager;
 
     /** the config to use when creating a player */
-    playerConfig: WebPlayerOptions;
+    playerConfig: ReactPlayerOptions;
   }) {
-    const playerConfig: WebPlayerOptions = {
+    const playerConfig: ReactPlayerOptions = {
       ...options.playerConfig,
       suspend: true,
     };
@@ -69,7 +69,7 @@ class ManagedState {
       value: 'not_started',
       context: {
         playerConfig,
-        webPlayer: new WebPlayer(playerConfig),
+        reactPlayer: new ReactPlayer(playerConfig),
         manager: options.manager,
       },
     };
@@ -92,7 +92,7 @@ class ManagedState {
   /** restart starts from the last result */
   public restart() {
     if (this.state?.value === 'error') {
-      const { playerConfig, manager, prevResult, webPlayer } =
+      const { playerConfig, manager, prevResult, reactPlayer } =
         this.state.context;
       this.setState({
         value: 'completed',
@@ -100,7 +100,7 @@ class ManagedState {
           playerConfig,
           manager,
           result: prevResult,
-          webPlayer,
+          reactPlayer,
         },
       });
     } else {
@@ -114,12 +114,12 @@ class ManagedState {
       c.onState(state);
     });
 
-    const { manager, webPlayer, playerConfig } = state.context;
+    const { manager, reactPlayer, playerConfig } = state.context;
 
     try {
       const nextState = await this.processState(state, {
         manager,
-        webPlayer,
+        reactPlayer,
         playerConfig,
       });
 
@@ -131,7 +131,7 @@ class ManagedState {
         value: 'error',
         context: {
           manager,
-          webPlayer,
+          reactPlayer,
           playerConfig,
           error: e as Error,
         },
@@ -189,7 +189,7 @@ class ManagedState {
           ...context,
           flow: state.context.flow,
           prevResult: state.context.prevResult,
-          result: state.context.webPlayer.start(state.context.flow),
+          result: state.context.reactPlayer.start(state.context.flow),
         },
       };
     }
@@ -219,7 +219,7 @@ export const usePersistentStateMachine = (options: {
   manager: FlowManager;
 
   /** Player config  */
-  playerConfig: WebPlayerOptions;
+  playerConfig: ReactPlayerOptions;
 
   /** Any middleware for the manager */
   middleware?: ManagerMiddleware;
@@ -281,13 +281,13 @@ export const ManagedPlayer = (props: ManagedPlayerProps) => {
 
   React.useEffect(() => {
     return () => {
-      const playerState = state?.context.webPlayer.player.getState();
+      const playerState = state?.context.reactPlayer.player.getState();
 
       if (state?.value === 'running' && playerState?.status === 'in-progress') {
         props.manager.terminate?.(playerState.controllers.data.serialize());
       }
     };
-  }, [props.manager, state?.context.webPlayer.player, state?.value]);
+  }, [props.manager, state?.context.reactPlayer.player, state?.value]);
 
   if (state?.value === 'error') {
     if (props.fallbackComponent) {
@@ -309,8 +309,8 @@ export const ManagedPlayer = (props: ManagedPlayerProps) => {
     }
   }
 
-  if (state?.context.webPlayer) {
-    const { Component } = state.context.webPlayer;
+  if (state?.context.reactPlayer) {
+    const { Component } = state.context.reactPlayer;
 
     return <Component />;
   }

package/src/manager/request-time.tsx

@@ -5,7 +5,7 @@ import {
   MetricsCorePluginSymbol,
   RequestTimeWebPlugin,
 } from '@player-ui/metrics-plugin';
-import type { WebPlayerPlugin } from '../player';
+import type { ReactPlayerPlugin } from '../player';
 
 type RequestTime = {
   /** request start time */
@@ -45,7 +45,7 @@ export const useRequestTime = () => {
     });
   }
 
-  const RequestTimeMetricsPlugin: WebPlayerPlugin = useMemo(() => {
+  const RequestTimeMetricsPlugin: ReactPlayerPlugin = useMemo(() => {
     return {
       name: 'RequestTimeMetricsPlugin',
       apply(player: Player): void {

package/src/manager/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { CompletedState, Flow, FlowResult } from '@player-ui/player';
-import type { WebPlayer, WebPlayerOptions } from '../player';
+import type { ReactPlayer, ReactPlayerOptions } from '../player';
 
 export interface FinalState {
   /** Mark the iteration as complete */
@@ -45,7 +45,7 @@ export interface FallbackProps {
   error?: Error;
 }
 
-export interface ManagedPlayerProps extends WebPlayerOptions {
+export interface ManagedPlayerProps extends ReactPlayerOptions {
   /** The manager for populating the next flows */
   manager: FlowManager;
 
@@ -67,10 +67,10 @@ export type ManagedPlayerContext = {
   manager: FlowManager;
 
   /** The web-player */
-  webPlayer: WebPlayer;
+  reactPlayer: ReactPlayer;
 
   /** The config for Player */
-  playerConfig: WebPlayerOptions;
+  playerConfig: ReactPlayerOptions;
 };
 
 export type ManagedPlayerState =