monacode

Monacodo

Un envoltorio delgado de módulo es alrededor del editor de Mónaco y más bonito

Explorando la viabilidad de importar el editor monaco (que impulsa el código) y los módulos más bonitos directamente en el navegador; Con el objetivo de hacer que una línea sea fácil de traer un nativo como experiencias de edición de código a las aplicaciones web sin un paso de compilación.

Viajes con todas las características que generalmente se encuentran en el código VS de la caja: cosas como sugerencias de código, tipos de inferencia, minimap, paleta de comandos, selección de múltiples cursores, buscar y reemplazar, plegar el código, etc.

Además de estas características, se ha integrado Prettier para que el presentación ⌘ + s formateará el código.

⚡️ Visite la versión alojada en https://monacode.live

Uso

Instale el módulo como un módulo NPM e importarlo utilizando el especificador de módulo desnudo, o importarlo directamente desde Unpkg:

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

También es posible incrustar el editor en su aplicación utilizando un iframe (ver demostración):

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

Pase las opciones de configuración a los parámetros de búsqueda de URL como Iframe, asegurándose de codificar los valores de URI correctamente. Tenga en cuenta sin embargo, actualmente no es posible pasar en opciones de configuración anidada.

API

El módulo exporta una función predeterminada única que acepta un objeto de configuración como argumento. La configuración suministrada se fusiona con una configuración predeterminada que en sí misma es un subconjunto de las opciones disponibles para configurar editores de Moanko. Algunos valores útiles para saber incluyen:

• container : un elemento HTML que existe en el DOM (o una ref si usa React/Preact)
• value : una cadena que representa el código inicial que se representará dentro del editor
• language : una cadena que representa el lenguaje que debe probar el editor destacado y sugerir la sintaxis
• fontSize : un número que indica qué código de tamaño de fuente de píxeles debe render
• theme : Un identificador de cadena del tema deseado o una URL a un archivo JSON del tema

Llamar a la exportación predeterminada devuelve una instancia del editor de Monaco subyacente. Obtenga más información sobre cómo interactuar con el editor leyendo la documentación de la API.

Desarrollo

Ejecutando el siguiente comando desde la raíz de este proyecto utiliza servor para iniciar un servidor de desarrollo, luego abra su editor y navegador en la URL local de local.

npm start

Producción

Ejecutar el siguiente comando desde la raíz de este proyecto usa esbuild Built la fuente en un solo archivo index.min.js . Actualmente, este proceso toma ~ 1 segundo y da como resultado un archivo de salida que pesa 4.6 MB (compresas a menos de 1 MB con brotli).

npm run build

Licencia

Licenciado bajo la licencia del MIT.