@snack-uikit/code-editor 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2025-03-27)
+
+
+### BREAKING CHANGES
+
+
+* **FF-6299:** Remove module level initial function. ([5b2280a](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/commits/5b2280af6fd2a14f990598e717d117818bf10353))
+
+
+
+
 ## 0.5.2 (2025-03-17)
 
 ### Only dependencies have been changed

package/README.md

@@ -41,15 +41,39 @@
 [//]: DOCUMENTATION_SECTION_END
 
 ### Поддержка YAML
-Для обеспечения полноценной работы YAML Monaco Editor необходимо подключить `yaml.worker`. Это можно сделать следующими способами: с использованием [`window.MonacoEnvironment`](https://www.npmjs.com/package/monaco-yaml#usage) или с помощью плагина [`MonacoWebpackPlugin`](https://www.npmjs.com/package/monaco-yaml#using-monaco-webpack-loader-plugin) . Подробнее с `monaco-yaml` можно ознакомиться [тут]((https://www.npmjs.com/package/monaco-yaml))
+
+Для обеспечения полноценной работы YAML Monaco Editor необходимо подключить `yaml.worker`. Это можно сделать следующими способами: с использованием [`window.MonacoEnvironment`](https://www.npmjs.com/package/monaco-yaml#usage) или с помощью плагина [`MonacoWebpackPlugin`](https://www.npmjs.com/package/monaco-yaml#using-monaco-webpack-loader-plugin) . Подробнее с `monaco-yaml` можно ознакомиться [тут](<(https://www.npmjs.com/package/monaco-yaml)>)
 
 ### Как редактор загружает worker?
+
 Плагин создает новые точки входа каждого build-in воркера и для каждого дабавленного отдельно. Плагин создат глобальную переменную, используя которую редкатор будет загружать нужный воркер на основе текущего `language`.
 
 Чтобы управлять конфигурацией загрузчика Monaco Editor, добавьте
+
 ```typescript
 import * as monaco from 'monaco-editor';
 import { loader } from '@snack-uikit/code-editor';
 loader.config({ monaco });
 ```
+
 Это позволяет динамически настраивать пути и другие параметры при инициализации редактора.
+
+Для загрузки `monaco-editor` асинхронно можно воспользоваться следующим способом:
+
+```typescript
+// import * as monaco from 'monaco-editor'; // ~3Mb
+import { lazy, Suspense } from 'react';
+import { loader, CodeEditor } from '@snack-uikit/code-editor';
+
+const Editor = lazy(async () => {
+  const monaco = await import('monaco-editor').then(module => module.default);
+  loader.config({ monaco });
+  return { default: CodeEditor };
+});
+
+const MyComponent = () => {
+  return <Suspense fallback={<Loader height={height} />}>
+   <Editor />
+  </Suspense>
+}
+```

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/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/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.2",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -46,5 +46,5 @@
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "d12776ae6b32233f12df33facc32de6a8758706a"
+  "gitHead": "2f7303852cd42843ff939a7c5eaa0dceeb5a49df"
 }

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/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] };