add editor build

3 years ago · 202abdbf3e
parent d433ddf405
commit 202abdbf3e
2 changed files with 118 additions and 38 deletions
--- a/builder.js
+++ b/builder.js
@ -1,4 +1,39 @@
-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 = {
  location: new MLocation(),
 }
 `.trim()
 export class Builder {
  constructor(files) {
    this.files = files
  }
@ -39,44 +74,53 @@ class Builder {
    return script.outerHTML
  }
-  build() {
+  buildReplace(filesMap) {
-    const modules = this.files.map(file => {
+    if ('_replace.js' in filesMap) {
-      return this.buildModule(file)
+      const rSrc = filesMap['_replace.js']
-    })
+      return new Function(
-    return `
+        rSrc.match(/\((\w+)\)/)[1],
-<!doctype html>
+        rSrc.slice(
-<html>
+          rSrc.indexOf('{') + 1,
-  <head>
+          rSrc.lastIndexOf('}')
-    <title>Editor</title>
+        )
-    <style>
+      )
-html, body, iframe {
+    } else {
-  margin: 0;
+      return s => s
  padding: 0;
  width: 100%;
  height: 100%;
 }
 iframe {
  border: none;
  display: block;
 }
 html {
  box-sizing: border-box;
    }
 *, *:before, *:after {
  box-sizing: inherit;
  }
    </style>
  </head>
  <body>
 ${'<'}script type="module">
 window.Macchiato = {modules: {}}
 ${'</'}script>
 ${modules.join("\n")}
 ${'<'}script type="module">
-${'</'}script>
+  build() {
-  </body>
+    const filesMap = Object.fromEntries(
-</html>
+      this.files.map(
-    `.trim()
+        ({name, data}) => ([name, data])
      )
    )
    const intro = this.buildModule({
      name: '_intro.js',
      data: (
        '_intro.js' in filesMap ? 
        filesMap['_intro.js'] :
        defaultIntro
      ),
    })
    const replace = this.buildReplace(filesMap)
    const modules = this.files.filter(({name}) => (
      name.endsWith('.js') && 
      !name.startsWith('_')
    )).map(file => (
      this.buildModule({
        ...file,
        data: replace(file.data),
      })
    ))
    const html = (
      'index.html' in filesMap ?
      filesMap['index.html'] :
      defaultHtml
    )
    return html.replace(
      '<' + 'script type="module" src="/app.js"><' + '/script>',
      intro + "\n" + modules.join("\n")
    )
  }
 }
--- a/editor-build.js
+++ b/editor-build.js
@ -0,0 +1,36 @@
 import { Builder } from '/loader/builder.js'
 export class EditorBuild {
  deps = [
    '/editor/file-group.js',
    '/editor/file-view.js',
    '/editor/text-edit.js',
    '/editor/app.js',
    '/forms/button-group.js',
    '/dialog/dialog.js',
    '/menu/dropdown.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(),
      })
    }
  }
  async build() {
    if (this.files === undefined) {
      await this.loadFiles()
    }
    const builder = new Builder(this.files)
    return builder.build()
  }
 }