feat: simplify bundling

package.json

@@ -32,7 +32,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc --emitDeclarationOnly && rollup -c",
+    "build": "tsc --emitDeclarationOnly && NODE_ENV=production rollup -c",
     "dev": "tsc --emitDeclarationOnly && rollup -c -w",
     "test": "jest",
     "tdd": "jest --watch"
@@ -100,6 +100,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.6.0",
     "sass": "^1.52.1",
     "sinon": "^11.1.2",
     "sinon-chai": "^3.7.0",

rollup.config.js

@@ -1,59 +1,32 @@
 import babel from '@rollup/plugin-babel'
-import external from 'rollup-plugin-peer-deps-external'
 import del from 'rollup-plugin-delete'
 import pkg from './package.json'
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from "@rollup/plugin-node-resolve"
 import { terser } from 'rollup-plugin-terser'
 import copy from 'rollup-plugin-copy'
 import command from 'rollup-plugin-command';
 import scss from 'rollup-plugin-scss'
 import typescript from '@rollup/plugin-typescript';
 import dts from "rollup-plugin-dts";
+//import { visualizer } from "rollup-plugin-visualizer";
 
 const isDev = process.env.NODE_ENV !== 'production'
 const isYalcActivated = process.env.YALC === 'activated'
 
-export default [
-  {
-    input: "./src/codemirror-editor.ts",
-    inlineDynamicImports: true,
-    output: {
-      file: "./src/inputs/__generated/editor.js",
-      format: "esm",
-      strict: false
-    },
-    plugins: [
-      typescript(),
-      babel({
-        exclude: [
-          'docs/**',
-          'node_modules/**',
-          'src/inputs/editor.js'
-        ],
-        babelHelpers: 'bundled'
-      }),
-      resolve(),
-      commonjs(),
-      isDev ? undefined : terser()
-    ].filter(f => f)
-  }
-  ,{
+export default [{
     input: pkg.source,
     output: [
       { file: pkg.main, format: 'cjs' },
       { file: pkg.module, format: 'esm' }
     ],
     plugins: [
+//      visualizer(),
       del({ targets: ['dist/*', 'lib/*', 'examples/node_modules/@maif/react-forms/lib'], verbose: true }),
       typescript(),
       scss(),
-      external(),
       babel({
         exclude: [
           'docs/**',
-          'node_modules/**',
-          'src/inputs/__generated/editor.js'
+          'node_modules/**'
         ],
         babelHelpers: 'bundled'
       }),

src/codemirror-editor.ts

@@ -41,8 +41,7 @@ const languages = {
 export default function Editor(
     parent: Element | DocumentFragment,
     mode: LanguageMode,
-    onChange: (doc: string) => void,
-    value:{value: any} | any,
+
     tabSize = 1,
     readOnly = false,
     showLinesNumber = true,
@@ -54,7 +53,9 @@ export default function Editor(
         width: '-1',
         minWidth: '-1',
         maxWidth: '-1',
-    }
+    },
+    onChange?: (doc: string) => void,
+    value?:{value: any} | any,
 ) {
     const theme = EditorView.theme({
         '&': {
@@ -102,7 +103,7 @@ export default function Editor(
                 try {
                     if (vu.docChanged) {
                         const doc = vu.state.doc.toString();
-                        onChange(doc)
+                        onChange?.(doc)
                     }
                 } catch (_) {
 

src/inputs/CodeInput.tsx

@@ -1,7 +1,7 @@
 import React, { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { LanguageMode } from './constants';
 // @ts-ignore
-import Editor from './__generated/editor'
+import Editor from '../codemirror-editor'
 
 export function CodeInput({
   onChange,
@@ -41,10 +41,10 @@ export function CodeInput({
   setRef?: (editor: any) => void
 }) {
   const ref = useRef<any>()
-  const [editor, setEditor] = useState<Editor>()
+  const [editor, setEditor] = useState<any>()
 
   useEffect(() => {
-    const e = Editor(ref.current, mode, onChange, value, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle)
+    const e = Editor(ref.current, mode, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle, onChange, value, )
 
     ref.current.addEventListener("keydown", (e: Event) => {
       e.stopImmediatePropagation()