@snack-uikit/code-editor 0.5.1 → 0.5.2-preview-76dd9d31.0

package/README.md

@@ -36,6 +36,11 @@
 | onMount | `OnMount` | - | Signature: function(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void An event is emitted when the editor is mounted It gets the editor instance as a first argument and the monaco instance as a second Defaults to "noop" |
 | onChange | `OnChange` | - | Signature: function(value: string \| undefined, ev: monaco.editor.IModelContentChangedEvent) => void An event is emitted when the content of the current model is changed |
 | onValidate | `OnValidate` | - | Signature: function(markers: monaco.editor.IMarker[]) => void An event is emitted when the content of the current model is changed and the current model markers are ready Defaults to "noop" |
+## asyncCodeEditor
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| configLoader* | `() => Promise<{ paths?: { vs?: string; }; 'vs/nls'?: { availableLanguages?: object; }; monaco?: typeof import("/Users/alssmirnov/p/snack-uikit/node_modules/monaco-editor/esm/vs/editor/editor.api"); }>` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/CodeEditor.js

@@ -27,7 +27,6 @@ const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
-(0, utils_2.initLoaderConfig)();
 function CodeEditor(_a) {
   var {
       themeName,

package/dist/cjs/components/asyncLoader.d.ts

@@ -0,0 +1,9 @@
+import { loader } from '@monaco-editor/react';
+import { CodeEditor } from './CodeEditor';
+type LoaderConfig = Parameters<(typeof loader)['config']>[0];
+export declare const asyncCodeEditor: (opts: {
+    configLoader: () => Promise<LoaderConfig>;
+}) => Promise<{
+    default: typeof CodeEditor;
+}>;
+export {};

package/dist/cjs/components/asyncLoader.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.asyncCodeEditor = void 0;
+const react_1 = require("@monaco-editor/react");
+const CodeEditor_1 = require("./CodeEditor");
+const asyncCodeEditor = opts => __awaiter(void 0, void 0, void 0, function* () {
+  const {
+    configLoader
+  } = opts;
+  const config = yield configLoader();
+  react_1.loader.config(config);
+  return {
+    default: CodeEditor_1.CodeEditor
+  };
+});
+exports.asyncCodeEditor = asyncCodeEditor;

package/dist/cjs/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './CodeEditor';
 export * from './types';
+export * from './asyncLoader';

package/dist/cjs/components/index.js

@@ -23,4 +23,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 __exportStar(require("./CodeEditor"), exports);
-__exportStar(require("./types"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./asyncLoader"), exports);

package/dist/cjs/components/utils.d.ts

@@ -2,5 +2,4 @@ import { SchemasSettings } from 'monaco-yaml';
 import { JsonSchema } from './types';
 export declare function rgb2hsl(HTMLcolor: string): number[];
 export declare function isDark(color: string): boolean;
-export declare function initLoaderConfig(): void;
 export declare const getJsonSchema: (jsonSchema?: JsonSchema) => SchemasSettings | undefined;

package/dist/cjs/components/utils.js

@@ -11,8 +11,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.getJsonSchema = void 0;
 exports.rgb2hsl = rgb2hsl;
 exports.isDark = isDark;
-exports.initLoaderConfig = initLoaderConfig;
-const react_1 = require("@monaco-editor/react");
 const chroma_js_1 = __importDefault(require("chroma-js"));
 const constants_1 = require("./constants");
 function rgb2hsl(HTMLcolor) {
@@ -48,14 +46,6 @@ function isDark(color) {
   const [h, _, l] = rgb2hsl(color);
   return h < 0.55 && l >= 0.5 || h >= 0.55 && l >= 0.75;
 }
-function initLoaderConfig() {
-  if (!window) {
-    return;
-  }
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window['__snack-code-editor-loader-config__'] && react_1.loader.config(window['__snack-code-editor-loader-config__']);
-}
 const getJsonSchema = jsonSchema => jsonSchema && Object.assign(Object.assign({}, jsonSchema), {
   uri: (jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.uri) || constants_1.DEFAULT_SCHEMA_URI,
   fileMatch: [jsonSchema.fileMatch]

package/dist/esm/components/CodeEditor.js

@@ -18,8 +18,7 @@ import { extractSupportProps, isBrowser } from '@snack-uikit/utils';
 import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.css';
-import { initLoaderConfig, isDark } from './utils';
-initLoaderConfig();
+import { isDark } from './utils';
 export function CodeEditor(_a) {
     var { themeName, className, theme, options, loading, hasBackground = true, onMount, language } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language"]);
     const monaco = useMonaco();

package/dist/esm/components/asyncLoader.d.ts

@@ -0,0 +1,9 @@
+import { loader } from '@monaco-editor/react';
+import { CodeEditor } from './CodeEditor';
+type LoaderConfig = Parameters<(typeof loader)['config']>[0];
+export declare const asyncCodeEditor: (opts: {
+    configLoader: () => Promise<LoaderConfig>;
+}) => Promise<{
+    default: typeof CodeEditor;
+}>;
+export {};

package/dist/esm/components/asyncLoader.js

@@ -0,0 +1,17 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { loader } from '@monaco-editor/react';
+import { CodeEditor } from './CodeEditor';
+export const asyncCodeEditor = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+    const { configLoader } = opts;
+    const config = yield configLoader();
+    loader.config(config);
+    return { default: CodeEditor };
+});

package/dist/esm/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './CodeEditor';
 export * from './types';
+export * from './asyncLoader';

package/dist/esm/components/index.js

@@ -1,2 +1,3 @@
 export * from './CodeEditor';
 export * from './types';
+export * from './asyncLoader';

package/dist/esm/components/utils.d.ts

@@ -2,5 +2,4 @@ import { SchemasSettings } from 'monaco-yaml';
 import { JsonSchema } from './types';
 export declare function rgb2hsl(HTMLcolor: string): number[];
 export declare function isDark(color: string): boolean;
-export declare function initLoaderConfig(): void;
 export declare const getJsonSchema: (jsonSchema?: JsonSchema) => SchemasSettings | undefined;

package/dist/esm/components/utils.js

@@ -1,4 +1,3 @@
-import { loader } from '@monaco-editor/react';
 import chroma from 'chroma-js';
 import { DEFAULT_SCHEMA_URI } from './constants';
 export function rgb2hsl(HTMLcolor) {
@@ -38,12 +37,4 @@ export function isDark(color) {
     const [h, _, l] = rgb2hsl(color);
     return (h < 0.55 && l >= 0.5) || (h >= 0.55 && l >= 0.75);
 }
-export function initLoaderConfig() {
-    if (!window) {
-        return;
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    window['__snack-code-editor-loader-config__'] && loader.config(window['__snack-code-editor-loader-config__']);
-}
 export const getJsonSchema = (jsonSchema) => jsonSchema && Object.assign(Object.assign({}, jsonSchema), { uri: (jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.uri) || DEFAULT_SCHEMA_URI, fileMatch: [jsonSchema.fileMatch] });

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.1",
+  "version": "0.5.2-preview-76dd9d31.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -46,5 +46,5 @@
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "ec4e54b1ea5c4455ca404632e1f205e22b881f98"
+  "gitHead": "77dd00305b277c6ffee68e32451d536d8da2dca2"
 }

package/src/components/CodeEditor.tsx

@@ -9,9 +9,7 @@ import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from
 import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.scss';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
-import { initLoaderConfig, isDark } from './utils';
-
-initLoaderConfig();
+import { isDark } from './utils';
 
 export type CodeEditorProps = WithSupportProps<{
   /**

package/src/components/asyncLoader.tsx

@@ -0,0 +1,14 @@
+import { loader } from '@monaco-editor/react';
+
+import { CodeEditor } from './CodeEditor';
+
+type LoaderConfig = Parameters<(typeof loader)['config']>[0];
+
+export const asyncCodeEditor = async (opts: { configLoader: () => Promise<LoaderConfig> }) => {
+  const { configLoader } = opts;
+  const config = await configLoader();
+
+  loader.config(config);
+
+  return { default: CodeEditor };
+};

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './CodeEditor';
 export * from './types';
+export * from './asyncLoader';

package/src/components/utils.ts

@@ -1,4 +1,3 @@
-import { loader } from '@monaco-editor/react';
 import chroma from 'chroma-js';
 import { SchemasSettings } from 'monaco-yaml';
 
@@ -55,15 +54,5 @@ export function isDark(color: string) {
   return (h < 0.55 && l >= 0.5) || (h >= 0.55 && l >= 0.75);
 }
 
-export function initLoaderConfig() {
-  if (!window) {
-    return;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window['__snack-code-editor-loader-config__'] && loader.config(window['__snack-code-editor-loader-config__']);
-}
-
 export const getJsonSchema = (jsonSchema?: JsonSchema): SchemasSettings | undefined =>
   jsonSchema && { ...jsonSchema, uri: jsonSchema?.uri || DEFAULT_SCHEMA_URI, fileMatch: [jsonSchema.fileMatch] };