# @idedoc/local-client

> Browser-based code and documentation editor.

Latest version **1.0.0** (published 2023-04-15) · 0 weekly downloads

## Install

```sh
npm install @idedoc/local-client
pnpm add @idedoc/local-client
yarn add @idedoc/local-client
bun add @idedoc/local-client
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-04-15 |
| First published | 2023-04-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ssmirnovacode |

## Links

- npm: https://www.npmjs.com/package/@idedoc/local-client
- npm.io page: https://npm.io/package/@idedoc/local-client

## Recent versions

- 1.0.0 (latest) — 2023-04-15

## README

# IDE Doc

Browser-based code and documentation editor.

TODO:
1. switch of language for text editor
2. JSX syntax highlighting

## Dynamic npm-packages fetching
Using a customised plugin for ESBuild that intercepts int onLoad event so that instead of looking for a package in file system it is fetched directly from NPM (unpkg.io, that gives us direct access to NPM content without CORS issues).

CSS: ESBuild requires an output file for CSS bundle, and we don't have access to the file system. Therefore, we wrapped CSS content into JS and inject it to the code.

## Cacheing
As we fetch NPM packages for every import, there can be a lot of requests. To handle it better, we are using IndexedDB via localforage library and saving the configuration objects for fetched packages there.

## Instant code display
We are using srcDoc attribute on iframe with resulting code, which allows us to display the resulting app instantly. However, some browser features like localStorage and cookies won't be available. They will probably be enabled in upcoming versions.
We add a 'message' event listener to the iframe and issue postMessage everytime we submit code.

## Code Editor
We use Monaco-Editor wrapped into a React component. We enabled some nice features such as theme an prettier code formatter.

## Markdown Editor
Created with uie/react-md-editor

## Resizable windows
Using react-resizable library.

## Cumulative code

All code cells are connected, we don't have to re-import or re-define previously defined variables.

## show() helper function
Allowing to quickly view the argument passed to it in Preview window. Built-in JSX syntax support (React and ReactDOM imported behind the scenes by default)

---
_Source: https://npm.io/package/@idedoc/local-client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._