code-sample-editor
Advanced tools
code-sample-editor - npm Package Compare versions
Comparing version
@@ -22,2 +22,3 @@ /** | ||
| private _value?; | ||
| private _capturedCodeMirrorStyles?; | ||
| get value(): string | undefined; | ||
@@ -24,0 +25,0 @@ set value(v: string | undefined); |
@@ -49,3 +49,3 @@ /** | ||
| render() { | ||
| return html `${this._editorView?.dom}`; | ||
| return html ` ${this._editorView?.dom} ${this._capturedCodeMirrorStyles} `; | ||
| } | ||
@@ -90,2 +90,9 @@ update(changedProperties) { | ||
| }); | ||
| // EditorView writes a <style> directly into the given root on construction | ||
| // (unless adopted stylesheets are available, in which case it uses that). | ||
| // But then lit renders and blows it away. So, we'll just snatch any new | ||
| // styles before this can happen, and then have lit put them back again. | ||
| // Note that EditorView re-uses the same <style> element across instances, | ||
| // so our list of styles does not grow every time we reset the view. | ||
| this._capturedCodeMirrorStyles = this.shadowRoot.querySelectorAll('style'); | ||
| this._editorView = view; | ||
@@ -92,0 +99,0 @@ this.requestUpdate(); |
| { | ||
| "name": "code-sample-editor", | ||
| "version": "0.1.0-pre.2", | ||
| "version": "0.1.0-pre.3", | ||
| "description": "A multi-file code editor component with live preview", | ||
@@ -8,9 +8,2 @@ "type": "module", | ||
| "main": "lib/code-sample-editor.js", | ||
| "files": [ | ||
| "demo/", | ||
| "lib/", | ||
| "shared/", | ||
| "service-worker.js", | ||
| "typescript-worker.js" | ||
| ], | ||
| "scripts": { | ||
@@ -20,5 +13,5 @@ "build": "npm run build:lib && npm run bundle", | ||
| "bundle": "rollup -c rollup.config.js", | ||
| "watch": "tsc --build --watch & rollup -c rollup.config.js -w", | ||
| "watch": "npm run build:lib -- --watch & rollup -c rollup.config.js -w", | ||
| "serve": "es-dev-server --node-resolve --event-stream=false", | ||
| "dev": "npm run watch & npm run serve", | ||
| "dev": "npm run watch & npm run serve -- --open=demo/", | ||
| "format": "prettier src/**/*.ts --write", | ||
@@ -30,4 +23,4 @@ "prepublishOnly": "npm run build" | ||
| "devDependencies": { | ||
| "@rollup/plugin-commonjs": "^14.0.0", | ||
| "@rollup/plugin-node-resolve": "^8.4.0", | ||
| "@rollup/plugin-commonjs": "^15.1.0", | ||
| "@rollup/plugin-node-resolve": "^9.0.0", | ||
| "es-dev-server": "^1.57.4", | ||
@@ -38,11 +31,11 @@ "prettier": "^2.0.5", | ||
| "tsc-watch": "^4.2.3", | ||
| "typescript": "^3.9.7" | ||
| "typescript": "^4.0.3" | ||
| }, | ||
| "dependencies": { | ||
| "@codemirror/next": "^0.12.0", | ||
| "@material/mwc-button": "^0.18.0", | ||
| "@material/mwc-icon-button": "^0.18.0", | ||
| "@material/mwc-tab": "^0.18.0", | ||
| "@material/mwc-tab-bar": "^0.18.0", | ||
| "@material/mwc-textfield": "^0.18.0", | ||
| "@material/mwc-button": "=0.19.0-canary.615d861d.0", | ||
| "@material/mwc-icon-button": "=0.19.0-canary.615d861d.0", | ||
| "@material/mwc-tab": "=0.19.0-canary.615d861d.0", | ||
| "@material/mwc-tab-bar": "=0.19.0-canary.615d861d.0", | ||
| "@material/mwc-textfield": "=0.19.0-canary.615d861d.0", | ||
| "comlink": "^4.3.0", | ||
@@ -49,0 +42,0 @@ "lit-element": "^2.3.1", |
@@ -18,3 +18,3 @@ # code-sample-editor | ||
| 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()`. You can even have page navigations to other HTML files. It all just works. | ||
| 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. | ||
@@ -118,62 +118,2 @@ ### Bare-module specifiers support | ||
| ## Usage | ||
| `<code-sample-editor>` can either be used with inline files, or with external files and a project manifest. The two modes cannot be mixed. | ||
| Every project must have an `index.html`. Currently this is the only file that the preview iframe will request on startup and reload. | ||
| ### Inline files | ||
| Sample files can be defined inline with `<script>` tags. The tags must have `type` and `filename` attributes: | ||
| * `type`: one of `sample/js`, `sample/ts`,`sample/html`, or `sample/css` | ||
| * `filename`: the filename to display and use for network requests. | ||
| Example: | ||
| ```html | ||
| <code-sample-editor> | ||
| <script type="sample/html" filename="index.html"> | ||
| <script type="module" src="my-element.js"></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> | ||
| ``` | ||
| ### Project manifest | ||
| With a project manifest the sample files are listed in a JSON file. The JSON file is specified in the `project-src` attribute: | ||
| ```html | ||
| <code-sample-editor project-src="./example-1.json"></code-sample-editor> | ||
| ``` | ||
| Manifest: | ||
| `example-1.json`: | ||
| ```json | ||
| { | ||
| "files": { | ||
| "index.html": {}, | ||
| "my-element.js": {}, | ||
| "my-second-element.js": {} | ||
| } | ||
| } | ||
| ``` | ||
| The files are resolved relative to the manifest. It's probably a good idea to have a folder per sample, containing the files and the manifest: | ||
| ``` | ||
| example-1 | ||
| ├── index.html | ||
| ├── my-element.js | ||
| ├── my-second-element.js | ||
| └── example-1.json | ||
| ``` | ||
| ## Development | ||
@@ -180,0 +120,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Improved metrics
- Number of low license alerts
0
-100%Worsened metrics
- Total package byte prevSize
67611
-99.26%- Number of package files
35
-30%- Lines of code
1718
-44.26%- Number of lines in readme file
132
-31.25%Dependency changes
- Removed
@material/mwc-base@0.18.0(transitive)- Removed
@material/mwc-button@0.18.0(transitive)- Removed
@material/mwc-floating-label@0.18.0(transitive)- Removed
@material/mwc-icon@0.18.0(transitive)- Removed
@material/mwc-icon-button@0.18.0(transitive)- Removed
@material/mwc-line-ripple@0.18.0(transitive)- Removed
@material/mwc-notched-outline@0.18.0(transitive)- Removed
@material/mwc-ripple@0.18.0(transitive)- Removed
@material/mwc-tab@0.18.0(transitive)- Removed
@material/mwc-tab-bar@0.18.0(transitive)- Removed
@material/mwc-tab-indicator@0.18.0(transitive)- Removed
@material/mwc-tab-scroller@0.18.0(transitive)- Removed
@material/mwc-textfield@0.18.0(transitive)- Removed
tslib@1.14.1(transitive)