macchiato
/
loader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: macchiato:main
Branches Tags
macchiato:pages
macchiato:fix-single-quote-import
macchiato:integrate-editor
macchiato:main
...
pull from: macchiato:pages
Branches Tags
macchiato:pages
macchiato:fix-single-quote-import
macchiato:integrate-editor
macchiato:main

12 Commits
main ... pages

Author SHA1 Message Date
bat 7898026c65 Merge pull request 'add code-edit to editor build' (#7) from code-edit into pages 
Reviewed-on: https://codeberg.org/macchiato/loader/pulls/7
 3 years ago
bat a45dd82efd add code-edit to editor build 3 years ago
bat 767a86623b Merge pull request 'stop incorrectly transforming single quote imports' (#6) from fix-single-quote-import into pages 
Reviewed-on: https://codeberg.org/macchiato/loader/pulls/6
 3 years ago
Benjamin Atkin 9ac1fff189 stop incorrectly transforming single quote imports 3 years ago
bat c31205e4da Merge pull request 'Run replace function on intro page as well' (#5) from replace-on-intro into pages 
Reviewed-on: https://codeberg.org/macchiato/loader/pulls/5
 3 years ago
bat 2a71c59e5f Run replace function on intro page as well 3 years ago
bat 31473e3876 Merge pull request 'Add files to replace so app can build itself' (#4) from add-files-to-replace into pages 
Reviewed-on: https://codeberg.org/macchiato/loader/pulls/4
 3 years ago
bat a7c0ea4d20 Add files to replace so app can build itself 3 years ago
bat e59d6dc6be Actualizar 'README.md' 3 years ago
bat af3f7ff45d Merge pull request 'integrate editor' (#3) from integrate-editor into main 
Reviewed-on: https://codeberg.org/macchiato/loader/pulls/3
 3 years ago
Benjamin Atkin 5c91f5aa7e build sandbox pages 3 years ago
Benjamin Atkin 202abdbf3e add editor build 3 years ago
3 changed files with 158 additions and 40 deletions
Show Stats

2
README.md
Unescape Escape View File

@ -1,3 +1,3 @@
# loader # loader
loader: loads content in a frame and sets up sandbox and CSP loader: builds content to load in a frame and set up sandbox and CSP

156
builder.js
Unescape Escape View File

@ -1,8 +1,49 @@
class Builder { const defaultHtml = `
<!doctype html>
<html>
<head>
<title>macchiato.dev</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
</style>
</head>
<body>
${ '<' + 'script type="module" src="/app.js"><' + '/script>' }
</body>
</html>
`.trim()
const defaultIntro = `
window.Macchiato = {
modules: {},
}
`.trim()
export class Builder {
constructor(files) { constructor(files) {
this.files = files this.files = files
} }
buildStyle(file) {
const style = document.createElement('style')
style.textContent = file.data
return style.outerHTML
}
buildModule(file) { buildModule(file) {
const script = document.createElement('script') const script = document.createElement('script')
script.setAttribute('type', 'module') script.setAttribute('type', 'module')
@ -20,7 +61,7 @@ class Builder {
return `// append: ${s}\n${match}` return `// append: ${s}\n${match}`
} }
).replaceAll( ).replaceAll(
/^\s*import\s+(\{[^}]+\})\s+from\s+("[^"]+"|')/gms, /^\s*import\s+(\{[^}]+\})\s+from\s+("[^"]+")/gms,
(match, p1, p2) => { (match, p1, p2) => {
const vars = p1.replaceAll(' as ', ': ') const vars = p1.replaceAll(' as ', ': ')
const importPath = p2.slice(1, -1) const importPath = p2.slice(1, -1)
@ -39,44 +80,81 @@ class Builder {
return script.outerHTML return script.outerHTML
} }
buildReplace(filesMap) {
if ('_replace.js' in filesMap) {
const rSrc = filesMap['_replace.js']
return new Function(
rSrc.match(/\((\w+)\)/)[1],
rSrc.slice(
rSrc.indexOf('{') + 1,
rSrc.lastIndexOf('}')
)
)
} else {
return ({data}) => data
}
}
build() { build() {
const modules = this.files.map(file => { const filesMap = Object.fromEntries(
return this.buildModule(file) this.files.map(
({name, data}) => ([name, data])
)
)
const replace = this.buildReplace(filesMap)
const intro = this.buildModule({
name: '_intro.js',
data: replace({
name: '_intro.js',
data: (
'_intro.js' in filesMap ?
filesMap['_intro.js'] :
defaultIntro
),
files: this.files,
}) })
return ` })
<!doctype html> const modules = this.files.filter(({name}) => (
<html> name.endsWith('.js') &&
<head> !name.startsWith('_')
<title>Editor</title> )).map(file => (
<style> this.buildModule({
html, body, iframe { ...file,
margin: 0; data: replace({
padding: 0; ...file,
width: 100%; files: this.files,
height: 100%; }),
} })
iframe { ))
border: none; const styles = this.files.filter(({name}) => (
display: block; name.endsWith('.css')
} )).map(file => (
html { this.buildStyle(file)
box-sizing: border-box; ))
} let html = (
*, *:before, *:after { 'index.html' in filesMap ?
box-sizing: inherit; filesMap['index.html'] :
} defaultHtml
</style> )
</head> let replaced = false
<body> html = html.replace(/\s*<\/head>/, match => {
${'<'}script type="module"> replaced = true
window.Macchiato = {modules: {}} return styles.join("\n") + "\n" + match
${'</'}script> })
${modules.join("\n")} if (!replaced) {
${'<'}script type="module"> html = styles.join("\n") + "\n" + html
}
${'</'}script> replaced = false
</body> html = html.replace(
</html> '<' + 'script type="module" src="/app.js"><' + '/script>',
`.trim() () => {
replaced = true
return intro + "\n" + modules.join("\n")
}
)
if (!replaced) {
html += "\n" + intro + "\n" + modules.join("\n")
}
return html
} }
} }

40
editor-build.js
Unescape Escape View File

@ -0,0 +1,40 @@
import { Builder } from "/loader/builder.js"
export class EditorBuild {
deps = [
'forms/button-group.js',
'dialog/dialog.js',
'menu/dropdown.js',
'editor/header.js',
'editor/file-group.js',
'editor/file-view.js',
'editor/text-edit.js',
'editor/code-edit.js',
'loader/builder.js',
'editor/app.js',
]
constructor() {
this.files = undefined
}
async loadFiles() {
const files = []
for (const name of this.deps) {
const resp = await fetch(name)
files.push({
name,
data: await resp.text(),
})
}
this.files = files
}
async build() {
if (this.files === undefined) {
await this.loadFiles()
}
const builder = new Builder(this.files)
return builder.build()
}
}
Write Preview
Loading…
Cancel
Save