perf: move editor basic setup to app

apps/codeimage/package.json

@@ -4,7 +4,7 @@
   "version": "0.18.0",
   "scripts": {
     "start": "vite",
-    "dev": "vite --host --force",
+    "dev": "vite --host",
     "build": "rimraf dist && vite build",
     "build-sw": "rimraf dist && cross-env BASE_URL=/ SW=true SOURCE_MAP=true RELOAD_SW=true vite build",
     "serve:https": "serve dist",
@@ -32,9 +32,9 @@
   },
   "dependencies": {
     "@codeimage/config": "workspace:*",
+    "@codeimage/dom-export": "workspace:*",
     "@codeimage/locale": "workspace:*",
     "@codeimage/theme": "workspace:*",
-    "@codeimage/dom-export": "workspace:*",
     "@codeimage/ui": "workspace:*",
     "@codemirror/autocomplete": "^0.20.1",
     "@codemirror/commands": "^0.20.0",

apps/codeimage/src/App.tsx

@@ -11,9 +11,9 @@ import {fromObservableObject} from '@core/hooks/from-observable-object';
 import {useModality} from '@core/hooks/isMobile';
 import {useEffects} from '@core/store/use-effect';
 import {initEffects} from '@ngneat/effects';
-import {createEffect, createSignal, on, Show} from 'solid-js';
+import {createEffect, createSignal, lazy, on, Show} from 'solid-js';
 import {BottomBar} from './components/BottomBar/BottomBar';
-import {CustomEditor} from './components/CustomEditor/CustomEditor';
+import CustomEditor from './components/CustomEditor/CustomEditor';
 import {Footer} from './components/Footer/Footer';
 import {Frame} from './components/Frame/Frame';
 import {FrameHandler} from './components/Frame/FrameHandler';

apps/codeimage/src/components/CustomEditor/CustomEditor.tsx

@@ -1,12 +1,9 @@
-import {
-  EDITOR_BASE_SETUP,
-  SUPPORTED_LANGUAGES,
-  SUPPORTED_THEMES,
-} from '@codeimage/config';
+import {SUPPORTED_LANGUAGES, SUPPORTED_THEMES} from '@codeimage/config';
 import {getActiveEditorStore} from '@codeimage/store/editor/createActiveEditor';
 import {getRootEditorStore} from '@codeimage/store/editor/createEditors';
+import {Loading} from '@codeimage/ui';
 import {EditorView, lineNumbers} from '@codemirror/view';
-import {MANY_THEMES} from '@core/configuration';
+import {SUPPORTED_FONTS} from '@core/configuration/font';
 import {ReplaySubject} from 'rxjs';
 import {createCodeMirror} from 'solid-codemirror';
 import {
@@ -15,17 +12,21 @@ import {
   createMemo,
   createResource,
   onCleanup,
+  Suspense,
 } from 'solid-js';
-import {SUPPORTED_FONTS} from '../../core/configuration/font';
 import {createCustomFontExtension} from './custom-font-extension';
 import {fixCodeMirrorAriaRole} from './fix-cm-aria-roles-lighthouse';
 import {observeFocusExtension} from './observe-focus-extension';
 
-export const CustomEditor = () => {
+export default function CustomEditor() {
+  const [basicSetup] = createResource(
+    () => true,
+    () => import('./basic-setup').then(e => e.EDITOR_BASE_SETUP),
+  );
+
   let editorEl!: HTMLDivElement;
-  fixCodeMirrorAriaRole(() => editorEl);
   const destroy$ = new ReplaySubject<void>(1);
-  const themes = MANY_THEMES;
+  const themes = SUPPORTED_THEMES;
   const languages = SUPPORTED_LANGUAGES;
   const fonts = SUPPORTED_FONTS;
 
@@ -118,23 +119,23 @@ export const CustomEditor = () => {
   });
 
   createEffect(() => {
-    batch(() =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      // TODO: to fix type deep instantion
-      setOptions({
-        extensions: [
-          EDITOR_BASE_SETUP,
-          baseTheme,
-          supportsLineWrap,
-          observeFocusExtension(focused => setFocused(focused)),
-          customFontExtension(),
-          currentLanguage() || [],
-          currentTheme(),
-          editorOptions.showLineNumbers ? lineNumbers() : [],
-        ],
-      }),
-    );
+    const $basicSetup = basicSetup();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // TODO: to fix type deep instantion
+    setOptions({
+      extensions: [
+        $basicSetup || [],
+        baseTheme,
+        supportsLineWrap,
+        observeFocusExtension(focused => setFocused(focused)),
+        customFontExtension(),
+        currentLanguage() || [],
+        currentTheme(),
+        editorOptions.showLineNumbers ? lineNumbers() : [],
+      ],
+    });
+    fixCodeMirrorAriaRole(() => editorEl);
   });
 
   onCleanup(() => {
@@ -144,8 +145,12 @@ export const CustomEditor = () => {
   });
 
   return (
-    <code class={`language-${selectedLanguage()?.id ?? 'default'}`}>
-      <div ref={ref => (editorEl = ref)} class={`solid-cm`} />
-    </code>
+    <Suspense fallback={<Loading size={'3x'} />}>
+      {!basicSetup() && (
+        <code class={`language-${selectedLanguage()?.id ?? 'default'}`}>
+          <div ref={ref => (editorEl = ref)} class={`solid-cm`} />
+        </code>
+      )}
+    </Suspense>
   );
-};
+}

apps/codeimage/src/core/configuration.ts

@@ -1,30 +1,19 @@
-import {createConfiguration, SUPPORTED_LOCALES} from '@codeimage/config';
+import {
+  createConfiguration,
+  SUPPORTED_LOCALES,
+  SUPPORTED_THEMES,
+} from '@codeimage/config';
 import {version} from '../../package.json';
 import {
   SUPPORTED_FONTS,
   SUPPORTED_FONTS_DICTIONARY,
 } from './configuration/font';
+import {mapToDictionary} from './helpers/mapToDictionary';
 
-export const MANY_THEMES = [
-  import('@codeimage/theme/vscode-dark').then(m => m.vsCodeDarkTheme),
-  import('@codeimage/theme/night-owl').then(m => m.nightOwlTheme),
-  import('@codeimage/theme/dracula').then(m => m.draculaTheme),
-  import('@codeimage/theme/material-ocean').then(m => m.materialOceanTheme),
-  import('@codeimage/theme/synthwave84').then(m => m.synthwave84Theme),
-  import('@codeimage/theme/material-volcano').then(m => m.materialVolcanoTheme),
-  import('@codeimage/theme/one-dark').then(m => m.oneDarkTheme),
-  import('@codeimage/theme/light').then(m => m.lightTheme),
-  import('@codeimage/theme/material-palenight').then(
-    m => m.materialPalenightTheme,
-  ),
-  import('@codeimage/theme/duotone-sea').then(m => m.duotoneSeaTheme),
-  import('@codeimage/theme/duotone-dark').then(m => m.duotoneDarkTheme),
-  import('@codeimage/theme/coldark').then(m => m),
-  import('@codeimage/theme/material-light').then(m => m.materialLightTheme),
-];
-
-export let SUPPORTED_THEMES_DICTIONARY = {};
-export let SUPPORTED_THEMES = [];
+export const SUPPORTED_THEMES_DICTIONARY = mapToDictionary(
+  SUPPORTED_THEMES,
+  'id',
+);
 
 export const [appEnvironment] = createConfiguration({
   version,
@@ -49,7 +38,7 @@ export const [appEnvironment] = createConfiguration({
         '\n',
       // TODO: should be auto
       languageId: 'typescript',
-      theme: '',
+      theme: SUPPORTED_THEMES_DICTIONARY.vsCodeDarkTheme,
       font: SUPPORTED_FONTS_DICTIONARY['jetbrains-mono'],
     },
   } as const,

apps/codeimage/vite.config.ts

@@ -84,6 +84,7 @@ export default defineConfig(({mode}) => ({
     brotliSize: true,
     sourcemap: false,
     minify: true,
+
     polyfillModulePreload: false,
     polyfillDynamicImport: false,
     cssCodeSplit: true,

packages/config/src/public-api.ts

@@ -6,5 +6,4 @@ export * from './lib/types/terminal-def';
 export {SUPPORTED_LOCALES} from './lib/base/locales';
 export {SUPPORTED_LANGUAGES} from './lib/base/languages';
 export {SUPPORTED_THEMES} from './lib/base/themes';
-export {EDITOR_BASE_SETUP} from './lib/base/editor-basic-setup';
 export {AVAILABLE_COLORS, AVAILABLE_GRADIENTS} from './lib/base/colors';

packages/dom-export/package.json

@@ -53,7 +53,6 @@
   ],
   "devDependencies": {
     "@types/node": "17.0.40",
-    "imagediff": "^1.0.8",
     "lint-staged": "^13.0.0",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",

packages/theme/package.json

@@ -122,7 +122,7 @@
     }
   },
   "scripts": {
-    "build": "vite build",
+    "build": "rollup -c",
     "build:watch": "vite build --watch",
     "preview": "vite preview",
     "pre-commit": "lint-staged --relative",

packages/theme/rollup.config.js

@@ -1,8 +1,6 @@
-import {resolve} from 'path';
 import {defineConfig} from 'rollup';
 import typescript from '@rollup/plugin-typescript';
 import * as pkg from './package.json';
-import ts from 'typescript';
 
 const themes = [
   'arc-dark',