version 2.0.0

stagas · Apr 14, 2022 · 630e122 · 630e122
1 parent 33ab8f2
commit 630e122
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 120 deletions.
diff --git a/.husky/pre-commit → .husky/pre-push b/.husky/pre-commit → .husky/pre-push
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run lint
+npm run prepush
diff --git a/README.md b/README.md
@@ -1,53 +1,77 @@
-<h1 align="center">code-edit</h1>
+<h1>
+code-edit <a href="https://npmjs.org/package/code-edit"><img src="https://img.shields.io/badge/npm-v2.0.0-F00.svg?colorA=000"/></a> <a href="src"><img src="https://img.shields.io/badge/loc-176-FFF.svg?colorA=000"/></a> <a href="https://cdn.jsdelivr.net/npm/code-edit@2.0.0/dist/code-edit.min.js"><img src="https://img.shields.io/badge/brotli-7.8K-333.svg?colorA=000"/></a> <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-F0B.svg?colorA=000"/></a>
+</h1>
 
-<p align="center">
-lightweight (~5kb) code editor custom element with syntax highlighting
-</p>
-
-<p align="center">
-   <a href="#install">        🔧 <strong>Install</strong></a>
- · <a href="#example">        🧩 <strong>Example</strong></a>
- · <a href="#api">            📜 <strong>API docs</strong></a>
- · <a href="https://github.com/stagas/code-edit/releases"> 🔥 <strong>Releases</strong></a>
- · <a href="#contribute">     💪🏼 <strong>Contribute</strong></a>
- · <a href="https://github.com/stagas/code-edit/issues">   🖐️ <strong>Help</strong></a>
-</p>
+<p></p>
 
----
+Lightweight code editor Web Component with syntax highlighting
 
-## Install
+<h4>
+<table><tr><td title="Triple click to select and copy paste">
+<code>npm i code-edit </code>
+</td><td title="Triple click to select and copy paste">
+<code>pnpm add code-edit </code>
+</td><td title="Triple click to select and copy paste">
+<code>yarn add code-edit</code>
+</td></tr></table>
+</h4>
 
-```sh
-$ npm i code-edit
-```
-
-**[See it in action!](https://stagas.github.io/code-edit/)**
+## Examples
 
-## API
+<details id="example$web" title="web" open><summary><span><a href="#example$web">#</a></span>  <code><strong>web</strong></code></summary>  <ul>    <details id="source$web" title="web source code" ><summary><span><a href="#source$web">#</a></span>  <code><strong>view source</strong></code></summary>  <a href="example/web.ts">example/web.ts</a>  <p>
 
-<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+```ts
+import 'code-syntax/themes/default.css'
+import 'plenty-themes/laser.css'
 
-#### Table of Contents
+import { CodeEditElement, languages } from 'code-edit'
 
-- [CodeEditElement](#codeeditelement)
-- [HTMLCodeEditElement](#htmlcodeeditelement)
-  - [value](#value)
-  - [language](#language)
-  - [syntax](#syntax)
-  - [theme](#theme)
-  - [tabsize](#tabsize)
-  - [tabstyle](#tabstyle)
-  - [comments](#comments)
-  - [autofocus](#autofocus)
-  - [autoresize](#autoresize)
+languages.js = import('code-syntax/languages/js')
+customElements.define('code-edit', CodeEditElement)
 
-### CodeEditElement
+const style = document.createElement('style')
+style.textContent = /*css*/ `
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+body {
+  background: #333;
+}
+pre {
+  color: var(--color);
+  background: var(--background);
+}
+code-edit {
+  margin: 15px;
+  padding: 15px;
+  resize: both;
+}
+`
+document.head.appendChild(style)
+
+document.body.innerHTML = /*html*/ `
+<code-edit id="demo" autoresize autofocus language="js" theme="laser">export interface HTMLCodeEditElement {
+  value?: string
+  language?: string
+  syntax?: SyntaxDefinition | Promise&lt;{ default: SyntaxDefinition }&gt;
+  theme?: string
+  tabsize?: number
+  tabstyle?: 'tabs' | 'spaces'
+  comments?: string
+}</code-edit>
+`
+```
 
-[src/index.ts:114-237](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L114-L237 'Source code on GitHub')
+</p>
+</details></ul></details>
 
-**Extends HTMLElement**
+## API
 
-CodeEdit custom element
+<p>  <details id="CodeEditElement$1" title="Class" open><summary><span><a href="#CodeEditElement$1">#</a></span>  <code><strong>CodeEditElement</strong></code>     &ndash; CodeEdit custom element</summary>  <a href="src/code-edit.tsx#L74">src/code-edit.tsx#L74</a>  <ul>  <p>
 
 ```js
 import { CodeEditElement } from 'code-edit'
@@ -58,92 +82,23 @@ customElements.define('code-edit', CodeEditElement)
 <code-edit autofocus autoresize language="js" theme="deep"> ... </code-edit>
 ```
 
-### HTMLCodeEditElement
-
-[src/index.ts:81-100](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L81-L100 'Source code on GitHub')
-
-CodeEdit HTML/JSX Interface
-
-#### value
-
-[src/index.ts:83-83](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L83-L83 'Source code on GitHub')
-
-The editor's value
-
-Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
-
-#### language
-
-[src/index.ts:85-85](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L85-L85 'Source code on GitHub')
-
-Language for syntax highlighting
-
-Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
-
-#### syntax
-
-[src/index.ts:87-87](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L87-L87 'Source code on GitHub')
-
-Passing a syntax definition regexp manually
-
-Type: (SyntaxDefinition | [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<{default: SyntaxDefinition}>)
-
-#### theme
-
-[src/index.ts:89-89](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L89-L89 'Source code on GitHub')
-
-Theme to use
-
-Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
-
-#### tabsize
-
-[src/index.ts:91-91](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L91-L91 'Source code on GitHub')
-
-Tab size
-
-Type: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
-
-#### tabstyle
-
-[src/index.ts:93-93](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L93-L93 'Source code on GitHub')
-
-Tab style
-
-Type: (`"tabs"` | `"spaces"`)
-
-#### comments
-
-[src/index.ts:95-95](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L95-L95 'Source code on GitHub')
-
-Comments are defined as a tuple-like string: '// /\* \*/' first item is single comment and second third are multiline comments
-
-Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
-
-#### autofocus
-
-[src/index.ts:97-97](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L97-L97 'Source code on GitHub')
-
-Autofocus to the element when page loads
-
-Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
-
-#### autoresize
-
-[src/index.ts:99-99](https://github.com/stagas/code-edit/blob/db8497df918384c2627474bb5712ef64849df096/src/index.ts#L99-L99 'Source code on GitHub')
+</p>
+      <p>  <details id="constructor$7" title="Constructor" ><summary><span><a href="#constructor$7">#</a></span>  <code><strong>constructor</strong></code><em>()</em>    </summary>    <ul>    <p>  <details id="new CodeEditElement$8" title="ConstructorSignature" ><summary><span><a href="#new CodeEditElement$8">#</a></span>  <code><strong>new CodeEditElement</strong></code><em>()</em>    </summary>    <ul><p><a href="#CodeEditElement$1">CodeEditElement</a></p>        </ul></details></p>    </ul></details><details id="autoFocus$14" title="Property" ><summary><span><a href="#autoFocus$14">#</a></span>  <code><strong>autoFocus</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>false</code></span>   &ndash; Autofocus to the element when page loads</summary>  <a href="src/code-edit.tsx#L83">src/code-edit.tsx#L83</a>  <ul><p>boolean</p>        </ul></details><details id="autoResize$15" title="Property" ><summary><span><a href="#autoResize$15">#</a></span>  <code><strong>autoResize</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>false</code></span>   &ndash; Whether to autoresize to the height of the contents</summary>  <a href="src/code-edit.tsx#L85">src/code-edit.tsx#L85</a>  <ul><p>boolean</p>        </ul></details><details id="comments$20" title="Property" ><summary><span><a href="#comments$20">#</a></span>  <code><strong>comments</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>'// /* */'</code></span>   &ndash; Comment</summary>  <a href="src/code-edit.tsx#L95">src/code-edit.tsx#L95</a>  <ul><p>string</p>        </ul></details><details id="language$16" title="Property" ><summary><span><a href="#language$16">#</a></span>  <code><strong>language</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>''</code></span>   &ndash; Language for syntax highlighting</summary>  <a href="src/code-edit.tsx#L87">src/code-edit.tsx#L87</a>  <ul><p>string</p>        </ul></details><details id="syntax$24" title="Property" ><summary><span><a href="#syntax$24">#</a></span>  <code><strong>syntax</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>{}</code></span>   &ndash; Passing a syntax definition regexp manually</summary>  <a href="src/code-edit.tsx#L108">src/code-edit.tsx#L108</a>  <ul><p><span>SyntaxOrImport</span></p>        </ul></details><details id="tabSize$18" title="Property" ><summary><span><a href="#tabSize$18">#</a></span>  <code><strong>tabSize</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>2</code></span>   &ndash; Tab size</summary>  <a href="src/code-edit.tsx#L91">src/code-edit.tsx#L91</a>  <ul><p>number</p>        </ul></details><details id="tabStyle$19" title="Property" ><summary><span><a href="#tabStyle$19">#</a></span>  <code><strong>tabStyle</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>'spaces'</code></span>   &ndash; Tab style</summary>  <a href="src/code-edit.tsx#L93">src/code-edit.tsx#L93</a>  <ul><p><code>"spaces"</code> | <code>"tabs"</code></p>        </ul></details><details id="theme$17" title="Property" ><summary><span><a href="#theme$17">#</a></span>  <code><strong>theme</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>''</code></span>   &ndash; Theme to use</summary>  <a href="src/code-edit.tsx#L89">src/code-edit.tsx#L89</a>  <ul><p>string</p>        </ul></details><details id="value$13" title="Property" ><summary><span><a href="#value$13">#</a></span>  <code><strong>value</strong></code>  <span><span>&nbsp;=&nbsp;</span>  <code>''</code></span>   &ndash; The editor's value</summary>  <a href="src/code-edit.tsx#L81">src/code-edit.tsx#L81</a>  <ul><p>string</p>        </ul></details><details id="scrollLeft$9" title="Accessor" ><summary><span><a href="#scrollLeft$9">#</a></span>  <code><strong>scrollLeft</strong></code>    </summary>  <a href="src/code-edit.tsx#L217">src/code-edit.tsx#L217</a>  <ul>        </ul></details><details id="scrollTop$11" title="Accessor" ><summary><span><a href="#scrollTop$11">#</a></span>  <code><strong>scrollTop</strong></code>    </summary>  <a href="src/code-edit.tsx#L220">src/code-edit.tsx#L220</a>  <ul>        </ul></details></p></ul></details></p>
 
-Whether to autoresize to the height of the contents
+## Credits
 
-Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
+- [code-syntax](https://npmjs.org/package/code-syntax) by [stagas](https://github.com/stagas) &ndash; Code syntax highlight Web Component
+- [debounce-micro](https://npmjs.org/package/debounce-micro) by [stagas](https://github.com/stagas) &ndash; wrap a function in a debounce microtask
+- [mixter](https://npmjs.org/package/mixter) by [stagas](https://github.com/stagas) &ndash; A Web Components framework.
+- [super-impose](https://npmjs.org/package/super-impose) by [stagas](https://github.com/stagas) &ndash; Web Component that super imposes one child over another to the same scroll position
+- [textarea-code](https://npmjs.org/package/textarea-code) by [stagas](https://github.com/stagas) &ndash; Web Component that extends a textarea element with code editor behavior.
 
-## Contribute
+## Contributing
 
-[Fork](https://github.com/stagas/code-edit/fork) or
-[edit](https://github.dev/stagas/code-edit) and submit a PR.
+[Fork](https://github.com/stagas/code-edit/fork) or [edit](https://github.dev/stagas/code-edit) and submit a PR.
 
 All contributions are welcome!
 
 ## License
 
-MIT © 2022
-[stagas](https://github.com/stagas)
+<a href="LICENSE">MIT</a> &copy; 2022 [stagas](https://github.com/stagas)