# code-sample-editor

> A multi-file code editor component with live preview

Latest version **0.1.0-pre.4** (published 2020-10-22) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install code-sample-editor
pnpm add code-sample-editor
yarn add code-sample-editor
bun add code-sample-editor
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0-pre.4 |
| Published | 2020-10-22 |
| First published | 2020-09-12 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 9.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | The Polymer Authors |
| Maintainers | justinfagnani, aomarks, polymer-devs |

## Links

- npm: https://www.npmjs.com/package/code-sample-editor
- npm.io page: https://npm.io/package/code-sample-editor

## Dependencies (7)

- [comlink](https://npm.io/package/comlink.md) ^4.3.0
- [lit-html](https://npm.io/package/lit-html.md) ^1.2.1
- [lit-element](https://npm.io/package/lit-element.md) ^2.3.1
- [@material/mwc-tab](https://npm.io/package/@material/mwc-tab.md) =0.19.0-canary.615d861d.0
- [@material/mwc-tab-bar](https://npm.io/package/@material/mwc-tab-bar.md) =0.19.0-canary.615d861d.0
- [@material/mwc-icon-button](https://npm.io/package/@material/mwc-icon-button.md) =0.19.0-canary.615d861d.0
- [@material/mwc-linear-progress](https://npm.io/package/@material/mwc-linear-progress.md) ^0.19.1

## Recent versions

- 0.1.0-pre.4 (latest) — 2020-10-22
- 0.1.0-pre.3 — 2020-10-05
- 0.1.0-pre.2 — 2020-09-12
- 0.1.0-pre.1 — 2020-09-12

## README

# code-sample-editor

A multi-file code editor component with live preview

## Introduction

`<code-sample-editor>` is a web component that allows you to embed multi-file, editable, live-preview code examples that use JavaScript, TypeScript, HTML and CSS. It's like a mini-IDE that you can embed many times in a page, and it works without a server!

## Features

### No server-required
`<code-sample-editor>` uses a service worker to send files from the main page to the preview iframe. Users can edit examples locally and the edited files are served to the iframe without ever hitting the network. This means you can use `<code-sample-editor>` with a static file server, and preview reloads are ultra-fast!

### Multi-file unbundled editing

`<code-sample-editor>` serves each file indivdually to the preview iframe, instead of bundling them first. This gives faster refresh times and means taht you can utilize the standard web platform features in your examples without a bundler getting in the way and potentially breaking things. The experience is very much like working wtih a static file server.

HTML can have multiple `<script>` and `<link>` tags, even dynamically added. CSS can use `@import` and `url()`. JavaScript can use `import.meta.url`, dynamic `import()`, and `fetch()`. It all just works.

### Bare-module specifiers support

Standard JavaScript modules are great, but currently they lack one feature that has such overwhelming use and utility that we included support for it: base module specifiers.

If you import a module by name, like:

```js
import {html, render} from 'lit-html';
```

`<code-sample-editor>` will automatically rewrite the import specifier to use [unpkg.com](unpkg.com) URLs:

```js
import {html, render} from 'https://unpkg.com/lit-html?module';
```

### TypeScript support

Besides standard JavaScript, `<code-sample-editor>` supports TypeScript files, which are automatically transpiled to JavaScript in a web worker.

The TypeScript worker behaves exactly like the `tsc` compiler does, so the examples match local code. This means that when you import other TypeScript files, you do with with a `.js` extension, which matches the compiler output.

`my-element.ts`
```ts
import {LitElement, html, customElement} from 'lit-element';

@customElement('my-element')
class MyElement extends LitElement { /* ... */ }
```

`index.html`
```html
<script type="module" src="my-element.js"></script>
```
Note the filename of `my-element.js`.

### Inline or external sources

You can define an example entirely in HTML for simplicity:

```html
<code-sample-editor>
  <script type="sample/html" filename="index.html">
    <script type="module" src="my-element.js">&lt;/script>
    <h1>Hello World!</h1>
    <my-element></my-element>
  </script>
  <script type="sample/js" filename="my-element.js">
    import {LitElement, html, customElement} from 'lit-element';

    class MyElement extends LitElement { /* ... */ }
    customElements.define('my-element', MyElement);
  </script>
</code-sample-editor>
```

Or define your project in a JSON manifest:

```html
<code-sample-editor project-src="./example-1.json"></code-sample-editor>
```

`example-1.json`:
```json
{
  "files": {
    "index.html": {},
    "my-element.js": {},
    "my-second-element.js": {}
  }
}
```

## Getting Started

Install with npm:
```sh
npm i code-sample-editor
```

Load the component definition:
```html
<script
  type="module" 
  src="/node_modules/code-sample-editor/lib/code-sample-editor.js">
</script>
```

Use the component:
```html
<code-sample-editor project-src="./example-1.json"></code-sample-editor>
```

`<code-sample-editor>` uses bare module specifiers in its code, so you'll need a server that supports rewriting module specifiers with the Node module resolution algorithm, or a build tool like Rollup.

`<code-sample-editor>` also uses `import.meta.url` to load the worker scripts. note that Webpack does not support that currently.

## Development

After cloning the repo:
```sh
npm install

# runs npm run watch and npm run serve at the same time
npm run dev
```

Open your browser to `http://localhost:8081/demo/` to see the demo.

### Project organization

The project is organized into multiple TypeScript projects, one for each browser/worker environment, and one shared project. They reference each other via TypeScript project references and are built together with the `--build` flag to `tsc`.

---
_Source: https://npm.io/package/code-sample-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._