|
|
|
@ -71,9 +71,8 @@ window.editorLib = {
|
|
|
|
}`
|
|
|
|
}`
|
|
|
|
|
|
|
|
|
|
|
|
class Builder {
|
|
|
|
class Builder {
|
|
|
|
jApiBaseUrl = 'https://data.jsdelivr.com/v1/'
|
|
|
|
// any URL that supports pkg/path or pkg@version/path
|
|
|
|
jCdnBaseUrl = 'https://cdn.jsdelivr.net/npm/'
|
|
|
|
baseUrl = 'https://unpkg.com'
|
|
|
|
|
|
|
|
|
|
|
|
scripts = {
|
|
|
|
scripts = {
|
|
|
|
'@rollup/browser': {
|
|
|
|
'@rollup/browser': {
|
|
|
|
version: '3.20.4',
|
|
|
|
version: '3.20.4',
|
|
|
|
@ -105,26 +104,13 @@ class Builder {
|
|
|
|
|
|
|
|
|
|
|
|
async loadDep(dep) {
|
|
|
|
async loadDep(dep) {
|
|
|
|
this.scripts[dep] = {}
|
|
|
|
this.scripts[dep] = {}
|
|
|
|
const dataResp = await fetch(
|
|
|
|
|
|
|
|
this.jApiBaseUrl +
|
|
|
|
|
|
|
|
`packages/npm/${dep}/resolved`,
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
|
|
'User-Agent':
|
|
|
|
|
|
|
|
'https://codeberg.org/macchiato',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
this.checkOk(dataResp)
|
|
|
|
|
|
|
|
const {version} = await dataResp.json()
|
|
|
|
|
|
|
|
this.scripts[dep].version = version
|
|
|
|
|
|
|
|
const pkgResp = await fetch(
|
|
|
|
const pkgResp = await fetch(
|
|
|
|
this.jCdnBaseUrl +
|
|
|
|
`${this.baseUrl}/${dep}/package.json`
|
|
|
|
`${dep}@${version}/package.json`
|
|
|
|
|
|
|
|
)
|
|
|
|
)
|
|
|
|
this.checkOk(pkgResp)
|
|
|
|
this.checkOk(pkgResp)
|
|
|
|
this.log(dep)
|
|
|
|
this.log(dep)
|
|
|
|
const pkg = await pkgResp.json()
|
|
|
|
const pkg = await pkgResp.json()
|
|
|
|
|
|
|
|
this.scripts[dep].version = pkg.version
|
|
|
|
this.scripts[dep].path = (
|
|
|
|
this.scripts[dep].path = (
|
|
|
|
pkg.module ?? pkg.main
|
|
|
|
pkg.module ?? pkg.main
|
|
|
|
)
|
|
|
|
)
|
|
|
|
@ -168,8 +154,8 @@ class Builder {
|
|
|
|
return script.text
|
|
|
|
return script.text
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const url = (
|
|
|
|
const url = (
|
|
|
|
this.jCdnBaseUrl +
|
|
|
|
`${this.baseUrl}/${name}@${script.version}/` +
|
|
|
|
`${name}@${script.version}/${script.path}`
|
|
|
|
script.path
|
|
|
|
)
|
|
|
|
)
|
|
|
|
const resp = await fetch(url)
|
|
|
|
const resp = await fetch(url)
|
|
|
|
this.checkOk(resp)
|
|
|
|
this.checkOk(resp)
|
|
|
|
@ -295,20 +281,18 @@ class Editor extends HTMLElement {
|
|
|
|
this.shadowRoot.adoptedStyleSheets = [
|
|
|
|
this.shadowRoot.adoptedStyleSheets = [
|
|
|
|
this.constructor.styleSheet
|
|
|
|
this.constructor.styleSheet
|
|
|
|
]
|
|
|
|
]
|
|
|
|
this.el = document.createElement('div')
|
|
|
|
|
|
|
|
this.shadowRoot.append(this.el)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
connectedCallback() {
|
|
|
|
connectedCallback() {
|
|
|
|
const {EditorView, basicSetup} = window.editorLib
|
|
|
|
const {EditorView, basicSetup} = window.editorLib
|
|
|
|
new EditorView({
|
|
|
|
this.view = new EditorView({
|
|
|
|
doc: '',
|
|
|
|
doc: '',
|
|
|
|
extensions: [
|
|
|
|
extensions: [
|
|
|
|
basicSetup,
|
|
|
|
basicSetup,
|
|
|
|
],
|
|
|
|
],
|
|
|
|
parent: this.el,
|
|
|
|
|
|
|
|
root: this.shadowRoot,
|
|
|
|
root: this.shadowRoot,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
this.shadowRoot.append(this.view.dom)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
static get styleSheet() {
|
|
|
|
static get styleSheet() {
|
|
|
|
@ -326,6 +310,7 @@ class Editor extends HTMLElement {
|
|
|
|
align-items: stretch;
|
|
|
|
align-items: stretch;
|
|
|
|
height: 33vh;
|
|
|
|
height: 33vh;
|
|
|
|
background-color: #fff;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
border: 5px solid red
|
|
|
|
}
|
|
|
|
}
|
|
|
|
:host > * {
|
|
|
|
:host > * {
|
|
|
|
flex-grow: 1;
|
|
|
|
flex-grow: 1;
|
|
|
|
|