monacode

Monacodo

Um embalagem fino e modula em torno do editor de Mônaco e mais bonito

Explorando a viabilidade de importar o Monaco-Editor (que Powers vs Code) e módulos mais bonitos diretamente no navegador; Com o objetivo de facilitar uma linha de uma linha de trazer experiências de edição de código nativas como os aplicativos da Web sem uma etapa de construção.

Navios com todos os recursos geralmente encontrados no código VS pronta para uso: coisas como dicas de código, inferência de tipo, minimap, palete de comando, seleção de múltiplos currsores, localização e substituição, dobragem de código etc.

Além desses recursos, o Prettier foi integrado para que o acerto ⌘ + s formate o código.

⚡️ Confira a versão hospedada em https://monacode.live

Uso

Instale o módulo como um módulo NPM e importe -o usando o especificador do módulo nu, ou importe -o diretamente do 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 ) ;
} ) ;

Também é possível incorporar o editor ao seu aplicativo usando um iframe (consulte a demonstração):

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

Passe as opções de configuração para o iframe como parâmetros de pesquisa de URL, certificando -se de codificar os valores URI corretamente. Observe que, no entanto, não é possível passar nas opções de configuração aninhadas.

API

O módulo exporta uma única função padrão que aceita um objeto de configuração como um argumento. A configuração fornecida é fundida com uma configuração padrão que é um subconjunto das opções disponíveis para configurar os editores do Moanco. Alguns valores úteis a saber incluem:

• container : Um elemento HTML que existe no DOM (ou um ref se estiver usando o React/Préact)
• value : Uma string representando o código inicial a ser renderizado no editor
• language : uma string que representa qual idioma o editor deve experimentar o destaque da sintaxe e a dica para
• fontSize : um número indicando qual código de tamanho da fonte de pixel deve renderizar
• theme : Um identificador de string do tema desejado ou um URL para um tema JSON FILE

Chamar a exportação padrão retorna uma instância do editor de Mônaco subjacente. Saiba mais sobre como interagir com o editor lendo a documentação da API.

Desenvolvimento

Executando o seguinte comando a partir da raiz deste projeto usa servor para iniciar um servidor de desenvolvimento e abra seu editor e navegador no URL de localhost apropriado.

npm start

Produção

Executando o seguinte comando a partir da raiz deste projeto usa esbuild construa a fonte para um único arquivo index.min.js . Atualmente, esse processo leva ~ 1segundo e resulta em um arquivo de saída com pesagem de 4,6 MB (compressa até menos de 1 MB com o Brotli).

npm run build

Licença

Licenciado sob a licença do MIT.