@devtools-ui/code-editor 0.1.0--canary.17.811

package/dist/cjs/index.cjs

@@ -0,0 +1,124 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CodeEditor: () => CodeEditor,
+  CodeEditorComponent: () => CodeEditorComponent,
+  codeEditorTransform: () => codeEditorTransform,
+  expPropTransform: () => expPropTransform,
+  transform: () => transform
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/component/index.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("@monaco-editor/react"));
+var import_react3 = require("@chakra-ui/react");
+var CodeEditorComponent = (props) => {
+  const { code, run } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_react3.Flex, { h: "50vh" }, /* @__PURE__ */ import_react.default.createElement(
+    import_react2.default,
+    {
+      theme: "vs-dark",
+      value: code,
+      language: "json",
+      options: {
+        formatOnPaste: true
+      },
+      onChange: (val) => {
+        run(val);
+      }
+    }
+  ));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/dsl/index.tsx
+var import_react4 = __toESM(require("react"));
+var import_dsl = require("@player-tools/dsl");
+var CodeEditor = (props) => {
+  const { exp, binding, ...rest } = props;
+  return /* @__PURE__ */ import_react4.default.createElement(import_dsl.Asset, { type: "code-editor", ...rest }, /* @__PURE__ */ import_react4.default.createElement("property", { name: "binding" }, binding.toValue()), /* @__PURE__ */ import_react4.default.createElement("property", { name: "exp" }, exp.toValue()));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/transform/index.ts
+var import_asset_transform_plugin = require("@player-ui/asset-transform-plugin");
+var transform = (asset, options) => {
+  return {
+    ...asset,
+    code: asset.binding === void 0 ? "" : JSON.stringify(
+      options.data.model.get(asset.binding, {
+        includeInvalid: true,
+        formatted: false
+      }),
+      null,
+      2
+    ),
+    run(code) {
+      if (asset.exp) {
+        const referencedExpression = asset.exp.match(/{{\s*(.*?)\s*}}/);
+        referencedExpression && options.data.model.set([[referencedExpression[1], code]]);
+        options.evaluate(asset.exp);
+      }
+    }
+  };
+};
+var expPropTransform = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...asset.plugins?.stringResolver?.propertiesToSkip ?? [],
+          "exp"
+        ]
+      }
+    }
+  };
+};
+var codeEditorTransform = (0, import_asset_transform_plugin.compose)(
+  transform,
+  (0, import_asset_transform_plugin.composeBefore)(expPropTransform)
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeEditor,
+  CodeEditorComponent,
+  codeEditorTransform,
+  expPropTransform,
+  transform
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/component/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/dsl/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./component\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import React from \"react\";\nimport Editor from \"@monaco-editor/react\";\nimport type { TransformedCodeEditor } from \"../types\";\nimport { Flex } from \"@chakra-ui/react\";\n\nexport const CodeEditorComponent = (props: TransformedCodeEditor) => {\n  const { code, run } = props;\n\n  return (\n    <Flex h=\"50vh\">\n      <Editor\n        theme=\"vs-dark\"\n        value={code}\n        language=\"json\"\n        options={{\n          formatOnPaste: true,\n        }}\n        onChange={(val) => {\n          run(val);\n        }}\n      />\n    </Flex>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  BindingTemplateInstance,\n  ExpressionTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { CodeEditorAsset } from \"../types\";\n\n/**\n * Defines the component DSL representation, so users of this plugin can author Player-UI\n * content leveraging .jsx/.tsx syntax.\n */\nexport const CodeEditor = (\n  props: Omit<\n    AssetPropsWithChildren<CodeEditorAsset>,\n    \"binding\" | \"expression\"\n  > & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n    /** Expression as template string */\n    exp: ExpressionTemplateInstance;\n  }\n) => {\n  const { exp, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"code-editor\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      <property name=\"exp\">{exp.toValue()}</property>\n    </Asset>\n  );\n};\n","import type {\n  Asset,\n  BeforeTransformFunction,\n  TransformFunction,\n} from \"@player-ui/player\";\nimport type { CodeEditorAsset, TransformedCodeEditor } from \"../types\";\nimport { compose, composeBefore } from \"@player-ui/asset-transform-plugin\";\n\n/**\n * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)\n * and embeds Player state and methods:\n */\nexport const transform: TransformFunction<\n  CodeEditorAsset,\n  TransformedCodeEditor\n> = (asset, options) => {\n  return {\n    ...asset,\n    code:\n      asset.binding === undefined\n        ? \"\"\n        : JSON.stringify(\n            options.data.model.get(asset.binding, {\n              includeInvalid: true,\n              formatted: false,\n            }),\n            null,\n            2\n          ),\n    run(code?: string) {\n      if (asset.exp) {\n        // get the referenced expression property holder from the expression\n        const referencedExpression = asset.exp.match(/{{\\s*(.*?)\\s*}}/);\n        // set the referenced expression property to the new expression\n        // so it is available to the asset.exp\n        referencedExpression &&\n          options.data.model.set([[referencedExpression[1], code]]);\n        options.evaluate(asset.exp);\n      }\n    },\n  };\n};\n\n/**\n * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist\n */\nexport const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {\n  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;\n\n  if (skipArray && skipArray.indexOf(\"exp\") > 1) {\n    return asset;\n  }\n\n  return {\n    ...asset,\n    plugins: {\n      ...asset.plugins,\n      stringResolver: {\n        ...asset?.plugins?.stringResolver,\n        propertiesToSkip: [\n          ...(asset.plugins?.stringResolver?.propertiesToSkip ?? []),\n          \"exp\",\n        ],\n      },\n    },\n  };\n};\n\nexport const codeEditorTransform = compose(\n  transform,\n  composeBefore(expPropTransform)\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,gBAAmB;AAEnB,IAAAA,gBAAqB;AAEd,IAAM,sBAAsB,CAAC,UAAiC;AACnE,QAAM,EAAE,MAAM,IAAI,IAAI;AAEtB,SACE,6BAAAC,QAAA,cAAC,sBAAK,GAAE,UACN,6BAAAA,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAS;AAAA,MACT,SAAS;AAAA,QACP,eAAe;AAAA,MACjB;AAAA,MACA,UAAU,CAAC,QAAQ;AACjB,YAAI,GAAG;AAAA,MACT;AAAA;AAAA,EACF,CACF;AAEJ;;;ACvBA,IAAAC,gBAAkB;AAClB,iBAKO;AAOA,IAAM,aAAa,CACxB,UASG;AACH,QAAM,EAAE,KAAK,SAAS,GAAG,KAAK,IAAI;AAElC,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,eAAe,GAAG,QAC5B,8BAAAA,QAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GAC5C,8BAAAA,QAAA,cAAC,cAAS,MAAK,SAAO,IAAI,QAAQ,CAAE,CACtC;AAEJ;;;AC1BA,oCAAuC;AAMhC,IAAM,YAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MACE,MAAM,YAAY,SACd,KACA,KAAK;AAAA,MACH,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,QACpC,gBAAgB;AAAA,QAChB,WAAW;AAAA,MACb,CAAC;AAAA,MACD;AAAA,MACA;AAAA,IACF;AAAA,IACN,IAAI,MAAe;AACjB,UAAI,MAAM,KAAK;AAEb,cAAM,uBAAuB,MAAM,IAAI,MAAM,iBAAiB;AAG9D,gCACE,QAAQ,KAAK,MAAM,IAAI,CAAC,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,CAAC;AAC1D,gBAAQ,SAAS,MAAM,GAAG;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF;AAKO,IAAM,mBAAmD,CAAC,UAAU;AACzE,QAAM,YAAY,MAAM,SAAS,gBAAgB;AAEjD,MAAI,aAAa,UAAU,QAAQ,KAAK,IAAI,GAAG;AAC7C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,gBAAgB;AAAA,QACd,GAAG,OAAO,SAAS;AAAA,QACnB,kBAAkB;AAAA,UAChB,GAAI,MAAM,SAAS,gBAAgB,oBAAoB,CAAC;AAAA,UACxD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,0BAAsB;AAAA,EACjC;AAAA,MACA,6CAAc,gBAAgB;AAChC;","names":["import_react","React","Editor","import_react","React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,85 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/component/index.tsx
+import React from "react";
+import Editor from "@monaco-editor/react";
+import { Flex } from "@chakra-ui/react";
+var CodeEditorComponent = (props) => {
+  const { code, run } = props;
+  return /* @__PURE__ */ React.createElement(Flex, { h: "50vh" }, /* @__PURE__ */ React.createElement(
+    Editor,
+    {
+      theme: "vs-dark",
+      value: code,
+      language: "json",
+      options: {
+        formatOnPaste: true
+      },
+      onChange: (val) => {
+        run(val);
+      }
+    }
+  ));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset
+} from "@player-tools/dsl";
+var CodeEditor = (props) => {
+  const { exp, binding, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "code-editor", ...rest }, /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), /* @__PURE__ */ React2.createElement("property", { name: "exp" }, exp.toValue()));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/transform/index.ts
+import { compose, composeBefore } from "@player-ui/asset-transform-plugin";
+var transform = (asset, options) => {
+  return {
+    ...asset,
+    code: asset.binding === void 0 ? "" : JSON.stringify(
+      options.data.model.get(asset.binding, {
+        includeInvalid: true,
+        formatted: false
+      }),
+      null,
+      2
+    ),
+    run(code) {
+      if (asset.exp) {
+        const referencedExpression = asset.exp.match(/{{\s*(.*?)\s*}}/);
+        referencedExpression && options.data.model.set([[referencedExpression[1], code]]);
+        options.evaluate(asset.exp);
+      }
+    }
+  };
+};
+var expPropTransform = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...asset.plugins?.stringResolver?.propertiesToSkip ?? [],
+          "exp"
+        ]
+      }
+    }
+  };
+};
+var codeEditorTransform = compose(
+  transform,
+  composeBefore(expPropTransform)
+);
+export {
+  CodeEditor,
+  CodeEditorComponent,
+  codeEditorTransform,
+  expPropTransform,
+  transform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,85 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/component/index.tsx
+import React from "react";
+import Editor from "@monaco-editor/react";
+import { Flex } from "@chakra-ui/react";
+var CodeEditorComponent = (props) => {
+  const { code, run } = props;
+  return /* @__PURE__ */ React.createElement(Flex, { h: "50vh" }, /* @__PURE__ */ React.createElement(
+    Editor,
+    {
+      theme: "vs-dark",
+      value: code,
+      language: "json",
+      options: {
+        formatOnPaste: true
+      },
+      onChange: (val) => {
+        run(val);
+      }
+    }
+  ));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset
+} from "@player-tools/dsl";
+var CodeEditor = (props) => {
+  const { exp, binding, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "code-editor", ...rest }, /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), /* @__PURE__ */ React2.createElement("property", { name: "exp" }, exp.toValue()));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/transform/index.ts
+import { compose, composeBefore } from "@player-ui/asset-transform-plugin";
+var transform = (asset, options) => {
+  return {
+    ...asset,
+    code: asset.binding === void 0 ? "" : JSON.stringify(
+      options.data.model.get(asset.binding, {
+        includeInvalid: true,
+        formatted: false
+      }),
+      null,
+      2
+    ),
+    run(code) {
+      if (asset.exp) {
+        const referencedExpression = asset.exp.match(/{{\s*(.*?)\s*}}/);
+        referencedExpression && options.data.model.set([[referencedExpression[1], code]]);
+        options.evaluate(asset.exp);
+      }
+    }
+  };
+};
+var expPropTransform = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...asset.plugins?.stringResolver?.propertiesToSkip ?? [],
+          "exp"
+        ]
+      }
+    }
+  };
+};
+var codeEditorTransform = compose(
+  transform,
+  composeBefore(expPropTransform)
+);
+export {
+  CodeEditor,
+  CodeEditorComponent,
+  codeEditorTransform,
+  expPropTransform,
+  transform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/component/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/dsl/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/code-editor/src/transform/index.ts"],"sourcesContent":["import React from \"react\";\nimport Editor from \"@monaco-editor/react\";\nimport type { TransformedCodeEditor } from \"../types\";\nimport { Flex } from \"@chakra-ui/react\";\n\nexport const CodeEditorComponent = (props: TransformedCodeEditor) => {\n  const { code, run } = props;\n\n  return (\n    <Flex h=\"50vh\">\n      <Editor\n        theme=\"vs-dark\"\n        value={code}\n        language=\"json\"\n        options={{\n          formatOnPaste: true,\n        }}\n        onChange={(val) => {\n          run(val);\n        }}\n      />\n    </Flex>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  BindingTemplateInstance,\n  ExpressionTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { CodeEditorAsset } from \"../types\";\n\n/**\n * Defines the component DSL representation, so users of this plugin can author Player-UI\n * content leveraging .jsx/.tsx syntax.\n */\nexport const CodeEditor = (\n  props: Omit<\n    AssetPropsWithChildren<CodeEditorAsset>,\n    \"binding\" | \"expression\"\n  > & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n    /** Expression as template string */\n    exp: ExpressionTemplateInstance;\n  }\n) => {\n  const { exp, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"code-editor\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      <property name=\"exp\">{exp.toValue()}</property>\n    </Asset>\n  );\n};\n","import type {\n  Asset,\n  BeforeTransformFunction,\n  TransformFunction,\n} from \"@player-ui/player\";\nimport type { CodeEditorAsset, TransformedCodeEditor } from \"../types\";\nimport { compose, composeBefore } from \"@player-ui/asset-transform-plugin\";\n\n/**\n * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)\n * and embeds Player state and methods:\n */\nexport const transform: TransformFunction<\n  CodeEditorAsset,\n  TransformedCodeEditor\n> = (asset, options) => {\n  return {\n    ...asset,\n    code:\n      asset.binding === undefined\n        ? \"\"\n        : JSON.stringify(\n            options.data.model.get(asset.binding, {\n              includeInvalid: true,\n              formatted: false,\n            }),\n            null,\n            2\n          ),\n    run(code?: string) {\n      if (asset.exp) {\n        // get the referenced expression property holder from the expression\n        const referencedExpression = asset.exp.match(/{{\\s*(.*?)\\s*}}/);\n        // set the referenced expression property to the new expression\n        // so it is available to the asset.exp\n        referencedExpression &&\n          options.data.model.set([[referencedExpression[1], code]]);\n        options.evaluate(asset.exp);\n      }\n    },\n  };\n};\n\n/**\n * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist\n */\nexport const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {\n  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;\n\n  if (skipArray && skipArray.indexOf(\"exp\") > 1) {\n    return asset;\n  }\n\n  return {\n    ...asset,\n    plugins: {\n      ...asset.plugins,\n      stringResolver: {\n        ...asset?.plugins?.stringResolver,\n        propertiesToSkip: [\n          ...(asset.plugins?.stringResolver?.propertiesToSkip ?? []),\n          \"exp\",\n        ],\n      },\n    },\n  };\n};\n\nexport const codeEditorTransform = compose(\n  transform,\n  composeBefore(expPropTransform)\n);\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,YAAY;AAEnB,SAAS,YAAY;AAEd,IAAM,sBAAsB,CAAC,UAAiC;AACnE,QAAM,EAAE,MAAM,IAAI,IAAI;AAEtB,SACE,oCAAC,QAAK,GAAE,UACN;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAS;AAAA,MACT,SAAS;AAAA,QACP,eAAe;AAAA,MACjB;AAAA,MACA,UAAU,CAAC,QAAQ;AACjB,YAAI,GAAG;AAAA,MACT;AAAA;AAAA,EACF,CACF;AAEJ;;;ACvBA,OAAOA,YAAW;AAClB;AAAA,EAEE;AAAA,OAGK;AAOA,IAAM,aAAa,CACxB,UASG;AACH,QAAM,EAAE,KAAK,SAAS,GAAG,KAAK,IAAI;AAElC,SACE,gBAAAA,OAAA,cAAC,SAAM,MAAK,eAAe,GAAG,QAC5B,gBAAAA,OAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GAC5C,gBAAAA,OAAA,cAAC,cAAS,MAAK,SAAO,IAAI,QAAQ,CAAE,CACtC;AAEJ;;;AC1BA,SAAS,SAAS,qBAAqB;AAMhC,IAAM,YAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MACE,MAAM,YAAY,SACd,KACA,KAAK;AAAA,MACH,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,QACpC,gBAAgB;AAAA,QAChB,WAAW;AAAA,MACb,CAAC;AAAA,MACD;AAAA,MACA;AAAA,IACF;AAAA,IACN,IAAI,MAAe;AACjB,UAAI,MAAM,KAAK;AAEb,cAAM,uBAAuB,MAAM,IAAI,MAAM,iBAAiB;AAG9D,gCACE,QAAQ,KAAK,MAAM,IAAI,CAAC,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,CAAC;AAC1D,gBAAQ,SAAS,MAAM,GAAG;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF;AAKO,IAAM,mBAAmD,CAAC,UAAU;AACzE,QAAM,YAAY,MAAM,SAAS,gBAAgB;AAEjD,MAAI,aAAa,UAAU,QAAQ,KAAK,IAAI,GAAG;AAC7C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,gBAAgB;AAAA,QACd,GAAG,OAAO,SAAS;AAAA,QACnB,kBAAkB;AAAA,UAChB,GAAI,MAAM,SAAS,gBAAgB,oBAAoB,CAAC;AAAA,UACxD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,sBAAsB;AAAA,EACjC;AAAA,EACA,cAAc,gBAAgB;AAChC;","names":["React"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@devtools-ui/code-editor",
+  "version": "0.1.0--canary.17.811",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@devtools-ui/text": "0.1.0--canary.17.811",
+    "@devtools-ui/collection": "0.1.0--canary.17.811",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@player-tools/dsl": "0.5.2--canary.87.2261",
+    "@player-ui/asset-transform-plugin": "0.7.2-next.4",
+    "@player-ui/player": "0.7.2-next.4",
+    "@player-ui/react": "0.7.2-next.4",
+    "@player-ui/types": "0.7.2-next.4",
+    "@types/react": "^18.2.51",
+    "dlv": "^1.1.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "framer-motion": "^11.0.8",
+    "react": "^18.2.0",
+    "@monaco-editor/react": "^4.6.0",
+    "tslib": "^2.6.2"
+  },
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "peerDependencies": {}
+}

package/src/component/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Editor from "@monaco-editor/react";
+import type { TransformedCodeEditor } from "../types";
+import { Flex } from "@chakra-ui/react";
+
+export const CodeEditorComponent = (props: TransformedCodeEditor) => {
+  const { code, run } = props;
+
+  return (
+    <Flex h="50vh">
+      <Editor
+        theme="vs-dark"
+        value={code}
+        language="json"
+        options={{
+          formatOnPaste: true,
+        }}
+        onChange={(val) => {
+          run(val);
+        }}
+      />
+    </Flex>
+  );
+};

package/src/dsl/__tests__/index.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { render, expression as e, binding as b } from "@player-tools/dsl";
+import { CodeEditor } from "../";
+
+describe("DSL: CodeEditor", () => {
+  test("Renders code-editor", async () => {
+    const rendered = await render(
+      <CodeEditor exp={e`my_expression`} binding={b`my_binding`} />
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "code-editor",
+      exp: "my_expression",
+      binding: "my_binding",
+    });
+  });
+});

package/src/dsl/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {
+  AssetPropsWithChildren,
+  Asset,
+  BindingTemplateInstance,
+  ExpressionTemplateInstance,
+} from "@player-tools/dsl";
+import type { CodeEditorAsset } from "../types";
+
+/**
+ * Defines the component DSL representation, so users of this plugin can author Player-UI
+ * content leveraging .jsx/.tsx syntax.
+ */
+export const CodeEditor = (
+  props: Omit<
+    AssetPropsWithChildren<CodeEditorAsset>,
+    "binding" | "expression"
+  > & {
+    /** The binding */
+    binding: BindingTemplateInstance;
+    /** Expression as template string */
+    exp: ExpressionTemplateInstance;
+  }
+) => {
+  const { exp, binding, ...rest } = props;
+
+  return (
+    <Asset type="code-editor" {...rest}>
+      <property name="binding">{binding.toValue()}</property>
+      <property name="exp">{exp.toValue()}</property>
+    </Asset>
+  );
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./component";
+export * from "./dsl";
+export * from "./transform";

package/src/transform/index.ts

@@ -0,0 +1,72 @@
+import type {
+  Asset,
+  BeforeTransformFunction,
+  TransformFunction,
+} from "@player-ui/player";
+import type { CodeEditorAsset, TransformedCodeEditor } from "../types";
+import { compose, composeBefore } from "@player-ui/asset-transform-plugin";
+
+/**
+ * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)
+ * and embeds Player state and methods:
+ */
+export const transform: TransformFunction<
+  CodeEditorAsset,
+  TransformedCodeEditor
+> = (asset, options) => {
+  return {
+    ...asset,
+    code:
+      asset.binding === undefined
+        ? ""
+        : JSON.stringify(
+            options.data.model.get(asset.binding, {
+              includeInvalid: true,
+              formatted: false,
+            }),
+            null,
+            2
+          ),
+    run(code?: string) {
+      if (asset.exp) {
+        // get the referenced expression property holder from the expression
+        const referencedExpression = asset.exp.match(/{{\s*(.*?)\s*}}/);
+        // set the referenced expression property to the new expression
+        // so it is available to the asset.exp
+        referencedExpression &&
+          options.data.model.set([[referencedExpression[1], code]]);
+        options.evaluate(asset.exp);
+      }
+    },
+  };
+};
+
+/**
+ * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist
+ */
+export const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...(asset.plugins?.stringResolver?.propertiesToSkip ?? []),
+          "exp",
+        ],
+      },
+    },
+  };
+};
+
+export const codeEditorTransform = compose(
+  transform,
+  composeBefore(expPropTransform)
+);

package/src/types/index.ts

@@ -0,0 +1,16 @@
+import type { Asset } from "@player-ui/types";
+
+export interface CodeEditorAsset extends Asset<"code-editor"> {
+  /** binding pointing to the JSON object to edit */
+  binding?: string;
+  /** An expression to execute on the code change */
+  exp?: string;
+}
+
+/** A stateful instance of the asset */
+export interface TransformedCodeEditor extends CodeEditorAsset {
+  /** The JSON object to edit as string */
+  code: string;
+  /** Transformed expression to execute on the code change */
+  run: (code: string | undefined) => void;
+}

package/types/component/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TransformedCodeEditor } from "../types";
+export declare const CodeEditorComponent: (props: TransformedCodeEditor) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/dsl/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { AssetPropsWithChildren, BindingTemplateInstance, ExpressionTemplateInstance } from "@player-tools/dsl";
+import type { CodeEditorAsset } from "../types";
+/**
+ * Defines the component DSL representation, so users of this plugin can author Player-UI
+ * content leveraging .jsx/.tsx syntax.
+ */
+export declare const CodeEditor: (props: Omit<AssetPropsWithChildren<CodeEditorAsset>, "binding" | "expression"> & {
+    /** The binding */
+    binding: BindingTemplateInstance;
+    /** Expression as template string */
+    exp: ExpressionTemplateInstance;
+}) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./component";
+export * from "./dsl";
+export * from "./transform";
+//# sourceMappingURL=index.d.ts.map

package/types/transform/index.d.ts

@@ -0,0 +1,13 @@
+import type { Asset, BeforeTransformFunction, TransformFunction } from "@player-ui/player";
+import type { CodeEditorAsset, TransformedCodeEditor } from "../types";
+/**
+ * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)
+ * and embeds Player state and methods:
+ */
+export declare const transform: TransformFunction<CodeEditorAsset, TransformedCodeEditor>;
+/**
+ * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist
+ */
+export declare const expPropTransform: BeforeTransformFunction<Asset>;
+export declare const codeEditorTransform: import("@player-ui/player").TransformFunctions;
+//# sourceMappingURL=index.d.ts.map

package/types/types/index.d.ts

@@ -0,0 +1,15 @@
+import type { Asset } from "@player-ui/types";
+export interface CodeEditorAsset extends Asset<"code-editor"> {
+    /** binding pointing to the JSON object to edit */
+    binding?: string;
+    /** An expression to execute on the code change */
+    exp?: string;
+}
+/** A stateful instance of the asset */
+export interface TransformedCodeEditor extends CodeEditorAsset {
+    /** The JSON object to edit as string */
+    code: string;
+    /** Transformed expression to execute on the code change */
+    run: (code: string | undefined) => void;
+}
+//# sourceMappingURL=index.d.ts.map